/* finent · lista de espera
   Layout: la app vive de noche. Lienzo #06070F, profundidad con cristal, luz azul de la tarjeta de bienvenida
   y oro solo donde hay recompensa (Fundadores, progreso). Tokens tomados del Brand Guidelines v1.0. */
:root {
  --bg: #06070F;
  --surface: #171A29;
  --ink: #14161F;
  --text: #FFFFFF;
  --text-strong: #F3F5FE;
  --text-accent: #CFD3E5;
  --text-body: #B2B6CA;
  --text-muted: #9397AB;
  --label: #9498AB;
  --gold: #C9A84C;   /* Deep Gold (brand) */
  --gold-light: #F0D080; /* Light Gold (brand) */
  --on-gold: #3D2A00;
  --gold-border: rgba(240, 208, 128, 0.5);
  --gold-halo: rgba(201, 168, 76, 0.3);
  --silver-halo: rgba(214, 219, 230, 0.24);
  --night-glow: rgba(90, 112, 190, 0.35);
  --error: #FF9B9B;
  --ok: #22A861;

  --border: rgba(255, 255, 255, 0.12);
  --glass-high: rgba(255, 255, 255, 0.085);
  --glass-low: rgba(255, 255, 255, 0.02);
  --fill-subtle: rgba(255, 255, 255, 0.08);
  --panel-high: rgba(255, 255, 255, 0.07);
  --panel-low: rgba(255, 255, 255, 0.02);
  --edge: rgba(255, 255, 255, 0.2);
  --shadow: rgba(3, 5, 16, 0.34);

  /* Oro de verdad: cálido y luminoso, con brillo arriba y fondo ámbar (sin tonos verdosos ni mostaza). */
  --gold-metal: linear-gradient(135deg, #F0D080 0%, #C9A84C 100%); /* Gradiente oro aprobado */
  --gold-progress: linear-gradient(90deg, #F0D080, #C9A84C);
  --btn-white: linear-gradient(180deg, #FFFFFF, #E2E5EC);
  --pro-border: linear-gradient(115deg, #F0D080, #C9A84C 30%, rgba(160, 166, 182, 0.5) 60%, #E6E9F0);
  --silver-text: linear-gradient(180deg, #FFFFFF 0%, #E4E7F1 55%, #A9B0C6 100%);

  --font-display: 'Cal Sans', 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-card: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-caption: clamp(0.78rem, 0.76rem + 0.1vw, 0.875rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-lead: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 0.8vw, 2rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  --fs-display: clamp(3.25rem, 1.8rem + 4.6vw, 5rem);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --header-h: 68px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: var(--gold-light); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--btn-white); color: var(--ink); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Mientras GSAP prepara la entrada del hero (solo si no hay intro). */
@media (prefers-reduced-motion: no-preference) {
  .js-intro [data-intro], .js-intro .hero__title { visibility: hidden; }
}

/* =========================================================
   INTRO: la silueta del logo y el viaje a través de ella
   ========================================================= */
/* La intro va DENTRO de la página (absolute, arriba del todo, con el scroll bloqueado en 0), no como capa fija:
   los navegadores del móvil pintan detrás de su barra el contenido de la página, y así lo que asoma ahí es la
   intro y no la web. Es más alta que la pantalla más alta posible. */
.intro { display: none; position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh + 160px); height: calc(100lvh + 160px); z-index: 150; pointer-events: auto; background: transparent; }
/* Mientras dura la intro, todo lo que el navegador pinte alrededor (barra de direcciones, zona segura) es azul oscuro. */
.intro-on, .intro-on body { background-color: #05060d; }
.intro-on .intro { display: block; }
.intro-on, .intro-on body { overflow: hidden; overscroll-behavior: none; }
.intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro__veil { fill: url(#intro-veil-g); }
.intro__fill { opacity: 0; }
/* El grosor va en unidades del isotipo: playIntro lo ajusta a 1,4 px de pantalla con la cámara
   (con non-scaling-stroke, Chrome no reparte bien el guion de pathLength y el trazo se adelanta a la luz). */
.intro__strokes { stroke-width: 1.9; }
.intro__stroke { fill: none; stroke: #F0D080; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro__dive { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.intro__vignette { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(3, 4, 10, 0) 38%, rgba(3, 4, 10, 0.55) 72%, rgba(3, 4, 10, 0.92) 100%); }

/* =========================================================
   Base y tipografía
   ========================================================= */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }
.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; margin: 0; }
.silver { background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-text { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.eyebrow--gold { color: var(--gold); }
.lead { margin: 0; color: var(--text-body); font-size: var(--fs-lead); line-height: 1.6; max-width: 44ch; }
.body-copy { margin: 0; color: var(--text-body); max-width: 46ch; }
.muted { color: var(--text-muted); }

.glass {
  background: linear-gradient(160deg, var(--glass-high), var(--glass-low));
  border: 1px solid var(--border);
  background-color: rgba(10, 12, 22, 0.6);
  box-shadow: inset 0 1px 0 var(--edge), 0 24px 60px var(--shadow);
  border-radius: var(--radius-lg);
}

/* Botones */
.btn {
  --btn-h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 24px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--btn-white); color: var(--ink); box-shadow: 0 10px 30px rgba(207, 211, 229, 0.14); }
.btn--primary:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 14px 40px rgba(207, 211, 229, 0.24); }
.btn--glass { background: var(--fill-subtle); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border); }
.btn--glass:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.btn--small { --btn-h: 44px; padding: 0 18px; font-size: 0.95rem; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.link-btn { border: 0; background: none; padding: 8px 0; color: var(--text-muted); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--text); }

/* =========================================================
   Cabecera
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent; transition: background-color 0.4s ease, border-color 0.4s ease;
}
.site-header.is-scrolled {
  background-color: rgba(6, 7, 15, 0.95); border-bottom-color: var(--border);
}
/* Cristal esmerilado (como en Apple): lo que pasa por debajo se intuye, desenfocado, pero nunca se lee encima de la cabecera.
   Es una franja fina, así que el desenfoque cuesta poco. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background-color: rgba(6, 7, 15, 0.78); -webkit-backdrop-filter: saturate(150%) blur(20px); backdrop-filter: saturate(150%) blur(20px); }
}
.site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lockup { display: block; height: 30px; width: auto; }
.lockup-link { display: inline-flex; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.lang-switch button {
  min-width: 44px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease;
}
.lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--text); }

/* =========================================================
   Recorrido: barra de progreso, puntos de sección y luz ambiente
   ========================================================= */
.dots { position: fixed; right: 16px; top: 50%; translate: 0 -50%; z-index: 40; display: none; flex-direction: column; gap: 4px; }
@media (min-width: 1240px) { .has-scroll-fx .dots { display: flex; } }
.dots { transition: opacity 0.3s ease; }
.dots.is-muted { opacity: 0; pointer-events: none; }
.dots a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; text-decoration: none; }
.dots a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease; }
.dots a:hover::before { background: rgba(255, 255, 255, 0.65); }
.dots a[aria-current="true"]::before { background: var(--gold); transform: scale(1.5); box-shadow: 0 0 12px var(--gold-halo); }
.dots__label {
  position: absolute; right: 32px; white-space: nowrap; padding: 5px 11px; border-radius: 999px; pointer-events: none;
  background: rgba(6, 7, 15, 0.72); box-shadow: inset 0 0 0 1px var(--border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-accent); opacity: 0; translate: 6px 0; transition: opacity 0.25s ease, translate 0.25s ease;
}
.dots a:hover .dots__label, .dots a:focus-visible .dots__label { opacity: 1; translate: 0 0; }
/* Luz ambiente pintada en el fondo de cada sección (antes eran dos capas fijas del tamaño de la pantalla que se
   movían con el scroll: se veía casi igual y costaba un 20 % del dibujado de cada fotograma). */
.pillars { background: radial-gradient(60vmax 60vmax at 0% 35%, rgba(90, 112, 190, 0.12), rgba(90, 112, 190, 0) 70%); }
.founders { background: radial-gradient(55vmax 55vmax at 100% 45%, rgba(201, 168, 76, 0.07), rgba(201, 168, 76, 0) 70%); }
/* La rayita de las etiquetas de sección se dibuja al entrar. */
.has-scroll-fx .section .eyebrow::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.has-scroll-fx .section .eyebrow.is-in::before { transform: none; }

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; overflow-x: clip; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(24px, 6vh, 64px)); padding-bottom: clamp(48px, 9vh, 110px); transform-origin: 50% 40vh; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-areas: "copy visual" "copy countdown";
  align-items: center; column-gap: clamp(32px, 5vw, 72px); row-gap: 4px;
}
.hero__copy { grid-area: copy; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero__title { display: flex; flex-direction: column; gap: 6px; }
.hero__line { display: block; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em; }
.hero__line--gold { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; padding-bottom: 0.08em; }
.silver.is-split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
.silver.is-split .char, .silver.is-split .line { background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.is-split .char-mask, .is-split .line-mask { padding-block: 0.1em; margin-block: -0.1em; }

/* Formulario: sencillo, como los de Apple (el inicio de sesión de Apple ID). Dos campos agrupados con relleno sutil:
   la etiqueta sube al escribir, el campo activo se marca con un anillo plateado y aparece una marca cuando el dato
   es válido. Debajo, la casilla, una única acción (píldora blanca con flecha) y la letra pequeña. */
.waitlist {
  --wl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; margin-top: 10px;
}
.field-group {
  position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--fill-subtle);
  transition: opacity 0.3s ease;
}
/* El borde va por encima de los campos para que el fondo del campo activo no lo tape. */
.field-group::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.field { position: relative; }
.field + .field::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; z-index: 1; height: 1px;
  background: rgba(255, 255, 255, 0.1); transition: opacity 0.2s ease;
}
.field:focus-within + .field::before, .field + .field:focus-within::before { opacity: 0; }
.field input {
  position: relative; z-index: 1; display: block; width: 100%; height: 58px; margin: 0; padding: 24px 48px 8px 16px; border: 0; border-radius: 0;
  background: transparent; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--text);
  caret-color: var(--text-strong); text-overflow: ellipsis; transition: background-color 0.2s ease, box-shadow 0.25s var(--wl-ease);
}
.field:first-child input { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.field:last-child input { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.field input:hover { background: rgba(255, 255, 255, 0.025); }
.field input:focus { outline: none; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1.5px rgba(207, 211, 229, 0.8); }
.field input:focus-visible { outline: none; }
.field input[aria-invalid="true"] { background: rgba(255, 155, 155, 0.06); box-shadow: inset 0 0 0 1.5px var(--error); }
.field label {
  position: absolute; left: 16px; right: 48px; top: 29px; transform: translateY(-50%); transform-origin: 0 50%; pointer-events: none;
  font-size: 1.0625rem; line-height: 1.2; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform 0.25s var(--wl-ease), color 0.2s ease;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label { transform: translateY(calc(-50% - 12px)) scale(0.72); }
.field input:focus + label { color: var(--text-accent); }
.field input[aria-invalid="true"] + label { color: var(--error); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 99999s ease 0s; }
/* Marca de «dato válido»: aparece en cuanto el nombre o el email tienen buena pinta. */
.field__ok {
  position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: var(--text-strong);
  opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.35s var(--wl-ease);
}
.field__ok::after {
  content: ""; width: 8px; height: 4.5px; margin-top: -2px;
  border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg);
}
.field input:valid:not(:placeholder-shown):not([aria-invalid="true"]) ~ .field__ok { opacity: 1; transform: scale(1); }

/* Ayuda con el email: el resto sugerido en gris dentro del campo y botones con los dominios más usados. */
.field__ghost {
  position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; padding: 24px 48px 8px 16px; overflow: hidden; pointer-events: none;
  font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.005em; white-space: pre;
}
.field__ghost-typed { visibility: hidden; }
.field__ghost-rest { color: var(--text-muted); }
.email-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; animation: suggest-in 0.3s var(--wl-ease); }
@keyframes suggest-in { from { opacity: 0; transform: translateY(-4px); } }
.email-suggest button {
  min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-accent); font-size: 0.8125rem; font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--wl-ease);
}
.email-suggest button:hover { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.email-suggest button:active { transform: scale(0.95); }
.email-fix { margin: -2px 0 0; animation: suggest-in 0.3s var(--wl-ease); }
.email-fix button {
  min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 0.875rem; color: var(--text-accent); text-decoration: underline; text-decoration-color: rgba(207, 211, 229, 0.45); text-underline-offset: 3px;
}
.email-fix button:hover { color: var(--text); text-decoration-color: currentColor; }

.consent {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: -6px 0 -2px; padding: 0 2px;
  font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease;
}
.consent a { color: var(--text-accent); text-decoration-color: rgba(207, 211, 229, 0.45); }
.consent a:hover { color: var(--text); text-decoration-color: currentColor; }
.consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.32); background: var(--fill-subtle); display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s var(--wl-ease);
}
.consent input::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg) scale(0); transition: transform 0.3s var(--wl-ease);
}
.consent:hover input { border-color: rgba(255, 255, 255, 0.5); }
.consent input:active { transform: scale(0.88); }
.consent input:checked { background: #FFFFFF; border-color: #FFFFFF; }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent input:focus-visible { outline-offset: 3px; border-radius: 50%; }
.consent input[aria-invalid="true"] { border-color: var(--error); background: rgba(255, 155, 155, 0.1); }

/* La acción: píldora blanca a todo el ancho, el texto centrado y la flecha en un círculo de tinta. */
.waitlist__btn {
  --btn-h: 56px; position: relative; width: 100%; padding: 0 60px; border-radius: 999px;
  font-size: 1.0625rem; letter-spacing: -0.005em;
}
.waitlist__btn:hover { transform: none; box-shadow: 0 14px 38px rgba(207, 211, 229, 0.22); }
.waitlist__btn:active { transform: scale(0.985); }
.waitlist__btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.waitlist__go {
  position: absolute; top: 50%; right: 8px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #FFFFFF;
}
.waitlist__btn .waitlist__go svg { width: 18px; height: 18px; opacity: 0.72; transition: transform 0.35s var(--wl-ease), opacity 0.25s ease; }
.waitlist__btn:hover .waitlist__go svg { opacity: 1; transform: translateX(2px); }
/* Como en Apple ID: cuando todo está listo, la flecha se enciende y da un pequeño empujón. */
.waitlist:has(#wl-name:valid):has(#wl-email:valid):has(#wl-consent:checked) .waitlist__btn:not([disabled]) .waitlist__go svg { opacity: 1; animation: wl-nudge 0.7s var(--wl-ease) 1; }
@keyframes wl-nudge { 40% { transform: translateX(4px); } }
/* Enviando: la flecha deja sitio al spinner dentro del círculo y los campos se apagan un poco. */
.waitlist__btn[disabled] { opacity: 1; cursor: progress; transform: none; }
.waitlist__btn[disabled] .waitlist__go svg { opacity: 0; transform: translateX(6px); }
.waitlist__btn .spinner { position: absolute; top: 50%; right: 19px; margin-top: -9px; border-color: rgba(255, 255, 255, 0.24); border-top-color: #FFFFFF; }
.waitlist:has(#wl-submit[disabled]) .field-group, .waitlist:has(#wl-submit[disabled]) .consent { opacity: 0.6; pointer-events: none; }

.form-error {
  margin: 0; display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-caption); font-weight: 500; line-height: 1.45; color: var(--error);
}
.form-error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 0.1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 10.6a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zM8 3.4c-.6 0-1 .5-1 1.1l.3 4.6a.7.7 0 0 0 1.4 0L9 4.5c0-.6-.4-1.1-1-1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm0 10.6a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zM8 3.4c-.6 0-1 .5-1 1.1l.3 4.6a.7.7 0 0 0 1.4 0L9 4.5c0-.6-.4-1.1-1-1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-error:empty { display: none; }
.form-error:not(:empty) { animation: wl-reveal 0.35s var(--wl-ease) both; }
@keyframes wl-reveal { from { opacity: 0; transform: translateY(-4px); } }

/* Letra pequeña: la ventaja de fundador primero (con un punto de oro) y debajo la promesa de no hacer spam. */
.waitlist__note { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.waitlist__note > span { position: relative; padding-left: 14px; }
.waitlist__perk { color: var(--text-body); }
.waitlist__perk::before {
  content: ""; position: absolute; left: 1px; top: calc(0.75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(20, 22, 31, 0.25); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (forced-colors: active) {
  .field-group { border: 1px solid CanvasText; }
  .field input:focus { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Éxito: tarjeta mínima y centrada. Sello dorado que se dibuja, una frase, la línea de lo que pasa ahora y compartir. */
.success { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 440px; padding: clamp(26px, 3.4vw, 34px) clamp(20px, 3vw, 30px) 18px; text-align: center; }
.success:focus { outline: none; }
.success:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.success__title { margin: 4px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-strong); text-wrap: balance; overflow-wrap: anywhere; }
.success__text { margin: -4px 0 0; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5; overflow-wrap: anywhere; max-width: 34ch; }
.demo-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); text-align: left; }

.welcome { position: relative; width: 64px; aspect-ratio: 1; }
.welcome__glow { position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 168, 76, 0.3), rgba(201, 168, 76, 0) 72%); pointer-events: none; }
.welcome__badge { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.welcome__track { fill: rgba(201, 168, 76, 0.07); stroke: rgba(255, 255, 255, 0.1); stroke-width: 3; }
.welcome__ring { fill: none; stroke: url(#welcome-g); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.welcome__tick { fill: none; stroke: var(--gold-light); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.welcome__ray { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); pointer-events: none; }
.welcome__ray i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 8px var(--gold); opacity: 0; }

/* Lo que pasa ahora: tres puntos en una línea fina. */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 340px; margin: 6px 0 2px; padding: 0; list-style: none; --fill: 1; }
.steps::before, .steps::after { content: ""; position: absolute; top: 5px; left: calc(100% / 6); height: 1px; }
.steps::before { right: calc(100% / 6); background: rgba(255, 255, 255, 0.14); }
.steps::after { width: calc(100% / 3); background: var(--gold-progress); transform: scaleX(var(--fill)); transform-origin: 0 50%; }
.steps__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.steps__dot { position: relative; display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; background: #0D0F19; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.steps__dot svg { display: none; }
.steps__item.is-done .steps__dot { background: var(--gold); box-shadow: 0 0 10px var(--gold-halo); }
.steps__item.is-next .steps__dot { box-shadow: inset 0 0 0 1.5px var(--gold); }
.steps__item.is-next .steps__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: steps-ping 2.4s ease-out infinite; }
@keyframes steps-ping { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
.steps__label { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.steps__item.is-done .steps__label { color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) { .steps__item.is-next .steps__dot::after { animation: none; } }

/* Compartir: etiqueta pequeña y tres botones redondos solo con icono. */
.share { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.share__label { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.share__buttons { display: flex; gap: 10px; }
.share__btn {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-strong); text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.share__btn[hidden] { display: none; }
.share__btn:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.share__btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.share__btn svg { width: 20px; height: 20px; }
.share__icon-done { display: none; color: var(--gold); }
.share__btn.is-done .share__icon-link { display: none; }
.share__btn.is-done .share__icon-done { display: block; }
.share__status { margin: 0; min-height: 1.2em; font-size: 0.75rem; color: var(--text-accent); overflow-wrap: anywhere; }
.success .link-btn { min-height: 40px; margin: -6px 0 0; padding: 0; font-size: 0.75rem; }

/* =========================================================
   Invita: tres pasos y una escalera de ventajas que sube con el scroll
   ========================================================= */
/* Invita: tipografía y líneas finas, sin tarjetas. Brillo dorado suave en el centro que se apaga antes de los bordes (sin corte con la sección siguiente). */
.refer { background: radial-gradient(70% 36% at 50% 62%, rgba(201, 168, 76, 0.06), rgba(201, 168, 76, 0) 100%); }
.refer__head { margin-inline: auto; align-items: center; text-align: center; }
.refer__head .body-copy { max-width: 52ch; }
.refer__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: clamp(56px, 8vh, 88px) 0 0; padding: 0; list-style: none; }
.refer-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.refer-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px; background: linear-gradient(90deg, #F0D080, #C9A84C); }
.refer-step__num {
  margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 80%); -webkit-background-clip: text; background-clip: text;
}
.refer-step h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; color: var(--text-strong); }
.refer-step p { margin: 0; max-width: 34ch; color: var(--text-body); font-size: var(--fs-caption); line-height: 1.6; }

/* Cuanta más gente traes, más consigues: una línea fina con cuatro hitos, de menos a más; se llena de oro al llegar a la sección. */
.ladder { margin-top: clamp(72px, 10vh, 112px); }
.ladder__label { display: flex; justify-content: center; margin: 0 0 clamp(32px, 4.5vw, 48px); }
.ladder__body { --tg: clamp(12px, 2vw, 24px); position: relative; }
.ladder__track { position: absolute; z-index: 0; top: 5px; left: calc((100% - 3 * var(--tg)) / 8); right: calc((100% - 3 * var(--tg)) / 8); height: 1px; background: rgba(255, 255, 255, 0.14); }
.ladder__fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(240, 208, 128, 0.4), #F0D080 70%, #C9A84C); box-shadow: 0 0 10px rgba(240, 208, 128, 0.5); transform-origin: 0 50%; }
.ladder__tiers { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tg); margin: 0; padding: 0; list-style: none; }
.tier { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.tier__icon { flex: none; width: 11px; height: 11px; margin-bottom: 18px; border-radius: 50%; background: var(--bg, #05060C); box-shadow: inset 0 0 0 1.5px rgba(240, 208, 128, 0.85); }
.tier--top .tier__icon { background: var(--gold-metal); box-shadow: 0 0 0 5px rgba(240, 208, 128, 0.12), 0 0 18px rgba(240, 208, 128, 0.6); }
.tier__get { color: var(--text-strong); font-size: clamp(0.95rem, 0.88rem + 0.2vw, 1.05rem); font-weight: 600; line-height: 1.25; text-wrap: balance; }
.tier--top .tier__get { background: linear-gradient(110deg, #C9A84C 0%, #F0D080 30%, #FFF5D2 45%, #F0D080 58%, #C9A84C 80%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-shine 4.5s ease-in-out infinite; }
.tier__when { color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.4; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .tier--top .tier__get { animation: none; background-position: 40% 0; } }

.refer__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(56px, 8vh, 80px); text-align: center; }
.refer__cta-icon { display: inline-grid; }
.refer__cta-icon svg { width: 20px; height: 20px; }
.refer__fine { margin: 0; max-width: 60ch; color: var(--text-muted); font-size: var(--fs-caption); }
.refer__fine a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .refer__head { align-items: flex-start; text-align: left; margin-inline: 0; }
  .refer__steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .refer-step { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); grid-template-areas: "num title" "num text"; column-gap: 18px; row-gap: 6px; padding-top: 20px; }
  .refer-step__num { grid-area: num; margin: 0; font-size: 2.6rem; }
  .refer-step h3 { grid-area: title; font-size: 1.25rem; align-self: end; }
  .refer-step p { grid-area: text; }
  .ladder__label { justify-content: flex-start; }
  .ladder__track { top: 9px; bottom: 31px; left: 5px; right: auto; width: 1px; height: auto; }
  .ladder__fill { background: linear-gradient(180deg, rgba(240, 208, 128, 0.4), #F0D080 70%, #C9A84C); transform-origin: 50% 0; }
  .ladder__tiers { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tier { display: grid; grid-template-columns: 11px minmax(0, 1fr); grid-template-areas: "icon get" ". when"; column-gap: 18px; row-gap: 4px; align-items: center; text-align: left; }
  .tier__icon { grid-area: icon; margin: 0; }
  .tier__get { grid-area: get; }
  .tier__when { grid-area: when; }
  .refer__cta { align-items: stretch; }
  .refer__fine { text-align: left; }
}

/* =========================================================
   Invitar: botón flotante siempre a mano y ventana con tu enlace personal
   ========================================================= */
/* Botón flotante y ventana de invitar: cristal (fondo translúcido y desenfocado), sencillo, con el oro de marca con brillo. */
.gold-shine {
  background: linear-gradient(110deg, #C9A84C 0%, #F0D080 30%, #FFF5D2 45%, #F0D080 58%, #C9A84C 80%, #C9A84C 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-shine 4.5s ease-in-out infinite;
}
@keyframes gold-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.invite-fab {
  position: fixed; z-index: 45; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; height: 56px; padding: 0 6px; border: 0; border-radius: 999px; cursor: pointer; isolation: isolate;
  background: rgba(22, 24, 44, 0.9); color: var(--text-strong); font: 600 0.95rem/1 var(--font-body);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0s linear 0s, box-shadow 0.3s ease, background-color 0.3s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .invite-fab { background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.08); backdrop-filter: blur(18px) saturate(190%) brightness(1.08); }
}
/* Borde de cristal: más luz arriba a la izquierda y abajo a la derecha, como el vidrio de Apple. */
.invite-fab::before, .invite::after, .invite__pass::before {
  content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.04) 65%, rgba(255, 255, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.invite-fab[hidden] { display: none; }
.invite-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(240, 208, 128, 0.12); }
.invite-fab:active { transform: scale(0.97); }
.invite-fab:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.invite-fab__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.invite-fab__icon svg { width: 21px; height: 21px; }
.invite-fab__text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 15rem; padding: 0 18px 0 12px; overflow: hidden; white-space: nowrap; text-align: left;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.1s;
}
.invite-fab__label { font-size: 0.95rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-strong); }
.invite-fab__sub { font-size: 0.76rem; font-weight: 600; line-height: 1.15; }
/* En el móvil, mientras bajas, el botón se recoge en el icono; al parar o subir vuelve a abrirse. */
.invite-fab.is-compact .invite-fab__text { max-width: 0; padding: 0; opacity: 0; transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease; }
/* Fuera de escena durante la intro, con la ventana abierta y mientras escribes en el formulario del móvil. */
.intro-on .invite-fab, .invite-open .invite-fab, .invite-fab.is-away, .invite-fab.is-hidden {
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.96); pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, visibility 0s linear 0.35s;
}
.intro-on .invite-fab .gold-shine, .invite-fab.is-hidden .gold-shine, .invite-fab.is-compact .gold-shine { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .gold-shine { animation: none; background-position: 40% 0; } }
@media (max-width: 420px) {
  .invite-fab { height: 54px; padding: 0 5px; }
  .invite-fab__icon { width: 42px; height: 42px; }
  .invite-fab__text { padding: 0 16px 0 11px; }
}
/* Al final de la página el botón no tapa los últimos enlaces del pie. */
@media (max-width: 1024px) { .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }

/* La ventana: en el ordenador sale desde el botón (abajo a la derecha); en el móvil sube desde abajo. */
.invite {
  width: min(392px, calc(100% - 32px)); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible;
  margin: auto calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) auto;
  background: transparent; color: var(--text); border-radius: 28px;
}
.invite:not([open]) { display: none; }
.invite::backdrop { background: rgba(3, 4, 10, 0.28); }
.invite-open, .invite-open body { overflow: hidden; }
.invite__panel {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 20px 20px 16px; border-radius: 28px; transform-origin: 100% 100%;
  background: rgba(16, 18, 36, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .invite__panel {
    background: radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%), rgba(30, 32, 62, 0.4);
    -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.05); backdrop-filter: blur(40px) saturate(190%) brightness(1.05);
  }
}
.invite__panel::-webkit-scrollbar { display: none; }
.invite__grab { display: none; }
.invite__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.invite__title { margin: 0; padding-top: 4px; font-family: var(--font-display); font-size: clamp(1.45rem, 1.3rem + 0.5vw, 1.65rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.invite__close {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: -2px -4px 0 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: var(--text-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background-color 0.2s ease, color 0.2s ease;
}
.invite__close:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); }
.invite__close svg { width: 16px; height: 16px; }
.invite__text { margin: -8px 0 0; color: var(--text-body); font-size: 0.92rem; line-height: 1.45; }

/* El ticket: cristal claro con un talón a la derecha, separado por una línea de puntos y con dos muescas recortadas. */
.invite__pass {
  --stub: 116px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); min-height: 80px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  -webkit-mask: radial-gradient(circle 9px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 9px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 9px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
/* Brillo que cruza el ticket al abrir la ventana. */
.invite__pass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--x, -110%));
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0) 62%);
}
.invite__pass-main { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 16px; }
.invite__pass-logo { width: 52px; height: auto; margin-bottom: 1px; }
.invite__pass-label { margin: 0; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(207, 211, 229, 0.72); }
.invite__pass-url { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.78rem/1.2 var(--font-card); color: var(--text-accent); }
.invite__pass-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border-left: 1.5px dashed rgba(255, 255, 255, 0.22); }
.invite__pass-code-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(207, 211, 229, 0.68); }
.invite__pass-code { font: 600 1.28rem/1 var(--font-card); letter-spacing: 0.06em; }
.invite__pass.is-empty .invite__pass-code { opacity: 0.5; letter-spacing: 0.12em; }
.invite__pass.is-empty .invite__pass-url { font-family: var(--font-body); color: var(--text-muted); }

