/* Embudo de Miembros Fundadores (FiDi Lab) · marca personal de Pedro Carrillo
   Modo OSCURO sin brillo (D14) + vidrio esmerilado con sombra (tokens.json → vidrio.oscuro).
   Solo los 5 colores de la marca; nada de resplandor, luz de fondo ni degradados de fondo.
   Letras: Geist (títulos) e Inter (texto), servidas desde el propio sitio (OFL).
   2026-10-08 (nota de Pedro: «mucho texto… limpio y bien espaciado»): página 1 = la guía (portada real del PDF);
   página 2 = descarga + la tarjeta de ejemplo de Pedro. Más aire entre bloques, menos texto. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("/fuentes/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --carbon: #07090D;
  --blanco: #F6F7F9;
  --azul: #246BFD;
  /* Relleno de los botones principales: el azul de la marca con 6 % del carbón de la marca. El blanco cálido sobre
     #246BFD puro da 4.26:1 (no llega a 4.5:1); así da 4.69:1 y a la vista sigue siendo el mismo azul (2026-10-08). */
  --azul-boton: color-mix(in srgb, #246BFD 94%, #07090D);
  --cian: #35D8FF;
  --verde: #A7FF4F;
  --texto-2: color-mix(in srgb, #F6F7F9 72%, #07090D);
  --carbon-2: color-mix(in srgb, #F6F7F9 6%, #07090D);
  --hoja: color-mix(in srgb, #F6F7F9 86%, #07090D);
  --linea: rgba(246, 247, 249, .14);
  --vidrio: rgba(14, 17, 22, .70);
  --sombra: 0 28px 56px rgba(0, 0, 0, .6), 0 10px 20px rgba(0, 0, 0, .4);
  --titulos: "Geist", "Inter", system-ui, sans-serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carbon);
  color: var(--blanco);
  font: 400 16px/1.5 var(--texto);
  overflow-wrap: anywhere;
}
a { color: var(--blanco); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.pagina { width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 16px 36px; }
@media (min-width: 760px) { .pagina { max-width: 520px; padding-top: 36px; } }
.marca img { display: block; height: 40px; width: auto; }

/* Hero */
.hero { margin: 44px 0 0; }
.kicker { margin: 0 0 14px; font: 600 12px/1.2 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
h1 { margin: 0; font: 800 clamp(34px, 9.4vw, 46px)/1.04 var(--titulos); letter-spacing: -.02em; text-wrap: balance; }
.clave { color: var(--azul); }
.bajada { margin: 18px 0 0; color: var(--texto-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.bajada strong { color: var(--blanco); font-weight: 600; }

/* Escena: un objeto REAL (la portada de la guía o la tarjeta de ejemplo) detrás del vidrio */
.escena { position: relative; isolation: isolate; margin-top: 44px; }

/* Fondo inmersivo: mini pases y nodos SÓLIDOS con su sombra, detrás del objeto y del vidrio (nada de luces).
   No pasa por encima de texto sin vidrio: vive solo en la altura de la escena y a los lados. */
.fondo { position: absolute; z-index: -1; top: 0; bottom: 0; left: -16px; right: -16px; overflow: hidden; pointer-events: none; }
.forma { position: absolute; display: block; --r: 0deg; transform: rotate(var(--r)); }
.mini-pase {
  width: 118px; height: 74px; border-radius: 12px; background: var(--carbon-2);
  box-shadow: inset 0 0 0 1px rgba(246, 247, 249, .10), 0 18px 36px rgba(0, 0, 0, .55), 0 6px 12px rgba(0, 0, 0, .35);
}
.mini-pase i { position: absolute; left: 12px; top: 14px; width: 42px; height: 8px; border-radius: 4px; background: var(--azul); }
.mini-pase::after { content: ""; position: absolute; left: 12px; right: 22px; bottom: 17px; height: 2px; background: var(--cian); }
.mini-pase::before { content: ""; position: absolute; right: 10px; bottom: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.nodo { width: 16px; height: 16px; border-radius: 50%; background: var(--carbon); border: 2px solid var(--cian); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
.f1 { --r: -12deg; left: -54px; top: 8%; }
.f2 { --r: 9deg; right: -60px; top: 38%; }
.f3 { --r: 6deg; left: -62px; top: 70%; }
.f4 { right: 6px; top: 4%; }
.f5 { left: 2px; top: 52%; }
@media (min-width: 760px) {
  .fondo { left: -120px; right: -120px; }
  .f1 { left: -10px; top: 6%; }
  .f2 { right: -20px; top: 30%; }
  .f3 { left: 6px; top: 64%; }
  .f4 { right: 40px; top: 4%; }
  .f5 { left: 60px; top: 46%; }
}
@media (min-width: 1100px) {
  .fondo { left: -280px; right: -280px; }
  .mini-pase { width: 150px; height: 94px; border-radius: 14px; }
  .mini-pase i { width: 54px; height: 10px; left: 14px; top: 16px; }
  .f1 { left: 70px; top: 4%; }
  .f2 { right: 56px; top: 26%; }
  .f3 { left: 30px; top: 60%; }
  .f4 { right: 150px; top: 70%; }
  .f5 { left: 210px; top: 36%; }
}

/* Página 1 · la portada REAL de la guía como un PDF físico: hojas apiladas detrás, inclinada en 3D, con sombra.
   2026-10-08 (nota de Pedro): la portada y el formulario NO se tocan. En el teléfono la portada es más chica y va
   arriba, con aire, y el formulario debajo; desde 1024 px van lado a lado. Las hojas de atrás son elementos reales
   (no ::before/::after) para que pruebas/bloques.mjs las mida junto con la portada. */
.guia {
  --giro: perspective(1400px) rotateY(-16deg) rotateX(5deg) rotate(-2deg);
  position: relative; width: 56%; max-width: 230px; margin: 0 auto;
  transform: var(--giro); transform-origin: 50% 60%;
}
@media (min-width: 760px) { .guia { width: 60%; max-width: 290px; } }
.guia img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--sombra); }
.guia .hoja {
  position: absolute; inset: 0; border-radius: 6px; background: var(--hoja);
  box-shadow: inset 0 0 0 1px rgba(7, 9, 13, .10);
}
.guia .hoja-1 { transform: translate3d(7px, 6px, 0); z-index: 0; }
.guia .hoja-2 { transform: translate3d(14px, 12px, 0); z-index: -1; box-shadow: var(--sombra); }
.formulario { margin-top: 64px; }

/* Computadora: portada a la izquierda, formulario a la derecha, con un pasillo ancho entre los dos */
@media (min-width: 1024px) {
  .pagina-registro { max-width: 1040px; padding-left: 32px; padding-right: 32px; }
  .pagina-registro .hero { max-width: 640px; }
  .pagina-registro .escena { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; align-items: center; }
  .pagina-registro .guia { width: 76%; max-width: 360px; }
  .pagina-registro .formulario { margin-top: 0; }
  .pagina-registro .fondo { left: -32px; right: -32px; }
}

.vidrio {
  position: relative; z-index: 1;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(246, 247, 249, .12), inset 0 1px 0 rgba(246, 247, 249, .16), var(--sombra);
  padding: 26px 20px 22px;
}

/* Formulario */
.campo { display: block; margin: 0 0 18px; font: 600 14px/1.3 var(--texto); }
.campo input {
  display: block; width: 100%; margin-top: 8px; min-height: 48px; padding: 10px 12px;
  background: rgba(7, 9, 13, .55); color: var(--blanco); font: 400 16px/1.3 var(--texto);
  border: 1px solid var(--linea); border-radius: 12px;
}
.perfil { margin: 4px 0 18px; padding: 0; border: 0; min-width: 0; }
.perfil legend { padding: 0; margin-bottom: 8px; font: 600 14px/1.3 var(--texto); }
.perfil label {
  display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0 0 8px; padding: 8px 12px;
  border: 1px solid var(--linea); border-radius: 12px; background: rgba(7, 9, 13, .55); cursor: pointer; font-size: 15px;
}
.perfil label:has(input:checked) { border-color: var(--azul); }
/* «Otro» → «¿Qué haces?»: un campo normal dentro de la lista, sin el marco de las opciones */
.perfil .campo-otro { display: block; min-height: 0; margin: 4px 0 8px; padding: 0; border: 0; background: none; cursor: auto; font: 600 14px/1.3 var(--texto); }
.perfil .campo-otro[hidden] { display: none; }
.perfil input[type=radio], .acepto input { accent-color: var(--azul); width: 18px; height: 18px; margin: 0; flex: none; }
.acepto { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 14px; color: var(--texto-2); cursor: pointer; }
.acepto input { margin-top: 2px; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; margin: 0 0 16px; }
.error { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--carbon); box-shadow: inset 0 0 0 1px var(--azul); font-size: 14px; }

.boton {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 12px 18px;
  border: 0; border-radius: 14px; background: var(--azul-boton); color: var(--blanco);
  font: 700 19px/1.15 var(--titulos); text-align: center; text-wrap: balance; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .45), 0 4px 8px rgba(0, 0, 0, .35);
}
.boton:disabled { opacity: .7; cursor: progress; }
.boton .icono { flex: none; margin-right: 10px; }
/* Secundario («Descargar PDF», 2026-10-08): sigue siendo un botón claro y visible (vidrio con contorno e ícono azul),
   pero ya no compite con el botón azul de la tarjeta, que es la acción principal de la página. */
.boton.secundario {
  background: rgba(246, 247, 249, .06); color: var(--blanco);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1.5px rgba(246, 247, 249, .30), 0 12px 24px rgba(0, 0, 0, .45), 0 4px 8px rgba(0, 0, 0, .35);
}
.boton.secundario .icono { color: var(--azul); }
/* Principal de la bienvenida: guardar SU tarjeta (iPhone y Android). Grande, a todo el ancho, con sombra de elevación. */
.boton-pase {
  min-height: 64px; padding: 14px 14px; border-radius: 16px; font-size: 19px; letter-spacing: -.01em;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55), 0 6px 12px rgba(0, 0, 0, .4);
}
.boton-pase .icono { width: 26px; height: 26px; margin-right: 10px; }
/* «Agregar a Smart Passes Wallet» en una sola línea, con el ícono pegado al texto, también en teléfonos angostos */
@media (max-width: 400px) { .boton-pase { font-size: 17.5px; } .boton-pase .icono { width: 24px; height: 24px; margin-right: 8px; } }
.nota { margin: 14px 0 0; font-size: 13px; color: var(--texto-2); }

/* Página 2 · bienvenida */
.nombre { color: var(--blanco); }
.boton-guia { margin-top: 28px; }
/* Cuatro bloques en fila, cada uno con su espacio: saludo · comunidad · tarjeta · número y botón. Ningún margen
   negativo: la inclinación 3D de la tarjeta cabe dentro de su propia escena, y las formas del fondo viven solo ahí
   (recortadas por .fondo), a la altura de la tarjeta y no del rótulo. */
.comunidad { margin-top: 56px; }
.escena-tarjeta { margin-top: 64px; padding: 4px 0 24px; }
.escena-tarjeta .fondo { top: 48px; }
.acciones { margin-top: 48px; }

/* La tarjeta de EJEMPLO de Pedro, fiel a la real: carbón, logo, MIEMBRO / Nº, strip, NOMBRE, QR de muestra */
.ejemplo { margin: 0; }
.ejemplo-etiqueta { margin: 0 0 18px; text-align: center; font: 500 13px/1.3 var(--texto); color: var(--texto-2); }
.tarjeta-giro {
  --giro: perspective(1200px) rotateX(7deg) rotateY(-12deg) rotate(1.5deg);
  width: 78%; max-width: 320px; margin: 0 auto; transform: var(--giro); transform-origin: 50% 40%;
}
.tarjeta {
  background: var(--carbon); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(246, 247, 249, .12), var(--sombra);
}
.tarjeta-arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; }
.tarjeta-arriba img { display: block; height: 34px; width: auto; }
.tarjeta-campo { display: flex; flex-direction: column; padding: 10px 14px 0; }
.tarjeta-arriba .tarjeta-campo { padding: 0; }
.tarjeta-campo.derecha { text-align: right; }
.tarjeta-campo span { font: 600 10px/1.2 var(--texto); letter-spacing: .1em; color: var(--azul); }
.tarjeta-campo strong { font: 700 16px/1.25 var(--titulos); color: var(--blanco); }
.tarjeta-strip { display: block; width: 100%; height: auto; }
.tarjeta-qr { display: flex; justify-content: center; padding: 16px 0 22px; }
.tarjeta-qr img { display: block; width: 104px; height: 104px; padding: 8px; background: var(--blanco); border-radius: 10px; }

.acciones { display: flex; flex-direction: column; }
.comunidad-titulo { margin: 0; font: 700 21px/1.25 var(--titulos); text-wrap: balance; }
.comunidad-txt { margin: 10px 0 0; font-size: 15px; color: var(--texto-2); text-wrap: pretty; }
.pendiente { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--carbon); box-shadow: inset 0 0 0 1px var(--linea); color: var(--texto-2); font-size: 15px; }
.pendiente strong { color: var(--blanco); }
.entrega { display: flex; flex-direction: column; }
/* Computadora: el bloque del QR es la acción principal de la sección: vidrio con contorno azul y sombra de elevación */
.computadora {
  padding: 24px 20px 22px; border-radius: 22px; background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 2px var(--azul), 0 28px 56px rgba(0, 0, 0, .6), 0 10px 20px rgba(0, 0, 0, .4);
}
.qr-titulo { display: flex; align-items: center; justify-content: center; margin: 0 0 16px; font: 700 19px/1.25 var(--titulos); text-align: center; }
.qr-titulo .icono { flex: none; margin-right: 10px; color: var(--azul); }
.qr-caja { text-align: center; }
.qr { display: inline-block; padding: 10px; background: var(--blanco); border-radius: 12px; line-height: 0; }
.qr[hidden] { display: none; }
.caminos { margin-top: 14px; text-align: center; }

/* Transición al enviar el registro: carbón con vidrio sobre la página, AI-Lyn al centro (sin luces añadidas;
   AI-Lyn conserva su propio brillo de personaje). Va FUERA de .pagina: un ancestro con transform rompería el fixed. */
.transicion {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px 16px;
  background: rgba(7, 9, 13, .78);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.transicion.activa { opacity: 1; visibility: visible; pointer-events: auto; }
.transicion-centro { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; text-align: center; }
.transicion-ailyn { width: min(250px, 64vw); }
.transicion-ailyn img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.transicion-sombra { display: block; width: 110px; height: 12px; margin-top: 10px; border-radius: 50%; background: rgba(0, 0, 0, .6); box-shadow: 0 0 14px 6px rgba(0, 0, 0, .45); }
.transicion-txt { min-height: 2.7em; margin: 24px 0 0; font: 700 20px/1.35 var(--titulos); color: var(--blanco); text-wrap: balance; }
.puntos { display: inline-flex; gap: 5px; margin-left: 6px; vertical-align: middle; }
.puntos i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--cian); }

