/*
 * Landing del gate de validacion.
 *
 * Hoja propia, como las otras tres. Aqui la restriccion no es el sol ni el
 * guante: es que un contador con prisa entienda en treinta segundos qué es
 * esto, por que le importa y que pasa si paga. Tipografia grande, columna
 * angosta, y el argumento legal citado con su articulo a la vista.
 */

:root {
  --fondo: #ffffff;
  --superficie: #f5f7fa;
  --tinta: #10151c;
  --tenue: #4d5765;
  --linea: #d5dbe3;
  --acento: #16456e;
  --acento-claro: #e8f0f7;
  --ok: #0d6435;
  --alerta: #7a4a00;
  --alerta-fondo: #fdf3e0;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c1015;
    --superficie: #151b23;
    --tinta: #f0f4f9;
    --tenue: #a3aebc;
    --linea: #333d49;
    --acento: #8dc2ee;
    --acento-claro: #13202d;
    --ok: #63d494;
    --alerta: #e8b45f;
    --alerta-fondo: #2b2110;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 760px; margin: 0 auto; padding: 0 20px 48px; }
section { padding: 34px 0; border-bottom: 1px solid var(--linea); }
section:last-child { border-bottom: 0; }

h1 { font-size: 33px; line-height: 1.18; margin: 0 0 14px; text-wrap: balance; }
h2 { font-size: 22px; margin: 0 0 16px; }
h3 { font-size: 16px; margin: 0 0 6px; }

/* Prosa justificada ---------------------------------------------------- *
 * Sólo los párrafos largos a todo el ancho de la columna. Justificar un
 * bloque de dos renglones estira el primero y deja el segundo suelto, y
 * justificar dentro de las tarjetas —que miden 230-280 px— abriría huecos
 * entre palabras del tamaño de una palabra.
 *
 * **Y sólo a partir de 640 px, que es lo que se midió y no lo que se supuso.**
 * El justificado reparte el sobrante de cada renglón entre sus espacios: con
 * pocas palabras por renglón, cada hueco crece hasta volverse un río blanco.
 * En un teléfono de 390 px la entrada cabe en ~40 caracteres y se veía
 * exactamente así; a 640 px hay ~78 y el reparto es imperceptible.
 *
 * Lo que normalmente salva un justificado angosto es partir palabras, y aquí
 * NO se puede contar con eso: se comprobó midiendo el alto del mismo texto con
 * `hyphens:auto` y con `hyphens:none` en una columna estrecha — **idéntico**,
 * o sea que el navegador no partió nada pese al `lang="es-MX"`. Chrome baja
 * los diccionarios de partición por separado, así que la partición depende de
 * la máquina de quien lee y no del CSS. Se declara igual, porque cuando el
 * diccionario está presente mejora; pero el diseño no se apoya en ella. */
.justificado { text-wrap: pretty; }

@media (min-width: 640px) {
  .justificado {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

.cinta-demo {
  margin: 0;
  padding: 8px 20px;
  background: var(--alerta-fondo);
  color: var(--alerta);
  border-bottom: 1px solid var(--linea);
  font-size: 12.5px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: baseline;
}
.cinta-demo strong {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.encabezado {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 20px;
}
.logotipo { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.lema { color: var(--tenue); font-size: 13px; }

.portada { padding-top: 12px; }
.entrada { font-size: 18px; color: var(--tenue); margin: 0 0 20px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.nota-portada { margin: 12px 0 0; font-size: 13.5px; color: var(--tenue); }

.primario, .secundario {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 48px;
  line-height: 1.5;
}
.primario { background: var(--acento); color: var(--fondo); border: 2px solid var(--acento); }
.secundario { color: var(--acento); border: 2px solid var(--linea); }
.primario:hover, .secundario:hover { filter: brightness(1.08); }
.primario:focus-visible, .secundario:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.grande { font-size: 19px; padding: 16px 26px; }
/* El botón inactivo se ve inactivo. Un botón de compra que parece vivo y no
   cobra destruye justo lo que la página está midiendo. */
.primario[data-inactivo] {
  background: var(--superficie);
  color: var(--tenue);
  border-color: var(--linea);
  cursor: default;
}

/* Obligación legal ---------------------------------------------------- */
.datos { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.datos > div {
  border-left: 3px solid var(--acento);
  padding-left: 14px;
}
.datos dt { font-weight: 700; }
.datos dd { margin: 2px 0 0; color: var(--tenue); }
.fuente {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tenue);
  margin-top: 3px;
}
.matiz {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--alerta-fondo);
  color: var(--tinta);
  border-radius: 8px;
  font-size: 15px;
}

/* Diferencia ---------------------------------------------------------- */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tarjetas article {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 16px 18px;
}
.tarjetas p { margin: 0; color: var(--tenue); font-size: 15px; }

/* Pantallas ----------------------------------------------------------- */
.lista-pantallas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lista-pantallas li { display: flex; flex-direction: column; gap: 3px; }
.lista-pantallas a { color: var(--acento); font-size: 17px; }
.lista-pantallas span { color: var(--tenue); font-size: 15px; }

/* Acceso -------------------------------------------------------------- */
.precio { font-size: 34px; font-weight: 700; margin: 0 0 18px; }
.precio-nota { font-size: 15px; font-weight: 400; color: var(--tenue); }

.claridad { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.claridad ul { margin: 0; padding-left: 18px; color: var(--tenue); font-size: 15px; }
.claridad li { margin-bottom: 7px; }
.claridad strong { color: var(--tinta); }

.reembolso {
  margin: 22px 0;
  padding: 16px 18px;
  background: var(--acento-claro);
  border-radius: 10px;
  font-size: 16px;
}

.compra { margin-top: 20px; }
.compra-nota { margin: 12px 0 0; color: var(--tenue); font-size: 14.5px; max-width: 56ch; }

.pie {
  border-top: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--tenue);
  font-size: 13px;
}
.pie p { max-width: 760px; margin: 0 auto 6px; padding: 0 20px; }
.pie p:first-child { padding-top: 20px; }
.pie-legal { padding-bottom: 24px !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Lo que tiene que ganar siempre ------------------------------------ *
 * Misma regla que en las otras hojas: `[hidden]` vive en la del navegador y
 * cualquier componente que declare su propio `display` lo anula en silencio.
 * Ver error_log §A-UI-02. Va al final, tiene que ser la ultima palabra. */
[hidden] { display: none !important; }