/* ==========================================================================
   Todos Bien — sitio público
   Los colores salen de src/theme/tokens.ts de la app (azul de marca #0D6BC9,
   elegido por accesibilidad: 5.30:1 contra blanco, WCAG AA para texto).
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Marca */
  --accent: #0d6bc9;
  --accent-hover: #0b5aa8;
  --accent-soft: #e2f0fd;
  --accent-text: #ffffff;
  --accent-deep: #084b8f;

  /* Azul fijo para superficies que SIEMPRE llevan texto blanco encima
     (panel del hero, tarjeta destacada, plan premium, CTA final).
     A propósito no se redefine en modo oscuro: `--accent` sí se aclara para
     que los enlaces sean legibles sobre negro, y ese azul claro con texto
     blanco encima daría un contraste malísimo. */
  --brand: #0d6bc9;
  --brand-light: #1a7ddd;
  --brand-deep: #084b8f;
  --ink: #101418;

  /* Superficies */
  --bg: #ffffff;
  --bg-grouped: #f2f2f7;
  --surface: #ffffff;
  --surface-sunken: #f2f2f7;
  --border: #e3e3e8;
  --border-strong: #c6c6c8;

  /* Texto */
  --text: #000000;
  --text-secondary: #6c6c70;
  --text-tertiary: #a0a0a5;

  /* Estados (mismos de la app) */
  --safe: #34c759;
  --safe-soft: #e3f8e9;
  --safe-strong: #1b7a33;
  --danger: #ff3b30;
  --danger-soft: #ffe5e3;
  --danger-strong: #c21207;
  --helping: #ffb800;
  --helping-soft: #fff3d4;
  --helping-strong: #845c00;
  --unconfirmed: #8e8e93;
  --unconfirmed-soft: #efeff0;

  /* Tipografía */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Radios (Radius de la app) */
  /* Bajados el 2026-09-23 para seguir a la app, que ese día pasó todas sus
     cajas de 22 a 12: la web se veía bastante más redonda que la app que
     vende. Se mantiene la jerarquía —una tarjeta menos curva que el panel que
     la contiene— pero comprimida. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 24px;
  --r-pill: 999px;

  /* Espaciado */
  --gap: 20px;
  --pad-section: clamp(56px, 8vw, 112px);
  --shell: 1240px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(13, 27, 51, 0.16);
  --shadow-lg: 0 32px 64px -24px rgba(13, 27, 51, 0.28);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #5ca8f5;
    --accent-hover: #7cbaf8;
    --accent-soft: #12293f;
    --accent-text: #00121f;
    --accent-deep: #0d6bc9;

    --bg: #000000;
    --bg-grouped: #0a0a0c;
    --surface: #1c1c1e;
    --surface-sunken: #121214;
    --border: #38383a;
    --border-strong: #48484a;

    --text: #ffffff;
    --text-secondary: #aeaeb2;
    --text-tertiary: #7c7c80;

    --safe: #30d158;
    --safe-soft: #10301a;
    --safe-strong: #5de07c;
    --danger: #ff453a;
    --danger-soft: #3a1310;
    --danger-strong: #ff8078;
    --helping: #ffd60a;
    --helping-soft: #33290a;
    --helping-strong: #ffe066;
    --unconfirmed: #98989d;
    --unconfirmed-soft: #2a2a2c;

    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.8);
  }
}

/* --- 2. Base ------------------------------------------------------------ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--bg-grouped);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 18px;
  border-radius: var(--r-pill);
}

.skip-link:focus {
  left: 16px;
}

/* --- 3. Layout ---------------------------------------------------------- */

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

.section {
  padding-block: var(--pad-section);
}

.section--tight {
  padding-block: clamp(40px, 5vw, 72px);
}

.stack-sm > * + * {
  margin-top: 12px;
}

.stack > * + * {
  margin-top: 20px;
}

/* --- 4. Tipografía utilitaria ------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Un inline-flex se dimensiona por su contenido y no encoge solo: sin este
     tope, un chip largo como "Hecho en Perú · Datos del IGP y el USGS"
     desbordaba el ancho de la pantalla en móvil. */
  max-width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  line-height: 1;
}

