/* ==========================================================================
   Landing de PolizaTracker. Oscura, institucional, densa.

   Autónoma a propósito: no importa tokens.css ni components.css. Si algún día
   hereda del sistema corporativo, la página se volverá a leer como una sección
   del portafolio por mucho que se le cambie el acento. Hay un test que falla
   si base_landing.html enlaza cualquier hoja del sitio.

   Los colores salen de los activos de marca reales del producto:
   #0b1b3c del feature graphic y #0b57d9 del icono de la aplicación.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url("../../fonts/landings/Archivo.f9a5cfd9572a.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url("../../fonts/landings/IBMPlexSans.7d4d78b42978.woff2") format('woff2-variations');
  font-weight: 100 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --pt-bg:        #0b1b3c;
  --pt-surface:   #0d2149;
  --pt-line:      #1c3465;
  --pt-accent:    #0b57d9;
  --pt-ink:       #eef2fb;
  --pt-ink-soft:  #9fb0d0;

  --pt-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --pt-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pt-radius: 4px;
  --pt-wrap: 1120px;

  /* Duración y curva únicas para toda la hoja: si cada animación elige la
     suya, la página se mueve con varios ritmos y se nota aunque no se sepa
     por qué. */
  --pt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pt-fast: 180ms;
  --pt-slow: 520ms;
}

*, *::before, *::after { box-sizing: border-box; }

/* Fondo en capas, no color plano.

   Tres capas sobre el navy: un grano finísimo que le quita el aspecto de
   plástico a las superficies grandes, y dos halos del azul de marca que dan
   profundidad al primer pantallazo. `background-attachment: fixed` deja el
   grano quieto mientras el contenido pasa por encima.

   Los halos van a opacidad muy baja a propósito: el contraste de los pares de
   texto está verificado contra #0b1b3c, y una capa que aclarase el fondo por
   debajo del texto invalidaría esa comprobación. Aquí como mucho llegan a
   #0e2049, que sigue por encima del umbral con holgura. */
body {
  margin: 0;
  background-color: var(--pt-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(90rem 48rem at 78% -12%, rgba(11, 87, 217, 0.20), transparent 62%),
    radial-gradient(60rem 40rem at -10% 8%, rgba(11, 87, 217, 0.10), transparent 60%);
  background-attachment: fixed, fixed, fixed;
  color: var(--pt-ink);
  font-family: var(--pt-body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--pt-display);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

/* Archivo es variable en DOS ejes, y hasta ahora solo se usaba el de grosor.
   Estrechar la anchura (`wdth`) mientras se sube el peso da un titular denso y
   con autoridad, que es exactamente el registro que reconoce una correduría, y
   además deja caber una frase larga en dos líneas en vez de tres. */
h1 {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  font-variation-settings: 'wght' 780, 'wdth' 86;
}

h2 {
  font-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
  font-variation-settings: 'wght' 700, 'wdth' 92;
}

h3 { font-variation-settings: 'wght' 640, 'wdth' 96; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.ln-wrap {
  width: min(100% - 2.5rem, var(--pt-wrap));
  margin-inline: auto;
}

/* --- Botón de vuelta --------------------------------------------------- */
.ln-return {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(238, 242, 251, 0.25);
  border-radius: var(--pt-radius);
  background: rgba(11, 27, 60, 0.85);
  backdrop-filter: blur(8px);
  color: var(--pt-ink);
  font-size: 0.8125rem;
  text-decoration: none;
}

.ln-return:hover,
.ln-return:focus-visible { border-color: var(--pt-accent); }

@media (max-width: 640px) {
  .ln-return__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --- Salto al contenido ------------------------------------------------ */
.ln-skip {
  position: absolute;
  left: -9999px;
}
.ln-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--pt-accent);
  color: #fff;
}

/* --- Hero --------------------------------------------------------------- */
.ln-hero { padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 5rem); }
.ln-hero__lead { max-width: 54ch; font-size: 1.1875rem; color: var(--pt-ink-soft); }

/* --- Secciones ---------------------------------------------------------- */
.ln-section { padding: clamp(3rem, 7vw, 6rem) 0; border-top: 1px solid rgba(238, 242, 251, 0.1); }
.ln-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pt-accent);
  margin: 0 0 0.75rem;
}

