/* ============================================================================
   GachaScan — landing. Mismo mundo que el tablero: chapa gris, lectura ámbar,
   cero radios. El color lo ponen las cartas reales que caen en el héroe.
   ========================================================================== */

:root{
  --void:#0b0d10; --steel:#14181e; --steel-2:#1b212a; --edge:#262e3a;
  --ink:#e8ecf2; --ink-dim:#7b8798; --amber:#ffb020;
  --epic:#ffc233; --rare:#b06bff; --uncommon:#3ee08c;
  --up:#3ee08c; --down:#ff4d5e;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--ink);
  font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--steel) 1px,transparent 1px);
  background-size:22px 22px;
}
code{font:.88em var(--mono);background:var(--steel-2);padding:1px 5px;border:1px solid var(--edge)}

/* -------------------------------------------------------------------- top */
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 24px;border-bottom:1px solid var(--edge);
  background:rgba(13,17,22,.92);backdrop-filter:blur(10px);
}
.mark{font:700 14px/1 var(--mono);letter-spacing:.3em;text-indent:.3em}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a{
  color:var(--ink-dim);text-decoration:none;
  font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:9px 13px;
}
.top nav a:hover{color:var(--ink)}
.cta-sm{background:var(--amber);color:#0b0d10 !important;font-weight:700}

/* ------------------------------------------------------------------- hero */
.hero{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:52px;align-items:center;
  padding:76px 24px 68px;max-width:1240px;margin:0 auto;
}
@media(max-width:960px){.hero{grid-template-columns:1fr;gap:36px;padding-top:48px}}

h1{
  font:600 clamp(34px,4.4vw,54px)/1.08 var(--sans);
  letter-spacing:-.028em;margin:0 0 20px;
}
h1 em{font-style:normal;color:var(--amber)}
.lede{color:#b3bcc9;font-size:16.5px;margin:0 0 30px;max-width:46ch}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cta{
  display:inline-block;text-decoration:none;
  background:var(--amber);color:#0b0d10;
  font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:15px 22px;border:1px solid var(--amber);
  transition:transform .12s,box-shadow .12s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px -12px var(--amber)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.cta.ghost:hover{border-color:var(--ink-dim);box-shadow:none}
.fineprint{color:var(--ink-dim);font:10px/1.6 var(--mono);letter-spacing:.06em;margin:0}

/* ------------------------------------------------------ el suelo, en vivo */
.floor{border:1px solid var(--edge);background:var(--steel)}
.floor-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 13px;border-bottom:1px solid var(--edge);
  font:9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
.live{display:flex;align-items:center;gap:6px;color:var(--up)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--up);animation:beat 2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;box-shadow:0 0 0 0 #3ee08c66}50%{opacity:.55;box-shadow:0 0 0 5px #3ee08c00}}

.bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--edge)}
.unit{
  background:linear-gradient(180deg,var(--steel-2),var(--steel));
  padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;
}
.gm{width:56px;height:88px;transform-origin:50% 92%}
.gm .chassis{fill:#232b36;stroke:#39424f;stroke-width:2;transition:stroke .5s,filter .5s}
.gm .knob{fill:#39424f}.gm .knob-slot{fill:#151a21}
.gm .flap{fill:#0a0d11;stroke:#39424f;stroke-width:1.5}
.gm .caps{transform-origin:32px 32px}
.tag{text-align:center}
.tag b{display:block;font:700 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.tag span{font:8.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);transition:color .5s}

.unit.lvl-1 .gm{animation:tremble 2.4s ease-in-out infinite}
.unit.lvl-1 .caps{animation:rattle 1.1s ease-in-out infinite}
.unit.lvl-2 .gm{animation:tremble 1.1s ease-in-out infinite}
.unit.lvl-2 .caps{animation:rattle .5s ease-in-out infinite}
.unit.lvl-2 .gm .chassis{stroke:#ffd166}
.unit.lvl-2 .tag span{color:#ffd166}
.unit.lvl-3 .gm{animation:tremble .5s ease-in-out infinite}
.unit.lvl-3 .caps{animation:rattle .3s ease-in-out infinite}
.unit.lvl-3 .gm .chassis{stroke:var(--amber);filter:drop-shadow(0 0 6px #ffb02088)}
.unit.lvl-3 .tag span,.unit.lvl-3 .tag b{color:var(--amber)}
.unit.lvl-4 .gm{animation:tremble .22s linear infinite}
.unit.lvl-4 .caps{animation:rattle .16s linear infinite}
.unit.lvl-4 .gm .chassis{stroke:var(--down);filter:drop-shadow(0 0 10px #ff4d5ecc)}
.unit.lvl-4 .tag span,.unit.lvl-4 .tag b{color:var(--down)}

@keyframes tremble{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-1.1px,.4px) rotate(-.9deg)}
  45%{transform:translate(1.1px,-.4px) rotate(.9deg)}
  70%{transform:translate(-.7px,.2px) rotate(-.5deg)}
}
@keyframes rattle{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(1.4px,-1.1px)}
  65%{transform:translate(-1.2px,1.3px)}
}

/* Tira de cartas reales cayendo. */
.strip{display:flex;gap:1px;background:var(--edge);border-top:1px solid var(--edge);overflow:hidden}
.pull{flex:1 1 0;min-width:0;background:var(--steel);position:relative}
.pull img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block;background:#0a0d11}
.pull .px{
  position:absolute;left:0;right:0;bottom:0;padding:4px 5px;
  background:linear-gradient(transparent,#000d 55%);
  font:9px/1.35 var(--mono);font-variant-numeric:tabular-nums;
}
.pull .px b{display:block}
.pull .px i{font-style:normal;color:var(--ink-dim)}
.pull.t-rare{box-shadow:inset 0 0 0 1px var(--rare)}
.pull.t-epic{box-shadow:inset 0 0 0 1px var(--epic)}
.pull.new{animation:drop .45s cubic-bezier(.2,.8,.25,1)}
@keyframes drop{0%{transform:translateY(-18px);opacity:0}100%{transform:none;opacity:1}}

/* ---------------------------------------------------------------- what/3 */
.what{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--edge);border-block:1px solid var(--edge);
}
@media(max-width:820px){.what{grid-template-columns:1fr}}
.what article{background:var(--void);padding:38px 28px}
.what h2{font:600 17px/1.3 var(--sans);letter-spacing:-.015em;margin:0 0 12px}
.what p{color:#9aa5b3;font-size:14px;margin:0;max-width:42ch}

/* ---------------------------------------------------------------- instalar */
.install{
  border-top:1px solid var(--edge);background:var(--steel);
  padding:66px 24px;text-align:center;
}
.install h2{font:600 26px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 28px}
.install ol{
  list-style:none;padding:0;margin:0 auto 30px;max-width:520px;
  display:flex;flex-direction:column;gap:11px;text-align:left;
}
.install li{display:flex;align-items:center;gap:13px;color:#b3bcc9;font-size:15px}
.install li span{
  flex:none;width:24px;height:24px;display:grid;place-items:center;
  background:var(--amber);color:#0b0d10;font:700 11px/1 var(--mono);
}

footer{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 24px;border-top:1px solid var(--edge);
  font:9.5px/1.6 var(--mono);letter-spacing:.07em;color:var(--ink-dim);
}
footer span:first-child{letter-spacing:.24em;color:#5b6678}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gm,.caps,.pull.new,.live i{animation:none !important}
  .cta:hover{transform:none}
}

/* ─────────────────────────────────────────────────────────────── LOADING
   El gesto del producto: la manivela gira, la cápsula cae. No un spinner. */
.boot{
  position:fixed;inset:0;z-index:99;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--void);
  background-image:radial-gradient(var(--steel) 1px,transparent 1px);
  background-size:22px 22px;
  transition:opacity .45s ease,visibility .45s;
}
.boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-gm{width:96px;height:auto}
.boot-gm .b-dome{transform-origin:32px 32px;animation:b-shake 1.6s ease-in-out infinite}
.boot-gm .b-caps{transform-origin:32px 32px;animation:b-rattle .42s ease-in-out infinite}
.boot-gm .b-knob{transform-origin:32px 72px;animation:b-turn 1.6s cubic-bezier(.6,0,.3,1) infinite}
.boot-gm .b-drop{opacity:0;animation:b-fall 1.6s ease-in infinite}

@keyframes b-shake{
  0%,55%,100%{transform:translate(0,0) rotate(0)}
  62%{transform:translate(-1.6px,.6px) rotate(-1.4deg)}
  72%{transform:translate(1.6px,-.6px) rotate(1.4deg)}
  82%{transform:translate(-.9px,.3px) rotate(-.7deg)}
}
@keyframes b-rattle{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(1.6px,-1.2px)}
  70%{transform:translate(-1.4px,1.4px)}
}
/* La manivela da media vuelta, se para, y entonces cae la cápsula. */
@keyframes b-turn{
  0%,45%{transform:rotate(0)}
  70%,100%{transform:rotate(180deg)}
}
@keyframes b-fall{
  0%,62%{opacity:0;transform:translateY(0) scale(.6)}
  70%{opacity:1;transform:translateY(4px) scale(1)}
  92%{opacity:1;transform:translateY(20px) scale(1)}
  100%{opacity:0;transform:translateY(26px) scale(.9)}
}

.boot-txt{
  margin:0;color:var(--ink-dim);
  font:10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
}
.boot-txt span{animation:b-dot 1.4s infinite}
.boot-txt span:nth-child(2){animation-delay:.2s}
.boot-txt span:nth-child(3){animation-delay:.4s}
@keyframes b-dot{0%,60%,100%{opacity:.2}30%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .boot-gm .b-dome,.boot-gm .b-caps,.boot-gm .b-knob,.boot-gm .b-drop,.boot-txt span{animation:none}
  .boot-gm .b-drop{opacity:1}
}

/* El barrido cruza el domo al pasar el ratón: el gesto de "scan", una vez. */
.logo .sweep{transform-origin:16px 11.5px}
.mark:hover .logo .sweep{animation:sweep 1.1s cubic-bezier(.4,0,.2,1)}
@keyframes sweep{
  0%{transform:translateY(-8px);opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{transform:translateY(8px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.mark:hover .logo .sweep{animation:none}}

/* ---------------------------------------------------------------- marca */
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--amber)}
.mark span{font:700 14px/1 var(--mono);letter-spacing:.3em;text-indent:.3em;color:var(--ink)}
.logo{width:26px;height:26px;flex:none;overflow:visible}
.rail .logo{width:23px;height:23px;color:var(--amber)}
/* Las estelas caen al pasar el ratón: la cápsula está cayendo, no posando. */
.mark:hover .logo .sweep{animation:fall .9s cubic-bezier(.4,0,.6,1)}
@keyframes fall{
  0%{transform:translateY(-6px);opacity:0}
  35%{opacity:.85}
  100%{transform:translateY(9px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.mark:hover .logo .sweep{animation:none}}

/* Enlace a X: el logo y el handle, discretos, antes de los dos enlaces fuertes. */
.top nav a.x{display:flex;align-items:center;gap:7px;letter-spacing:.06em;text-transform:none}
.top nav a.x svg{flex:none;opacity:.75}
.top nav a.x:hover svg{opacity:1}
@media(max-width:640px){.top nav a.x span{display:none}}