/* ============================================================
   VERSU — Landing cinematográfica
   Sistema visual: negro profundo + verde neón + cian eléctrico
   ============================================================ */

:root {
  /* Acentos (ajustables vía Tweaks) */
  --green: #5BE832;
  --green-bright: #95ff63;
  --cyan: #25C9EE;
  --cyan-deep: #0f9fd0;

  /* Base */
  --bg: #050a07;
  --bg-2: #081109;
  --bg-3: #0c1a10;
  --text: #eafaee;
  --muted: #88a594;
  --muted-2: #5e7567;
  --line: rgba(120, 230, 150, 0.12);
  --line-strong: rgba(120, 230, 150, 0.30);

  /* Tipografía (display ajustable vía Tweaks) */
  --font-display: "Archivo", system-ui, sans-serif;
  --display-wght: 880;
  --display-wdth: 118;
  --font-body: "Saira", system-ui, sans-serif;
  --font-mono: "Chakra Petch", ui-monospace, monospace;

  /* Intensidad de efectos (0..1, ajustable) */
  --fx: 1;

  --grad-head: linear-gradient(104deg, #ffffff 0%, #eafaee 30%, var(--green) 62%, var(--cyan) 100%);
  --maxw: 1320px;
  --gutter: clamp(24px, 5vw, 64px);

  /* Glows ambientales (viran verde→cian con el scroll vía JS) */
  --glow1: 91, 232, 50;
  --glow2: 37, 201, 238;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fondo global persistente: grid + glow */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-fixed::before {
  /* grid */
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 130% at 50% 0%, #000 20%, rgba(0,0,0,0.6) 50%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 130% at 50% 0%, #000 20%, rgba(0,0,0,0.6) 50%, transparent 78%);
  opacity: calc(0.6 * var(--fx));
}
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: calc(0.38 * var(--fx));
}
/* g1: más compacto y menos alto — evita el rectángulo verde en secciones de contenido */
.bg-glow.g1 { top: -22vh; left: 50%; width: 60vw; height: 44vh; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--glow1),0.22) 0%, rgba(var(--glow1),0.08) 42%, transparent 68%); }
.bg-glow.g2 { bottom: -10vh; right: -5vw; width: 38vw; height: 40vh;
  background: radial-gradient(circle, rgba(var(--glow2),0.14) 0%, rgba(var(--glow2),0.05) 44%, transparent 72%); }

/* Grano cinematográfico */
.grain {
  position: fixed; inset: -50%; z-index: 59; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: calc(0.05 * var(--fx));
  mix-blend-mode: overlay;
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); }
  50% { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -1.5%); }
}

/* Scanlines + vignette sobre todo */
.overlay-fx {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
}
.overlay-fx::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0) 4px);
  opacity: calc(0.5 * var(--fx));
  mix-blend-mode: multiply;
}
.overlay-fx::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 14vw 2vw rgba(0,0,0,0.5);
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wght" var(--display-wght), "wdth" var(--display-wdth);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  line-height: 1.5;
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); flex-shrink: 0; align-self: center; }
.kicker.cyan { color: var(--cyan); }
.kicker.cyan .dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.grad { background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-c { background: linear-gradient(100deg, var(--green) 0%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lead { font-size: clamp(16px, 1.5vw, 21px); color: var(--muted); line-height: 1.55; font-weight: 400; }
.lead b { color: var(--text); font-weight: 600; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5,10,7,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-display);
  font-variation-settings: "wght" 900, "wdth" 120;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
}
.wordmark .bolt { color: var(--green); filter: drop-shadow(0 0 8px var(--green)); }
.soon-pill {
  font-family: var(--font-mono); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--green);
  border: 1px solid rgba(91,232,50,0.4); border-radius: 100px;
  padding: 3px 9px; margin-left: 2px; line-height: 1;
  background: rgba(91,232,50,0.07);
}
.nav-cta {
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  color: var(--bg); background: var(--green);
  padding: 11px 20px; border-radius: 7px; text-decoration: none;
  box-shadow: 0 0 0 1px var(--green-bright), 0 0 22px rgba(91,232,50,calc(0.45*var(--fx)));
  transition: transform .15s ease, box-shadow .25s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--green-bright), 0 0 34px rgba(91,232,50,0.7); }

/* barra de progreso de scroll */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 55;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  box-shadow: 0 0 14px var(--green);
}

/* ============================================================
   LAYOUT GENERAL
   ============================================================ */
main { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
/* Honeypot anti-spam: invisible para humanos */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

section { position: relative; }

/* ====== HERO ====== */
.hero { height: 220vh; position: relative; }
.hero-stage {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; overflow: hidden;
  padding: 96px 0 48px; box-sizing: border-box;
}
.hero-grid-floor {
  position: absolute; bottom: -2vh; left: 50%; width: 220vw; height: 70vh;
  transform: translateX(-50%) perspective(70vh) rotateX(70deg);
  background-image: linear-gradient(var(--line-strong) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 75% 85% at 50% 102%, #000 18%, rgba(0,0,0,0.45) 48%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 102%, #000 18%, rgba(0,0,0,0.45) 48%, transparent 72%);
  opacity: calc(0.6 * var(--fx));
  z-index: 0;
}
.hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--maxw); padding: 0 var(--gutter);
  margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 20px;
}
.hero-copy { will-change: transform, opacity; }
.hero h1 {
  font-size: clamp(54px, 8vw, 132px);
  margin: 16px 0 0;
}
.hero h1 .l2 { white-space: nowrap; }
.hero h1 .l1 { color: #fff; display: block; text-shadow: 0 0 60px rgba(255,255,255,0.12); }
.hero h1 .l2 { display: block; }
.hero-sub {
  font-family: var(--font-display);
  font-variation-settings: "wght" 800, "wdth" 110;
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.02;
  margin-top: 22px;
  letter-spacing: 0.005em;
  max-width: 16ch;
}
.hero-sub .em { color: var(--cyan); }
.hero-lead { margin-top: 22px; max-width: 46ch; }
.hero-lead .u { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--green); padding-bottom: 1px; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.hero-proof .avatars { display: flex; }
.hero-proof .av-mini {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-variation-settings: "wght" 850, "wdth" 110; font-size: 14px; color: var(--bg);
  background: linear-gradient(140deg, var(--green), var(--cyan));
  border: 2px solid var(--bg); margin-left: -10px;
}
.hero-proof .av-mini:first-child { margin-left: 0; }
.hero-proof p { font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.hero-proof p b { color: var(--text); font-weight: 700; }

.hero-char {
  position: relative; z-index: 2;
  justify-self: center;
  width: clamp(320px, 38vw, 560px);
  will-change: transform;
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.6))
    drop-shadow(0 0 26px rgba(37,201,238,calc(0.55*var(--fx))))
    drop-shadow(0 0 60px rgba(91,232,50,calc(0.30*var(--fx))));
}
.hero-char img, .hero-char image-slot { width: 100%; height: auto; aspect-ratio: 864 / 1184; display: block; filter: brightness(1.12) contrast(1.06) saturate(1.12); }
.char-float { position: relative; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { .char-float { animation: none; } }
.hero-char image-slot::part(frame) { background: transparent; }
.hero-char .char-glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 118%; height: 102%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(37,201,238,0.5) 0%, rgba(37,201,238,0.22) 24%, transparent 46%),
    radial-gradient(circle at 50% 60%, rgba(91,232,50,0.32) 0%, rgba(91,232,50,0.12) 34%, transparent 64%),
    radial-gradient(circle, rgba(37,201,238,0.14) 0%, transparent 74%);
  filter: blur(50px); z-index: -1; opacity: calc(1 * var(--fx));
}
.hero-char::after {
  content: ""; position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%);
  width: 80%; height: 60px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91,232,50,0.5), transparent 70%);
  filter: blur(22px); z-index: -1; opacity: calc(0.9 * var(--fx));
}
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.4em; color: var(--muted);
  text-transform: uppercase;
}
.scroll-cue .mouse {
  width: 22px; height: 34px; border: 1.5px solid var(--line-strong); border-radius: 12px; position: relative;
}
.scroll-cue .mouse::after {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; border-radius: 2px; background: var(--green);
  animation: wheel 1.6s infinite;
}
@keyframes wheel { 0%{opacity:0; transform: translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform: translate(-50%,12px);} }

