/*
 * OrganizaTÉ — hoja de estilo del sitio
 *
 * Los colores son los MISMOS de la app, sacados de src/constants/theme.ts. Si el sitio y
 * la app no se parecen, quien llega desde la tienda duda de si está en el lugar correcto.
 *
 * Reglas que vienen de la app y se respetan acá:
 *   - El azul marino es RELLENO de botones y acentos, nunca color de letra suelta.
 *   - Texto grande. Lo va a leer alguien de 70 años, en un teléfono, con sol.
 *   - Nada de jerga. Ni "contabilidad", ni "dashboard", ni "analytics".
 */

:root {
  --azul: #02317b;
  --azul-oscuro: #012050;
  --fondo: #eef1f5;
  --fondo-hondo: #e3e8ef;
  --superficie: #ffffff;
  --texto-fuerte: #0d1b2a;
  --texto-suave: #5a6b7d;
  --borde: #dde3ec;
  --positivo: #1b7a45;
  --ambar: #ff9600;
  /* #9e5d00 daba 4.24:1 sobre el fondo hondo, abajo del minimo de 4.5. */
  --ambar-texto: #8f5400;

  --ancho: 1080px;
  --radio: 18px;

  /*
   * Las curvas. Las de fabrica del navegador -ease-out, ease-in-out- son demasiado
   * suaves: el movimiento se nota lento sin llegar a leerse como intencional.
   *
   * NUNCA ease-in en una interfaz. Arranca despacio, que es justo el instante en que la
   * persona esta mirando; un ease-out de 200ms se SIENTE mas rapido que un ease-in de 200.
   */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sombra: 0 1px 2px rgba(13, 27, 42, 0.06), 0 8px 24px rgba(13, 27, 42, 0.06);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto-fuerte);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* 18px de base: mas grande que lo habitual, a proposito. */
  font-size: 18px;
  line-height: 1.65;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─────────────── Barra de arriba ─────────────── */

.barra {
  background: var(--azul);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.barra img {
  height: 34px;
  width: auto;
  display: block;
}

.barra nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.barra nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  /* Area tactil comoda: una barra que hay que apuntar con precision no la usa nadie. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.barra nav a:hover,
.barra nav a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.barra nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.22);
}

/* ─────────────── Portada ─────────────── */

.portada {
  background: var(--azul);
  color: #ffffff;
  padding: 64px 0 76px;
}

.portada-reja {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.portada h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.15;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.portada p {
  font-size: clamp(18px, 2.2vw, 21px);
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.92);
}

.portada .icono-grande {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 44px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* ─────────────── Botones ─────────────── */

.botones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border: 2px solid transparent;
}

.boton-claro {
  background: #ffffff;
  color: var(--azul);
}

.boton-claro:hover,
.boton-claro:focus-visible {
  background: var(--fondo-hondo);
}

.boton-borde {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.boton-borde:hover,
.boton-borde:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.boton-azul {
  background: var(--azul);
  color: #ffffff;
}

.boton-azul:hover,
.boton-azul:focus-visible {
  background: var(--azul-oscuro);
}

/* Un boton apagado dice la verdad: todavia no se puede. Mejor que esconderlo. */
.boton-apagado {
  background: rgba(255, 255, 255, 0.18);
  /* 0.72 daba 4.18:1 contra su propio fondo. Apagado no quiere decir ilegible. */
  color: rgba(255, 255, 255, 0.88);
  cursor: default;
  pointer-events: none;
}

.nota-boton {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

/* ─────────────── Secciones ─────────────── */

main {
  padding: 64px 0 24px;
}

section {
  margin-bottom: 64px;
}

h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: 600;
}

.bajada {
  color: var(--texto-suave);
  margin: 0 0 32px;
  font-size: 19px;
  max-width: 62ch;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  box-shadow: var(--sombra);
}

.tarjeta h3 {
  color: var(--texto-fuerte);
}

.tarjeta p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 17px;
}

/* La franja de "lo que NO hace": es lo que mas confianza da y va destacado. */
.franja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 6px solid var(--positivo);
  border-radius: var(--radio);
  padding: 30px;
  box-shadow: var(--sombra);
}