/* Lo que consigues: una lista sencilla, de menos a más; el nombre a la izquierda y cuándo, a la derecha. */
.invite__perks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.invite__perks li { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.invite__perks li + li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.invite__perk-icon { flex: none; display: grid; place-items: center; width: 20px; color: var(--gold-light); opacity: calc(0.55 + var(--lvl) * 0.11); }
.invite__perk-icon svg { width: 18px; height: 18px; }
.invite__perk { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; min-width: 0; padding: 6px 0; }
.invite__perk strong { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.invite__perk span { font-size: 0.76rem; line-height: 1.3; color: var(--text-muted); }

.invite__mine, .invite__join { display: flex; flex-direction: column; gap: 10px; }
.invite__mine[hidden], .invite__join[hidden] { display: none; }
.invite__cta { --btn-h: 52px; padding: 8px 56px 8px 24px; font-size: 1rem; line-height: 1.2; white-space: normal; text-align: center; }
.invite__cta .waitlist__go svg { width: 18px; height: 18px; opacity: 0.85; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; }
.invite__cta:hover .waitlist__go svg { opacity: 1; transform: translateX(2px); }
#invite-share:hover .waitlist__go svg { transform: translateY(-2px); }
.invite__cta.is-done .waitlist__go { background: var(--gold-metal); color: #2A1F00; }
.invite__divider { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.invite__divider::before, .invite__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }

/* Otras formas de compartir: círculos de cristal con su nombre debajo. */
.invite__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.invite__app {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 2px 0; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font: 500 0.75rem/1.2 var(--font-body); text-decoration: none; transition: color 0.2s ease;
}
.invite__app[hidden] { display: none; }
.invite__app:hover { color: var(--text); }
.invite__app-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)); color: var(--text-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.invite__app:hover .invite__app-icon { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(240, 208, 128, 0.45); }
.invite__app-icon svg { width: 20px; height: 20px; }
.invite__app .share__icon-done { display: none; }
.invite__app.is-done .share__icon-link { display: none; }
.invite__app.is-done .share__icon-done { display: block; }
.invite__app.is-done .invite__app-icon { color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(240, 208, 128, 0.5); }
.invite__status { margin: -8px 0 0; min-height: 1.2em; text-align: center; font-size: 0.8rem; color: var(--gold-light); overflow-wrap: anywhere; }
.invite__status:empty { margin-top: -16px; min-height: 0; }
.invite__fine { margin: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; font-size: 0.75rem; line-height: 1.5; color: var(--text-muted); }
.invite__fine a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Pantallas bajas (móvil en horizontal, ventanas pequeñas): la ventana aprovecha todo el alto. */
@media (max-height: 520px) and (min-width: 561px) {
  .invite { margin-block: auto 8px; }
  .invite__panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}
/* En el móvil la ventana sube desde abajo, a todo el ancho, con su asa. */
@media (max-width: 560px) {
  .invite { width: 100%; margin: auto 0 0 0; border-radius: 28px 28px 0 0; }
  .invite__panel {
    max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); gap: 14px; padding: 8px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0; transform-origin: 50% 100%;
  }
  .invite__pass { min-height: 76px; }
  .invite__grab { display: block; flex: none; width: 38px; height: 5px; margin: 0 auto; border-radius: 999px; background: rgba(255, 255, 255, 0.24); }
}
@media (max-width: 360px) {
  .invite__pass { --stub: 104px; }
  .invite__pass-code { font-size: 1.12rem; }
}

/* Cuenta atrás: números grandes con contorno y degradado, como los 01 · 02 · 03 de las pantallas, sin casillas. */
.countdown {
  grid-area: countdown; align-self: start; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(100%, 540px); container-type: inline-size;
}
.countdown__label {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 6px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label);
}
.countdown__label time { color: var(--text-strong); }
.countdown__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; width: 100%; }
.cd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
/* Entre unidad y unidad, un filo vertical muy suave en lugar de los dos puntos. */
.cd + .cd::before {
  content: ""; position: absolute; left: 0; top: 22%; height: 46%; width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
.cd__num {
  display: block; overflow: hidden; padding: 0.04em 0.04em 0; font-family: var(--font-display);
  font-size: clamp(3rem, 1.9rem + 3.2vw, 5rem); font-size: min(16.5cqw, 5.25rem); line-height: 1; letter-spacing: -0.03em;
}
.cd__num span {
  display: inline-block; padding-bottom: 0.04em; color: transparent; -webkit-text-stroke: 1.25px rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 52%, rgba(255, 255, 255, 0) 92%);
  -webkit-background-clip: text; background-clip: text;
}
.cd__unit { font-size: 0.72rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.countdown__done { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; text-align: center; }

/* =========================================================
   Tarjetas 3D (onboarding y fundador)
   ========================================================= */
.hero__visual { grid-area: visual; align-self: end; position: relative; min-width: 0; display: grid; place-items: center; }
.stage { position: relative; width: 100%; height: clamp(340px, 38vw, 480px); display: grid; place-items: center; perspective: 1100px; }
.stage__orbit {
  position: absolute; left: 50%; top: 50%; width: min(620px, 128%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 30% at 40% 38%, rgba(90, 112, 190, 0.34), rgba(90, 112, 190, 0.12) 55%, rgba(90, 112, 190, 0) 100%),
    radial-gradient(ellipse 26% 26% at 62% 42%, rgba(185, 198, 232, 0.16), rgba(185, 198, 232, 0) 100%),
    radial-gradient(ellipse 30% 30% at 58% 62%, rgba(38, 50, 94, 0.4), rgba(38, 50, 94, 0) 100%),
    radial-gradient(ellipse 26% 26% at 38% 60%, rgba(142, 156, 201, 0.22), rgba(142, 156, 201, 0) 100%);
  animation: orbit 24s linear infinite; will-change: rotate;
}
.stage__floor { position: absolute; left: 50%; top: 50%; width: min(340px, 70%); height: 40px; translate: -50% 150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent); filter: blur(10px); }
@keyframes orbit { to { rotate: 360deg; } }

