:root{
  --bg:#070708; --bg2:#0b0b0d;
  --line:#212128; --line2:#2c2c35;
  --ink:#f1f1ef; --mut:#8b8b93; --dim:#55555e;
  --accent:#FF1736;
  --disp:'Chakra Petch',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(130% 90% at 50% -20%,rgba(255,23,54,.10),transparent 62%)}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#000}

#parts{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block}
#grain{position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#scan{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.055;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.6) 3px,transparent 4px)}

.menu{min-height:100%;max-width:760px;margin:0 auto;padding:8vh 22px 6vh;
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}

/* ---------- cabecera ---------- */
.hd{text-align:center;margin-bottom:6vh}
.boot{font-size:.62rem;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;
  margin-bottom:20px;min-height:1em}
.boot::after{content:"_";animation:cursor .9s steps(2) infinite}
.boot.ok{color:var(--accent)}
.boot.ok::after{content:""}
@keyframes cursor{0%,49%{opacity:1}50%,100%{opacity:0}}

.logo{font-family:var(--disp);font-weight:700;letter-spacing:.02em;line-height:.94;
  font-size:clamp(2.6rem,10vw,5rem);text-transform:uppercase;position:relative;display:inline-block}
.logo b{color:var(--accent)}
/* separación RGB muy sutil, como señal analógica */
.logo::before,.logo::after{content:attr(data-txt);position:absolute;inset:0;
  pointer-events:none;opacity:.5}
.logo::before{color:#00e5ff;transform:translateX(-1.5px)}
.logo::after{color:var(--accent);transform:translateX(1.5px)}
body.listo .logo::before{animation:sep 5.5s ease-in-out infinite}
body.listo .logo::after{animation:sep 5.5s ease-in-out infinite reverse}
@keyframes sep{
  0%,88%,100%{transform:translateX(0);opacity:0}
  90%{transform:translateX(-3px);opacity:.55}
  93%{transform:translateX(2px);opacity:.4}
  96%{transform:translateX(-1px);opacity:.2}
}
.sub{margin-top:14px;font-size:.63rem;letter-spacing:.26em;color:var(--mut);text-transform:uppercase}

/* ---------- opciones ---------- */
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:20px;padding:22px 24px;
  border:1px solid var(--line2);background:var(--bg2);position:relative;
  opacity:0;transform:translateY(14px);
  transition:border-color .18s,background .18s,transform .18s}
body.listo .opt{animation:entra .5s cubic-bezier(.2,.8,.2,1) forwards}
body.listo .opt:nth-child(1){animation-delay:.05s}
body.listo .opt:nth-child(2){animation-delay:.14s}
body.listo .opt:nth-child(3){animation-delay:.23s}
@keyframes entra{to{opacity:1;transform:translateY(0)}}

/* barra que barre al entrar */
.opt::before{content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;opacity:.14;pointer-events:none}
body.listo .opt::before{animation:barre .5s ease-out forwards}
body.listo .opt:nth-child(1)::before{animation-delay:.05s}
body.listo .opt:nth-child(2)::before{animation-delay:.14s}
body.listo .opt:nth-child(3)::before{animation-delay:.23s}
@keyframes barre{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.opt .num{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--dim);flex:none;transition:color .18s}
.opt .body{flex:1;min-width:0}
.opt .ttl{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,5.2vw,2.4rem);line-height:1;letter-spacing:.01em;position:relative}
.opt .dsc{display:block;font-size:.62rem;letter-spacing:.13em;color:var(--dim);
  text-transform:uppercase;margin-top:8px;transition:color .18s}
.opt .go{flex:none;font-size:.9rem;color:transparent;transition:color .18s,transform .18s}

/* seleccionado */
.opt.sel{border-color:var(--accent);background:rgba(255,23,54,.07);transform:translateX(5px)}
.opt.sel .num{color:var(--accent)}
.opt.sel .dsc{color:var(--mut)}
.opt.sel .go{color:var(--accent);animation:lat 1.1s ease-in-out infinite}
@keyframes lat{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.opt:focus-visible{outline:none}

/* al lanzar */
.opt.go-now{animation:flash .34s steps(2) 3}
@keyframes flash{0%,100%{background:rgba(255,23,54,.07)}50%{background:rgba(255,23,54,.34)}}
body.yendo{pointer-events:none}
body.yendo .opt:not(.go-now){opacity:.25;transition:opacity .3s}

.hint{text-align:center;margin-top:5vh;font-size:.58rem;letter-spacing:.18em;
  color:#25252c;text-transform:uppercase}
.hint b{color:var(--dim);font-weight:400}

/* ---------- móvil ---------- */
@media (max-width:560px){
  .menu{padding:6vh 16px 5vh}
  .opt{padding:18px 17px;gap:14px}
  .opt .ttl{font-size:1.65rem}
  .hd{margin-bottom:4vh}
  .hint{display:none}          /* sin teclado no aplica */
}
@media (hover:none){ .opt{transform:none} .opt.sel{transform:none} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .opt{opacity:1;transform:none}
  .boot::after{content:""}
}