.franja ul {
  margin: 0;
  padding-left: 22px;
}

.franja li {
  margin-bottom: 10px;
}

.franja li:last-child {
  margin-bottom: 0;
}

/* ─────────────── Texto largo: legales y soporte ─────────────── */

.documento {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(24px, 5vw, 52px);
  box-shadow: var(--sombra);
  /* 76 caracteres por renglon: mas ancho que eso, el ojo pierde la linea al volver. */
  max-width: 76ch;
  /* Centrado. Pegado a la izquierda dejaba un tercio de pantalla vacio al lado. */
  margin-inline: auto;
}

.documento h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 6px;
  line-height: 1.2;
}

.documento h2 {
  font-size: 23px;
  margin: 40px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
}

.documento h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.documento h3 {
  font-size: 19px;
  margin: 26px 0 6px;
}

.documento p,
.documento li {
  font-size: 17.5px;
  color: var(--texto-fuerte);
}

.documento ul {
  padding-left: 22px;
}

.documento li {
  margin-bottom: 8px;
}

.documento table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16.5px;
}

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

.documento th {
  background: var(--fondo-hondo);
  font-weight: 600;
}

.fecha {
  color: var(--texto-suave);
  font-size: 16px;
  margin: 0 0 4px;
}

/* Aviso de borrador: honesto y visible, no escondido al pie. */
.aviso {
  background: #fff8ec;
  border: 1px solid #f2d9ac;
  border-left: 6px solid var(--ambar);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0 8px;
  font-size: 16.5px;
  color: var(--ambar-texto);
}

.aviso strong {
  color: var(--ambar-texto);
}

/* ─────────────── Preguntas ─────────────── */

.pregunta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}

.pregunta h3 {
  margin: 0 0 8px;
}

.pregunta p {
  margin: 0 0 10px;
  color: var(--texto-suave);
  font-size: 17px;
}

.pregunta p:last-child {
  margin-bottom: 0;
}

/* ─────────────── Enlaces y pie ─────────────── */

a {
  color: var(--azul);
  text-underline-offset: 3px;
}

.documento a,
.pregunta a {
  font-weight: 600;
}

footer {
  background: var(--azul);
  color: rgba(255, 255, 255, 0.85);
  padding: 44px 0;
  margin-top: 60px;
  font-size: 16px;
}