/* Todas las secciones full-width con fondo base */
.how, .signup { background: var(--bg); }
.how { padding: 12vh 0; }

/* ====== MANIFIESTO ====== */
.manifesto { min-height: 100vh; display: grid; place-items: center; padding: 16vh 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); }
.manifesto h2 {
  font-size: clamp(40px, 8vw, 132px);
  line-height: 0.92;
}
.manifesto .reveal-line { overflow: hidden; display: block; }
.manifesto .reveal-line > span { display: block; }
.manifesto .m-lead { margin-top: 34px; max-width: 60ch; font-size: clamp(17px,1.7vw,24px); }

/* ====== CÓMO FUNCIONA ====== */
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 7vh, 90px); }
.section-head h2 { font-size: clamp(40px, 6.5vw, 104px); }

.steps { display: flex; flex-direction: column; gap: clamp(40px, 9vh, 120px); padding-bottom: 14vh; }
.step {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 5vw, 80px); align-items: center;
}
.step:nth-child(even) { grid-template-columns: 1.15fr 0.85fr; }
.step:nth-child(even) .step-body { order: -1; }
.step-num {
  font-family: var(--font-display);
  font-variation-settings: "wght" 900, "wdth" 125;
  font-size: clamp(110px, 20vw, 300px);
  line-height: 0.8;
  background: var(--grad-head);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 1;
}
.step-body h3 {
  font-family: var(--font-display); font-variation-settings: "wght" 850, "wdth" 112;
  text-transform: uppercase; font-size: clamp(30px, 4.6vw, 64px); line-height: 0.95; margin-bottom: 16px;
}
.step-body p { font-size: clamp(16px,1.5vw,20px); color: var(--muted); line-height: 1.6; max-width: 42ch; }
.step-body .tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--cyan); padding: 6px 12px; border: 1px solid rgba(37,201,238,0.3); border-radius: 100px;
}

/* ====== CATÁLOGO (horizontal pin) ====== */
.catalog { position: relative; }
.catalog-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }

/* Fade interior del pin: cubre borde inferior y derecho al salir */
.catalog-exit-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background:
    linear-gradient(to top,  var(--bg) 0%, transparent 30%),
    linear-gradient(to right, transparent 70%, var(--bg) 100%);
}
.catalog-head { padding: 0 var(--gutter); margin-bottom: 30px; display:flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;}
.catalog-head h2 { font-size: clamp(34px, 5vw, 80px); }
.catalog-track {
  display: flex; gap: clamp(18px, 2vw, 30px); padding: 0 var(--gutter);
  will-change: transform;
}
.game-card {
  flex: 0 0 auto; width: clamp(280px, 26vw, 380px); aspect-ratio: 3/4;
  border-radius: 16px; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.game-card .gc-img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
  /* fondo del estado vacío del slot, según los colores del juego */
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--c1, var(--cyan)) 38%, transparent), transparent 55%),
    radial-gradient(circle at 78% 88%, color-mix(in srgb, var(--c2, var(--green)) 34%, transparent), transparent 55%),
    linear-gradient(160deg, #0c1a14, #050a07);
}
.game-card .gc-img::part(frame) { background: transparent; }
.game-card .gc-img::part(empty) {
  color: var(--text); gap: 9px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.game-card .gc-glyph {
  position: absolute; top: 36%; left: 50%; transform: translate(-50%,-50%);
  font-size: 110px; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c1, var(--cyan)) 50%, transparent);
  opacity: 0.55; letter-spacing: -0.02em; z-index: 1; pointer-events: none;
}
.game-card:has(.gc-img[data-filled]) .gc-glyph { display: none; }
.game-card .gc-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(5,10,7,0.96) 8%, rgba(5,10,7,0.4) 40%, transparent 62%); }
.game-card .gc-meta { position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 3; pointer-events: none; }
.game-card .gc-cat {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; display: block;
}
.game-card .gc-name {
  font-family: var(--font-display); font-variation-settings: "wght" 850, "wdth" 110;
  text-transform: uppercase; font-size: 25px; line-height: 0.95;
}
.game-card .gc-num {
  position: absolute; top: 16px; right: 18px; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.15em;
}
.game-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 0 40px rgba(91,232,50,0.18); }
.catalog-hint { padding: 0 var(--gutter); margin-top: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted-2); display: flex; align-items: center; gap: 12px;}
.catalog-hint .bar { flex: 1; height: 1px; background: var(--line); position: relative; max-width: 200px;}