.eyebrow--accent {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

/* Segundo tono de un titular: la parte que matiza va en gris, misma letra y
   mismo tamaño. Reemplazó a los chips que iban arriba de cada título. */
.soft {
  color: var(--text-secondary);
}

.display {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  letter-spacing: -0.035em;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
}

.h4 {
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--text-secondary);
  max-width: 62ch;
}

.muted {
  color: var(--text-secondary);
}

.small {
  font-size: 0.86rem;
  line-height: 1.5;
}

.mono {
  font-family: var(--font-mono);
}

.center {
  text-align: center;
}

.center .lede {
  margin-inline: auto;
}

/* --- 5. Botones --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost:hover {
  border-color: var(--border-strong);
}

/* Blanco sólido, no un fantasma translúcido: es la acción principal de la
   tarjeta de pago, y con `rgba(255,255,255,.14)` competía de igual a igual con
   el botón secundario de la tarjeta gratuita, que sí es sólido sobre blanco.
   `--brand-deep` para el texto, que da 8.6:1 contra el blanco. */
.btn--onblue {
  background: #fff;
  color: var(--brand-deep);
  border-color: #fff;
}

.btn--onblue:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.btn--sm {
  padding: 11px 20px;
  font-size: 0.9rem;
}

.btn .arrow {
  transition: transform 0.18s ease;
}

.btn:hover .arrow {
  transform: translate(2px, -2px);
}

/* Badges de tienda */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.store:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.store svg {
  flex: none;
}

.store span {
  display: block;
  line-height: 1.15;
}

.store .store__top {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.store .store__name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.store[aria-disabled="true"] {
  opacity: 0.62;
  cursor: default;
}

.store[aria-disabled="true"]:hover {
  transform: none;
  border-color: var(--border);
}

/* --- 6. Header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 14px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-grouped) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
}

.site-header.is-stuck {
  border-bottom-color: var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.08rem;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--brand-light), var(--brand-deep));
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 2px 8px -2px rgba(13, 107, 201, 0.6);
}

/* El ícono de la app va a sangre dentro del cuadrado redondeado: trae su propio
   fondo azul, así que el gradiente de .brand__mark queda detrás solo como
   respaldo por si la imagen no carga. */
.brand__mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
}

.nav__links a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: 0.93rem;
  font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.nav__links a:hover {
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 44×44 es el mínimo que recomienda Apple para algo que se toca con el pulgar;
   estaba en 42 y en un teléfono se falla más de lo que parece.
   `touch-action: manipulation` quita el retardo de ~300 ms que algunos
   navegadores móviles dejan esperando un doble toque para hacer zoom. */
/* Flex y no grid, y el porqué importa. Con `display: grid` cada línea caía en
   su propia fila automática, y esas filas SE ESTIRAN para llenar los 44 px de
   alto: las tres terminaban a ~14 px entre sí, no a los 6,3 px que decía el
   margen. De ahí los dos síntomas, que eran el mismo bug: se veían muy
   separadas, y al abrir no cerraban la X porque la traslación estaba calculada
   sobre la separación teórica y no sobre la real. Con `gap` la distancia es una
   sola cifra y las transformaciones de más abajo pueden confiar en ella. */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Fuera del menú desplegado no existe: en escritorio el botón vive en el
   encabezado y aquí sería un duplicado. */
.nav__links-cta {
  display: none;
}

.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.24s ease, opacity 0.18s ease;
}

/* 2 px de alto + 5 px de `gap` = 7 px de centro a centro. La línea de arriba
   baja exactamente eso y la de abajo sube lo mismo, así que las dos se cruzan
   justo encima de la del medio y la X cierra. Si cambia el alto o el gap, este
   número cambia con ellos. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.3);
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: absolute;
    inset: calc(100% + 8px) 20px auto 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 12px;
    box-shadow: var(--shadow-lg);
    display: none;
  }

  .nav__links.is-open {
    display: flex;
  }

  /* 44px de alto real por fila: `padding` solo no lo garantiza si la fuente
     cambia, y estas son las que se tocan con el pulgar. */
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 1rem;
    color: var(--text);
  }

  .nav__links-cta {
    display: block;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .nav__links-cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .nav__cta > .btn {
    display: none;
  }
}

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: clamp(26px, 4vw, 54px);
  padding-bottom: clamp(48px, 7vw, 96px);
  /* Fondo propio. El <body> es gris agrupado y el hero encima quedaba apagado;
     un blanco con un resplandor azul detrás del teléfono da profundidad sin
     dibujar una caja alrededor del texto. */
  background: var(--bg);
  overflow: hidden;
}