/* --- Recorrido por la aplicación ---------------------------------------- */
.ln-tour { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ln-tour__shot { border: 1px solid rgba(238, 242, 251, 0.15); border-radius: var(--pt-radius); overflow: hidden; }

/* --- Tarjeta de plan ---------------------------------------------------- */
.ln-plan {
  border: 1px solid var(--pt-accent);
  border-radius: var(--pt-radius);
  background: var(--pt-surface);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  max-width: 40rem;
}
.ln-plan__price { font-family: var(--pt-display); font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; }
.ln-plan__gross { color: var(--pt-ink-soft); font-size: 0.9375rem; }
.ln-plan__cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--pt-radius);
  background: var(--pt-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.ln-early {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(238, 242, 251, 0.15);
  font-size: 0.9375rem;
  color: var(--pt-ink-soft);
}

/* --- Página de contratación --------------------------------------------- */
.ln-contract { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.ln-form { display: grid; gap: 1.25rem; }
.ln-field { display: grid; gap: 0.35rem; }
.ln-field__input { width: 100%; padding: 0.7rem 0.9rem; font: inherit; }
.ln-field__error, .ln-form__error { margin: 0; font-size: 0.875rem; color: #ff8080; }
.ln-form__note { font-size: 0.875rem; }

/* --- Pie ---------------------------------------------------------------- */
.ln-foot { padding: 3rem 0; border-top: 1px solid rgba(238, 242, 251, 0.15); font-size: 0.875rem; color: var(--pt-ink-soft); }
.ln-foot__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }

.ln-hero__icon { border-radius: 12px; margin-bottom: 1.5rem; }
.ln-hero__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
.ln-hero__anchor { color: var(--pt-ink-soft); }

/* --- Tiendas: lo que se puede instalar, y lo que todavía no --------------- */
.ln-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
}

.ln-stores__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(238, 242, 251, 0.28);
  border-radius: var(--pt-radius);
  text-decoration: none;
  transition: border-color var(--pt-fast) var(--pt-ease),
              background-color var(--pt-fast) var(--pt-ease);
}

.ln-stores__link::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #3ddc84;  /* el verde de Android: se puede instalar YA */
}

.ln-stores__link:hover {
  border-color: var(--pt-accent);
  background: rgba(11, 87, 217, 0.14);
}

/* Lo que aún no se puede instalar se dice, pero en segundo plano: es un
   estado, no una llamada a la acción. */
.ln-stores__pending { color: var(--pt-ink-soft); }
.ln-section__lead { max-width: 60ch; color: var(--pt-ink-soft); }
.ln-list { padding-left: 1.2rem; max-width: 60ch; }
.ln-steps { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; list-style: none; counter-reset: step; }
.ln-steps li { counter-increment: step; }
.ln-steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--pt-display); color: var(--pt-accent); margin-bottom: 0.5rem; }
.ln-tour__item { margin: 0; }
.ln-features, .ln-fit { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ln-features dt, .ln-fit dt { font-family: var(--pt-display); color: var(--pt-accent); margin-bottom: 0.4rem; }
.ln-features dd, .ln-fit dd { margin: 0; }
.ln-faq { border-top: 1px solid rgba(238, 242, 251, 0.12); padding: 1rem 0; }
.ln-faq summary { cursor: pointer; font-weight: 600; }

/* ==========================================================================
   Acabado: atmósfera, jerarquía y movimiento.

   Todo lo de aquí abajo es progresivo: si el navegador no entiende una regla,
   la página se queda como estaba y sigue siendo legible. Nada de esto es
   necesario para entender el producto, y por eso ninguna pieza de información
   depende de que funcione.
   ========================================================================== */

/* --- Hero: retícula de fondo y entrada escalonada ------------------------ */

/* La retícula finísima evoca el papel pautado de una póliza, y da una textura
   que el color plano no daba. Se desvanece hacia abajo con una máscara para
   que no compita con el texto de las secciones siguientes. */
.ln-hero {
  position: relative;
  padding: clamp(6rem, 14vw, 11rem) 0 clamp(4rem, 7vw, 6rem);
  overflow: hidden;
}

.ln-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(238, 242, 251, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 242, 251, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  pointer-events: none;
}

.ln-hero > * { position: relative; }

.ln-hero__lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.3125rem);
  color: var(--pt-ink-soft);
}