/* ====== SHOWCASE (full-bleed, sticky pin con video) ====== */
.showcase {
  position: relative;
  height: 200vh;
}
.showcase-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.showcase-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.showcase-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1;
  background:
    radial-gradient(circle at 28% 30%, rgba(37,201,238,0.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(91,232,50,0.16), transparent 55%),
    linear-gradient(150deg, #0c1a14, #04140a);
}
.showcase-bg::part(frame) { background: transparent; }
.showcase-bg::part(empty) { color: var(--text); font-family: var(--font-mono); letter-spacing: 0.04em; }
.showcase-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5,10,7,0.94) 4%, rgba(5,10,7,0.45) 36%, rgba(5,10,7,0.15) 60%),
    linear-gradient(to right, rgba(5,10,7,0.80), transparent 55%);
}
.showcase-inner {
  position: relative; z-index: 3;
  padding-top: 60px; padding-bottom: clamp(40px, 7vh, 80px);
  opacity: 0; transform: translateY(80px);
  will-change: opacity, transform;
}
.showcase-inner .kicker { margin-bottom: 16px; }
.showcase-inner h2 { font-size: clamp(48px, 9vw, 150px); line-height: 0.9; }
.showcase-inner .lead { margin-top: 22px; max-width: 50ch; }
@media (max-width: 920px) {
  .showcase { height: auto; }
  .showcase-stage { position: relative; height: auto; min-height: 64vh; padding: 80px 0; }
  .showcase-inner { opacity: 1 !important; transform: none !important; }
}
.perks { padding: 10vh 0 4vh; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.perk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.perk-card {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(28px, 3vw, 40px); background: linear-gradient(180deg, var(--bg-2), rgba(5,10,7,0.6));
  overflow: hidden; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.perk-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(91,232,50,0.10), transparent 55%);
}
.perk-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 0 40px rgba(91,232,50,0.12); }
.perk-n {
  font-family: var(--font-display); font-variation-settings: "wght" 900, "wdth" 120;
  font-size: 30px; line-height: 1;
  background: linear-gradient(100deg, var(--green), var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block; margin-bottom: 18px;
}
.perk-card h3 {
  font-family: var(--font-display); font-variation-settings: "wght" 820, "wdth" 110;
  text-transform: uppercase; font-size: clamp(20px, 2vw, 27px); line-height: 1; margin-bottom: 12px;
}
.perk-card p { font-size: 15px; color: var(--muted); line-height: 1.55; }

/* ====== RANKING / PRUEBA SOCIAL ====== */
.proof { padding: 12vh 0 16vh; }
.stat-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  margin-bottom: clamp(50px, 9vh, 110px);
}
.stat { background: var(--bg-2); padding: clamp(28px, 4vw, 48px) clamp(20px,3vw,40px); }
.stat .num { font-family: var(--font-display); font-variation-settings: "wght" 880, "wdth" 115; font-size: clamp(40px, 6vw, 86px); line-height: 0.9; }
.stat .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

.board { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; overflow-x: hidden; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.board-row {
  display: grid; grid-template-columns: 80px 1fr 110px 155px; gap: 20px; align-items: center;
  padding: 20px clamp(20px,3vw,40px); border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}
.board-row:last-child { border-bottom: none; }
.board-row.head {
  background: rgba(91,232,50,0.04);
  /* La primera columna se adapta al ancho del badge, no al del rank-n */
  grid-template-columns: auto 1fr 110px 155px;
}
.board-row.head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }
.board-row.head span:nth-child(3), .board-row.head span:nth-child(4) { text-align: right; }
.board-row.head .preview-tag {
  color: var(--cyan);
  border: 1px solid rgba(37,201,238,0.4);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.board-row:not(.head):hover { background: rgba(91,232,50,0.05); }
.rank-n { font-family: var(--font-display); font-variation-settings: "wght" 900, "wdth" 120; font-size: 30px; color: var(--muted-2); }
.board-row.top1 .rank-n { color: var(--green); text-shadow: 0 0 16px var(--green); }
.board-row.top2 .rank-n { color: var(--cyan); }
.player { display: flex; align-items: center; gap: 14px; }
.player .av { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(140deg, var(--green), var(--cyan)); display: grid; place-items: center; font-family: var(--font-display); font-variation-settings: "wght" 900, "wdth" 110; color: var(--bg); font-size: 18px; }
.player .alias { font-family: var(--font-mono); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; }
.player .meta { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.board-row .wins { font-family: var(--font-mono); font-size: 14px; color: var(--muted); white-space: nowrap; text-align: right; }
.board-row .cash { font-family: var(--font-display); font-variation-settings: "wght" 800, "wdth" 110; font-size: clamp(18px,1.8vw,26px); text-align: right; white-space: nowrap; }
.board-row .cash.g { color: var(--green); }

/* ====== REGISTRO ====== */
.signup { padding: 12vh 0 16vh; position: relative; }
.signup-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px,5vw,80px); align-items: center; }
.signup-copy h2 { font-size: clamp(42px, 7vw, 110px); margin: 18px 0; }
.founder-bar { margin-top: 30px; max-width: 420px; }
.founder-bar .fb-track { height: 8px; border-radius: 100px; background: var(--bg-3); border: 1px solid var(--line); overflow: hidden; }
.founder-bar .fb-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: 0 0 16px var(--green); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.founder-bar .fb-meta { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
.founder-bar .fb-meta b { color: var(--green); }

.reg-card {
  position: relative; border-radius: 18px; padding: clamp(26px,3vw,42px);
  background: linear-gradient(180deg, rgba(12,26,16,0.9), rgba(5,10,7,0.95));
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 1px rgba(91,232,50,0.15), 0 0 60px rgba(91,232,50,calc(0.18*var(--fx))), inset 0 1px 0 rgba(255,255,255,0.04);
}
.reg-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 19px; padding: 1px; z-index: -1;
  background: linear-gradient(140deg, var(--green), transparent 40%, transparent 60%, var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: calc(0.8 * var(--fx));
}
.reg-tab {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 6px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--green);
  box-shadow: 0 0 18px rgba(91,232,50,0.25);
}
.reg-card h3 { font-family: var(--font-display); font-variation-settings: "wght" 880, "wdth" 115; text-transform: uppercase; text-align: center; font-size: clamp(28px,3.4vw,44px); margin-top: 6px; }
.reg-card .sub { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); margin: 8px 0 26px; }
.field { margin-bottom: 14px; }
.field input {
  width: 100%; background: rgba(0,0,0,0.4); border: 1px solid var(--line); border-radius: 9px;
  padding: 16px 18px; color: var(--text); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em;
  transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder { color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.12em; }
.field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(91,232,50,0.25); }
.captcha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; margin: 6px 0 18px;
}
.captcha .cl { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); font-family: var(--font-body); }
.captcha .spin { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.captcha .cf { font-size: 10px; color: var(--muted-2); text-align: right; line-height: 1.3; }
.captcha .cf b { display:block; color: var(--muted); font-size: 11px; letter-spacing: 0.05em;}
.btn-enter {
  width: 100%; border: none; cursor: pointer;
  background: var(--green); color: #04140a;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 18px; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--green-bright), 0 0 30px rgba(91,232,50,calc(0.5*var(--fx)));
  transition: transform .15s ease, box-shadow .25s ease, background .2s;
}
.btn-enter:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--green-bright), 0 0 46px rgba(91,232,50,0.8); }
.btn-enter:active { transform: translateY(0); }
.reg-foot { text-align: center; margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted-2); }

