/* ==========================================================================
   Emunah Catalyst · landing
   --------------------------------------------------------------------------
   Los colores y las tipografías NO se eligen aquí: se copian de
   `frontend/src/index.css`, que es lo que el cliente ve cuando abre el
   programa. Una web que promete un producto y luego abre otro distinto es la
   forma más barata de que alguien dude de lo que acaba de comprar.

   La única regla estética propia de este fichero es la del sistema Catalyst:
   fondo casi negro, un solo acento azul, tipografía serif para lo que se
   afirma y monoespaciada para lo que se mide.
   ========================================================================== */

:root {
  /* Copiados literalmente de frontend/src/index.css */
  --negro:       #0B0A08;
  --azul:        #4A8FD1;
  --azul-alto:   #60A5FA;
  --azul-hondo:  #1B2A4A;
  --hueso:       #D6D9DE;
  --gris:        #8E939B;
  --alcista:     #5CC770;
  --bajista:     #F26C6C;

  --cristal:        rgba(214, 217, 222, 0.03);
  --cristal-borde:  rgba(214, 217, 222, 0.08);
  --cristal-2:      rgba(214, 217, 222, 0.05);
  --azul-cristal:   rgba(74, 143, 209, 0.08);
  --azul-borde:     rgba(74, 143, 209, 0.25);

  --serif: 'Cinzel', Georgia, serif;
  --sans:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --margen: 5.5vw;
  --ancho:  1440px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* la barra fija no puede tapar el título al saltar */

  /* Quitamos overflow-x: clip porque rompe position: sticky en algunos navegadores.
     Como todo está contenido correctamente, no habrá scroll horizontal indeseado. */
}

body {
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--azul-hondo); color: var(--hueso); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* El grano de cine. Sin él los fondos negros se ven planos y baratos; con él
   el software parece tener textura. Es el mismo 3,5 % que usa el panel. */
.grano {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Piezas que se repiten
   -------------------------------------------------------------------------- */

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* La etiqueta de sección. Monoespaciada y muy espaciada: es la estética de
   ingeniería cuantitativa del sistema, la misma de `[ PROTOCOLO ]`. */
.rotulo {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gris);
  display: block;
}
.rotulo--grande {
  font-size: 16px; letter-spacing: 0.35em; color: var(--azul); font-weight: 600;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }

h1 { font-size: clamp(38px, 5.2vw, 74px); letter-spacing: 0.01em; text-wrap: balance; }
h2 { font-size: clamp(27px, 3vw, 42px); line-height: 1.25; text-wrap: balance; }
h3 { font-size: 21px; }

.entradilla {
  font-size: 17px; line-height: 1.7; color: var(--gris);
  max-width: 620px; margin-top: 20px;
}

/* Lo técnico dentro de una frase: `.exe`, un nombre de fichero. Va en
   monoespaciada porque en este sistema la monoespaciada significa «esto es un
   dato exacto», igual que en el panel. */
code {
  font-family: var(--mono); font-size: 0.9em; color: var(--hueso);
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}

/* El filete azul con resplandor. Aparece bajo cada afirmación importante y es
   el eco del anillo del sonar. */
.filete {
  width: 76px; height: 1px; background: var(--azul);
  box-shadow: 0 0 14px rgba(74, 143, 209, 0.85);
}

.boton {
  display: inline-block; padding: 16px 36px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--azul); background: var(--azul); color: var(--negro);
  cursor: pointer; transition: all .28s ease, transform .1s ease; text-align: center;
  transform: translate(var(--tx, 0), var(--ty, 0));
}
.boton:hover { 
  background: var(--azul-alto); border-color: var(--azul-alto); 
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.03);
}

.boton.hueco { background: transparent; color: var(--hueso); border-color: rgba(214,217,222,0.4); }
.boton.hueco:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }

.seccion { padding: 130px 0; position: relative; z-index: 1; }
.seccion--fina { padding: 96px 0; position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px var(--margen);
  background: rgba(11, 10, 8, 0.72);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.posada { border-bottom-color: rgba(214,217,222,0.08); background: rgba(11,10,8,0.9); }

/* El logo. Exactamente el bloque del panel (App.jsx:117): el álef en azul y
   a su derecha EMUNAH sobre CATALYST. */
.marca { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.marca__alef {
  font-family: var(--serif); font-size: 3.8rem; line-height: 0.8;
  color: var(--azul); padding-top: 3px;
}
.marca__texto { display: flex; flex-direction: column; gap: 3px; }
.marca__nombre {
  font-family: var(--serif); font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.32em; color: var(--hueso); white-space: nowrap;
}
.marca__producto {
  font-family: var(--sans); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.52em; color: var(--gris);
  text-transform: uppercase; white-space: nowrap;
}

.nav__enlaces { display: flex; align-items: center; gap: 34px; }
.nav__enlaces a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris); transition: color .25s ease;
}
.nav__enlaces a:hover { color: var(--hueso); }

