:root{
  --bg:#000;
  --green:#22b99a;
  --neon:#5cffcf;
  --pink:#ff2e88;
  --text:#eafff8;
  --muted:rgba(234,255,248,.6);
  --f-disp:"Unbounded",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --f-body:"Inter",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b{color:var(--neon);font-weight:500}
::selection{background:var(--pink);color:#fff}

.gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.scan{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.6}

/* terminal */
.term{position:fixed;inset:0;z-index:300;background:#000;display:grid;place-items:center;padding:20px}
.term__box{width:min(680px,100%);border:1px solid rgba(92,255,207,.35);border-radius:10px;background:#030807;box-shadow:0 0 60px rgba(34,185,154,.25);overflow:hidden}
.term__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(92,255,207,.2);font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.term__bar i{width:11px;height:11px;border-radius:50%;background:#333}
.term__bar i:nth-child(1){background:#ff5f57}.term__bar i:nth-child(2){background:#febc2e}.term__bar i:nth-child(3){background:#28c840}
.term__bar span{margin-left:10px}
.term__out{font-family:var(--f-mono);font-size:clamp(13px,1.6vw,15px);line-height:1.8;color:var(--neon);padding:18px 20px;min-height:250px;white-space:pre-wrap}
.term__out .err{color:var(--pink)}
.term__out .dim{color:var(--muted)}
.term.is-glitch{animation:tglitch .35s steps(2) 2}
@keyframes tglitch{0%{transform:translate(0);filter:none}25%{transform:translate(-8px,3px);filter:hue-rotate(90deg)}50%{transform:translate(6px,-4px);filter:invert(1)}75%{transform:translate(-3px,5px)}100%{transform:translate(0)}}

/* hud */
.hud{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px var(--gutter);font-family:var(--f-mono);font-size:13px}
.hud__logo{font-family:var(--f-disp);font-weight:900;font-size:22px;letter-spacing:.05em}
.hud__shape{color:var(--muted)}
.hud__shape b{color:var(--neon);font-weight:700}
.hud__cta{color:var(--neon);transition:color .2s,text-shadow .2s}
.hud__cta:hover{color:#fff;text-shadow:0 0 12px var(--neon)}
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px}
.dots a{width:8px;height:8px;border-radius:50%;border:1px solid var(--muted);transition:background .3s,transform .3s,border-color .3s}
.dots a.is-on{background:var(--neon);border-color:var(--neon);transform:scale(1.5);box-shadow:0 0 10px var(--neon)}

/* secciones */
main{position:relative;z-index:2}
.sec{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:100px var(--gutter)}
.sec--right{justify-content:flex-end}
.sec--center{justify-content:center;text-align:center;flex-direction:column}
#s-mvp{justify-content:flex-end;padding-bottom:9vh}
.k{font-family:var(--f-mono);font-size:13px;color:var(--green);letter-spacing:.06em}
h1,h2{font-family:var(--f-disp);font-weight:900;letter-spacing:-.02em;line-height:1.02}
h1{font-size:clamp(28px,3.8vw,58px);max-width:1000px;margin:14px auto;text-shadow:0 0 40px rgba(0,0,0,.9)}
h2{font-size:clamp(28px,3.6vw,54px);margin:10px 0 20px}
.sub{font-family:var(--f-mono);color:var(--muted);font-size:14px}
.panel{position:relative;width:min(560px,100%);padding:clamp(24px,3vw,40px);background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(92,255,207,.2);border-radius:4px;display:flex;flex-direction:column;gap:14px}
.panel::before,.panel::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--neon)}
.panel::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.panel::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.panel--wide{width:min(820px,100%);text-align:left}
.out{font-family:var(--f-mono);font-size:15px}
.quote{font-family:var(--f-disp);font-weight:400;font-size:clamp(18px,1.8vw,24px);line-height:1.35;color:var(--neon)}

/* glitch en títulos */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:var(--pink);transform:translate(-3px,0);clip-path:inset(0 0 55% 0)}
.glitch::after{color:var(--neon);transform:translate(3px,0);clip-path:inset(50% 0 0 0)}
.glitch.is-on::before,.glitch.is-on::after,.glitch:hover::before,.glitch:hover::after{opacity:.8;animation:gl .3s steps(3) infinite}
@keyframes gl{0%{clip-path:inset(10% 0 60% 0)}33%{clip-path:inset(60% 0 5% 0)}66%{clip-path:inset(30% 0 40% 0)}100%{clip-path:inset(80% 0 2% 0)}}

.scroll-hint{margin-top:40px;width:26px;height:44px;border:1px solid var(--muted);border-radius:14px;position:relative}
.scroll-hint span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--neon);animation:sh 1.6s infinite}
@keyframes sh{to{transform:translateY(16px);opacity:0}}

.video{position:relative;aspect-ratio:16/9;border:1px solid rgba(92,255,207,.35);display:grid;place-items:center;background:repeating-linear-gradient(90deg,rgba(92,255,207,.05) 0 2px,transparent 2px 6px),#020605;overflow:hidden}
.video__play{width:80px;height:80px;border:2px solid var(--neon);color:var(--neon);font-size:26px;padding-left:5px;border-radius:50%;box-shadow:0 0 30px rgba(92,255,207,.4),inset 0 0 20px rgba(92,255,207,.2);transition:background .3s,color .3s}
.video__play:hover{background:var(--neon);color:#000}
.video__soon{position:absolute;inset:auto 0 0;padding:14px 16px;font-family:var(--f-mono);font-size:13px;background:rgba(0,0,0,.85);color:var(--neon);opacity:0;transition:opacity .3s}
.video.is-soon .video__soon{opacity:1}

/* test */
.quiz__progress{height:3px;background:rgba(92,255,207,.15);margin:10px 0 24px}
.quiz__progress span{display:block;height:100%;width:0;background:var(--neon);box-shadow:0 0 10px var(--neon);transition:width .4s}
.quiz__q{display:flex;flex-direction:column;gap:16px}
.quiz__step{font-family:var(--f-mono);font-size:13px;color:var(--green)}
.quiz__q h3{font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.2}
.quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz__opt{display:flex;gap:12px;text-align:left;padding:14px 16px;border:1px solid rgba(92,255,207,.3);background:rgba(92,255,207,.04);font-size:15px;transition:background .2s,border-color .2s,transform .2s}
.quiz__opt b{font-family:var(--f-mono);font-weight:700}
.quiz__opt:hover{border-color:var(--neon);background:rgba(92,255,207,.1);transform:translateX(4px)}
.quiz__opt.is-picked{background:var(--neon);color:#000}
.quiz__opt.is-picked b{color:#000}
.quiz__back{align-self:flex-start;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.quiz__result{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.quiz__result[hidden]{display:none}
.quiz__label{font-family:var(--f-mono);font-size:13px;color:var(--green)}
.quiz__role{font-family:var(--f-disp);font-weight:900;font-size:clamp(30px,4vw,52px);line-height:1;color:var(--neon);text-shadow:0 0 30px rgba(92,255,207,.5)}
.quiz__act{font-family:var(--f-mono);color:var(--pink)}
.quiz__name{display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:13px;color:var(--muted);width:min(100%,360px)}
.quiz__name input{background:#000;border:1px solid rgba(92,255,207,.4);padding:12px;color:var(--text);font:inherit}
.quiz__wa{background:#25d366;color:#021a0b;font-weight:700;padding:15px 24px;font-family:var(--f-mono);box-shadow:0 0 30px rgba(37,211,102,.5)}
.quiz__again{font-family:var(--f-mono);font-size:13px;color:var(--muted);text-decoration:underline}

.foot{position:relative;z-index:2;font-family:var(--f-mono);padding:80px var(--gutter) 50px;display:flex;flex-direction:column;gap:6px;font-size:clamp(16px,2vw,22px)}
.foot s{color:var(--pink)}
.foot__small{font-size:13px;color:var(--muted);margin-top:30px}

.wa{position:fixed;left:18px;bottom:18px;z-index:60;background:#25d366;color:#021a0b;font-weight:700;font-size:14px;padding:11px 16px;font-family:var(--f-mono)}

@media (max-width:820px){
  .hud__shape,.dots{display:none}
  .sec,.sec--right{justify-content:center}
  .quiz__opts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.scan{display:none}}

/* =========================================================
   v2 · más impacto
   ========================================================= */
/* encendido de pantalla CRT */
.crt{position:fixed;inset:0;z-index:250;pointer-events:none;background:#000;display:none}
.crt i{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 40px #fff,0 0 90px var(--neon);transform:scaleX(0)}
.crt.is-on{display:block}

/* mira que sustituye al cursor */
@media (hover:hover) and (pointer:fine){
  html,body,a,button,input{cursor:none}
  .reticle{position:fixed;left:0;top:0;z-index:400;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;border:1px solid rgba(92,255,207,.7);border-radius:50%;transition:width .3s,height .3s,margin .3s,border-color .3s,background .3s}
  .reticle::before,.reticle::after{content:"";position:absolute;background:var(--neon)}
  .reticle::before{left:50%;top:-10px;bottom:-10px;width:1px;transform:translateX(-50%);-webkit-mask:linear-gradient(#000 0 10px,transparent 10px calc(100% - 10px),#000 0);mask:linear-gradient(#000 0 10px,transparent 10px calc(100% - 10px),#000 0)}
  .reticle::after{top:50%;left:-10px;right:-10px;height:1px;transform:translateY(-50%);-webkit-mask:linear-gradient(90deg,#000 0 10px,transparent 10px calc(100% - 10px),#000 0);mask:linear-gradient(90deg,#000 0 10px,transparent 10px calc(100% - 10px),#000 0)}
  .reticle i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon)}
  .reticle__xy{position:absolute;left:34px;top:30px;font-family:var(--f-mono);font-size:10px;color:var(--neon);white-space:nowrap;opacity:.8}
  .reticle.is-hover{width:70px;height:70px;margin:-35px 0 0 -35px;border-color:var(--pink);background:rgba(255,46,136,.08)}
  .reticle.is-hold{width:18px;height:18px;margin:-9px 0 0 -9px;border-color:#fff;background:rgba(92,255,207,.35)}
}
@media (hover:none),(pointer:coarse){.reticle{display:none}}

/* pista de interacción */
.hold-hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;color:var(--muted);padding:8px 14px;border:1px solid rgba(92,255,207,.25);background:rgba(0,0,0,.5);backdrop-filter:blur(6px);white-space:nowrap}
.hold-hint b{color:var(--neon);font-weight:700}
.hold-hint__ring{width:14px;height:14px;border-radius:50%;border:2px solid var(--neon);animation:holdp 1.6s infinite}
@keyframes holdp{50%{transform:scale(.55);background:var(--neon)}}

/* títulos: sacudida glitch al entrar */
h2.is-jolt{animation:jolt .45s steps(2) 1}
@keyframes jolt{0%{transform:translate(0);clip-path:inset(0)}20%{transform:translate(-6px,2px);clip-path:inset(20% 0 40% 0)}40%{transform:translate(5px,-3px);clip-path:inset(60% 0 5% 0)}60%{transform:translate(-3px,1px);clip-path:inset(0 0 70% 0)}80%{transform:translate(2px,0);clip-path:inset(35% 0 30% 0)}100%{transform:translate(0);clip-path:inset(0)}}

/* flash al soltar la carga */
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(92,255,207,.35),transparent 60%);opacity:0}

@media (max-width:820px){.hold-hint{font-size:11px;bottom:70px}}
@media (prefers-reduced-motion:reduce){.hold-hint__ring{animation:none}}