/* ====== FOOTER ====== */
.footer { border-top: 1px solid var(--line); padding: 60px 0 50px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer .links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer .links a { color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: color .2s; }
.footer .links a:hover { color: var(--green); }
.footer .copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted-2); }
.footer .copy b { color: var(--green); }

/* ====== COUNTDOWN ====== */
.countdown { display: flex; align-items: flex-end; gap: clamp(8px, 1.4vw, 16px); margin-top: 30px; }
.cd-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: clamp(44px, 7vw, 84px); }
.cd-num {
  font-family: var(--font-display); font-variation-settings: "wght" 850, "wdth" 115;
  font-size: clamp(40px, 5.5vw, 72px); line-height: 0.9; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 0; width: 100%; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.cd-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.cd-sep { font-family: var(--font-display); font-variation-settings: "wght" 800, "wdth" 110; font-size: clamp(28px, 4vw, 48px); color: var(--green); padding-bottom: 30px; opacity: 0.6; }

/* ====== FAQ ====== */
.faq { padding: 8vh 0 12vh; }
.faq-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  box-shadow: 0 0 60px rgba(91,232,50,0.04), inset 0 1px 0 rgba(91,232,50,0.08);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.faq-item:last-child { border-bottom: none; }
.faq-item[open] {
  background: linear-gradient(135deg, rgba(91,232,50,0.04) 0%, transparent 60%);
}
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 36px);
  font-family: var(--font-display); font-variation-settings: "wght" 760, "wdth" 108;
  text-transform: uppercase; font-size: clamp(16px, 1.8vw, 26px); color: var(--text);
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green); }
.faq-item[open] summary { color: var(--green); }
.faq-ico {
  position: relative; width: 22px; height: 22px; flex-shrink: 0;
  background: rgba(91,232,50,0.08); border: 1px solid rgba(91,232,50,0.2);
  border-radius: 50%;
}
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--green); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.faq-ico::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-ico::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item[open] .faq-ico { background: rgba(91,232,50,0.14); border-color: rgba(91,232,50,0.4); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.faq-item[open] .faq-a { max-height: 320px; }
.faq-a p { padding: 0 clamp(20px, 2.8vw, 36px) 24px; max-width: 68ch; color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; }

/* ====== MOBILE STICKY CTA ====== */
.mobile-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 45;
  /* Hidden on desktop — shown only on mobile via media query */
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--green); color: #04140a; text-decoration: none;
  padding: 16px 22px; border-radius: 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 24px rgba(91,232,50,0.4);
  transform: translateY(160%); transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta .mc-arrow { font-size: 18px; }
@media (max-width: 920px) {
  .mobile-cta { display: flex; }
}

/* ====== INTRO REVEAL (al cargar) ====== */
.hero-copy > *, .hero-char { opacity: 1; }
body.intro .hero-copy > * { opacity: 0; transform: translateY(28px); }
body.intro .hero-char { opacity: 0; transform: translateX(40px) scale(0.96); }
body.is-ready .hero-copy > * { animation: introUp .9s cubic-bezier(.16,.84,.34,1) forwards; }
body.is-ready .hero-copy > *:nth-child(1) { animation-delay: .15s; }
body.is-ready .hero-copy > *:nth-child(2) { animation-delay: .26s; }
body.is-ready .hero-copy > *:nth-child(3) { animation-delay: .37s; }
body.is-ready .hero-copy > *:nth-child(4) { animation-delay: .46s; }
body.is-ready .hero-copy > *:nth-child(5) { animation-delay: .55s; }
body.is-ready .hero-copy > *:nth-child(6) { animation-delay: .64s; }
body.is-ready .hero-char { animation: introChar 1.1s cubic-bezier(.16,.84,.34,1) .3s forwards; }
@keyframes introUp { to { opacity: 1; transform: none; } }
@keyframes introChar { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.intro .hero-copy > *, body.intro .hero-char { opacity: 1 !important; transform: none !important; }
  .grain { animation: none; }
}