/* Aviso de privacidad */
.texto-legal { margin-top: 24px; padding: 20px 18px; border-radius: 20px; background: var(--carbon-2); box-shadow: inset 0 0 0 1px rgba(246, 247, 249, .08), var(--sombra); }
.texto-legal h2 { margin: 22px 0 6px; font: 700 18px/1.25 var(--titulos); }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p, .texto-legal li { color: var(--texto-2); font-size: 15px; }
.texto-legal strong { color: var(--blanco); font-weight: 600; }
.texto-legal ul { padding-left: 18px; }
.pendiente-pedro { color: var(--blanco); background: var(--azul); padding: 0 4px; border-radius: 4px; font-weight: 600; }

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 44px; font-size: 13px; color: var(--texto-2); }
.pie a { color: var(--texto-2); }

/* Movimiento: SOLO con prefers-reduced-motion: no-preference, y solo transform/opacity (60 fps en el teléfono).
   Con «reduce» nada de esto existe: la página se ve completa y quieta desde el primer cuadro. */
@media (prefers-reduced-motion: no-preference) {
  .boton { transition: transform .15s ease; }
  .boton:active { transform: translateY(1px); }

  /* Llamada de atención UNA vez, cuando el botón de la tarjeta (o el QR) entra en pantalla: bienvenida.js le pone
     .llamar. Solo transform; empieza y termina en su lugar, así que sin la clase (o con «reducir movimiento») se ve igual. */
  .boton-pase.llamar, .computadora.llamar { animation: llamar .9s cubic-bezier(.3, .7, .3, 1) var(--llamar-retraso, 0s) 1; }

  /* Entrada: cada bloque sube 14 px y aparece, uno detrás de otro */
  .marca, .hero > *, .comunidad, .escena, .acciones, .pie { animation: entrar .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero > :nth-child(1) { animation-delay: .06s; }
  .hero > :nth-child(2) { animation-delay: .12s; }
  .hero > :nth-child(3) { animation-delay: .18s; }
  .comunidad { animation-delay: .24s; }
  .escena { animation-delay: .3s; }
  .acciones { animation-delay: .36s; }
  .pie { animation-delay: .44s; }

  /* Fondo: las formas flotan muy lento; la portada y la tarjeta «respiran» unos píxeles */
  .forma { will-change: transform; animation: flotar var(--t, 18s) ease-in-out var(--d, 0s) infinite alternate; }
  .f1 { --t: 17s; --d: -4s; --dx: 10px; --dy: -16px; }
  .f2 { --t: 21s; --d: -11s; --dx: -12px; --dy: 14px; }
  .f3 { --t: 19s; --d: -7s; --dx: 8px; --dy: -12px; }
  .f4 { --t: 14s; --d: -3s; --dx: -6px; --dy: 12px; }
  .f5 { --t: 16s; --d: -9s; --dx: 6px; --dy: -10px; }
  .guia, .tarjeta-giro { animation: respirar 8s ease-in-out .9s infinite alternate; }

  /* Transición: aparece en 0.25 s, AI-Lyn entra y luego flota suave, su sombra se encoge al subir, puntitos */
  .transicion { transition: opacity .25s ease, visibility 0s linear .25s; }
  .transicion.activa { transition: opacity .25s ease, visibility 0s; }
  .transicion.activa .transicion-centro { animation: entrar .45s cubic-bezier(.2, .7, .2, 1) both; }
  .transicion.activa .transicion-ailyn { will-change: transform; animation: ailyn-flota 1.3s ease-in-out infinite alternate; }
  .transicion.activa .transicion-sombra { animation: sombra-flota 1.3s ease-in-out infinite alternate; }
  .transicion.activa .puntos i { animation: punto 1.1s ease-in-out infinite; }
  .transicion.activa .puntos i:nth-child(2) { animation-delay: .18s; }
  .transicion.activa .puntos i:nth-child(3) { animation-delay: .36s; }
}
@keyframes llamar {
  0%, 100% { transform: none; }
  30% { transform: translate3d(0, -4px, 0) scale(1.035); }
  55% { transform: translate3d(0, 0, 0) scale(.99); }
  78% { transform: translate3d(0, -1px, 0) scale(1.012); }
}
@keyframes entrar { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes flotar {
  from { transform: translate3d(0, 0, 0) rotate(var(--r)); }
  to { transform: translate3d(var(--dx, 0), var(--dy, -12px), 0) rotate(calc(var(--r) + 4deg)); }
}
/* Respiro: sube 8 px y gira 4° hacia el frente, sobre su propio giro 3D (--giro) */
@keyframes respirar {
  from { transform: var(--giro) translate3d(0, 0, 0); }
  to { transform: var(--giro) rotateY(4deg) translate3d(0, -8px, 0); }
}
@keyframes ailyn-flota { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }
@keyframes sombra-flota { from { transform: scale(1); opacity: 1; } to { transform: scale(.78); opacity: .6; } }
@keyframes punto { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .35; } 40% { transform: translate3d(0, -4px, 0); opacity: 1; } }