.ln-hero__icon {
  border-radius: 14px;
  margin-bottom: 1.75rem;
  box-shadow: 0 18px 40px -12px rgba(11, 87, 217, 0.55);
}

/* El lockup es vectorial y trae su propio degradado de blanco a cian, así que
   no lleva ni fondo ni sombra: se apoya en el navy de la página. */
.ln-hero__wordmark {
  width: clamp(196px, 20vw, 248px);
  height: auto;
  margin-bottom: 2rem;
}

/* Entrada escalonada al cargar. Un solo momento coreografiado al principio
   comunica más oficio que veinte micro-animaciones repartidas por la página. */
@keyframes pt-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* `html:not(.gsap)`, igual que el revelado por scroll: cuando GSAP está,
   landings.js hace esta misma entrada y además parte el titular por líneas.
   Sin esta condición se animaban las dos a la vez sobre el mismo elemento y
   el titular se quedaba congelado en opacidad 0 — pasó, y solo se vio al
   auditar la página con Playwright. */
html:not(.gsap) .ln-hero__icon,
html:not(.gsap) .ln-hero .ln-eyebrow,
html:not(.gsap) .ln-hero h1,
html:not(.gsap) .ln-hero__lead,
html:not(.gsap) .ln-hero__actions {
  animation: pt-rise var(--pt-slow) var(--pt-ease) both;
}

html:not(.gsap) .ln-hero .ln-eyebrow  { animation-delay: 60ms; }
html:not(.gsap) .ln-hero h1           { animation-delay: 120ms; }
html:not(.gsap) .ln-hero__lead        { animation-delay: 200ms; }
html:not(.gsap) .ln-hero__actions     { animation-delay: 280ms; }

/* --- Revelado al hacer scroll, sin una línea de JavaScript ---------------- */

/* `animation-timeline: view()` ata la animación a la posición del elemento en
   el viewport: lo hace el compositor, no el hilo principal, así que no puede
   provocar tirones. Va dentro de @supports porque donde no exista, el
   contenido tiene que salir visible sin más —jamás oculto esperando un evento
   que no va a llegar—. Ese es el motivo de no usar IntersectionObserver: un
   fallo del guion dejaría la página en blanco. */
@supports (animation-timeline: view()) {
  /* `html:not(.gsap)`: landings.js pone esa clase en cuanto GSAP está
     disponible, y entonces manda él. Sin esa condición los dos animarían lo
     mismo a la vez y se pisarían la opacidad. Este bloque es la red para
     cuando GSAP no carga. */
  html:not(.gsap) .ln-section > .ln-wrap {
    animation: pt-rise 1ms var(--pt-ease) both;
    animation-timeline: view();
    animation-range: entry 12% entry 62%;
  }
}

/* --- Rótulos de sección con filete ---------------------------------------- */
.ln-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--pt-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pt-accent);
  margin: 0 0 1rem;
}

.ln-eyebrow::after {
  content: '';
  flex: 0 0 auto;
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--pt-accent), transparent);
}

/* --- Secciones: el filete superior, degradado ----------------------------

   El relleno baja de 4-7rem a 3.25-5rem. En la auditoría se veía que entre el
   final del texto de una sección y el rótulo de la siguiente quedaban 200-300
   px de nada: no era aire, era vacío, y hacía la página un 20 % más larga sin
   añadir una palabra. La separación la marcan el filete y el rótulo, no la
   distancia. */
.ln-section {
  padding: clamp(3.25rem, 5.5vw, 5rem) 0;
  border-top: 0;
  position: relative;
}

.ln-section::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 242, 251, 0.16) 22%, rgba(238, 242, 251, 0.16) 78%, transparent);
}

.ln-hero + .ln-section::before { display: none; }

/* --- Recorrido: las capturas, dentro de un teléfono ----------------------

   Aquí estaba el peor defecto de la página, y se vio midiendo: las capturas
   de la aplicación tienen una luminancia media de 206 a 243 sobre un fondo de
   26. Puestas a pelo eran rectángulos blancos enormes flotando sobre el navy,
   y el ojo las leía como un error, no como una pantalla.

   El marco lo arregla sin tocar ni el color de la página ni el de la app: un
   bisel oscuro con su propio brillo convierte ese salto de luminancia en algo
   deliberado —es una pantalla encendida— en lugar de accidental. Y de paso
   acota el alto: la captura mide 900x2000, así que a ancho de columna se iba
   a 755 px y nunca se veía junto a su explicación.
   ------------------------------------------------------------------------ */
