/* Theodor Wilder — "Neo-Arcade" Y2K retro-futuristic concept.
   No live crash-game multipliers, no fake gambling outcomes — the "stream widget"
   plots the years of each career stage, explicitly disclaimed as such. */
*{box-sizing:border-box;}
html{background:var(--bg); min-height:100%;}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--white);
  font-family:'Space Grotesk', sans-serif; font-size:1.02rem; line-height:1.65;
  position:relative; overflow-x:hidden;
}
:root{
  --bg:#090214; --cyan:#00F2FF; --pink:#FF00A0; --violet:#7000FF;
  --glass:rgba(255,255,255,.03); --line:rgba(255,255,255,.1); --white:#F5F0FF; --muted:#C7CCE0;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px circle at 12% 15%, rgba(112,0,255,.28), transparent 60%),
    radial-gradient(520px circle at 88% 12%, rgba(0,240,255,.2), transparent 60%),
    radial-gradient(600px circle at 50% 95%, rgba(255,0,160,.18), transparent 60%);
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}
/* Syne (the expanded display font) is reserved for very short strings (names,
   numbers, single words) — anything longer than ~2 words uses Space Grotesk,
   which stays legible at paragraph-heading lengths. See .hero-name/.nav-logo/
   .stat-chip b/.rev-card b/.testi-head b/.quote-mark for the short-text cases. */
h1,h2,h3{font-family:'Space Grotesk', sans-serif; font-weight:700; margin:0; letter-spacing:-.01em; color:var(--white);}
.kicker{font-family:'Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--cyan); margin:0 0 10px; font-weight:700;}
.display{font-size:clamp(1.6rem,3.4vw,2.2rem); line-height:1.25;}
.lede{font-size:1.05rem; color:var(--muted); max-width:660px;}
.lede.center{margin:0 auto;}
a{color:var(--cyan);}

/* chromatic-aberration glitch on hover — headlines/cards */
.glitch{position:relative; display:inline-block; transition:transform .15s;}
.glitch::before, .glitch::after{content:attr(data-text); position:absolute; left:0; top:0; width:100%; opacity:0; transition:opacity .15s, transform .15s;}
.glitch:hover::before{opacity:.7; color:var(--cyan); transform:translate(-2px,1px); mix-blend-mode:screen;}
.glitch:hover::after{opacity:.7; color:var(--pink); transform:translate(2px,-1px); mix-blend-mode:screen;}
@media (prefers-reduced-motion:reduce){ .glitch::before,.glitch::after{display:none;} }

.btn{display:inline-block; padding:13px 26px; border:1px solid var(--line); border-radius:999px; font-family:'Syne',sans-serif; font-weight:700; font-size:.88rem; text-decoration:none; color:var(--white); background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); transition:box-shadow .2s, border-color .2s;}
.btn:hover{border-color:var(--cyan); box-shadow:0 0 24px rgba(0,240,255,.45);}
.btn-solid{background:linear-gradient(135deg, var(--violet), var(--pink)); border-color:transparent; color:#fff;}
.btn-solid:hover{box-shadow:0 0 28px rgba(255,0,160,.5);}

/* nav */
.topnav{position:sticky; top:0; z-index:50; background:rgba(9,2,20,.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:12px;}
.nav-logo{font-family:'Syne',sans-serif; font-weight:800; font-size:1.05rem; color:var(--white); text-decoration:none;}
.nav-logo span{color:var(--cyan);}
.nav-links{display:flex; gap:18px; align-items:center;}
.nav-links a{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:4px;}
.nav-links a:hover, .nav-links a.active{color:var(--cyan); border-color:var(--cyan);}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--cyan);}
@media (max-width:900px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:rgba(9,2,20,.97); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:0 24px; max-height:0; overflow:hidden; gap:0; transition:max-height .25s ease;}
  .nav-links.open{max-height:360px; padding:12px 24px 20px;}
  .nav-links a{padding:10px 0; width:100%; border-bottom:1px solid var(--line);}
}

/* holographic glass card w/ gyroscope tilt */
.holo{
  --rx:0deg; --ry:0deg; --gx:50%; --gy:50%;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(0,240,255,.14), transparent 55%),
    var(--glass);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line); border-radius:20px;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .2s ease, opacity .5s ease;
  opacity:0; transform-style:preserve-3d;
}
.holo.in-view{opacity:1;}
.holo::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg, var(--cyan), var(--violet), var(--pink)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .holo{transform:none !important; opacity:1;} }