/* ====== TILT (tarjetas de juego) ====== */
.catalog-track { perspective: 1200px; }
.game-card { transform-style: preserve-3d; will-change: transform; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

.line-rise > span { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.16,.84,.34,1); }
.line-rise.in > span { transform: none; }
.line-rise.in .ld1 { transition-delay: .12s; }
.line-rise.in .ld2 { transition-delay: .24s; }
.line-rise.in .ld3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .line-rise > span { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Reducción de efectos en móvil para rendimiento */
@media (max-width: 600px) {
  .bg-glow { filter: blur(60px); opacity: calc(0.22 * var(--fx)); }
  .grain { opacity: calc(0.03 * var(--fx)); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Tablet landscape ---- */
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(54px, 11vw, 116px); }
  .step-num { font-size: clamp(96px, 18vw, 220px); }
}

/* ---- Tablet portrait / large phone ---- */
@media (max-width: 920px) {
  .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: auto; padding: 130px 0 70px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .hero-copy { order: 1; }
  .hero-char { order: 0; width: clamp(200px, 52vw, 320px); margin-bottom: 6px; }
  .hero h1 { font-size: clamp(56px, 15vw, 110px); }
  .hero h1 .l2 { white-space: normal; }
  .hero-sub { font-size: clamp(19px, 4vw, 32px); max-width: 22ch; margin-left: auto; margin-right: auto; }
  .hero-lead { max-width: 52ch; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .scroll-cue { display: none; }

  .manifesto { padding: 14vh 0; min-height: auto; }
  .manifesto h2 { font-size: clamp(38px, 10vw, 90px); }

  .step, .step:nth-child(even) { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .step:nth-child(even) .step-body { order: 0; }
  .step-num { margin: 0 auto; }
  .step-body p { margin: 0 auto; }
  .step-body .tag { margin-left: auto; margin-right: auto; }

  .catalog { height: auto !important; }
  .catalog-pin {
    position: relative; height: auto; padding: 80px 0;
    /* Fade lateral: oculta los bordes de tarjetas adyacentes */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
  .catalog-track { transform: none !important; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .catalog-track::-webkit-scrollbar { display: none; }
  .game-card { scroll-snap-align: center; width: clamp(240px, 72vw, 320px); }
  .catalog-head { flex-direction: column; align-items: flex-start; }
  .catalog-hint { display: flex; }

  .signup-grid { grid-template-columns: 1fr; }
  .signup-copy { text-align: center; }
  .founder-bar { margin-left: auto; margin-right: auto; }

  .perk-grid { grid-template-columns: 1fr; }
  .hero-proof { justify-content: center; }

  .stat-band { grid-template-columns: 1fr; }
  .board-row { grid-template-columns: 44px 1fr auto; gap: 14px; }
  .board-row .wins, .board-row.head .wins { display: none; }
  /* head row: columnas responsivas para que el badge no desborde */
  .board-row.head { grid-template-columns: auto 1fr; }
  .board-row.head > span:nth-child(4) { display: none; }
  /* Laterales: prevenir overflow horizontal */
  .board { overflow-x: hidden; }
}

/* ---- Phone ---- */
@media (max-width: 600px) {
  :root { --maxw: 100%; }
  .nav { padding: 14px 18px; }
  .wordmark { font-size: 21px; }
  .soon-pill { display: none; }
  .nav-cta { font-size: 11px; padding: 9px 14px; letter-spacing: 0.12em; }

  .hero-stage { padding: 120px 0 56px; }
  .hero-char { width: clamp(180px, 56vw, 260px); }
  .hero h1 { font-size: clamp(48px, 16vw, 80px); }
  .kicker { font-size: 10px; letter-spacing: 0.24em; }
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; text-align: center; }

  .section-head h2, .signup-copy h2 { font-size: clamp(36px, 11vw, 60px); }
  .manifesto h2 { font-size: clamp(34px, 11vw, 64px); }
  .manifesto .m-lead, .lead { font-size: 16px; }

  .step-num { font-size: clamp(84px, 30vw, 150px); }
  .step-body h3 { font-size: clamp(28px, 8vw, 44px); }

  .stat { padding: 26px 22px; }
  .stat .num { font-size: clamp(44px, 14vw, 64px); }

  .board { border-radius: 14px; }
  .board-row { padding: 16px; grid-template-columns: 36px 1fr auto; gap: 12px; }
  .player .av { width: 34px; height: 34px; font-size: 15px; }
  .player .alias { font-size: 14px; }
  .player .meta { font-size: 11px; }
  .board-row .cash { font-size: 17px; }
  .rank-n { font-size: 24px; }
  .board-row.head .preview-tag { font-size: 8.5px; padding: 3px 8px; }

  .reg-card { padding: 26px 20px; }
  .reg-card .sub { letter-spacing: 0.16em; }
  .captcha .cf { display: none; }

  .footer { padding: 44px 0 40px; }
  .footer-grid { flex-direction: column; text-align: center; gap: 22px; }
  .footer .links { justify-content: center; gap: 18px 22px; }
}

/* ---- Small phone ---- */
@media (max-width: 380px) {
  .hero h1 { font-size: 46px; }
  .hero-sub { font-size: 18px; }
  .nav-cta { font-size: 10px; padding: 8px 10px; letter-spacing: 0.08em; }
  .wordmark { font-size: 18px; }
  .countdown { gap: 4px; }
  .cd-sep { font-size: 18px; }
  .stat-band { gap: 12px; }
  .footer .links { gap: 12px 16px; font-size: 12px; }
}

/* ---- Breakpoint 480px (dispositivos intermedios) ---- */
@media (max-width: 480px) {
  /* Hero */
  .hero-char { width: clamp(160px, 58vw, 240px); }
  .hero-cta-block { flex-direction: column; align-items: stretch; }
  .hero-btn-primary, .hero-btn-ghost { width: 100%; justify-content: center; text-align: center; }
  .hero-proof { flex-wrap: wrap; }
  .av-mini { width: 28px; height: 28px; margin-left: -8px; }

  /* Secciones */
  .how { padding: 8vh 0; }
  .section-head { margin-bottom: clamp(28px, 5vh, 60px); }
  .kicker { font-size: 10px; letter-spacing: 0.2em; }

  /* Steps */
  .step-num { font-size: clamp(72px, 28vw, 120px); }
  .step-body h3 { font-size: clamp(24px, 7vw, 36px); }

  /* Catálogo */
  .game-card { width: clamp(220px, 78vw, 300px); }

  /* Countdown */
  .countdown { gap: 6px; margin-top: 20px; }
  .cd-cell { min-width: clamp(42px, 12vw, 64px); gap: 4px; }
  .cd-num { font-size: clamp(22px, 7vw, 36px); }
  .cd-lbl { font-size: 9px; letter-spacing: 0.12em; }
  .cd-sep { font-size: 20px; line-height: 1; padding-bottom: 14px; }

  /* Reg card - formulario columna única en móvil */
  .reg-card--hero .hr-fields { grid-template-columns: 1fr; }
  .reg-card--hero { max-width: 100%; }

  /* FAQ */
  .faq-item summary { font-size: clamp(14px, 4vw, 18px); padding: 16px clamp(14px, 4vw, 24px); gap: 12px; }
  .faq-a p { padding: 0 clamp(14px, 4vw, 24px) 18px; }
  .faq-ico { width: 18px; height: 18px; }

  /* Board */
  .board-row { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 14px 12px; }
  .rank-n { font-size: 20px; }
  .player .av { width: 30px; height: 30px; font-size: 13px; border-radius: 7px; }
  .player .alias { font-size: 13px; }
  .player .meta { font-size: 10px; }
  .board-row .cash { font-size: 14px; }

  /* Stats */
  .stat { padding: 22px 18px; }
  .stat .num { font-size: clamp(36px, 12vw, 56px); }

  /* Perk cards */
  .perk-card { padding: clamp(20px, 5vw, 32px); }

  /* Signup */
  .signup-copy h2 { font-size: clamp(32px, 11vw, 52px); }
  .founder-bar { max-width: 100%; }
  .reg-card { padding: 22px 16px; }
  .field input, .field select, .field textarea { padding: 13px 14px; font-size: 15px; }

  /* Footer */
  .footer-grid { gap: 20px; }
  .footer .links { gap: 14px 18px; font-size: 13px; }

  /* Subpáginas */
  .page-hero { padding: clamp(90px, 15vh, 130px) 0 clamp(40px, 7vh, 70px); }
  .page-hero h1 { font-size: clamp(32px, 10vw, 54px); }
  .back-link { font-size: 10px; padding: 6px 10px 6px 8px; margin-bottom: 20px; }
  .legal-section h2 { font-size: clamp(18px, 5vw, 26px); }
  .legal-section p, .legal-section li { font-size: 14.5px; max-width: 100%; }
  .contact-grid { gap: 28px; }
  .contact-channel { padding: 14px 16px; }
  .contact-channel .ch-icon { width: 32px; height: 32px; border-radius: 8px; }
}

/* ---- Contact subpage — 600px ---- */
@media (max-width: 600px) {
  .field input, .field select, .field textarea { padding: 13px 14px; }
  .legal-content { max-width: 100%; }
  .legal-section p, .legal-section li { max-width: 100%; }
  .contact-channels { gap: 10px; }
  .page-hero .page-meta { gap: 14px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .line-rise > span { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HERO v2 — formulario integrado + capitán con movimiento
   ============================================================ */
.hero h1 { font-size: clamp(44px, 6.2vw, 100px); margin-top: 12px; }
.hero-sub { font-size: clamp(18px, 2.2vw, 30px); margin-top: 14px; max-width: 18ch; }
.hero-lead { margin-top: 14px; max-width: 42ch; font-size: clamp(15px, 1.3vw, 18px); }

/* ---- Tarjeta de registro dentro del hero ---- */
.reg-card--hero { margin-top: 26px; max-width: 480px; padding: 22px 22px 20px; }
.reg-card--hero .hr-head { margin-bottom: 16px; }
.reg-card--hero .hr-tab {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--green);
}
.reg-card--hero .hr-sub {
  display: block; margin-top: 6px; font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted);
}
.reg-card--hero .hr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-card--hero .hr-fields .field { margin-bottom: 0; }
.reg-card--hero .hr-fields .btn-enter {
  grid-column: 1 / -1; padding: 15px; font-size: 14px; letter-spacing: 0.18em; margin-top: 2px;
}
.reg-card--hero .hero-proof { margin-top: 16px; gap: 12px; }
.reg-card--hero .hero-proof .av-mini { width: 30px; height: 30px; font-size: 13px; }
.reg-card--hero .hero-proof p { font-size: 12px; line-height: 1.4; }
.hr-link { color: var(--cyan); text-decoration: none; font-weight: 600; white-space: nowrap; transition: color .2s; }
.hr-link:hover { color: var(--green-bright); }

/* ---- Capitán: capas independientes (scroll / tilt / float) ---- */
.hero-char { width: clamp(280px, 33vw, 470px); }
.char-tilt { position: relative; z-index: 2; transition: transform .3s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
.hero-char .char-glow { animation: auraPulse 4.6s ease-in-out infinite; }
@keyframes auraPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: calc(0.85 * var(--fx)); }
  50%      { transform: translate(-50%,-50%) scale(1.09); opacity: calc(1.05 * var(--fx)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-char .char-glow { animation: none; }
}

/* ============================================================
   TIRA DE LOGOS DE JUEGOS
   ============================================================ */
.trust { padding: clamp(40px, 7vh, 84px) 0; position: relative; z-index: 1; }
.trust .trust-label {
  display: block; text-align: center; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
  margin-bottom: clamp(26px, 4.5vh, 46px);
}
.trust-logos { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3.5vw, 52px); flex-wrap: wrap; }

/* Cada logo vive en una celda de tamaño idéntico */
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 164px;
  height: 58px;
  flex-shrink: 0;
}

.glogo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity .35s ease, transform .35s ease;
}
.glogo-invert { filter: brightness(0) invert(1); }
.logo-cell:hover .glogo { opacity: 1; transform: translateY(-2px) scale(1.05); }
.logo-cell:hover .glogo-invert { filter: brightness(0) invert(1) brightness(1.2); }

@media (max-width: 920px) {
  .logo-cell { width: 130px; height: 46px; }
  .trust-logos { gap: 14px 20px; }
}
@media (max-width: 600px) {
  .logo-cell { width: 100px; height: 36px; }
  .trust-logos { gap: 10px 16px; }
}

/* ============================================================
   TRANSICIONES SUAVES ENTRE SECCIONES
   Sin cortes — cada sección se funde con el fondo oscuro
   ============================================================ */

/* Hero: fade potente en la parte inferior — cubre el grid floor y el glow */
.hero-stage::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(200px, 30vh, 380px);
  background: linear-gradient(to bottom, transparent 0%, rgba(5,10,7,0.55) 35%, rgba(5,10,7,0.88) 65%, var(--bg) 100%);
  z-index: 4;
  pointer-events: none;
}

/* ── Fondos sólidos en secciones de contenido ───────────────
   El bg-glow es position:fixed y traspasa secciones transparentes.
   Dar background a cada sección de contenido lo bloquea limpiamente.
   Hero y Showcase quedan sin bg sólido para mantener su atmósfera.
   ─────────────────────────────────────────────────────────── */
.trust, .manifesto, .how, .perks, .signup, .faq, .catalog {
  background: var(--bg);
}
/* proof usa gradiente que iguala el fondo del board (bg-2 → bg)
   así no hay contraste izquierda/derecha dentro de la sección */
.proof {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

/* Trust: sin fades laterales para que los logos sean visibles en todo su ancho */

/* Manifesto: fade entrada y salida */
.manifesto::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.manifesto::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Showcase: fades en el stage sticky (no en el wrapper de scroll) */
.showcase-stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
.showcase-stage::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}

/* How funciona: fade entrada */
.how::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Catálogo: fade entrada */
.catalog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 100px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Proof/ranking: fade entrada — más alto para tapar la salida del catálogo */
.proof::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(80px, 14vh, 180px);
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 20%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Perks: fade entrada */
.perks::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(50px, 6vh, 80px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Fades de SALIDA — secciones que faltaban */
.how::after,
.catalog::after,
.proof::after,
.perks::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.catalog::after { z-index: 3; }

/* Signup: fade entrada y salida */
.signup::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.signup::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* FAQ: fade entrada y salida */
.faq::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.faq::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(60px, 8vh, 110px);
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   HERO CTA BLOCK (reemplaza el form duplicado del hero)
   ============================================================ */
.hero-cta-block {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #04140a;
  background: var(--green);
  padding: 17px 30px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 1px var(--green-bright), 0 0 28px rgba(91,232,50,calc(0.45*var(--fx)));
  transition: transform .15s ease, box-shadow .25s ease;
}
.hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--green-bright), 0 0 44px rgba(91,232,50,0.75);
}
.hero-btn-primary svg { flex-shrink: 0; }
.hero-btn-ghost {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.hero-btn-ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}
@media (max-width: 920px) {
  .hero-cta-block { justify-content: center; }
}
@media (max-width: 600px) {
  .hero-cta-block { flex-direction: column; align-items: center; }
  .hero-btn-primary { width: 100%; justify-content: center; }
}

/* ============================================================
   INNER PAGES — Términos, Privacidad, Juego responsable, Contacto
   ============================================================ */
.page-hero {
  padding: clamp(110px, 18vh, 170px) 0 clamp(56px, 9vh, 90px);
  position: relative;
  border-bottom: 1px solid var(--line);
}
.page-hero-inner { position: relative; z-index: 1; }
.back-link {
  display: flex;           /* block-level: ocupa su propia línea */
  align-items: center;
  gap: 9px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 30px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12,26,16,0.5);
  backdrop-filter: blur(10px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.back-link:hover {
  color: var(--green);
  border-color: rgba(91,232,50,0.35);
  background: rgba(91,232,50,0.05);
}

/* Botón volver arriba — páginas internas */
/* ── Botón de sonido ──────────────────────────────────────── */
.btn-sound {
  position: fixed;
  right: 28px;
  bottom: 88px; /* encima del btn-back-top */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(8,17,9,0.88);
  backdrop-filter: blur(16px);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 45;
  opacity: 1;
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
  box-shadow: 0 0 0 1px rgba(91,232,50,0.08), 0 6px 24px rgba(0,0,0,0.55);
}
.btn-sound:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(37,201,238,0.35);
  color: var(--cyan);
}
.btn-sound.active {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(37,201,238,0.4);
}
.btn-back-top {
  position: fixed;
  right: 28px;
  bottom: 32px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(8,17,9,0.88);
  backdrop-filter: blur(16px);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 45;
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transition: opacity .35s ease, transform .35s ease,
              border-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 1px rgba(91,232,50,0.08), 0 6px 24px rgba(0,0,0,0.55);
}
.btn-back-top.visible {
  opacity: 1;
  transform: none;
}
.btn-back-top:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(91,232,50,0.4);
  color: var(--green-bright);
}
/* En móvil, elevar ambos botones por encima del sticky CTA (breakpoint = sticky CTA) */
@media (max-width: 920px) {
  .btn-sound   { right: 16px; bottom: 136px; top: auto; width: 40px; height: 40px; }
  .btn-back-top { right: 16px; bottom: 88px;  width: 40px; height: 40px; }
}
.page-hero h1 {
  font-size: clamp(44px, 7.5vw, 112px);
  margin-top: 14px;
  line-height: 0.88;
}
.page-hero .page-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 20px;
}