.ln-tour { gap: 3.5rem 2.5rem; }

.ln-tour__shot {
  max-width: 264px;
  margin: 0 auto 1.25rem;
  padding: 7px;
  border: 1px solid rgba(238, 242, 251, 0.16);
  border-radius: 30px;
  background: linear-gradient(158deg, #24345e 0%, #16244a 46%, #0e1c3e 100%);
  box-shadow:
    0 1px 0 rgba(238, 242, 251, 0.14) inset,
    0 30px 60px -26px rgba(0, 0, 0, 0.95);
  transition: transform var(--pt-fast) var(--pt-ease),
              box-shadow var(--pt-fast) var(--pt-ease);
}

.ln-tour__shot img { border-radius: 23px; }

.ln-tour__item:hover .ln-tour__shot {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(238, 242, 251, 0.2) inset,
    0 38px 72px -24px rgba(11, 87, 217, 0.5);
}

.ln-tour figcaption h3 { margin-bottom: 0.35rem; font-size: 1.0625rem; }
.ln-tour figcaption p { margin: 0; color: var(--pt-ink-soft); font-size: 0.9375rem; }

/* --- Los pasos, como una secuencia y no como tres cajas ------------------ */
.ln-steps li { position: relative; padding-top: 2.75rem; }

.ln-steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  font-variation-settings: 'wght' 700, 'wdth' 78;
  opacity: 0.9;
}

.ln-steps li::after {
  content: '';
  position: absolute;
  top: 1.9rem;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--pt-accent), transparent);
}

.ln-steps h3 { margin-bottom: 0.35rem; font-size: 1.0625rem; }
.ln-steps p { margin: 0; color: var(--pt-ink-soft); }

/* --- La línea temporal del expediente ------------------------------------

   Dibujada con CSS sobre una lista ordenada, no con un SVG: el contenido sigue
   siendo texto real —lo indexa un buscador y lo lee un lector de pantalla en
   orden— y el trazo es solo la capa de encima. Un SVG con los cinco estados
   dentro sería una imagen de un texto.

   En pantalla ancha va horizontal, con la línea cruzando por detrás de los
   puntos. Por debajo de 720 px se vuelve vertical, que es como se lee una
   secuencia en un móvil.
   ------------------------------------------------------------------------ */
.ln-line {
  --pt-dot: 15px;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

/* La línea corre por detrás, a la altura del centro de los puntos. Se degrada
   hacia los extremos para que no acabe en corte seco. */
.ln-line::before {
  content: '';
  position: absolute;
  top: calc(var(--pt-dot) / 2);
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--pt-accent) 12%, var(--pt-accent) 88%, transparent);
  opacity: 0.5;
}

.ln-line__step { position: relative; padding-top: calc(var(--pt-dot) + 1.1rem); }

.ln-line__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pt-dot);
  height: var(--pt-dot);
  border-radius: 99px;
  background: var(--pt-bg);
  border: 3px solid var(--pt-accent);
  box-shadow: 0 0 0 5px rgba(11, 27, 60, 1), 0 0 18px rgba(11, 87, 217, 0.65);
}

/* El último cierra la secuencia: relleno macizo en vez de anillo. */
.ln-line__step:last-child .ln-line__dot { background: var(--pt-accent); }

.ln-line h3 {
  margin: 0 0 0.3rem;
  font-size: 0.9375rem;
  font-variation-settings: 'wght' 680, 'wdth' 94;
}

.ln-line p { margin: 0; font-size: 0.875rem; color: var(--pt-ink-soft); }

@media (max-width: 720px) {
  .ln-line { grid-template-columns: 1fr; gap: 1.75rem; padding-left: 1.75rem; }
  .ln-line::before {
    top: 0; bottom: 0; left: calc(var(--pt-dot) / 2 - 1px);
    right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg,
      transparent, var(--pt-accent) 8%, var(--pt-accent) 92%, transparent);
  }
  .ln-line__step { padding-top: 0; padding-left: 0; }
  .ln-line__dot { top: 0.35rem; left: -1.75rem; }
}

