/*
 * 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;
  /*
   * ═══════════════════════════════════════════════════════════════════════════════
   * 17px, NO 18. Y LOS TITULARES BAJARON CON EL.
   *
   * Los 18px eran a proposito —esto lo lee gente de 70 años— y la intencion se
   * mantiene: 17 sigue siendo mas grande que el 16 de fabrica de cualquier navegador.
   *
   * Lo que estaba mal no era el cuerpo sino la ESCALA COMPLETA en una computadora. El
   * titular era clamp(34px, 5vw, 52px): en una laptop de Windows con el escalado del
   * sistema al 150% —que es la configuracion mas comun que hay— el ancho en pixeles CSS
   * queda en ~1280, el 5vw se pasa del tope y el titular sale a 52px, que fisicamente
   * son casi 80. El dueño reporto que tenia que bajar el zoom al 70% para poder leerlo.
   *
   * El 70% de zoom es el dato: el sitio estaba ~1.4 veces mas grande de lo que debia.
   * Los seis clamp() bajaron de tope y de coeficiente para que a 1280 de ancho CSS el
   * titular de 44px y no 52, y para que a 1920 se vea igual de bien.
   * ═══════════════════════════════════════════════════════════════════════════════
   */
  font-size: 17px;
  line-height: 1.6;
}

.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(30px, 3.4vw, 44px);
  line-height: 1.15;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.portada p {
  font-size: clamp(17px, 1.5vw, 19px);
  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(24px, 2.4vw, 31px);
  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(25px, 2.6vw, 33px);
  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 los diagramas ─────────────── */

/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * EN LA COMPUTADORA NO SE VEIA UN TELEFONO: SE VEIA UNA CAPTURA SUELTA.
 *
 * El marco eran 10px de borde oscuro. A 300px de ancho eso es un filete: la vista lo
 * lee como el borde de una imagen, no como un aparato. Y sin aparato alrededor, una
 * captura de pantalla grande no dice "asi se ve en tu telefono" — dice "aca hay una
 * imagen grande", que es exactamente lo que se reporto.
 *
 * Ahora el marco es un telefono: bisel grueso, esquinas de telefono, la pastilla del
 * altavoz arriba y el borde de aluminio como reflejo. Cuesta 6px mas de ancho y cambia
 * por completo lo que se entiende.
 * ═══════════════════════════════════════════════════════════════════════════════
 */
.marco {
  position: relative;
  width: 100%;
  max-width: 264px;
  margin: 0 auto;
  padding: 12px;
  background: #0d1b2a;
  /* 46 afuera y 34 adentro: la diferencia es el grosor del bisel. Si los dos radios
     fueran iguales, la esquina de la pantalla no seguiria la del aparato. */
  border-radius: 46px;
  /* El filo de aluminio. Un telefono no es un rectangulo negro plano. */
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.16),
    0 22px 48px rgba(13, 27, 42, 0.3);
}

/* La pastilla del altavoz. Decorativa: no lleva texto ni rol. */
.marco::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 1;
}

/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * LOS DIAGRAMAS, QUE REEMPLAZARON A LOS DOS "FALTA ESTA".
 *
 * Habia dos recuadros rayados esperando una captura que nunca llego, con el cartel
 * "Falta esta" a la vista en el sitio publicado.
 *
 * No se reemplazaron por capturas inventadas, y eso importa: una imagen armada a mano
 * que parezca una foto de la app es una mentira sobre como se ve el producto. Estos son
 * DIAGRAMAS y se ven como diagramas — fondo claro, sin marco de telefono, con la palabra
 * "Ejemplo" arriba. Explican una cuenta y una secuencia, que es lo que esas dos
 * secciones tenian para decir; ninguna de las dos era realmente una pantalla.
 * ═══════════════════════════════════════════════════════════════════════════════
 */
.diagrama {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 20px;
}

.diagrama-etiqueta {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.diagrama-rotulo {
  margin: 0;
  font-size: 14px;
  color: var(--texto-suave);
}

.diagrama-rotulo-final {
  margin-top: 16px;
}

.diagrama-monto {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.diagrama-restas {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--borde);
  display: grid;
  gap: 8px;
}

.diagrama-restas li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  color: var(--texto-suave);
}

/* Lo que se resta va en el naranja de "sale plata", el mismo de la app. */
.diagrama-resta {
  color: var(--ambar-texto);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.diagrama-total {
  margin: 2px 0 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--positivo);
  font-variant-numeric: tabular-nums;
}

.diagrama-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.diagrama-sub {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--texto-suave);
}

/* ── Los cinco pasos de un encargo ── */

.pasos {
  list-style: none;
  display: flex;
  margin: 20px 0 0;
  padding: 0;
}

.paso {
  /*
   * `flex: 1 1 0` con `min-width: 0`: sin el min-width, un elemento flex no baja de su
   * ancho de contenido, asi que "En camino" empujaba a los vecinos y los rotulos se
   * montaban unos sobre otros. Con esto las cinco columnas miden igual y el texto que
   * no entra en una linea pasa a dos, que es lo que tiene que pasar.
   */
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--texto-suave);
  /* Deja lugar arriba para el punto y la linea. */
  padding-top: 20px;
  padding-inline: 2px;
}

/* El punto. */
.paso::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--borde);
  background: var(--superficie);
  z-index: 1;
}

/* La linea que lo une con el paso anterior. */
.paso + .paso::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--borde);
}

.paso-hecho {
  color: var(--texto-fuerte);
}

.paso-hecho::before {
  border-color: var(--azul);
  background: var(--azul);
}

.paso-hecho + .paso-hecho::after {
  background: var(--azul);
}

.paso-actual {
  font-weight: 700;
}

.diagrama-abono {
  margin: 20px 0 8px;
  font-size: 14px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/*
 * "barra-abono" y no "barra": .barra YA es la barra de navegación de arriba —azul,
 * pegajosa, 18px de alto—. Con las dos reglas llamándose igual gana la de abajo: la
 * barra de progreso habría salido azul y pegada al borde superior de la pantalla, y la
 * navegación habría perdido su color. Un choque de nombres no avisa, solo se ve.
 */
.barra-abono {
  height: 8px;
  border-radius: 999px;
  background: var(--fondo-hondo);
  overflow: hidden;
}

.barra-llena {
  display: block;
  /* Abonó L 600 de L 1,200: la mitad. El número y el ancho salen del mismo dato. */
  width: 50%;
  height: 100%;
  border-radius: 999px;
  background: var(--azul);
}

/* ─────────────── 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(20px, 1.9vw, 25px);
  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(32px, 3.4vw, 44px);
  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;
  }

  /* Un escalon real. Con el marco base en 264, un tope de 260 no cambiaba nada. */
  .marco {
    max-width: 240px;
  }
}

/*
 * 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: 208px;
  }

  /* 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;
}