footer .contenedor {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

footer a {
  color: #ffffff;
  display: inline-block;
  padding: 6px 0;
}

footer nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ─────────────── Teléfonos ─────────────── */

@media (max-width: 800px) {
  /* En telefono el menu ocupa dos renglones. Pegado arriba se come una octava parte de
     la pantalla en todo momento, y en una pagina de texto largo eso es mucho. */
  .barra {
    position: static;
  }

  .portada-reja {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .portada .icono-grande {
    max-width: 190px;
    order: -1;
  }

  /* El telefono va ARRIBA del texto en pantalla chica: es lo que vende el producto, y
     abajo del todo no lo ve nadie. */
  .portada-imagen {
    order: -1;
  }

  .botones {
    justify-content: center;
  }

  .insignia,
  .forma-correo-etiqueta {
    margin-left: auto;
    margin-right: auto;
  }

  /* Las filas alternadas dejan de alternar: en una columna, la imagen siempre va
     despues del texto que la explica. */
  .fila,
  .fila-invertida {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fila-invertida .fila-texto {
    order: 0;
  }

  .forma-correo-fila {
    flex-direction: column;
    align-items: stretch;
  }

  .bajada {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Quien pidió menos movimiento no debería recibir ninguno. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* El foco del teclado tiene que verse. Se navega así más de lo que se cree. */
:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * LA PORTADA NUEVA
 *
 * Antes toda la pagina era una columna de bloques iguales de arriba a abajo. Nada
 * guiaba la mirada y no se veia ni una pantalla de la app — que es como vender comida
 * sin fotos del plato.
 *
 * Lo que cambia: secciones de ancho completo que alternan fondo, filas que alternan el
 * lado de la imagen, y un solo acento fuerte (el bloque de privacidad en azul).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.insignia {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 18px;
}

.portada .bajada {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 26px;
}

.prueba-social {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 18px 0 0;
}

.prueba-social strong {
  color: #ffffff;
}

/* ─────────────── El formulario de aviso ─────────────── */

.forma-correo {
  margin: 0 0 22px;
  max-width: 520px;
}

.forma-correo-etiqueta {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: inherit;
}

.forma-correo-fila {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.forma-correo input[type='email'] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  /* 17px o mas: abajo de eso, Safari en iPhone hace zoom al tocar el campo. */
  font-size: 17px;
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #ffffff;
  color: var(--texto-fuerte);
}

.forma-correo input[type='email']::placeholder {
  /* Un placeholder gris claro es lo primero que deja de verse a los 70. */
  color: var(--texto-suave);
}

.forma-correo button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.forma-correo button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.forma-correo-nota {
  font-size: 15px;
  margin: 10px 0 0;
  opacity: 0.8;
}

/* Vacio no ocupa lugar: asi el formulario no salta cuando aparece el mensaje. */
.forma-correo-estado {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 0;
}

.forma-correo-estado:empty {
  display: none;
}

.forma-correo-estado.bueno {
  color: #7ee2a8;
}

.forma-correo-estado.malo {
  color: #ffd27a;
}

.seccion-clara .forma-correo-estado.bueno {
  color: var(--positivo);
}

.seccion-clara .forma-correo-estado.malo {
  color: var(--ambar-texto);
}

.forma-correo-centrada {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* ─────────────── El marco del telefono y el hueco de la captura ─────────────── */

.marco {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 10px;
  background: #0d1b2a;
  border-radius: 40px;
  box-shadow: 0 20px 50px rgba(13, 27, 42, 0.28);
}

/*
 * EL HUECO ES PROVISIONAL, Y SE TIENE QUE NOTAR.
 *
 * Mientras no existan las capturas reales, cada lugar donde va una muestra cual falta y
 * en que medida. Un cuadro gris y mudo se termina subiendo por descuido; uno que dice
 * "Captura 3" a rayas, no.
 */
.hueco {
  aspect-ratio: 1170 / 2532;
  border-radius: 30px;
  background: repeating-linear-gradient(
    45deg,
    #e8edf4,
    #e8edf4 12px,
    #dde4ee 12px,
    #dde4ee 24px
  );
  border: 2px dashed #9aa7b5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}

.hueco-titulo {
  font-weight: 800;
  font-size: 18px;
  color: var(--azul);
}

.hueco-detalle {
  font-size: 15px;
  line-height: 1.4;
  color: var(--texto-suave);
}

.hueco-medida {
  font-size: 13px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* ─────────────── Secciones de ancho completo ─────────────── */

.seccion {
  padding: 72px 0;
  margin-bottom: 0;
}

.seccion-clara {
  background: var(--superficie);
}

.seccion-problema {
  background: var(--fondo-hondo);
}

.seccion-oscura {
  background: var(--azul);
  color: #ffffff;
}

.seccion-oscura .bajada {
  color: rgba(255, 255, 255, 0.85);
}

.seccion-oscura a {
  color: #ffffff;
}

.titulo-seccion {
  margin-bottom: 14px;
}

.centrado {
  text-align: center;
}

.bajada.centrado {
  margin-left: auto;
  margin-right: auto;
}

.sobretitulo {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  font-weight: 700;
  color: var(--ambar-texto);
  margin: 0 0 10px;
}

/* ─────────────── Filas alternadas ─────────────── */

.fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 36px 24px;
}

.fila-invertida .fila-texto {
  order: 2;
}

.fila-texto h3 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 12px;
}

.fila-texto p {
  color: var(--texto-suave);
  font-size: 18px;
  margin: 0 0 12px;
}

.fila-texto p strong {
  color: var(--texto-fuerte);
}

/* ─────────────── Precio ─────────────── */

.precio {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 40px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.precio-monto {
  font-size: clamp(42px, 7vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--azul);
  letter-spacing: -0.02em;
}

.precio-monto span {
  font-size: 20px;
  font-weight: 600;
  color: var(--texto-suave);
  letter-spacing: 0;
}

.precio-anual {
  margin: 6px 0 26px;
  color: var(--texto-suave);
}

.precio-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
}

.precio-lista li {
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--borde);
  position: relative;
}

.precio-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--positivo);
  font-weight: 800;
}

.precio-lista li:last-child {
  border-bottom: 0;
}

.precio-nota {
  font-size: 16px;
  color: var(--texto-suave);
  margin: 0;
}

/* ─────────────── Privacidad ─────────────── */

.lista-privacidad {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
}

.lista-privacidad li {
  padding-left: 30px;
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}

.lista-privacidad li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #7ee2a8;
  font-weight: 800;
}

.lista-privacidad strong {
  color: #ffffff;
}

.nota-privacidad {
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 800px) {
  .seccion {
    padding: 52px 0;
  }

  .fila {
    padding: 24px 0;
  }

  .lista-privacidad {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .precio {
    padding: 28px 22px;
  }

  .marco {
    max-width: 260px;
  }
}

/*
 * ARREGLOS QUE APARECIERON AL MIRAR LA PAGINA DE VERDAD, EN UN TELEFONO.
 *
 * 1. El boton de "Avisarme" es .boton-azul, y la portada TAMBIEN es azul. Quedaba azul
 *    sobre azul: el texto se leia flotando, sin boton. Sobre fondo oscuro el boton
 *    principal tiene que ser claro.
 *
 * 2. La captura estaba puesta ARRIBA del texto en pantalla chica, pensando que la imagen
 *    vende. Con un telefono de 812px de alto, lo que hacia era ocupar la primera pantalla
 *    entera y empujar el titular abajo del doblez: quien entraba veia un rectangulo
 *    rayado y nada mas. Primero se dice que es, despues se muestra.
 */

.portada .boton-azul,
.seccion-oscura .boton-azul {
  background: #ffffff;
  color: var(--azul);
}

.portada .boton-azul:hover,
.portada .boton-azul:focus-visible,
.seccion-oscura .boton-azul:hover,
.seccion-oscura .boton-azul:focus-visible {
  background: var(--fondo-hondo);
  color: var(--azul-oscuro);
}

@media (max-width: 800px) {
  /* El titular primero. La captura va despues, y mas chica: tiene que caber junto con
     algo mas, no ser la pantalla entera. */
  .portada-imagen {
    order: 0;
  }

  .marco {
    max-width: 210px;
  }

  /* Las insignias de las tiendas, una al lado de la otra: apiladas gastaban dos renglones
     enteros para decir "todavia no". */
  .portada .botones {
    gap: 10px;
  }

  .portada .boton-apagado {
    padding: 0 16px;
    font-size: 15px;
    min-height: 46px;
  }
}

/*
 * LAS FILAS, A UNA COLUMNA EN TELEFONO — Y ESTA VEZ AL FINAL DEL ARCHIVO.
 *
 * Esta regla ya estaba escrita mas arriba, dentro de la consulta de 800px que venia de
 * antes. No servia de nada: `.fila { grid-template-columns: 1fr 1fr }` se define DESPUES,
 * tiene la misma especificidad, y en un empate gana la que viene ultima.
 *
 * El sintoma era de los que no se ven leyendo el codigo: en un telefono de 375px la
 * pagina se corria 9px de lado, con una barra horizontal abajo y el texto de las filas
 * invertidas saliendose por la derecha.
 */
@media (max-width: 800px) {
  .fila,
  .fila-invertida {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fila-invertida .fila-texto {
    order: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * LAS CAPTURAS DENTRO DEL MARCO
 * ═══════════════════════════════════════════════════════════════════════════════ */

.marco img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * MOVIMIENTO
 *
 * Todo lo de aca cuelga de .con-animacion, que la pone el script del <head> y solo si el
 * navegador sabe hacer el resto. Sin JavaScript no hay animacion y se ve todo.
 *
 * LA PORTADA NO ENTRA. Es lo primero que se pinta y lleva el titular y el formulario:
 * animarla retrasa justo lo que la persona vino a leer y a tocar.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.con-animacion .revelar {
  opacity: 0;
  /* 18px: lo justo para que se lea como entrada. Mas es un salto, y a quien lee despacio
     un salto le hace perder el renglon. */
  transform: translateY(18px);
  transition:
    opacity 0.42s var(--ease-out),
    transform 0.42s var(--ease-out);
}

.con-animacion .revelar.visible {
  opacity: 1;
  transform: none;
}

/* Dentro de una fila, primero el texto y despues la imagen. 70ms: se lee como una sola
   cosa que llega, no como dos cosas sueltas. */
.con-animacion .fila .fila-imagen.revelar {
  transition-delay: 70ms;
}

/* Las tarjetas y la lista de privacidad entran escalonadas por su posicion. */
.con-animacion .tarjeta.revelar:nth-child(2) {
  transition-delay: 70ms;
}
.con-animacion .tarjeta.revelar:nth-child(3) {
  transition-delay: 140ms;
}

.con-animacion .lista-privacidad .revelar:nth-child(2) { transition-delay: 50ms; }
.con-animacion .lista-privacidad .revelar:nth-child(3) { transition-delay: 100ms; }
.con-animacion .lista-privacidad .revelar:nth-child(4) { transition-delay: 150ms; }
.con-animacion .lista-privacidad .revelar:nth-child(5) { transition-delay: 200ms; }
.con-animacion .lista-privacidad .revelar:nth-child(6) { transition-delay: 250ms; }
.con-animacion .lista-privacidad .revelar:nth-child(7) { transition-delay: 300ms; }

/* ─────────────── Respuesta al toque ─────────────── */

/*
 * El boton se hunde al apretarlo. Es confirmacion de que el toque llego, y en un telefono
 * de gama baja -donde la respuesta real puede tardar- es lo unico que evita que alguien
 * lo apriete tres veces.
 */
.boton,
.forma-correo button {
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    transform 0.12s var(--ease-out);
}

.boton:active,
.forma-correo button:active {
  transform: scale(0.97);
}

.boton-apagado:active {
  transform: none;
}

/* El mensaje del formulario aparece sin empujar nada de golpe. */
.forma-correo-estado {
  transition:
    opacity 0.16s var(--ease-out),
    transform 0.16s var(--ease-out);
}

.forma-correo-estado:empty {
  opacity: 0;
  transform: translateY(-4px);
}

/*
 * El hover va detras de una consulta de puntero fino. En una pantalla tactil, tocar
 * dispara un :hover falso que se queda pegado hasta que se toca otra cosa.
 */
@media (hover: hover) and (pointer: fine) {
  .tarjeta {
    transition:
      transform 0.2s var(--ease-out),
      box-shadow 0.2s var(--ease-out);
  }

  .tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(13, 27, 42, 0.07), 0 14px 32px rgba(13, 27, 42, 0.1);
  }
}

/*
 * MENOS MOVIMIENTO NO ES CERO MOVIMIENTO.
 *
 * Quien lo pidio suele hacerlo porque el desplazamiento le marea o le cuesta seguirlo. Se
 * quita lo que se mueve de lugar y se deja el cambio de opacidad, que sigue diciendo "esto
 * es nuevo" sin desplazar nada.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .con-animacion .revelar {
    transform: none;
    transition: opacity 0.2s ease;
  }

  .con-animacion .revelar.visible {
    transform: none;
  }

  .con-animacion .fila .fila-imagen.revelar,
  .con-animacion .tarjeta.revelar,
  .con-animacion .lista-privacidad .revelar {
    transition-delay: 0s;
  }

  .boton:active,
  .forma-correo button:active,
  .tarjeta:hover {
    transform: none;
  }

  .forma-correo-estado:empty {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * LO QUE ENCONTRO LA AUDITORIA
 * ═══════════════════════════════════════════════════════════════════════════════ */

html {
  /*
   * El sitio solo tiene version clara. Declararlo evita que el navegador le aplique su
   * inversion automatica de modo oscuro y termine con texto gris sobre gris.
   */
  color-scheme: light;
}

/*
 * EL RETRASO DE 300ms AL TOCAR.
 *
 * Sin esto, el navegador espera por si el toque era el primero de un doble toque para
 * hacer zoom. Son 300 milisegundos de nada despues de cada toque, y en un telefono lento
 * se suman a lo que ya tarda: la persona cree que no registro y vuelve a tocar.
 */
body {
  touch-action: manipulation;
  /* El recuadro gris que Android dibuja encima al tocar. Se reemplaza por algo de la
     marca en vez de dejarlo negro translucido. */
  -webkit-tap-highlight-color: rgba(2, 49, 123, 0.15);
}

/*
 * Las muescas y las barras del telefono. En un iPhone de lado, sin esto, el texto queda
 * debajo de la muesca y se pierde la primera letra de cada renglon.
 */
.contenedor {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/*
 * Los titulos se reparten en renglones parejos en vez de dejar una palabra sola abajo.
 * Donde no este soportado, no pasa nada: se corta como siempre.
 */
h1,
h2,
h3 {
  text-wrap: balance;
}

p.bajada,
.fila-texto p {
  text-wrap: pretty;
}

/*
 * SALTAR AL CONTENIDO.
 *
 * Quien navega con teclado tiene que pasar por los cuatro enlaces de la barra en CADA
 * pagina antes de llegar al texto. Este enlace vive escondido y aparece al recibir el
 * foco, que es la primera parada del tabulador.
 */
.saltar {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 20;
  background: #ffffff;
  color: var(--azul);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top 0.16s var(--ease-out);
}

.saltar:focus {
  top: 0;
}

/* La barra pegajosa tapaba el titulo al saltar hasta el. */
main,
section[id],
h2[id] {
  scroll-margin-top: 90px;
}

/*
 * Los ✓ decorativos de las listas los lee el lector de pantalla, uno por renglon: "marca
 * de verificacion, no se venden los datos; marca de verificacion, no hay publicidad".
 * La barra con comillas vacias es texto alternativo: lo deja a la vista y lo calla.
 */
.precio-lista li::before,
.lista-privacidad li::before {
  content: '✓' / '';
}

/*
 * EL SOBRETITULO ES AMBAR, Y HASTA AHORA SALIA GRIS.
 *
 * `.sobretitulo` define el color, pero `.fila-texto p` viene despues en el archivo Y
 * tiene la misma especificidad mas un elemento (0,1,1 contra 0,1,0). Gana el generico.
 *
 * Es la segunda vez hoy que pasa lo mismo: una regla generica escrita mas abajo pisando
 * una especifica escrita mas arriba. No se ve leyendo el codigo —las dos reglas estan
 * bien— y no se ve mirando la pagina, porque gris sobre gris claro tampoco chilla. Se
 * ve preguntandole al navegador que color calculo.
 */
.fila-texto .sobretitulo {
  color: var(--ambar-texto);
  font-size: 14px;
}