/* hero */
.hero{padding:48px 0 40px; position:relative;}
.hero-card{padding:32px 28px; position:relative;}
.hero-grid{display:grid; grid-template-columns:1fr 200px; gap:34px; align-items:center;}
@media (max-width:760px){ .hero-grid{grid-template-columns:1fr;} }
.hero-name{font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.1rem,5.6vw,3.1rem); margin:0 0 6px;}
.role-label{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.88rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.04em; margin:0 0 16px;}
.bronze-badge{background:linear-gradient(135deg,#E0A05C,#A96A2E); color:#fff; font-family:'Syne',sans-serif; font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:6px 16px; border-radius:999px; display:inline-block; margin-top:6px; border:1px solid #F0C088; box-shadow:0 0 14px rgba(224,160,92,.5);}
.player-photo{border-radius:16px; overflow:hidden; position:relative;}
.player-photo img{width:100%; height:210px; object-fit:cover; display:block;}
.photo-placeholder{width:100%; height:210px; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:3.4rem; letter-spacing:.04em; color:var(--bg); background:linear-gradient(135deg, var(--cyan), var(--violet) 55%, var(--pink));}

.stat-strip{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.stat-chip{background:var(--glass); border:1px solid var(--line); border-radius:14px; text-align:center; padding:12px 16px; flex:1; min-width:96px;}
.stat-chip b{display:block; font-family:'Syne',sans-serif; font-size:1.5rem; background:linear-gradient(135deg, var(--cyan), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-chip span{font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-family:'Space Grotesk',sans-serif;}

section{padding:44px 0; border-bottom:1px solid var(--line); position:relative;}
.section-head{margin-bottom:24px;}
.two-col{display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:start;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }

/* credential rows */
.cred-row{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
.cred-row:last-child{border-bottom:none;}
.cred-icon{width:32px; height:32px; flex-shrink:0; border-radius:50%; background:rgba(0,240,255,.1); border:1px solid rgba(0,240,255,.4); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-size:.9rem;}
.cred-row:nth-child(2) .cred-icon{background:rgba(255,0,160,.1); border-color:rgba(255,0,160,.4); color:var(--pink);}
.cred-text b{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem;}
.cred-text span{font-size:.9rem; color:var(--muted);}

/* real-stats KPI widget — explicitly not a live crash-game multiplier chart.
   Three independent metrics, shown as independent bars (not a connected line),
   so nothing implies a false trend between unrelated numbers. */
.stream-panel{padding:22px 24px;}
.stream-disclaimer{font-family:'Space Grotesk',sans-serif; font-size:.72rem; color:var(--muted); margin-top:14px; border-top:1px solid var(--line); padding-top:10px;}
.kpi-bars{display:flex; align-items:flex-end; gap:28px; height:140px; padding:0 8px;}
.kpi-bar-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; height:100%;}
.kpi-bar{width:100%; max-width:64px; border-radius:8px 8px 0 0; background:linear-gradient(180deg, var(--cyan), var(--violet) 55%, var(--pink)); box-shadow:0 0 16px rgba(0,242,255,.35); animation:kpiglow 3.4s ease-in-out infinite;}
@keyframes kpiglow{0%,100%{filter:brightness(1);} 50%{filter:brightness(1.15);}}
@media (prefers-reduced-motion:reduce){ .kpi-bar{animation:none;} }
.kpi-bar-val{font-family:'Syne',sans-serif; font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:6px;}
.kpi-bar-label{font-family:'Space Grotesk',sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:10px; text-align:center;}

/* reviewed casinos as holo cards */
.rev-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;}
.rev-card{padding:18px 20px; transition:border-color .3s ease, box-shadow .3s ease;}
.rev-card:hover{border-color:var(--pink); box-shadow:0 0 15px rgba(255,0,122,.25);}
.rev-card b{display:block; font-family:'Syne',sans-serif; font-size:1.05rem; margin-bottom:6px;}
.rev-card .score{font-family:'Syne',sans-serif; font-size:1.5rem; background:linear-gradient(135deg, var(--cyan), var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.rev-card span.sub{display:block; font-size:.72rem; color:var(--muted); margin-top:4px;}
.rev-card .rev-cta{display:inline-block; margin-top:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.78rem; color:var(--cyan); text-decoration:none;}
.rev-card .rev-cta:hover{text-decoration:underline;}

/* filter-style chips (bylines / off-duty) — real links to his verified author pages */
.chip-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.filter-chip{background:rgba(0,242,255,.08); border:1px solid rgba(0,242,255,.35); border-radius:999px; padding:8px 16px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.8rem; color:var(--white); text-decoration:none; display:inline-block; transition:border-color .15s, box-shadow .15s, background .15s;}
.filter-chip:hover{border-color:var(--cyan); background:rgba(0,242,255,.16); box-shadow:0 0 14px rgba(0,242,255,.3);}

/* pull-quote */
.quote-block{padding:26px 28px; display:flex; gap:16px; align-items:flex-start;}
.quote-mark{font-family:'Syne',sans-serif; font-size:2.4rem; color:var(--pink); line-height:1; flex-shrink:0;}
.quote-block blockquote{margin:0; font-size:1.08rem; font-style:italic; color:var(--white);}
.quote-attr{margin-top:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.7rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.04em;}

/* testimonials */
.testi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.testi-card{padding:18px;}
.testi-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.avatar-photo{width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--cyan);}
.testi-head b{display:block; font-family:'Syne',sans-serif; font-weight:700; font-size:.98rem;}
.testi-head span{font-size:.76rem; color:var(--muted); display:block;}
.tier-pill{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.58rem; text-transform:uppercase; padding:3px 9px; border-radius:999px; display:inline-block; margin-top:4px;}
.tier-pill.gold{background:rgba(232,179,61,.16); color:#E8B33D;}
.tier-pill.silver{background:rgba(199,208,214,.16); color:#C7D0D6;}
.testi-card p{margin:0; font-size:.9rem; color:var(--muted);}

/* board */
.board{display:flex; flex-direction:column; gap:12px;}
.board-row{display:flex; gap:14px; align-items:flex-start; padding:16px 18px;}
.board-icon{width:36px; height:36px; border-radius:50%; background:rgba(112,0,255,.15); border:1px solid rgba(112,0,255,.4); color:var(--violet); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.58rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-align:center; line-height:1.05;}
.board-row b{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; margin-bottom:3px;}
.board-row p{margin:0; font-size:.9rem; color:var(--muted);}
.board-row{transition:border-color .3s ease, box-shadow .3s ease;}
.board-row:hover{border-color:var(--pink); box-shadow:0 0 15px rgba(255,0,122,.25);}
.board-link{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.76rem; color:var(--cyan); text-decoration:none; display:inline-block; margin-top:8px;}
.board-link:hover{text-decoration:underline;}

/* career: file line */
.file-line{position:relative; padding-left:40px;}
.file-line::before{content:''; position:absolute; left:12px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--cyan), var(--violet), var(--pink));}
.file-row{position:relative; padding-bottom:28px;}
.file-row:last-child{padding-bottom:0;}
.file-dot{position:absolute; left:-40px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--bg); border:2px solid var(--cyan);}
.file-when{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.72rem; color:var(--cyan); margin:0 0 3px; text-transform:uppercase;}
.file-role{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem;}
.file-org{font-size:.9rem; color:var(--muted);}

/* cta / footer */
.cta-strip{color:var(--white); text-align:center; padding:56px 24px; border-top:1px solid var(--line);}
footer{padding:24px 24px; text-align:center; font-family:'Space Grotesk',sans-serif; font-size:.76rem; color:var(--muted); border-top:1px solid var(--line); position:relative; z-index:1;}
footer .links{margin-bottom:10px;}
footer .links a{color:var(--cyan); margin:0 10px; text-decoration:none;}

/* contact form */
.contact-form{max-width:560px; display:flex; flex-direction:column; gap:16px;}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--cyan);}
.form-row input, .form-row textarea{font-family:'Space Grotesk',sans-serif; font-size:1rem; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--glass); color:var(--white); backdrop-filter:blur(10px);}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--cyan);}
.form-note{font-size:.85rem; color:var(--muted);}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:24px;}
.contact-card{padding:20px;}
.contact-card p{color:var(--muted);}