.card3d { --w: clamp(280px, 31vw, 430px); position: relative; width: var(--w); aspect-ratio: 300 / 190; transform-style: preserve-3d; will-change: transform; container-type: inline-size; }
.card3d__flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.card-face {
  position: absolute; inset: 0; border-radius: 7.33cqw; transform-style: flat;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.card-face--back { transform: rotateY(180deg) translateZ(2.2cqw); }
.card-face--front { transform: translateZ(0); }
.card-edge { position: absolute; inset: 0; border-radius: 7.33cqw; background: #0a0d1a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.card-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.card-glare { position: absolute; inset: 0; opacity: var(--go, 0); transition: opacity 0.3s;
  background: radial-gradient(28cqw circle at var(--gx, 30%) var(--gy, 20%), rgba(214, 224, 255, 0.22), rgba(214, 224, 255, 0.06) 55%, transparent 100%); }
.card-sheen { position: absolute; top: -60%; bottom: -60%; left: 0; width: 55%; transform: translateX(-140%) rotate(18deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.015) 20%, rgba(255, 245, 225, 0.07) 38%, rgba(240, 208, 128, 0.13) 50%, rgba(255, 245, 225, 0.07) 62%, rgba(255, 255, 255, 0.015) 80%, rgba(255, 255, 255, 0) 100%);
  animation: sheen 9s cubic-bezier(0.45, 0, 0.25, 1) 2s infinite; }