.legal-content {
  padding: clamp(56px, 9vh, 110px) 0 clamp(80px, 14vh, 160px);
  max-width: 820px;
}
.legal-section { margin-bottom: clamp(44px, 7vh, 72px); }
.legal-section h2 {
  font-family: var(--font-display);
  font-variation-settings: "wght" 820, "wdth" 110;
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 0.95;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.legal-section h2 .sec-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--green);
  font-weight: 600;
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid rgba(91,232,50,0.3);
  border-radius: 4px;
  line-height: 1.4;
}
.legal-section p {
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 14px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol {
  padding-left: 22px;
  margin: 10px 0 14px;
}
.legal-section li {
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 6px;
}
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section a { color: var(--cyan); text-decoration: none; transition: color .2s; }
.legal-section a:hover { color: var(--green); }
.legal-highlight {
  background: rgba(91,232,50,0.04);
  border: 1px solid rgba(91,232,50,0.14);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 20px 0;
}
.legal-highlight p { margin: 0; color: var(--text); font-size: 15px; }

/* Contacto — formulario */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  padding: clamp(56px, 9vh, 110px) 0 clamp(80px, 14vh, 160px);
}
.contact-info h2 {
  font-family: var(--font-display);
  font-variation-settings: "wght" 880, "wdth" 115;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.9;
  margin-bottom: 20px;
}
.contact-info .lead { max-width: 38ch; }
.contact-channels { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.contact-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
.contact-channel:hover { border-color: var(--line-strong); background: var(--bg-3); }
.contact-channel .ch-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(91,232,50,0.08); border: 1px solid rgba(91,232,50,0.18);
  display: grid; place-items: center; flex-shrink: 0; color: var(--green);
}
.contact-channel .ch-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 2px; }
.contact-channel .ch-val { font-family: var(--font-mono); font-size: 14px; color: var(--text); font-weight: 600; }
.contact-form-wrap { position: relative; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field select, .field textarea {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px 18px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: border-color .25s, box-shadow .25s;
  appearance: none;
  -webkit-appearance: none;
}
.field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2388a594' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field select option { background: #0c1a10; }
.field textarea { resize: none; line-height: 1.6; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(91,232,50,0.22); }
@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: clamp(36px, 8vw, 64px); }
  .legal-section h2 { font-size: clamp(20px, 4vw, 32px); }
}