/* El resplandor. `pointer-events: none` porque cruza por encima de la columna
   de texto y, sin eso, se come los clics de los botones que hay debajo. */
.hero::before {
  content: "";
  position: absolute;
  top: -28%;
  right: -12%;
  width: min(820px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 107, 201, 0.18), transparent 62%);
  pointer-events: none;
}

.hero .shell {
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* Sin tarjeta. Hasta el 2026-09-23 este texto vivía dentro de un rectángulo
   blanco con borde, y era la mitad de lo que hacía que la página pareciera una
   plantilla: el aire hace el mismo trabajo que hacía el borde. */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-block: clamp(6px, 2vw, 26px);
}

.hero__copy h1 {
  max-width: 13ch;
}

.hero__copy .lede {
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Advertencia de "no es alerta temprana". Va en el hero y no en el pie: con
   peso visual suficiente para que no se lea como letra chica decorativa. */
.disclosure {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 54ch;
}

.disclosure strong {
  color: var(--text);
  font-weight: 600;
}

.disclosure__icon {
  flex: none;
  color: var(--accent);
  margin-top: 2px;
}

/* El escenario del teléfono. Las tarjetas flotantes se salen de su caja, así
   que el contenedor es `relative` y ellas `absolute` contra él. */
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(10px, 3vw, 34px);
}

.hero .device {
  --device-w: 318px;
}

/* Tarjetas flotantes: dos hechos del momento en que sirve la app, escritos en
   HTML y no recortados de una captura, para que se lean nítidos y sigan al
   tema claro/oscuro. Son decorativas (`aria-hidden`): lo que dicen ya está en
   el texto de al lado. */
.hero__float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 12px 15px;
  animation: float 6s ease-in-out infinite;
}

.hero__float--a {
  top: 6%;
  right: -4%;
}

/* Bien a la izquierda: con `left: -6%` la tarjeta cruzaba media pantalla del
   teléfono y tapaba justo lo que se quiere enseñar. Un pedacito de solape es
   lo que la hace verse delante; media captura tapada, no. */
.hero__float--b {
  bottom: 3%;
  left: -14%;
  animation-delay: -3s;
}

.hero__float strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.hero__float .small {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
}

.hero__float-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--danger-soft);
  color: var(--danger-strong);
  font-weight: 700;
  font-size: 0.82rem;
}

/* Los avatares de la segunda tarjeta, montados uno sobre otro como en la app.
   El borde del color de la tarjeta es lo que los separa al superponerse. */
.hero__avatars {
  flex: none;
  display: flex;
}

.hero__avatars i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--surface);
  margin-left: -9px;
  background: var(--unconfirmed);
}

.hero__avatars i:first-child {
  margin-left: 0;
}

.hero__avatars i.is-help {
  background: var(--danger);
}

.hero__avatars i.is-safe {
  background: var(--safe-strong);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__copy {
    align-items: center;
    text-align: center;
  }

  .hero__copy h1,
  .hero__copy .lede,
  .hero__copy .disclosure {
    margin-inline: auto;
  }

  .hero__actions,
  .hero .stores {
    justify-content: center;
  }

  .hero__float--a {
    right: 2%;
  }

  .hero__float--b {
    left: 2%;
  }
}

/* En un teléfono el escenario es apenas más ancho que la maqueta, así que las
   tarjetas flotantes caen encima de la pantalla y tapan justo lo que se quiere
   mostrar. Son decoración: se ocultan. */
@media (max-width: 700px) {
  .hero__float {
    display: none;
  }
}

/* --- 8. Marco de teléfono ---------------------------------------------- */