@keyframes sheen { 0% { transform: translateX(-140%) rotate(18deg); } 40%, 100% { transform: translateX(300%) rotate(18deg); } }
.card-layer { position: absolute; inset: 0; padding: 6.67cqw 7.33cqw; display: flex; flex-direction: column; pointer-events: none; }
.card3d--founder .card-edge { background: #1a140a; box-shadow: inset 0 0 0 1px rgba(240, 208, 128, 0.12); }

/* Tarjeta de bienvenida del onboarding (réplica de la app) */
.ocard {
  background: linear-gradient(135deg, #2E3756 0%, #161C33 48%, #0A0E1D 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 13cqw 26cqw rgba(0, 0, 0, 0.6), 0 0 20cqw rgba(90, 112, 190, 0.25);
}
.ocard__top { display: flex; align-items: center; justify-content: space-between; }
.ocard__lockup { height: 8cqw; width: auto; --lockup-mark: #FFFFFF; --lockup-word: #FFFFFF; opacity: 0.95; }
.ocard__nfc { width: 6.7cqw; height: 6.7cqw; color: rgba(255, 255, 255, 0.7); }
.ocard__chip { width: 13.3cqw; height: 10cqw; margin-top: 6cqw; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 0, 0, 0.45)); }
.ocard__bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; font-family: var(--font-card); font-weight: 500; font-size: 4cqw; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.ocard__bottom span:first-child { letter-spacing: 0.18em; }
.ocard__bottom span:last-child { letter-spacing: 0.14em; }

/* Tarjeta de miembro fundador (réplica de la bienvenida de pago) */
.fcard {
  --mc-bg: linear-gradient(145deg, #2a2418 0%, #0f0d09 60%, #1c160b 100%);
  --mc-tx: #F0D080;
  background: var(--mc-bg);
  box-shadow: inset 0 1px 0 rgba(240, 208, 128, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(240, 208, 128, 0.18), 0 12cqw 26cqw rgba(0, 0, 0, 0.55), 0 0 22cqw var(--gold-halo);
  color: var(--mc-tx);
}
.fcard .card-layer { justify-content: space-between; }
.fcard__top { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.fcard__who { display: flex; align-items: center; gap: 2.7cqw; flex: 1 1 auto; min-width: 0; }
.fcard__mark { width: 6.4cqw; height: 10cqw; flex: none; fill: currentColor; }
.fcard__name { font-size: 4.3cqw; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fcard__tag { flex: none; font-size: 3.3cqw; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.fcard__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.fcard__label { display: block; font-size: 3.3cqw; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.75; margin-bottom: 1.3cqw; }
.fcard__num { display: block; font-family: var(--font-display); font-size: 12cqw; letter-spacing: -0.015em; line-height: 1; }
.fcard__word { height: 6.4cqw; width: auto; flex: none; --lockup-mark: currentColor; --lockup-word: currentColor; opacity: 0.9; }
.fcard .fcard__num { background: linear-gradient(180deg, #F0D080 0%, #C9A84C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Reverso: banda magnética y firma */
.bcard { background: linear-gradient(145deg, #1d1a12 0%, #0b0a07 60%, #17130a 100%); color: #F0D080;
  box-shadow: inset 0 1px 0 rgba(240, 208, 128, 0.3), inset 0 0 0 1px rgba(240, 208, 128, 0.14), 0 12cqw 26cqw rgba(0, 0, 0, 0.55); }
.bcard__stripe { position: absolute; left: 0; right: 0; top: 11cqw; height: 13cqw; background: linear-gradient(180deg, #050403, #15120c); }
.bcard__sign { position: absolute; left: 7.3cqw; right: 26cqw; top: 31cqw; height: 9cqw; border-radius: 1.4cqw; display: flex; align-items: center; padding-inline: 3cqw;
  background: repeating-linear-gradient(135deg, rgba(251, 231, 174, 0.14) 0 1.2cqw, rgba(251, 231, 174, 0.06) 1.2cqw 2.4cqw); font-family: var(--font-card); font-size: 3.3cqw; letter-spacing: 0.12em; }
.bcard__text { position: absolute; left: 7.3cqw; right: 7.3cqw; bottom: 7cqw; display: flex; justify-content: space-between; align-items: flex-end; font-size: 3.3cqw; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.bcard__mark { width: 5cqw; height: 8cqw; fill: currentColor; opacity: 0.9; }

/* =========================================================
   Secciones
   ========================================================= */
.section { position: relative; padding-block: clamp(80px, 13vh, 150px); }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.section-head h2 { font-size: var(--fs-h1); }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(36px, 6vh, 64px); color: var(--text-muted); text-decoration: none; font-size: var(--fs-caption); }
.scroll-cue__line { width: 1px; height: 36px; background: linear-gradient(180deg, var(--text-muted), transparent); }
.scroll-cue:hover { color: var(--text); }

/* Las 3 pantallas con parallax */
.pillars { overflow-x: clip; }
.pillars .container { position: relative; }
.journey { position: absolute; left: 50%; top: 0; width: 1px; height: 0; display: none; pointer-events: none; background: rgba(255, 255, 255, 0.08); }
.journey__fill { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(180deg, #F0D080, #C9A84C); box-shadow: 0 0 12px rgba(201, 168, 76, 0.35); }
.journey__node {
  position: absolute; left: 50%; top: 50%; z-index: 1; display: none; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25); transition: background-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
}
.journey__node.is-on { background: #F0D080; transform: scale(1.2); box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18), 0 0 18px rgba(201, 168, 76, 0.55); }
@media (min-width: 761px) { .has-scroll-fx .journey, .has-scroll-fx .journey__node { display: block; } }
/* En el móvil la línea va por el margen izquierdo: un raíl fino que se llena de oro y enciende cada pantalla al llegar. */
@media (max-width: 760px) {
  .has-scroll-fx .journey, .has-scroll-fx .journey__node { display: block; }
  .journey { left: 7px; }
  .journey__node { left: calc(7px - var(--gutter) + 0.5px); top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
}
.pillar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); min-height: 100vh; min-height: 100svh; padding-block: clamp(60px, 10vh, 120px); }
.pillar__frame { position: relative; z-index: 1; min-width: 0; display: grid; place-items: center; }
.pillar--flip .pillar__frame { order: 2; }
.pillar__media { position: relative; margin: 0; display: grid; place-items: center; will-change: transform; perspective: 1400px; }
.pillar__media::before { content: ""; position: absolute; width: 95%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(90, 112, 190, 0.45) 0%, rgba(38, 50, 94, 0.25) 45%, transparent 70%); filter: blur(10px); }
.pillar__img { position: relative; width: calc(min(290px, 62vw, calc((100vh - var(--header-h) - 40px) * 0.395)) * 1.2); width: calc(min(290px, 62vw, calc((100svh - var(--header-h) - 40px) * 0.395)) * 1.2); height: auto; transform-origin: 50% 50%; border-radius: 14% / 6.6%; box-shadow: 0 40px 50px rgba(0, 0, 0, 0.5); }
.pillar__copy { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pillar__num {
  position: absolute; z-index: -1; top: -0.62em; left: -0.06em; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-size: clamp(7rem, 4rem + 9vw, 13rem); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 75%); -webkit-background-clip: text; background-clip: text;
}
.pillar__copy h3 { font-size: var(--fs-h1); }
.kicker { align-self: flex-start; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: #0E1120; box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-accent); }
.facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 46ch; }
.facts li { display: flex; gap: 12px; align-items: baseline; color: var(--text-body); font-size: var(--fs-caption); line-height: 1.5; }
.teaser {
  margin: 4px 0 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: var(--fill-subtle); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-accent); font-size: var(--fs-caption); font-weight: 500;
}
.teaser svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.facts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-accent); transform: translateY(-2px); }

/* Rangos: carrusel 3D de tarjetas */
.ranks { overflow-x: clip; }
.ranks__intro { display: block; }
.ranks__stage { margin-top: clamp(32px, 6vh, 64px); }
.ranks__pin { margin-top: clamp(32px, 6vh, 64px); }
.ranks__pin > .ranks__stage { position: sticky; margin-top: 0; }
.ranks__viewport { overflow-x: auto; scrollbar-width: none; padding-block: 30px 20px; perspective: 1400px; }
/* Al fijarse con pin, el escenario sale del recorte de la sección: el visor recorta sus tarjetas 3D. */
.ranks__viewport::-webkit-scrollbar { display: none; }
.ranks__viewport.is-driven .ranks__track { padding-inline: max(var(--gutter), calc(50% - clamp(115px, 12vw, 150px))); }
.ranks__viewport.is-driven { overflow-x: clip; overflow-y: visible; }
.ranks__track { display: flex; gap: clamp(18px, 2.4vw, 32px); width: max-content; margin: 0; list-style: none; padding: 0 var(--gutter); transform-style: preserve-3d; will-change: transform; }
.rank { flex: none; width: clamp(230px, 24vw, 300px); display: flex; flex-direction: column; gap: 14px; transform-style: preserve-3d; will-change: transform; }
.rank__card {
  position: relative; aspect-ratio: 300 / 190; border-radius: 22px; padding: 18px 20px; overflow: hidden; container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--tx); background: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 26px 50px rgba(0, 0, 0, 0.5);
}
.rank__shade { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #04050B; opacity: 0; pointer-events: none; will-change: opacity; }
.rank__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.12) 100%); mix-blend-mode: soft-light; }
.rank__top { display: flex; justify-content: space-between; align-items: center; }
.rank__brand { display: block; height: 20px; width: auto; --lockup-mark: currentColor; --lockup-word: currentColor; }
.rank__badge { width: 36px; height: 42px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.rank__bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.rank__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -0.01em; }
/* Campeón: la tarjeta negra y oro de la app (sin marco dorado): brillo cálido arriba a la derecha, trama fina en
   diagonal, el escudo con espadas y corona como marca de agua y una franja de luz que la cruza de vez en cuando. */
.rank--champion .rank__card {
  background:
    repeating-linear-gradient(135deg, rgba(240, 208, 128, 0.05) 0 1px, transparent 1px 8px),
    linear-gradient(115deg, transparent 40%, rgba(240, 208, 128, 0.16) 50%, transparent 60%),
    radial-gradient(80% 90% at 85% 10%, rgba(201, 168, 76, 0.3), transparent 60%),
    linear-gradient(160deg, #241D12 0%, #0E0C08 60%, #1C150B 100%);
  box-shadow: inset 0 1px 0 rgba(240, 208, 128, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 26px 50px rgba(0, 0, 0, 0.55), 0 0 60px rgba(201, 168, 76, 0.12);
}
.rank--champion .rank__card::after { background: linear-gradient(105deg, transparent 30%, rgba(240, 208, 128, 0.22) 48%, rgba(255, 255, 255, 0.32) 50%, rgba(240, 208, 128, 0.22) 52%, transparent 70%);
  mix-blend-mode: screen; transform: translateX(-120%); animation: champ-shine 6s cubic-bezier(0.45, 0, 0.25, 1) 1.5s infinite; }
@keyframes champ-shine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.rank__crest { position: absolute; right: -6%; top: 50%; width: 58%; aspect-ratio: 1; translate: 0 -50%; opacity: 0.32; pointer-events: none; }
.rank--champion .rank__top, .rank--champion .rank__bottom { position: relative; }
.rank--champion .rank__name { background: linear-gradient(180deg, #F0D080 0%, #C9A84C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.xp { margin-top: 10px; display: flex; align-items: center; gap: 14px; }
.xp__label { flex: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.xp__bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xp__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--gold-progress); transform-origin: 0 50%; transform: scaleX(1); }

/* Fundadores */
.founders { overflow-x: clip; }
.founders__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.founders__visual { position: relative; display: grid; place-items: center; min-width: 0; min-height: clamp(320px, 34vw, 440px); perspective: 1200px; }
.founders__halo { position: absolute; width: min(600px, 125%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(201, 168, 76, 0.3) 0%, rgba(201, 168, 76, 0.2) 22%, rgba(201, 168, 76, 0.09) 45%, rgba(201, 168, 76, 0.025) 68%, rgba(201, 168, 76, 0) 100%); }
.founders__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.founders__copy h2 { font-size: var(--fs-h1); }
.founders__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.founders__perks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-body); font-size: var(--fs-caption); line-height: 1.5; }
.founders__perks svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-accent); }
.founders__perks li.is-up svg { color: var(--gold); }
.founders__perks li.is-down svg { color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .founders__perks li.is-up svg { animation: nudge-up 2.4s ease-in-out infinite; }
  .founders__perks li.is-down svg { animation: nudge-down 2.4s ease-in-out infinite; }
}
@keyframes nudge-up { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes nudge-down { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }

/* =========================================================
   FAQ
   ========================================================= */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq__aside { display: flex; flex-direction: column; gap: 26px; position: sticky; top: calc(var(--header-h) + 40px); }
.faq__aside h2 { font-size: var(--fs-h1); }
/* Filtro segmentado: una píldora blanca se desliza bajo la categoría elegida. */
.faq__filters { position: relative; align-self: flex-start; display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--border); }
.faq__filters::-webkit-scrollbar { display: none; }
.chip { position: relative; z-index: 1; flex: none; height: 38px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer; font-size: 0.9rem; font-weight: 500; white-space: nowrap;
  background: transparent; color: var(--text-accent); transition: color 0.35s ease, background-color 0.35s ease; }
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { background: var(--btn-white); color: var(--ink); }
.has-thumb .chip[aria-pressed="true"] { background: transparent; }
.chip__count { margin-left: 6px; font-size: 0.75rem; opacity: 0.55; font-variant-numeric: tabular-nums; }
.seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--btn-white); opacity: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.has-thumb .seg__thumb { opacity: 1; }
.faq__contact { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; border-top: 1px solid var(--border); }
.faq__contact p { margin: 0; color: var(--text-body); font-size: var(--fs-caption); line-height: 1.5; }
.faq__contact strong { color: var(--text-strong); font-size: 1.05rem; font-weight: 600; }
.faq__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.faq__mail-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); transition: border-color 0.3s ease, color 0.3s ease; }
.faq__mail-link:hover { border-color: var(--gold); color: var(--text-strong); }
.faq__mail-link svg { width: 16px; height: 16px; color: var(--gold); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.faq__mail-link:hover svg { transform: translate(2px, -2px); }
.faq__mail code { font-family: var(--font-body); font-size: 1rem; user-select: all; }
/* Lista limpia: filas separadas por una línea fina, pregunta grande y un + que gira al abrir. */
.faq__list { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--border); }
.faq-item { --mx: 50%; --my: 50%; position: relative; border-bottom: 1px solid var(--border); transition: border-color 0.4s ease; }
.faq-item::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(185, 198, 232, 0.07), transparent 70%); }
.faq-item:hover::before, .faq-item.is-open::before { opacity: 1; }
.faq-item.is-open { border-bottom-color: rgba(201, 168, 76, 0.35); }
.faq-item h3 { margin: 0; }
.faq-item__q {
  position: relative; width: 100%; display: flex; align-items: center; gap: 24px; padding: 26px 4px; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-accent); transition: color 0.35s ease;
}
.faq-item__q:hover, .faq-item.is-open .faq-item__q { color: var(--text-strong); }
.faq-item__text { flex: 1; min-width: 0; }
.faq-item__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 1px; background: var(--text-accent); transition: background-color 0.35s ease; }
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item__q:hover .faq-item__icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.faq-item.is-open .faq-item__icon { background: var(--btn-white); box-shadow: none; transform: rotate(45deg); }
.faq-item.is-open .faq-item__icon::before, .faq-item.is-open .faq-item__icon::after { background: var(--ink); }
.faq-item__a { overflow: hidden; }
.faq-item__inner { padding: 0 60px 28px 4px; }
.faq-item__inner p { margin: 0; color: var(--text-body); max-width: 62ch; font-size: 1rem; line-height: 1.7; }
.faq-item.is-filtered { display: none; }