.nav__dropdown { position: relative; padding: 20px 0; margin: -20px 0; }
.nav__submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  background: rgba(11, 10, 8, 0.95); border: 1px solid var(--cristal-borde);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 12px 0; border-radius: 8px;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.nav__dropdown:hover .nav__submenu {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav__submenu a {
  display: block; padding: 10px 24px; text-transform: none; letter-spacing: 0.05em;
  font-size: 13.5px; font-weight: 500; color: var(--gris); text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__submenu a:hover {
  background: rgba(255,255,255,0.06); color: var(--hueso);
}
.nav__acciones { display: flex; align-items: center; gap: 16px; }

.idioma { display: flex; border: 1px solid var(--cristal-borde); border-radius: 4px; overflow: hidden; }
.idioma button {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
  padding: 7px 11px; background: transparent; border: none; color: var(--gris);
  cursor: pointer; transition: all .2s ease;
}
.idioma button[aria-pressed="true"] { background: var(--azul-cristal); color: var(--azul); }

.nav .boton { padding: 12px 24px; font-size: 11px; }

.nav__menu { display: none; background: none; border: none; color: var(--hueso); cursor: pointer; padding: 8px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }

/* El sonar. Es el mismo canvas del panel: el álef respira en el centro, una
   onda azul sale cada 8 segundos y las partículas que alcanza pasan del caos a
   alinearse en carriles. Esa animación ES el argumento de venta —el caos
   ordenándose— y por eso no se sustituye por un vídeo de gráficos. */
.hero__sonar { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; }

.hero__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,10,8,0.92) 0%, rgba(11,10,8,0.45) 54%, rgba(11,10,8,0) 82%);
}
.hero__pie {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,10,8,0), var(--negro));
}

.hero__contenido {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--ancho); margin: 0 auto; padding: 130px var(--margen) 90px;
}
.hero__caja { max-width: 700px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }

.hero__cifras {
  display: flex; gap: 46px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 30px; border-top: 1px solid rgba(214,217,222,0.12);
  width: 100%; max-width: 620px;
}
.cifra__valor { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--hueso); }
.cifra__texto {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gris); margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Cómo funciona · tres pasos
   -------------------------------------------------------------------------- */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; margin-top: 68px; }
.paso { border-top: 1px solid rgba(214,217,222,0.16); padding-top: 28px; transition: border-color .35s ease, transform .35s ease; }
.paso:hover { border-top-color: var(--azul); transform: translateY(-8px); }
.paso__numero { font-family: var(--serif); font-size: 14px; letter-spacing: 0.2em; color: var(--gris); }
.paso h3 { margin: 16px 0 12px; color: var(--hueso); }
.paso p { font-size: 15px; line-height: 1.75; color: var(--gris); }

/* --------------------------------------------------------------------------
   Funciones · bloques alternos con captura
   -------------------------------------------------------------------------- */

.funcion {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: center;
  padding: 90px 0; border-top: 1px solid rgba(214,217,222,0.1);
}
.funcion:first-of-type { border-top: none; }
.funcion--invertida .funcion__texto { order: 2; }

.funcion h2 { margin: 20px 0 0; }
.funcion__lista { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.funcion__lista li {
  display: block; position: relative; padding-left: 22px; font-size: 15px; line-height: 1.65; color: var(--gris);
}
.funcion__lista li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  background: var(--azul); box-shadow: 0 0 8px rgba(74,143,209,0.8);
  transform: rotate(45deg);
}
.funcion__lista strong { color: var(--hueso); font-weight: 500; }

.captura {
  border: 1px solid var(--cristal-borde); border-radius: 10px; overflow: hidden;
  background: var(--cristal); box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  transition: transform .4s ease, box-shadow .4s ease;
}
.captura:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0,0,0,0.7); }
/* EL `height: auto` NO SOBRA: SIN ÉL, UNA CAPTURA SALE ESTIRADA.
   La del asistente es la única que lleva `width="1400" height="634"` en el HTML
   —los pone ahí para que el navegador reserve el hueco y la página no dé un
   salto al cargar—. Pero `height="634"` es también una orden de estilo, y como
   aquí sólo se fijaba el ancho, la imagen salía de 100 % de ancho por 634 px
   fijos de alto. En el móvil eso son 330 × 634 donde tocaban 330 × 149: la
   captura estirada más de cuatro veces a lo alto, que es justo lo que se veía
   comprimido. En el escritorio pasaba igual pero sólo un 23 %, y por eso no
   saltaba a la vista. Medido el 09/08, no supuesto. */