.page-hero{padding:44px 0 30px; border-bottom:1px solid var(--line); text-align:center; position:relative; z-index:1;}
.page-hero .lede{color:var(--muted);}


/* --- theodorwilder.com: anadidos al diseno del entregable --- */
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--cyan); color:var(--bg); padding:8px 14px; border-radius:8px; font-weight:700;}
.skip:focus{left:8px;}
@media (scripting:none){ .holo{opacity:1;} }
.hero-grid{grid-template-columns:1fr 280px;}
.player-photo img{height:340px; object-position:50% 20%;}
@media (max-width:760px){ .hero-grid{grid-template-columns:1fr;} .player-photo img{height:auto; aspect-ratio:1/1;} }
.loc-badge{display:inline-block; margin-top:6px; padding:6px 16px; border-radius:999px; border:1px solid var(--cyan); color:var(--cyan); font-family:'Syne',sans-serif; font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; box-shadow:0 0 14px rgba(0,242,255,.25);}
.rev-card b{font-family:'Space Grotesk',sans-serif; font-size:1.02rem;}
.rev-card span.sub{font-size:.88rem; margin-top:6px;}
.kpi-bars{height:190px;}
.focus-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
@media (max-width:980px){ .focus-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .focus-grid{grid-template-columns:1fr;} }
.book-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.book-card{display:block; padding:16px; text-decoration:none; color:var(--white); transition:border-color .3s ease, box-shadow .3s ease;}
.book-card:hover{box-shadow:0 0 18px rgba(255,0,122,.3);}
.book-card .cover{width:100%; height:auto; border-radius:12px; display:block; margin-bottom:14px;}
.book-card b{display:block; font-size:1.05rem;}
.book-card .sub{display:block; font-size:.86rem; color:var(--muted); margin-top:4px;}
.book-list{display:flex; flex-direction:column; gap:26px;}
.book{display:grid; grid-template-columns:240px 1fr; gap:30px; padding:26px; align-items:start; scroll-margin-top:90px;}
.book .cover{width:100%; height:auto; border-radius:12px; display:block;}
.book-sub{color:var(--cyan); font-weight:600; margin:8px 0 14px;}
.parts-h{font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--cyan); margin:18px 0 6px;}
.parts{margin:0; padding-left:20px; color:var(--muted); columns:2; column-gap:28px;}
.parts li{margin-bottom:4px; break-inside:avoid;}
@media (max-width:760px){ .book{grid-template-columns:1fr;} .book .cover{max-width:240px;} .parts{columns:1;} }
.off-grid{display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:center;}
.off-photo{margin:0; border-radius:20px; overflow:hidden; border:1px solid var(--line);}
.off-photo img{display:block; width:100%; height:auto;}
.off-photo figcaption{font-size:.8rem; color:var(--muted); padding:10px 14px; background:var(--glass);}
@media (max-width:760px){ .off-grid{grid-template-columns:1fr;} }
.file-text{margin:6px 0 0; font-size:.92rem; color:var(--muted); max-width:640px;}
.consent{display:flex; align-items:flex-start; gap:8px; font-size:.85rem; line-height:1.5; margin:4px 0 6px;}
.consent input{margin-top:4px; flex-shrink:0;}
.legal{padding:34px 30px; max-width:820px; margin:0 auto;}
.legal h2{font-size:1.1rem; margin:26px 0 8px;}
.legal p{color:var(--muted);}
footer .links a{display:inline-block; margin:4px 10px;}
.lang-switch{display:inline-flex; gap:4px; margin-left:6px; padding:3px; border:1px solid var(--line); border-radius:999px;}
.nav-links .lang-switch a{border:none; padding:4px 9px; border-radius:999px; font-size:.7rem;}
.nav-links .lang-switch a.on{background:var(--cyan); color:var(--bg);}
@media (max-width:900px){ .lang-switch{margin:12px 0 0;} .nav-links .lang-switch a{width:auto; border-bottom:none;} }
footer .rg{font-size:.74rem; max-width:560px; margin:12px auto 0;}
footer .reviewed{font-size:.74rem; margin-top:6px;}
.nf{text-align:center; padding:80px 0 70px;}
.nf-code{font-family:'Syne',sans-serif; font-weight:800; font-size:5rem; margin:0; background:linear-gradient(135deg, var(--cyan), var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent;}