/* =========================================================
   Pie
   ========================================================= */
.site-footer { padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); position: relative; z-index: 1; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand p { margin: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-caption); }
.site-footer nav a { color: var(--text-accent); text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "copy" "countdown"; row-gap: clamp(28px, 6vw, 44px); }
  .stage { height: clamp(260px, 62vw, 380px); }
  .card3d { --w: clamp(250px, 66vw, 380px); }
  .stage__floor { translate: -50% 110px; }
  .ranks__intro, .founders__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__aside { position: static; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .pillar__img { width: calc(min(290px, 34vw, calc((100vh - var(--header-h) - 40px) * 0.395)) * 1.2); width: calc(min(290px, 34vw, calc((100svh - var(--header-h) - 40px) * 0.395)) * 1.2); }
}
@media (max-width: 760px) {
  .pillar { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: calc(10vh + 120px); gap: calc(10lvh + 120px); padding-block: 120px 60px; }
  .pillar--flip .pillar__frame { order: 0; }
  .pillar__img { width: calc(min(230px, 56vw, calc((100vh - var(--header-h) - 40px) * 0.395)) * 1.2); width: calc(min(230px, 56vw, calc((100svh - var(--header-h) - 40px) * 0.395)) * 1.2); }
  .header-actions .btn { display: none; }
  .faq-item__q { padding: 22px 2px; gap: 16px; }
  .faq-item__inner { padding: 0 8px 24px 2px; }
}
@media (max-width: 520px) {
  /* El filtro cabe entero en el móvil: sin contadores y cada opción con su ancho justo. */
  .faq__filters { display: flex; width: 100%; }
  .chip { flex: 1 1 auto; padding: 0 10px; font-size: 0.85rem; }
  .chip__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}