.captura img { width: 100%; height: auto; transition: transform .5s ease; display: block; }
.captura:hover img { transform: scale(1.02); }
.captura figcaption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris); padding: 11px 15px; border-top: 1px solid var(--cristal-borde);
}

@media (min-width: 981px) {
  .sticky-contenedor {
    display: flex; justify-content: space-between; align-items: flex-start; position: relative;
  }
  .sticky-textos { width: 28%; }
  .sticky-bloque {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    transition: opacity 0.7s ease;
    opacity: 0.25;
  }
  .sticky-bloque.activa { opacity: 1; }
  
  .sticky-visual {
    width: 60%;
    position: sticky; top: 15vh; height: 70vh;
    display: flex; align-items: center; justify-content: center;
  }
  .sticky-visual .captura {
    position: absolute; opacity: 0; 
    transition: opacity 0.8s ease-in-out, transform 1s cubic-bezier(0.2, 0.9, 0.3, 1);
    width: 100%; top: 50%; transform: translateY(-45%);
    pointer-events: none;
  }
  .sticky-visual .captura.activa {
    opacity: 1; z-index: 10; transform: translateY(-50%) scale(1.18);
    box-shadow: 0 40px 100px rgba(0,0,0,0.8);
    pointer-events: auto;
  }
}

.movil-solo { display: none; }