/* ============================================================
   GALAXY CANVAS
   ============================================================ */
#galaxy-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;              /* encima del contenido, debajo del grano */
  pointer-events: none;
  mix-blend-mode: screen;  /* se mezcla con secciones oscuras sin tapar texto */
  opacity: 0.72;
}

/* ============================================================
   VERSU COINS — Arquitectura definitiva
   .vc-epic-coin  → wrapper animado (logo + cara como UNA unidad)
   .coin-metal    → círculo dorado con overflow:hidden propio
   .coin-img      → logo encima, NUNCA recortado por el círculo
   ============================================================ */

/* ── Wrapper: flota y rota como moneda real ───────────────── */
.vc-epic-coin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: epicCoinFloat 5.6s var(--cd, 0s) ease-in-out infinite;
}

/* ── coin-metal: oculto — la ilustración coin-t.svg ya ES la moneda completa */
.vc-epic-coin .coin-metal { display: none; }

/* ── Animación ────────────────────────────────────────────── */
@keyframes epicCoinFloat {
  0%, 100% { transform: translateY(0px)   rotate(-4deg); }
  25%       { transform: translateY(-15px) rotate(5deg); }
  55%       { transform: translateY(-20px) rotate(2deg); }
  80%       { transform: translateY(-10px) rotate(-3deg); }
}