/* --- Banda a sangre ------------------------------------------------------

   Una foto de archivo entre el problema y la solución. Va a sangre porque una
   banda que respeta la columna deja de ser una banda.

   La capa de encima no es decorativa: es lo que garantiza el contraste. El
   navy al 88 % en el centro deja el fondo efectivo por debajo de #16294d, y el
   titular es blanco a 40 px o más —texto grande, umbral 3:1— así que va muy
   sobrado. Sin esa capa el contraste dependería de qué píxel de la foto cae
   detrás de cada letra, que es justo lo que no se puede verificar.
   ------------------------------------------------------------------------ */
.ln-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(260px, 34vw, 420px);
  overflow: hidden;
}

.ln-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* La foto es cálida y la página es fría: se desatura y se vira para que
     pertenezca a esta landing y no parezca pegada de otro sitio. */
  filter: saturate(0.35) brightness(0.75);
}

.ln-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 27, 60, 0.96) 0%, rgba(11, 27, 60, 0.88) 52%, rgba(11, 27, 60, 0.72) 100%),
    linear-gradient(0deg, rgba(11, 87, 217, 0.18), transparent 70%);
}

.ln-banner h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-variation-settings: 'wght' 740, 'wdth' 88;
}

/* --- La tarjeta de plan es la pieza que vende: que lo parezca ------------ */
.ln-plan {
  position: relative;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(11, 87, 217, 0.12), transparent 42%),
    var(--pt-surface);
  box-shadow: 0 40px 90px -50px rgba(11, 87, 217, 0.9);
}

.ln-plan__price {
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-variation-settings: 'wght' 800, 'wdth' 84;
  letter-spacing: -0.03em;
  margin: 0;
}

.ln-plan__unit { color: var(--pt-ink-soft); }

.ln-plan__includes { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.ln-plan__includes li { display: flex; gap: 0.65rem; align-items: baseline; }
.ln-plan__tick { color: var(--pt-accent); font-weight: 700; }

.ln-plan__cta {
  transition: transform var(--pt-fast) var(--pt-ease),
              box-shadow var(--pt-fast) var(--pt-ease),
              background-color var(--pt-fast) var(--pt-ease);
  box-shadow: 0 12px 28px -12px rgba(11, 87, 217, 0.9);
}

.ln-plan__cta:hover { transform: translateY(-2px); background: #1667f0; }
.ln-plan__cta:active { transform: translateY(0); }

.ln-early__title {
  font-family: var(--pt-display);
  font-variation-settings: 'wght' 680, 'wdth' 94;
  color: var(--pt-ink);
  margin: 0 0 0.5rem;
}

.ln-early__clock { color: var(--pt-ink); }

/* --- Preguntas frecuentes: que se note que se abren ---------------------- */
.ln-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  list-style: none;
  padding: 0.35rem 0;
}

.ln-faq summary::-webkit-details-marker { display: none; }

.ln-faq summary::after {
  content: '+';
  font-family: var(--pt-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--pt-accent);
  transition: transform var(--pt-fast) var(--pt-ease);
}

.ln-faq[open] summary::after { transform: rotate(45deg); }
.ln-faq p { color: var(--pt-ink-soft); margin: 0.25rem 0 0; }

/* --- Foco visible, y con la forma del componente ------------------------- */
a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pt-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.ln-field__input {
  border: 1px solid rgba(238, 242, 251, 0.22);
  border-radius: var(--pt-radius);
  background: rgba(11, 27, 60, 0.6);
  color: var(--pt-ink);
  transition: border-color var(--pt-fast) var(--pt-ease);
}

.ln-field__input:focus { border-color: var(--pt-accent); }

/* ==========================================================================
   Movimiento reducido: se apaga TODO, incluidas las animaciones guiadas por
   scroll. Va al final para ganar en la cascada a cualquier regla de arriba.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    animation-timeline: none !important;
  }
}

/* ==========================================================================
   Impresión: todo visible.

   El revelado por scroll deja a opacidad 0 lo que aún no ha entrado en
   pantalla, y al imprimir no hay scroll: la hoja saldria a medias. Vale
   tambien para el modo lectura y para cualquier agente que serialice la
   pagina sin recorrerla.
   ========================================================================== */
@media print {
  *, *::before, *::after {
    animation: none !important;
    animation-timeline: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .ln-return, .ln-skip { display: none !important; }
}