@media (max-width: 980px) {
  .sticky-contenedor { display: flex; flex-direction: column; gap: 100px; }

  /* ESTE `gap` ES EL QUE SEPARA DE VERDAD, Y FALTABA.
     El de la línea de arriba no separa nada en el móvil: `.sticky-contenedor`
     sólo tiene DOS hijos —`.sticky-textos` y `.sticky-visual`— y el segundo está
     oculto aquí, así que ese gap queda entre un elemento y nada.
     Los tres bloques de funciones cuelgan de `.sticky-textos`, que es un `block`
     corriente, y sus márgenes son cero: entre la captura de un bloque y el
     rótulo del siguiente había 0 px medidos. Por eso la imagen del gestor de
     riesgo salía pegada a «DASHBOARD / ANÁLISIS». En el escritorio no se veía
     porque ahí cada bloque ocupa una pantalla entera. */
  .sticky-textos { display: flex; flex-direction: column; gap: 92px; }

  .sticky-bloque { opacity: 1; }
  .escritorio-solo { display: none; }
  /* Y aire por arriba, para que la captura tampoco quede pegada a su lista. */
  .movil-solo { display: block; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   Plataformas
   -------------------------------------------------------------------------- */

.plataformas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
.plataforma {
  position: relative;
  border: 1px solid var(--cristal-borde); background: var(--cristal);
  padding: 38px 40px; border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.plataforma:hover {
  transform: translateY(-6px);
  border-color: var(--azul-borde);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.plataforma h3 { color: var(--hueso); margin-bottom: 8px; }
.plataforma__que {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--azul); margin-bottom: 18px;
}
.plataforma p { font-size: 14.5px; color: var(--gris); line-height: 1.7; margin-top: 44px; }

/* --------------------------------------------------------------------------
   Las tres reglas
   -------------------------------------------------------------------------- */

.reglas { background: linear-gradient(180deg, var(--negro) 0%, #0D101A 48%, var(--negro) 100%); }
.regla {
  display: grid; grid-template-columns: minmax(80px, 130px) 1fr; gap: 30px;
  align-items: start; padding: 40px 0; border-top: 1px solid rgba(214,217,222,0.14);
}
.regla:last-child { border-bottom: 1px solid rgba(214,217,222,0.14); }
.regla__numero {
  font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gris);
}
.regla h3 { margin-bottom: 12px; color: var(--hueso); font-size: 23px; }
.regla p { font-size: 15.5px; line-height: 1.75; color: var(--gris); max-width: 660px; }

/* --------------------------------------------------------------------------
   Fondeadoras Compatibles
   -------------------------------------------------------------------------- */

.fondeadoras { padding: 40px 0 20px; border-top: 1px solid rgba(214,217,222,0.06); overflow: hidden; }
.cintillo-fondeadoras {
  margin-top: 36px;
  width: 100%;
  position: relative;
  /* El mask-image difumina los bordes sin usar un fondo negro falso */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.cintillo-track {
  display: flex; gap: 70px;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
}
.cintillo-set {
  display: flex; gap: 70px;
  align-items: center;
  flex-shrink: 0;
  animation: scroll-cintillo 45s linear infinite;
}
.cintillo-track:hover .cintillo-set { animation-play-state: paused; }
.cintillo-track img {
  height: 38px; object-fit: contain;
  flex-shrink: 0; max-width: none;
  opacity: 0.5; filter: grayscale(100%) brightness(150%);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.cintillo-track img:hover {
  opacity: 1; filter: grayscale(0%) brightness(100%);
  transform: scale(1.1);
}

@keyframes scroll-cintillo {
  0% { transform: translateX(0); }
  /* Se desplaza exactamente su propio ancho más un gap (70px) */
  100% { transform: translateX(calc(-100% - 70px)); }
}

.plataforma__logo {
  position: absolute; top: 30px; right: 35px;
  height: 48px; object-fit: contain; margin: 0; display: block;
  opacity: 0.5; filter: grayscale(100%) brightness(150%);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.plataforma:hover .plataforma__logo {
  opacity: 1; filter: grayscale(0%) brightness(100%);
  transform: scale(1.05);
}


/* --------------------------------------------------------------------------
   Precios
   -------------------------------------------------------------------------- */

.precios { text-align: center; }
.precios .rotulo, .precios h2 { text-align: center; }

.ciclo {
  display: inline-flex; margin: 34px auto 0; padding: 4px;
  border: 1px solid var(--cristal-borde); border-radius: 999px; background: var(--cristal);
}
.ciclo button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em;
  padding: 10px 26px; border: none; border-radius: 999px; background: transparent;
  color: var(--gris); cursor: pointer; transition: all .25s ease;
}
.ciclo button[aria-pressed="true"] { background: var(--azul); color: var(--negro); font-weight: 600; }
.ciclo__ahorro { font-family: var(--mono); font-size: 10px; color: var(--azul); margin-left: 7px; }
.ciclo button[aria-pressed="true"] .ciclo__ahorro { color: var(--negro); }

.aviso-prueba {
  display: flex; align-items: flex-start; gap: 15px; text-align: left;
  max-width: 780px; margin: 34px auto 0; padding: 17px 22px;
  border: 1px solid var(--azul-borde); border-left: 3px solid var(--azul);
  background: var(--azul-cristal); border-radius: 8px;
}
.aviso-prueba__icono { color: var(--azul); font-size: 17px; line-height: 1.4; }
.aviso-prueba strong { color: var(--hueso); font-weight: 600; font-size: 14.5px; }
.aviso-prueba span { display: block; font-size: 13.5px; color: var(--gris); margin-top: 3px; }

/* El enlace a /prueba. Va DENTRO del aviso y no como quinta tarjeta a proposito:
   una tarjeta mas convierte la eleccion de plan en cinco opciones, y la prueba
   no es un plan — es la puerta de entrada a los cuatro. */
.aviso-prueba__boton {
  display: inline-block; margin-top: 11px; padding: 7px 15px; border-radius: 6px;
  border: 1px solid var(--azul); color: var(--azul); background: transparent;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: background .25s ease, color .25s ease;
}
.aviso-prueba__boton:hover { background: var(--azul); color: var(--negro); }

/* `perspective` va en el CONTENEDOR y no en cada tarjeta. Puesta en la tarjeta,
   cada una tendría su propio punto de fuga en su propio centro y las cuatro se
   inclinarían como si fueran cuatro escenas distintas; puesta aquí, comparten
   punto de vista y el conjunto se lee como un solo plano. */
.planes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; margin-top: 46px; text-align: left; align-items: start;
  perspective: 1300px;
}

.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--cristal-borde); background: var(--cristal);
  border-radius: 12px; padding: 30px 26px 26px; position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.plan--suelto { transition: transform .5s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .3s ease; }

.plan:hover { border-color: var(--azul-borde); box-shadow: 0 18px 50px rgba(0,0,0,.5); }

/* El brillo que sigue al cursor. Es un pseudo-elemento y no una capa más de
   marcado, y va con pointer-events:none para que no se coma los clics del
   botón que tiene debajo. */
.plan::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(74,143,209,0.16), transparent 62%);
}
.plan:hover::after { opacity: 1; }

/* El destacado. Un solo plan puede llevarlo: si se destacan dos, no se destaca
   ninguno. */
.plan--destacado {
  border-color: var(--azul-borde);
  background: linear-gradient(180deg, rgba(74,143,209,0.12), rgba(74,143,209,0.03));
  box-shadow: 0 0 44px rgba(74,143,209,0.15);
}

/* ELEGIDO. Es el equivalente a lo de los leones: el plan al que apuntas —o el
   que te recomienda el cuestionario— se enciende de verdad, no se insinúa. Y es
   una clase y no un :hover porque tiene que quedarse puesto cuando apartas el
   ratón; si no, el recomendador señala un plan y en cuanto miras hacia allí ya
   no hay nada señalado. */
.plan--elegido {
  border-color: var(--azul);
  background: linear-gradient(180deg, rgba(74,143,209,0.20), rgba(74,143,209,0.05));
  box-shadow: 0 0 0 1px var(--azul), 0 0 60px rgba(74,143,209,0.30);
}
.plan--elegido .plan__cifra,
.plan--elegido .plan__moneda { color: var(--azul-alto); }
.plan--elegido h3 { color: var(--azul-alto); }
.plan--elegido .boton {
  background: var(--azul); color: var(--negro); border-color: var(--azul);
}

.plan__cinta {
  position: absolute; top: -11px; left: 26px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--azul); color: var(--negro); padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 0 20px rgba(74,143,209,0.55);
}
/* Late. Sólo la cinta y sólo cuando no se ha elegido nada todavía: un latido
   permanente deja de llamar la atención a los diez segundos y se convierte en
   ruido que no se puede apagar. */
.planes:not(.planes--decidido) .plan__cinta { animation: latir 2.8s ease-in-out infinite; }
@keyframes latir {
  0%, 100% { box-shadow: 0 0 20px rgba(74,143,209,0.55); }
  50%      { box-shadow: 0 0 34px rgba(74,143,209,0.95); }
}
.plan h3 { font-size: 20px; color: var(--hueso); }
.plan__lema { font-size: 13.5px; color: var(--gris); margin-top: 5px; min-height: 38px; }

.plan__precio { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 22px; }
.plan__cifra { font-family: var(--mono); font-size: 40px; font-weight: 500; color: var(--hueso); letter-spacing: -0.02em; }
.plan__moneda { font-family: var(--mono); font-size: 24px; color: var(--hueso); }
.plan__periodo { font-family: var(--sans); font-size: 13px; color: var(--gris); margin-left: 3px; }

.plan__lista { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan__lista li { display: flex; gap: 11px; font-size: 14px; line-height: 1.55; color: var(--gris); }
.plan__lista li::before { content: '✓'; color: var(--azul); flex-shrink: 0; font-size: 13px; line-height: 1.6; }
.plan__lista strong { color: var(--hueso); font-weight: 500; }

.plan .boton { margin-top: auto; width: 100%; }
.plan:not(.plan--destacado) .boton {
  background: transparent; color: var(--hueso); border-color: rgba(214,217,222,0.3);
}
.plan:not(.plan--destacado) .boton:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }

/* Tarjetas expansibles */
.plan__extra { display: flex; flex-direction: column; margin-top: 14px; }
.plan__expansor {
  background: transparent; border: none; color: rgba(142,147,153,0.6); padding: 8px 0;
  cursor: pointer; display: flex; justify-content: center; align-items: center;
  transition: color .2s; outline: none; margin: 0 auto; width: 100%;
}
.plan__expansor:hover { color: var(--hueso); }
.chevron {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease;
}
.plan__expansor[aria-expanded="true"] .chevron { transform: translateY(2px) rotate(-135deg); }
.plan__lista--extra {
  max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s ease; padding-top: 0;
}
.plan__lista--extra.abierta { max-height: 500px; opacity: 1; padding-top: 12px; margin-bottom: 12px; }

/* Tabla comparativa */
.tabla-seccion { margin: 60px auto 0; max-width: 1040px; position: relative; overflow: visible !important; }
.tabla-seccion__expansor {
  background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 8px;
  color: var(--hueso); font-family: var(--sans); font-size: 15px; padding: 14px 24px;
  cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px;
  margin: 0 auto 30px; transition: all 0.2s ease; backdrop-filter: blur(10px);
}
.tabla-seccion__expansor:hover { background: rgba(214,217,222,0.06); border-color: rgba(214,217,222,0.3); }
.tabla-seccion__expansor[aria-expanded="true"] .chevron { transform: translateY(2px) rotate(-135deg); }
.tabla-seccion__expansor .texto-ocultar { display: none; }
.tabla-seccion__expansor[aria-expanded="true"] .texto-mostrar { display: none; }
.tabla-seccion__expansor[aria-expanded="true"] .texto-ocultar { display: inline; }

.tabla-contenedor {
  max-height: 0; overflow: hidden; opacity: 0; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabla-contenedor.abierta {
  max-height: 2500px; opacity: 1; margin-bottom: 40px; overflow: visible !important;
}
.tabla-caja {
  border: 1px solid var(--cristal-borde);
  border-radius: 12px; padding: 10px 10px 30px 10px;
  position: relative; overflow: visible !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tabla-caja::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: 12px; background: var(--cristal);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .3s ease;
}
.tabla-caja--activa {
  border-color: var(--azul);
  box-shadow: 0 0 0 1px var(--azul), 0 0 60px rgba(74,143,209,0.30);
}
.tabla-caja--activa::before {
  background: linear-gradient(180deg, rgba(74,143,209,0.20), rgba(74,143,209,0.05));
}
.tabla-comparativa {
  width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 14.5px;
}
.tabla-comparativa th, .tabla-comparativa td {
  padding: 16px 20px; border-bottom: 1px solid rgba(214,217,222,0.06);
}
.tabla-comparativa th:not(:first-child), .tabla-comparativa td:not(:first-child) {
  text-align: center;
}
.tabla-comparativa thead {
  position: sticky; top: 85px; z-index: 20;
}
.tabla-comparativa th {
  font-family: var(--sans); font-weight: 500; color: var(--hueso); font-size: 16px;
  position: sticky; top: 85px; z-index: 20;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(14, 19, 27, 0.7); /* Color del cristal semi-transparente para que el scroll pase por detrás */
  background-clip: padding-box; /* Previene fugas visuales en los bordes de la celda */
}
.tabla-comparativa td { color: var(--gris); }
.tabla-comparativa tr:first-child td { padding-top: 24px; }
.tabla-comparativa td:first-child { color: var(--hueso); font-weight: 500; width: 28%; }
.tabla-comparativa em { font-style: normal; color: rgba(142,147,153,0.7); font-size: 13.5px; display: block; margin-top: 4px; }
.tabla__nota { font-size: 13.5px; color: var(--gris); margin-top: 24px; line-height: 1.6; padding: 0 16px; }

@media (max-width: 900px) {
  .tabla-contenedor { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla-comparativa { min-width: 700px; }
}

.precios__nota { font-size: 13px; color: var(--gris); margin-top: 30px; text-align: center; }

/* --------------------------------------------------------------------------
   Empezar · las preguntas del montaje
   -------------------------------------------------------------------------- */

.empezar__caja {
  border: 1px solid var(--cristal-borde); background: var(--cristal);
  border-radius: 14px; padding: 42px 44px; margin-top: 44px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.pregunta { padding: 26px 0; border-top: 1px solid rgba(214,217,222,0.1); }
.pregunta:first-child { border-top: none; padding-top: 0; }
.pregunta__texto {
  font-family: var(--sans); font-size: 15.5px; color: var(--hueso); margin-bottom: 16px; font-weight: 400;
}
.opciones { display: flex; gap: 12px; flex-wrap: wrap; }
.opcion {
  font-family: var(--sans); font-size: 14px; padding: 12px 22px;
  border: 1px solid var(--cristal-borde); background: transparent; color: var(--gris);
  border-radius: 8px; cursor: pointer; transition: all .2s ease;
}
.opcion:hover { border-color: rgba(214,217,222,0.35); color: var(--hueso); }
.opcion[aria-pressed="true"] {
  border-color: var(--azul); background: var(--azul-cristal); color: var(--azul); font-weight: 500;
}

.recomendacion {
  margin-top: 30px; padding: 26px 28px; border-radius: 10px;
  border: 1px solid var(--azul-borde); background: var(--azul-cristal);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.recomendacion__texto { font-size: 15px; color: var(--hueso); line-height: 1.6; }
.recomendacion__texto strong { color: var(--azul); font-weight: 600; }
.recomendacion[hidden] { display: none; }

.despues {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px; margin-top: 40px;
}
.despues__paso {
  border-top: 1px solid rgba(214,217,222,0.14); padding-top: 20px;
}
.despues__paso b {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--azul); display: block; margin-bottom: 9px;
}
.despues__paso p { font-size: 14px; color: var(--gris); line-height: 1.65; }

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq { margin-top: 50px; }
.faq details {
  border-top: 1px solid rgba(214,217,222,0.12); padding: 22px 0;
}
.faq details[open] summary { color: var(--hueso); }
.faq summary {
  cursor: pointer; list-style: none; font-size: 16px; color: var(--hueso);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-weight: 400; transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--azul); font-size: 20px; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq p { font-size: 15px; color: var(--gris); line-height: 1.75; margin-top: 14px; max-width: 760px; }

/* --------------------------------------------------------------------------


/* --------------------------------------------------------------------------
   Footer y Legal Disclaimer
   -------------------------------------------------------------------------- */

.pie {
  text-align: left; padding: 100px var(--margen) 60px;
  border-top: 1px solid var(--cristal-borde);
  position: relative; z-index: 10;
}

.pie__alef {
  font-family: var(--serif); font-size: 3rem; color: var(--gris);
  opacity: 0.4; display: block; margin-bottom: 24px;
}

.pie__legal {
  max-width: 800px; margin: 80px auto 40px; font-size: 11px;
  color: rgba(142, 147, 153, 0.6); line-height: 1.8;
  text-wrap: balance; text-align: center;
}

.pie__enlaces-firma {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0;
}

.pie__enlaces-firma a { color: var(--gris); transition: color .2s ease; }
.pie__enlaces-firma a:hover { color: var(--hueso); }

.pie p { font-size: 12px; color: rgba(142,147,153,0.5); font-family: var(--sans); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
.pie__lema { font-size: 14px; color: var(--gris); margin-top: 18px; max-width: 320px; line-height: 1.7; }
.pie h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--hueso); margin-bottom: 16px;
}
.pie ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pie ul a { font-size: 14px; color: var(--gris); transition: color .2s ease; }
.pie ul a:hover { color: var(--hueso); }

.aviso-riesgo {
  margin-top: 50px; padding-top: 28px; border-top: 1px solid rgba(214,217,222,0.08);
  font-size: 12px; line-height: 1.75; color: #6C7078; max-width: 100%;
}
.aviso-riesgo strong { color: var(--gris); font-weight: 500; }
.pie__firma {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris);
}

/* --------------------------------------------------------------------------
   Movimiento · lo que le da vida
   --------------------------------------------------------------------------
   Todo lo de aquí abajo cumple la misma regla: el movimiento tiene que RESPONDER
   a algo que hace la persona —desplazarse, acercar el ratón, elegir— y no correr
   solo. Una página que se mueve sin que la toques cansa a los treinta segundos;
   una que reacciona se siente viva.
   -------------------------------------------------------------------------- */

/* Aparecer al entrar en pantalla. Sin JavaScript la clase `.visible` nunca se
   pone, así que el estado de reposo NO puede ser invisible: quien tenga el JS
   bloqueado vería una página en blanco. Por eso el arranque es opacidad 1 y es
   el propio JS el que, al empezar, marca el documento como animable. */
.revelar { opacity: 1; }
.js-anima .revelar {
  opacity: 0;
  /* `translate` y NO `transform`. Son propiedades distintas y el navegador las
     compone, así que esta animación no pisa el `transform` que usan las
     tarjetas para inclinarse ni el de los `:hover` que levantan las fichas.

     Con `transform` aquí, la regla `.js-anima .revelar.visible` tenía más
     especificidad que `.plan` y le imponía `transform: none`: la inclinación 3D
     no se aplicaba NUNCA, y desde fuera parecía que el efecto simplemente no
     estaba programado. Se vio midiendo el transform calculado, no mirando. */
  translate: 0 26px;
  transition: opacity .75s cubic-bezier(.2,.7,.3,1), translate .75s cubic-bezier(.2,.7,.3,1);
}
.js-anima .revelar.visible { opacity: 1; translate: none; }

/* Escalonado dentro de un grupo. Las tarjetas de un mismo bloque entran una
   detrás de otra en vez de todas de golpe: leído, se entiende que son varias
   cosas y no una mancha. */
.js-anima .revelar[data-retraso="1"] { transition-delay: .09s; }
.js-anima .revelar[data-retraso="2"] { transition-delay: .18s; }
.js-anima .revelar[data-retraso="3"] { transition-delay: .27s; }
.js-anima .revelar[data-retraso="4"] { transition-delay: .36s; }

/* --- Capturas ------------------------------------------------------------- */

.captura {
  transition: transform .5s cubic-bezier(.2,.8,.3,1), border-color .4s ease, box-shadow .5s ease;
}
.captura:hover {
  transform: translateY(-5px);
  border-color: var(--azul-borde);
  box-shadow: 0 40px 100px rgba(0,0,0,.62), 0 0 46px rgba(74,143,209,.14);
}
.captura--ancha { max-width: 100%; }

/* La tira de detalle: un recorte de una fila de la interfaz. */
.tira {
  margin-top: 28px; border: 1px solid var(--cristal-borde); border-radius: 9px;
  overflow: hidden; background: var(--cristal);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.tira:hover { border-color: var(--azul-borde); box-shadow: 0 0 34px rgba(74,143,209,.12); }
.tira img { width: 100%; }
.tira figcaption {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris); padding: 9px 13px; border-top: 1px solid var(--cristal-borde);
}

/* --- Listas de funciones -------------------------------------------------- */

.funcion__lista li { transition: color .28s ease, transform .28s ease; }
.funcion__lista li::before { transition: transform .35s ease, box-shadow .35s ease; }
.funcion__lista li:hover { color: var(--hueso); transform: translateX(4px); }
.funcion__lista li:hover::before {
  transform: rotate(135deg) scale(1.35); box-shadow: 0 0 14px rgba(74,143,209,1);
}

/* --- Pasos, plataformas y reglas ------------------------------------------ */

.paso { transition: border-color .35s ease, transform .35s ease; }
.paso:hover { transform: translateY(-4px); }
.paso__numero { transition: color .35s ease, letter-spacing .35s ease; }
.paso:hover .paso__numero { color: var(--azul); letter-spacing: 0.3em; }

.plataforma { transition: border-color .35s ease, background .35s ease, transform .35s ease; }
.plataforma:hover {
  border-color: var(--azul-borde); background: var(--azul-cristal); transform: translateY(-4px);
}

.regla { transition: border-color .4s ease; }
.regla:hover { border-top-color: var(--azul-borde); }
.regla__numero { transition: -webkit-text-stroke-color .4s ease, transform .4s ease; }
.regla:hover .regla__numero { -webkit-text-stroke-color: var(--azul); transform: translateX(5px); }

/* --- Navegación ----------------------------------------------------------- */

/* El subrayado que crece desde la izquierda. Con `scaleX` y no con `width`
   porque el ancho recalcula el diseño en cada fotograma y la escala no. */
.nav__enlaces a { position: relative; }
.nav__enlaces a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--azul); box-shadow: 0 0 10px rgba(74,143,209,.9);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.nav__enlaces a:hover::after { transform: scaleX(1); }

/* --- Botones -------------------------------------------------------------- */

/* Magnético: el JS escribe --tx/--ty con la desviación hacia el cursor. */
.boton {
  position: relative; overflow: hidden;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: background .28s ease, border-color .28s ease, color .28s ease,
              transform .18s ease-out, box-shadow .28s ease;
}
.boton:hover { box-shadow: 0 0 34px rgba(74,143,209,.42); }

/* El barrido de luz al pasar por encima. */
.boton::before {
  content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transition: left .6s ease; pointer-events: none;
}
.boton:hover::before { left: 140%; }

/* --- Cifras del hero ------------------------------------------------------ */

.cifra__valor { transition: color .35s ease, text-shadow .35s ease; }
.hero__cifras > div:hover .cifra__valor {
  color: var(--azul-alto); text-shadow: 0 0 22px rgba(74,143,209,.6);
}

/* --- Opciones del recomendador -------------------------------------------- */

.opcion { position: relative; overflow: hidden; }
.opcion[aria-pressed="true"] { box-shadow: 0 0 22px rgba(74,143,209,.28); }

.recomendacion { animation: entrar .45s cubic-bezier(.2,.8,.3,1); }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- Preguntas frecuentes ------------------------------------------------- */

.faq details { transition: border-color .3s ease; }
.faq details:hover { border-top-color: var(--azul-borde); }
.faq summary::after { transition: transform .3s ease, color .3s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] > p { animation: entrar .4s ease; }

/* --------------------------------------------------------------------------
   Pantallas estrechas
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .funcion, .funcion--invertida { grid-template-columns: 1fr; gap: 40px; }
  .funcion--invertida .funcion__texto { order: 0; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

/* El CTA que sólo existe dentro del menú desplegado. En pantalla ancha sobra
   —ya está en la barra— y por eso nace oculto. */
.nav__cta-movil { display: none; }

@media (max-width: 760px) {
  :root { --margen: 22px; }
  .nav__enlaces { display: none; }
  .nav__enlaces.abierto {
    display: flex; flex-direction: column; gap: 20px; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(11,10,8,0.97); backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--cristal-borde); padding: 26px var(--margen) 30px;
  }
  .nav__menu { display: block; }

  /* El botón de la barra se va al menú, y no es cosmética: con el logo, el
     selector de idioma, el botón y la hamburguesa, la barra medía 413 px en una
     pantalla de 375 y la hamburguesa quedaba FUERA, o sea que en un móvil
     pequeño no había forma de abrir la navegación. Comprobado midiendo, no
     mirando. */
  /* Se apunta a `.nav__acciones .boton` y NO a `.nav .boton`: el botón del menú
     también está dentro de .nav y lleva la clase .boton, así que la regla ancha
     lo apagaba a él tambien —con más especificidad que la que lo enciende— y el
     menú se quedaba sin su llamada a la acción sin que se notara. */
  .nav__acciones .boton { display: none; }
  .nav__cta-movil { display: block; margin-top: 6px; }
  .nav__acciones { gap: 10px; }

  .seccion { padding: 84px 0; }
  .hero__cifras { gap: 28px; }
  .empezar__caja { padding: 28px 22px; }
  .regla { grid-template-columns: 1fr; gap: 10px; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 34px; }
  .marca__alef { font-size: 2.2rem; }
  .marca__nombre { font-size: 0.95rem; letter-spacing: 0.26em; }
  .marca__producto { font-size: 0.55rem; letter-spacing: 0.42em; }
}

/* Y por debajo de 360 px, el logo se queda sólo con el álef. Es reconocible sin
   el texto y es lo único que cabe. */
@media (max-width: 359px) {
  .marca__texto { display: none; }
}

/* Quien pide menos movimiento, menos movimiento. El sonar se detiene desde
   guion.js; aquí se apagan las transiciones. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}