/* ── Imagen: la ilustración completa, sin recorte ────────── */
.vc-epic-coin .coin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 8px 24px rgba(0,0,0,0.7))
    drop-shadow(0 0 20px rgba(37,201,238,0.35));
}

/* ── Tamaños ──────────────────────────────────────────────── */
.vc-epic-coin--xl { width: 130px; height: 130px; }
.vc-epic-coin--lg { width:  90px; height:  90px; --cd: -1.4s; }
.vc-epic-coin--md { width:  62px; height:  62px; --cd: -2.8s; }
.vc-epic-coin--sm { width:  40px; height:  40px; --cd: -0.7s; }


/* ── Cluster en el hero: posiciones scattered ─────────────── */
.coin-cluster {
  position: absolute;
  pointer-events: none;
  right: -5%;
  top: 5%;
  width: 180px;
  height: 340px;
  z-index: 4;
  opacity: 0;
  transform: translateX(40px) scale(0.92);
  transition: opacity 1.2s 0.95s ease, transform 1.2s 0.95s cubic-bezier(.16,.84,.34,1);
}
body.is-ready .coin-cluster { opacity: 1; transform: none; }
@media (max-width: 920px) { .coin-cluster { display: none; } }

.coin-pos-a { position: absolute; top: 0;    right: 10px; }
.coin-pos-b { position: absolute; top: 100px; right: -16px; }
.coin-pos-c { position: absolute; top: 188px; right: 62px; }
.coin-pos-d { position: absolute; top: 256px; right: 8px; }

/* ── Chip de bono fundador en el hero ─────────────────────── */
.coin-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(37,201,238,0.08), rgba(91,232,50,0.04));
  border: 1px solid rgba(37,201,238,0.22);
  border-radius: 100px;
  padding: 7px 18px 7px 6px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 22px rgba(37,201,238,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
  margin-top: 22px;
}
.coin-badge .cb-txt {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.coin-badge .cb-amount {
  font-family: var(--font-display); font-variation-settings: "wght" 850, "wdth" 110;
  font-size: 17px; line-height: 1;
  background: linear-gradient(100deg, var(--green) 0%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}

/* ── Icono VC inline (ranking, etc.) ──────────────────────── */
.vc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  vertical-align: middle; margin-right: 5px;
  position: relative; top: -1px;
}
.vc-icon img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(37,201,238,0.4));
}

/* ============================================================
   3D SCROLL REVEALS
   ============================================================ */

/* — Números del protocolo (01, 02, 03) ————————————————————— */
.step .step-num {
  transition: opacity 1.1s cubic-bezier(.16,.84,.34,1),
              transform 1.1s cubic-bezier(.16,.84,.34,1);
}
.step:not(.in) .step-num {
  opacity: 0;
  transform: perspective(500px) rotateX(55deg) translateY(70px) scale(0.88);
}
.step.in .step-num {
  opacity: 1;
  transform: none;
}

/* — Cuerpo del paso ———————————————————————————————————————— */
.step .step-body {
  transition: opacity 0.9s 0.28s cubic-bezier(.2,.7,.2,1),
              transform 0.9s 0.28s cubic-bezier(.2,.7,.2,1);
}
.step:not(.in) .step-body {
  opacity: 0;
  transform: translateX(50px);
}
.step:nth-child(even):not(.in) .step-body {
  transform: translateX(-50px);
}
.step.in .step-body {
  opacity: 1;
  transform: none;
}

/* — Perk cards con perspectiva ——————————————————————————————*/
.perk-card.reveal:not(.in) {
  opacity: 0;
  transform: perspective(700px) rotateY(22deg) translateX(36px) scale(0.95);
}
.perk-card.reveal.d1:not(.in) { transform: perspective(700px) rotateY(-22deg) translateX(-36px) scale(0.95); }
.perk-card.reveal.d2:not(.in) { transform: perspective(700px) rotateY(22deg)  translateX(36px)  scale(0.95); }
.perk-card.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.16,.84,.34,1);
}

/* — Stats (números del ranking) ————————————————————————————*/
.stat.reveal:not(.in) {
  opacity: 0;
  transform: perspective(400px) rotateX(30deg) translateY(40px);
}
.stat.reveal.in {
  opacity: 1;
  transform: none;
}

/* — Board rows slide-in —————————————————————————————————————*/
.board-row:not(.head) {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.board-row:not(.head).row-in {
  opacity: 1;
  transform: none;
}
.board-row:not(.head):nth-child(2)  { transition-delay: 0.05s; }
.board-row:not(.head):nth-child(3)  { transition-delay: 0.12s; }
.board-row:not(.head):nth-child(4)  { transition-delay: 0.19s; }
.board-row:not(.head):nth-child(5)  { transition-delay: 0.26s; }
.board-row:not(.head):nth-child(6)  { transition-delay: 0.33s; }

/* ============================================================
   VERSU CAPTCHA — canvas con distorsión
   ============================================================ */
.vc-container { display:none; margin-bottom:14px; }
.vc-wrap {
  background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 16px 14px;
  transition:border-color .3s;
}
.vc-wrap--ok { border-color:var(--green); box-shadow:0 0 18px rgba(91,232,50,0.18); }
.vc-label {
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.vc-canvas-row {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.vc-canvas {
  border-radius:8px; border:1px solid var(--line);
  flex:1; display:block; max-width:240px;
  image-rendering:crisp-edges;
}
.vc-refresh {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:rgba(0,0,0,0.4); border:1px solid var(--line);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.vc-refresh:hover { border-color:var(--line-strong); color:var(--text); }
.vc-input-row {
  display:flex; gap:8px;
}
.vc-input {
  flex:1; background:rgba(0,0,0,0.45); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px;
  color:var(--text); font-family:var(--font-mono);
  font-size:16px; letter-spacing:0.3em; text-align:center;
  text-transform:uppercase; transition:border-color .25s;
  outline:none;
}
.vc-input:focus { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.vc-submit {
  width:42px; height:42px; border-radius:8px; flex-shrink:0;
  background:rgba(91,232,50,0.12); border:1px solid rgba(91,232,50,0.3);
  color:var(--green); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.vc-submit:hover { background:rgba(91,232,50,0.22); border-color:var(--green); }
.vc-error {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:#ff5c5c; margin-top:8px;
}