/* Las capturas de esta página son las del teléfono de verdad, tal como salen:
   sin rótulos, sin fondo de tienda y sin frases encima. Lo único que se dibuja
   alrededor es este marco.
   🔴 A propósito NO lleva un notch pintado ni una barra de estado dibujada:
   la captura ya trae los suyos. Si la app cambia, la imagen cambia con ella y
   no queda un adorno mintiendo alrededor.
   El ancho se controla desde afuera con `--device-w`, para que el mismo marco
   sirva en el hero (grande), en una tarjeta (mediano) y en la parada oscura.
   ------------------------------------------------------------------------
   Hasta el 2026-09-23 acá vivían `.phone`, `.p-alert`, `.p-circle` y una
   treintena de clases más: un teléfono ENTERO dibujado a mano en HTML, con su
   tarjeta de sismo y su lista de personas. Se borró junto con el marcado que
   lo usaba. Si vuelve a hacer falta una pantalla falsa, casi siempre es señal
   de que falta una captura de verdad. */
.device {
  position: relative;
  width: 100%;
  max-width: var(--device-w, 300px);
  margin-inline: auto;
  padding: 7px;
  border-radius: 40px;
  background: linear-gradient(155deg, #3c3f47, #0b0b0d 58%);
  box-shadow: 0 30px 60px -26px rgba(13, 27, 51, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  /* 33px = 40 del marco − 7 de relleno: así la curva de la pantalla es
     concéntrica con la del marco y no queda un escalón en las esquinas. */
  border-radius: 33px;
  background: #fff;
}

/* --- 9. Bloques de sección -------------------------------------------- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* `align-items` centra las CAJAS; sin `text-align` un título que ocupa dos
   líneas queda con la segunda pegada a la izquierda dentro de una caja que sí
   está centrada. Se veía como un título mal alineado y en realidad faltaba
   esta línea. */
.section-head.center {
  align-items: center;
  text-align: center;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(22px, 2.6vw, 32px);
}

.panel--sunken {
  background: var(--surface-sunken);
  border-color: transparent;
}

.panel--accent {
  background: var(--accent-soft);
  border-color: transparent;
}

/* Bento de funciones.
   Rejilla de 12 columnas y no `repeat(3, 1fr)`: permite repartir un número
   impar de tarjetas sin dejar huérfanas. Cada tarjeta ocupa 4 → tres por fila,
   que es lo que usa `#privacidad`, la única sección que hoy la utiliza.

   🔴 Si alguna vez son cinco tarjetas, hay que volver acá: la rejilla no
   adivina el reparto y la quinta queda sola ocupando un tercio del ancho. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.bento > * {
  grid-column: span 4;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.feature--highlight {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
}

.feature--highlight .feature__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Nota: la regla que pinta este texto vive DESPUÉS de `.feature p`, más
   abajo en el archivo. Las dos tienen la misma especificidad (0,1,1) y una
   declarada acá arriba perdía por orden de aparición: el párrafo quedaba
   gris oscuro sobre azul, ilegible. Se dejó a propósito junto a `.feature p`. */

.feature__icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}

.feature p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

/* Va acá, inmediatamente después, y con una clase de más para no volver a
   depender del orden del archivo. */
.feature.feature--highlight p {
  color: #fff;
}

.feature.feature--highlight p strong {
  color: #fff;
}

.feature__link {
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.feature--highlight .feature__link {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.feature__link:hover {
  text-decoration: none;
}

@media (max-width: 1080px) {
  .bento > * {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .bento > * {
    grid-column: span 12;
  }
}

/* Split (texto + visual) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* --- 10. Planes --------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  /* `stretch` y no `start`: las dos tarjetas llegan a la misma altura, que es
     lo que hace que se puedan comparar de un vistazo. El botón de cada una se
     empuja al pie con `margin-top:auto`. */
  align-items: stretch;
}

.plan {
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan--pro {
  background: linear-gradient(160deg, var(--brand-light), var(--brand) 50%, #0a5099);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* --- Precios: una fila por opción, siempre con el mismo formato -----------
   Nombre a la izquierda, importe a la derecha, y debajo una línea que dice qué
   implica. Las tres opciones de Premium usan exactamente esta estructura: la
   que manda se distingue por marca y por ir primera, no por tener otro tamaño
   de letra ni otra caja. Eso era lo confuso de la versión anterior. */
.plan__prices {
  display: grid;
  gap: 10px;
}

.plan__price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}

.plan__price-name {
  font-weight: 600;
  font-size: 0.98rem;
}

.plan__price-amount {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}

.plan__price-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* La opción destacada: más aire y el importe más grande, pero la misma
   estructura de fila que las otras dos. */
.plan__price-row--lead {
  padding: 18px 18px 16px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.plan__price-row--lead .plan__price-amount {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
}

.plan__price-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Sobre el azul del plan Premium, las filas se dibujan con blancos
   translúcidos: los tokens claros (`--surface-sunken`, `--border`) darían un
   gris sobre azul que no se lee en ninguno de los dos modos. */
.plan--pro .plan__price-row {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.plan--pro .plan__price-note {
  color: rgba(255, 255, 255, 0.82);
}

.plan--pro .plan__price-row--lead {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
}

.plan--pro .plan__price-row--lead .plan__price-note {
  color: rgba(255, 255, 255, 0.92);
}

.plan--pro .plan__price-flag {
  background: #fff;
  color: var(--brand-deep);
}

.plan--pro .plan__note {
  color: rgba(255, 255, 255, 0.8);
}

.plan ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 0.94rem;
}

/* 🔴 El texto del ítem va SIEMPRE dentro de un <span>, no suelto.
   Esto es un contenedor flex, y en flex cada nodo de texto suelto y cada
   elemento se convierte en un ítem propio: un <strong> a mitad de la frase
   partía la línea en tres columnas separadas por el `gap`. Con el <span>, el
   <li> tiene exactamente dos hijos: el tic y la frase entera. */
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}

.plan li svg {
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

.plan--pro li svg {
  color: #fff;
}

.plan__note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* El botón al pie, para que las dos tarjetas cierren parejas. */
/* El botón al pie y a todo el ancho de la tarjeta, para que las dos cierren
   parejas. Antes iba con un `align-self:flex-start` en línea en el HTML y cada
   uno terminaba de un ancho distinto, según lo que dijera su texto. */
.plan > .btn {
  margin-top: auto;
  align-self: stretch;
}

/* 🔴 Acá vivían `.plan__price--lifetime`, `.plan__once`, `.plan__alts` y
   `.plan__alt`, más un segundo juego de media queries de `.bento` (1040px y
   620px) que pisaba al de la sección de funciones y movía el punto de quiebre
   sin que se viera en el archivo. Todo eso se borró el 2026-09-10 junto con el
   marcado que lo usaba. Si aparece una regla `.plan__alt` más abajo en el
   archivo, también es basura: había DOS, y la segunda anulaba a la primera. */

/* El nombre del plan. Antes era un chip con borde arriba de la tarjeta; ahora
   es el título que ya debía haber sido. */
.plan__name {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.plan__name-sub {
  color: var(--text-secondary);
  font-weight: 600;
}

.plan--pro .plan__name-sub {
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 800px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* --- 11. FAQ ------------------------------------------------------------ */

.faq {
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.faq__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  flex: none;
  width: 24px;
}

.faq__icon {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color 0.2s ease;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.faq__icon::before {
  width: 12px;
  height: 1.8px;
}

.faq__icon::after {
  width: 1.8px;
  height: 12px;
}

.faq__item.is-open .faq__icon {
  background: var(--brand);
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
  background: #fff;
}

.faq__item.is-open .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
  /* Sin esto, la respuesta cerrada mide 0px pero sigue existiendo para un
     lector de pantalla, que leería las nueve respuestas de corrido.
     El delay hace que se oculte recién al terminar la animación. */
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.faq__item.is-open .faq__a > div {
  visibility: visible;
  transition-delay: 0s;
}

.faq__a p {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: 76ch;
  padding: 0 60px 26px 42px;
}

.faq__a p + p {
  padding-top: 12px;
}

@media (max-width: 640px) {
  .faq__a p {
    padding-right: 4px;
    padding-left: 42px;
  }
}

/* --- 12. CTA final ------------------------------------------------------ */

.cta {
  border-radius: var(--r-3xl);
  background: linear-gradient(155deg, var(--brand-light), var(--brand) 48%, var(--brand-deep));
  color: #fff;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 72%);
}

.cta > * {
  position: relative;
}

.cta h2 {
  max-width: 18ch;
  margin-inline: auto;
}

.cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin: 18px auto 30px;
}

.cta .stores {
  justify-content: center;
}

.cta .store {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(8px);
}

.cta .store .store__top {
  color: rgba(255, 255, 255, 0.7);
}

/* --- 13. Footer --------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 72px) 32px;
  margin-top: clamp(48px, 6vw, 96px);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
}

.footer__brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 16px;
  max-width: 34ch;
  line-height: 1.55;
}

.footer h3 {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  font-weight: 500;
}

.footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer a {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.footer a:hover {
  color: var(--text);
  text-decoration: none;
}

.footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 0.82rem;
}

.footer__disclaimer {
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-top: 32px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* --- 14. Páginas legales ------------------------------------------------ */

.legal-hero {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.legal-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  margin-block: 18px 14px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 88px);
}

.legal-toc {
  position: sticky;
  top: 104px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
}

.legal-toc h2 {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  font-weight: 500;
}

.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: grid;
  gap: 9px;
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc a {
  color: var(--text-secondary);
  font-size: 0.87rem;
  line-height: 1.4;
  display: flex;
  gap: 8px;
}

.legal-toc a::before {
  content: counter(toc);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  flex: none;
  padding-top: 2px;
}

.legal-toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.legal-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 4vw, 52px);
  max-width: 78ch;
}

.legal-body > * + * {
  margin-top: 18px;
}

.legal-body h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  margin-top: 48px;
  scroll-margin-top: 104px;
  padding-top: 4px;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  font-size: 1.04rem;
  letter-spacing: -0.015em;
  margin-top: 28px;
}

.legal-body p,
.legal-body li {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.68;
}

.legal-body strong {
  color: var(--text);
  font-weight: 600;
}

.legal-body ul,
.legal-body ol {
  padding-left: 22px;
  display: grid;
  gap: 9px;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 12px;
  /* display:block para que la tabla pueda desbordar con scroll propio en vez
     de ensanchar la página. El texto sí envuelve: con nowrap la tercera
     columna quedaba cortada sin que se notara que había scroll. */
  display: block;
  overflow-x: auto;
}

.legal-body table th,
.legal-body table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.legal-body table th {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}

.legal-body table td {
  color: var(--text-secondary);
}

.callout {
  background: var(--accent-soft);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  border-left: 3px solid var(--accent);
}

.callout p {
  color: var(--text);
  font-size: 0.94rem;
}

.callout--warn {
  background: var(--danger-soft);
  border-left-color: var(--danger);
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .legal-toc {
    position: static;
  }
}

/* --- 15. Página centrada (404) ----------------------------------------- */

.notice {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding-block: clamp(32px, 6vw, 72px);
}

.notice__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  padding: clamp(28px, 4vw, 52px);
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.notice__links {
  list-style: none;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 14px;
  margin-top: 28px;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* --- 16. Animación de entrada ------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Párrafo de cierre de una sección, sobre el fondo claro/oscuro de la página.
   Centrado y con el mismo ancho de lectura que un `.lede`, para que no cruce
   los 1240px del contenedor de lado a lado. */
.section-cierre {
  margin: 34px auto 0;
  max-width: 76ch;
  text-align: center;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-secondary);
}

.section-cierre strong {
  color: var(--text);
}

/* Etiqueta «Premium» dentro de un título de tarjeta */
.tag-pro {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   17 · Línea de tiempo, capturas y la parada oscura

   La página cuenta los tres momentos de un sismo —antes, cuando tiembla,
   después— y estas son las piezas que eso necesita.

   🔴 Acá NO hay píldoras. Los rótulos de sección eran chips con borde y fondo
   («CÓMO FUNCIONA», «PRIVACIDAD», «ENTRE SISMO Y SISMO») y le daban a la
   página el aire de plantilla genérica. Se cambiaron por `.kicker`, que es
   tipografía y no una cajita, y por titulares a dos tonos (`.soft`). Si
   aparece la tentación de meter otro chip arriba de un título, la respuesta
   casi siempre es que ese texto o es parte del título o no hace falta.
   ========================================================================== */

/* Rótulo de sección. Mismo peso informativo que el viejo chip, sin la caja. */
.kicker {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.tl {
  position: relative;
  display: grid;
  gap: clamp(52px, 7vw, 96px);
}

/* El riel que une las tres paradas, en dos capas: una tenue de fondo y otra
   azul que se va llenando conforme se baja. El relleno es una animación ligada
   al scroll (`animation-timeline`), sin una sola línea de JS. Donde el
   navegador no la soporte, el @supports no aplica: queda el riel tenue de
   siempre y no se rompe nada. */
.tl::before,
.tl::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  /* 🔴 Los dos rieles van explícitamente detrás. Sin esto el azul tapaba los
     números: `::after` es el ÚLTIMO hijo de `.tl`, así que se pinta después de
     las paradas y de todo lo que hay dentro de ellas. `::before` no daba
     problema —es el primer hijo— y por eso el fallo solo se veía en la parte
     del riel que ya se había llenado con el scroll. */
  z-index: 0;
}

/* Azul tenue y no gris: si el navegador no soporta la animación de scroll, el
   riel de abajo es lo único que se ve, y tiene que verse deliberado. */
.tl::before {
  background: linear-gradient(
    180deg,
    rgba(13, 107, 201, 0.34),
    rgba(13, 107, 201, 0.08)
  );
}

.tl::after {
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  transform: scaleY(0);
  transform-origin: top;
}

@supports (animation-timeline: view()) {
  .tl::after {
    animation: tl-fill linear both;
    animation-timeline: view();
    animation-range: cover 12% cover 76%;
  }
}

@keyframes tl-fill {
  to {
    transform: scaleY(1);
  }
}

/* 🔴 El `z-index` va ACÁ, en la parada entera, y no en el número. Este fue el
   segundo intento: poner `z-index: 1` en `.tl__dot` no servía de nada porque
   `.tl__stop` también lleva la clase `.reveal`, y `.reveal` trae
   `will-change: transform` — que **crea un contexto de apilamiento propio**.
   Con eso, el z-index del número solo compite contra sus hermanos de adentro y
   nunca contra el riel, que es hermano de la parada. Levantando la parada, el
   número sube con ella. */
.tl__stop {
  position: relative;
  z-index: 1;
  padding-left: clamp(56px, 6vw, 74px);
}

/* Y el halo del color del fondo es lo que corta la línea por detrás del
   círculo, en lugar de dejarla asomar por los costados. */
.tl__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 0 0 7px var(--bg-grouped),
    0 10px 20px -10px rgba(13, 107, 201, 0.8);
  transform: scale(0.72);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease;
}

.tl__stop.is-visible .tl__dot {
  transform: scale(1);
  opacity: 1;
}

.tl__head {
  display: grid;
  gap: 12px;
  max-width: 62ch;
}

.tl__head .h3,
.tl__head .lede {
  margin: 0;
}

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

.shots {
  margin-top: clamp(26px, 3vw, 38px);
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}

.shot {
  margin: 0;
  display: grid;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 22px 22px 26px;
  /* La entrada escalonada la dispara la parada entera al hacerse visible; cada
     tarjeta espera un poco más que la anterior. Es el mismo efecto que el
     `data-reveal-delay` del JS, pero sin anidar un `.reveal` dentro de otro
     —dos transformaciones encimadas y la de adentro se pelea con el hover—. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.tl__stop.is-visible .shot {
  opacity: 1;
  transform: none;
}

.tl__stop.is-visible .shot:nth-child(2) {
  transition-delay: 0.1s;
}

.tl__stop.is-visible .shot:nth-child(3) {
  transition-delay: 0.2s;
}

/* Especificidad igualada a la regla de arriba a propósito: con `.shot:hover`
   a secas, `.tl__stop.is-visible .shot { transform: none }` le ganaba y la
   tarjeta no se levantaba nunca. */
.tl__stop.is-visible .shot:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.tl__stop.is-visible .shot:hover .device {
  transform: translateY(-6px);
}

/* El teléfono se sale por abajo de su recuadro de color: es lo que hace que la
   captura se lea como un objeto y no como una foto pegada. */
.shot__stage {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(
    165deg,
    var(--accent-soft),
    color-mix(in srgb, var(--accent-soft) 40%, var(--surface-sunken))
  );
  padding: 26px 24px 0;
  overflow: hidden;
  display: grid;
  place-items: end center;
}

/* El ancho va en porcentaje con tope, no en píxeles fijos: la parada 1 tiene
   tres tarjetas y la 3 tiene dos, así que la misma medida fija dejaba al
   teléfono nadando en una tarjeta el doble de ancha. */
.shot__stage .device {
  --device-w: min(74%, 252px);
  margin-bottom: -13%;
}

.shot figcaption {
  display: grid;
  gap: 6px;
}

.shot figcaption strong {
  font-size: 1.04rem;
  letter-spacing: -0.015em;
}

.shot figcaption p,
.flow__step p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* --- Parada 2: la oscura ------------------------------------------------ */

/* Es el único momento de la página en que algo está pasando de verdad, y el
   contraste lo dice sin una palabra.
   Los colores van fijos y no por tokens: en modo oscuro un `var(--surface)`
   la volvería casi blanca y el texto blanco de adentro desaparecería. */
.flow {
  margin-top: clamp(26px, 3vw, 38px);
  background: linear-gradient(165deg, #171a20, #0a0b0e 62%);
  color: #fff;
  border-radius: var(--r-3xl);
  padding: clamp(26px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.flow__device {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin: 0;
}

.flow__device .device {
  --device-w: 268px;
}

.flow__device figcaption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 32ch;
}

.flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 18px;
  padding-bottom: 26px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.tl__stop.is-visible .flow__step {
  opacity: 1;
  transform: none;
}

.tl__stop.is-visible .flow__step:nth-child(2) {
  transition-delay: 0.12s;
}

.tl__stop.is-visible .flow__step:nth-child(3) {
  transition-delay: 0.24s;
}

.flow__step:last-child {
  padding-bottom: 0;
}

/* El hilo que baja de un paso al siguiente: el mismo recurso que el riel de la
   línea de tiempo, en chico y dentro de la caja oscura. */
.flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(92, 168, 245, 0.55),
    rgba(92, 168, 245, 0.05)
  );
}

.flow__step b {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(92, 168, 245, 0.16);
  color: #8cc4fa;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

.flow__step strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  padding-top: 7px;
}

.flow__step p {
  color: rgba(255, 255, 255, 0.66);
}

/* --- Captura suelta, sin tarjeta: la de Noticias ------------------------- */

.media {
  display: grid;
  place-items: center;
}

.media .device {
  --device-w: 272px;
}

/* --- Movimiento reducido ------------------------------------------------ */

/* Todo lo que se mueve en la página se apaga acá, en un solo sitio: el
   flotar del hero, las entradas escalonadas, el riel que se llena y el
   desplazamiento suave de los anclas. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__float,
  .tl::after {
    animation: none;
  }

  .tl::after {
    transform: scaleY(1);
  }

  .device,
  .shot,
  .tl__dot,
  .flow__step {
    transition: none;
  }

  .shot,
  .flow__step {
    opacity: 1;
    transform: none;
  }

  .tl__dot {
    opacity: 1;
    transform: none;
  }
}

/* --- Adaptación a pantallas chicas -------------------------------------- */

@media (max-width: 900px) {
  .flow {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .flow__steps {
    width: 100%;
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .tl::before,
  .tl::after {
    left: 16px;
  }

  .tl__stop {
    padding-left: 48px;
  }

  .tl__dot {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    box-shadow: 0 0 0 6px var(--bg-grouped),
      0 8px 16px -8px rgba(13, 107, 201, 0.8);
  }
}