/* ==========================================================================
   MomoCheck — Estilo de las páginas públicas estáticas
   ==========================================================================

   Las páginas de /public son HTML plano a propósito: se indexan sin que el
   navegador ejecute nada, que es justo lo que se busca en una página que tiene
   que salir en Google. El precio es que no comparten el Tailwind de la app.

   Este fichero es su «una sola verdad» de diseño. Nació al ver que las dos
   primeras páginas ya habían empezado a divergir por su cuenta: `.btn` llevaba
   `font-family:inherit` en una y no en la otra, y `.check` alineaba distinto.
   Con cinco páginas eso se descontrola.

   El lenguaje es el mismo de la app (neo-brutalista: crema y tinta, bordes
   gruesos, sombras duras, Bricolage Grotesque en los titulares). Los tokens
   están copiados de `src/index.css`; si allí cambian, cambian aquí.

   Lo que sea de UNA página concreta —una calculadora, una rejilla— se queda en
   su propio `<style>`, no aquí.
   ========================================================================== */

:root {
  --ink: #211f26;
  --crema: #f5f1ea;
  --papel: #fffdf8;
  --ambar: #ffd43b;
  --lila: #c7d2fe;
  --indigo: #4f46e5;
  /* Tinta rebajada. Con nombre, porque `rgba(33,31,38,.55)` repetido treinta
     veces es imposible de ajustar y fue de donde salieron los problemas de
     contraste que hubo que corregir en la app. */
  --tinta-2: rgba(33, 31, 38, .75);
  --tinta-3: rgba(33, 31, 38, .62);
  --tinta-4: rgba(33, 31, 38, .28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); font-weight: 600; }

main { max-width: 820px; margin: 0 auto; padding: 0 20px 80px; }
/* Las páginas de producto respiran más que un artículo. */
main.ancho { max-width: 1080px; }

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
h1 { font-size: clamp(30px, 6vw, 46px); font-weight: 800; margin: 28px 0 0; }
h2 { font-size: clamp(20px, 3.5vw, 27px); font-weight: 800; margin: 48px 0 12px; }
h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
p { margin: 12px 0 0; }

/* ── Cabecera ───────────────────────────────────────────────────────────────
   NO ESTÁ AQUÍ: la cabecera del sitio vive en `public/cabecera.css`, que
   cargan TAMBIÉN la portada y el resto de la aplicación. Estuvo escrita dos
   veces (aquí y en React) y las dos versiones se separaron solas: distinto
   contenedor, distinto logotipo, el rótulo en mayúsculas en un sitio y no en
   el otro. Si hay que tocar la barra, se toca allí. */

/* ── Pie ─────────────────────────────────────────────────────────────── */

footer {
  max-width: 820px; margin: 0 auto; padding: 20px; border-top: 2px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 12px; color: var(--tinta-3);
}
footer a { color: var(--tinta-2); }

/* ── Botones ────────────────────────────────────────────────────────────── */
/* `font-family:inherit` importa: sin él, un <button> se pinta con la fuente del
   sistema y no con Inter, y solo se nota en los botones que no son enlaces. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--ink); border-radius: 999px;
  font-family: inherit; font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--ink); padding: 10px 18px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn-pri { background: var(--indigo); color: #fff; }
.btn-sec { background: var(--papel); color: var(--ink); }
/* El foco se ve SIEMPRE, no solo al pasar el ratón: quien navega con teclado
   necesita saber dónde está. */
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

/* ── Piezas de texto ────────────────────────────────────────────────────── */

.kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-3); margin-top: 34px; }
.lead { font-size: 18px; color: var(--tinta-2); }
.nota { font-size: 12px; color: var(--tinta-3); }
.resalte { display: inline-block; padding: 0 .16em; border-radius: .1em; transform: rotate(-1.2deg); background: var(--ambar); }
.oculto { display: none !important; }

/* ── Tarjetas, rejillas y tablas ────────────────────────────────────────── */

.tarjeta { background: var(--papel); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); padding: 22px; margin-top: 18px; }
.item { background: var(--papel); border: 2px solid var(--ink); border-radius: 14px; padding: 16px; }
.item p { font-size: 14px; color: var(--tinta-2); }
.num { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 13px; background: var(--ink); color: var(--crema); border-radius: 999px; padding: 2px 10px; display: inline-block; margin-bottom: 8px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* Una tabla ancha hace scroll DENTRO de su caja; la página nunca se mueve de
   lado. Es la regla que ya sigue la app. */
.tabla-wrap { overflow-x: auto; margin-top: 14px; }
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
th, td { border: 2px solid var(--ink); padding: 10px 12px; text-align: left; }
th { font-family: 'Bricolage Grotesque'; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; background: var(--lila); }
td b { font-family: 'Bricolage Grotesque'; font-size: 17px; }

/* El acordeón de las preguntas frecuentes. Va acotado a `main` a propósito: sin
   el `main` vestía TAMBIÉN el menú de la cabecera —que es otro <details>— y le
   metía su relleno y su borde, dejando un botón de 72px de alto con un marco
   alrededor. Es el mismo motivo por el que las reglas de revelado de más abajo
   dicen `main details`. */
main details { background: var(--papel); border: 2px solid var(--ink); border-radius: 14px; padding: 14px 18px; margin-top: 12px; }
main details summary { font-weight: 800; cursor: pointer; font-size: 15px; }
main details p { font-size: 14.5px; }

.cta-final { background: var(--ink); color: var(--crema); border-radius: 16px; padding: 26px; margin-top: 48px; box-shadow: 4px 4px 0 rgba(33, 31, 38, .35); }
.cta-final h2 { color: var(--crema); margin-top: 0; }
.cta-final p { color: rgba(245, 241, 234, .82); }
.cta-final a.btn-sec { background: var(--crema); }

/* ── Formularios ────────────────────────────────────────────────────────── */
/* Todo campo lleva su <label for>: tocar la etiqueta enfoca el campo, que en un
   móvil es la diferencia entre rellenarlo y abandonarlo. */

form label.lbl { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin: 14px 0 6px; }
form input[type=text], form input[type=email], form input[type=number], form select, form textarea {
  width: 100%; padding: 10px 12px; background: var(--crema);
  border: 2px solid var(--tinta-4); border-radius: 12px;
  font-size: 15px; font-family: inherit; color: var(--ink);
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lila); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--tinta-2); cursor: pointer; line-height: 1.5; }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--indigo); flex: none; }
.form-error { font-size: 13px; font-weight: 700; background: var(--ambar); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; margin-top: 12px; display: none; }
.exito { text-align: center; padding: 14px 0; }

/* ==========================================================================
   [08-sep] Lo que le faltaba a estas páginas para estar a la altura de la
   portada, SIN una línea de JavaScript.
   ==========================================================================

   El motivo de que estas páginas sean HTML plano es que se indexan sin que el
   navegador ejecute nada. Así que aquí no entra `motion/react` ni ningún script
   de animación: se hace con CSS, y donde el navegador no lo soporte, la página
   se ve exactamente igual de bien — solo que quieta.

   Tres carencias medidas comparándolas con la portada:
     1. La cabecera tenía UN solo destino y no se quedaba fija. Las seis páginas
        se enlazaban entre sí en el cuerpo, pero al bajar desaparecía todo: no
        había forma de saltar de una a otra. Es lo primero, y no es estética.
     2. Cero movimiento (la portada tiene medio centenar de puntos de animación).
     3. Profundidad plana: todas las sombras a 4-6 px, sin jerarquía.
   ========================================================================== */

/* ── Profundidad: tres pesos, no uno ────────────────────────────────────── */
/* La portada usa 4 / 8 / 10 px para decir qué manda. Aquí estaba todo a 4. */
.sombra-lg { box-shadow: 8px 8px 0 var(--ink); }
.sombra-xl { box-shadow: 10px 10px 0 var(--ink); }

/* ── Movimiento, con CSS y nada más ─────────────────────────────────────── */

@keyframes surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes surgir-giro { from { opacity: 0; transform: translateY(22px) rotate(2.5deg); } to { opacity: 1; transform: none; } }

/* La entrada del héroe: ocurre al cargar, sin esperar a nada. */
.entra    { animation: surgir .55s cubic-bezier(.2, .7, .3, 1) both; }
.entra-2  { animation: surgir .55s cubic-bezier(.2, .7, .3, 1) .1s both; }
.entra-3  { animation: surgir .55s cubic-bezier(.2, .7, .3, 1) .2s both; }

/* Revelado al bajar. Va DENTRO de `@supports` a propósito: el `opacity: 0` solo
   existe si el navegador sabe animarlo con el scroll. Sin soporte no se aplica
   nada y el contenido está visible desde el primer momento — que es la regla de
   esta casa: nada que dependa de una animación para poder leerse. */
@supports (animation-timeline: view()) {
  /* Se aplica por SELECTOR y no poniendo una clase en cada elemento: así lo
     hereda sola la próxima página que se escriba, sin que nadie se acuerde. Esa
     es la diferencia entre un sistema y una decoración. */
  main h2,
  main .tarjeta,
  main .item,
  main details,
  main .tabla-wrap,
  main .panel,
  main .cta-final,
  .revela {
    animation: surgir .6s linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }
  .revela-giro {
    animation: surgir-giro .6s linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }

  /* Las tarjetas de una rejilla entran en cascada. Con líneas de tiempo de
     scroll no vale `animation-delay` —el tiempo lo marca la posición, no el
     reloj—, así que lo que se escalona es el TRAMO en el que ocurre. */
  main .grid2 > *:nth-child(2n),
  main .grid3 > *:nth-child(3n-1) { animation-range: entry 8% cover 26%; }
  main .grid3 > *:nth-child(3n)   { animation-range: entry 11% cover 30%; }
}

/* Las tarjetas responden al ratón como los botones: el mismo idioma. */
.tarjeta, .item {
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s;
}
.item { box-shadow: 3px 3px 0 var(--ink); }
.tarjeta:hover, .item:hover { transform: translate(-2px, -2px); }
.tarjeta:hover { box-shadow: 7px 7px 0 var(--ink); }
.item:hover { box-shadow: 5px 5px 0 var(--ink); }

/* Quien pide menos movimiento no lo tiene. No es un extra: para algunas
   personas una animación de scroll es un mareo. */
/* ⚠️ La lista de selectores es la MISMA de arriba, y tiene que seguir siéndolo.
   Al pasar el revelado de «una clase» a «por selector» esto se quedó apuntando
   solo a las clases, y una persona con «menos movimiento» activado se encontraba
   la página con VEINTE bloques invisibles que no aparecían nunca (no hay scroll
   que los revele: la animación está apagada). Lo cazó `_revela.mjs` contando
   elementos con opacidad 0; a ojo no se ve, porque para verlo hay que tener esa
   preferencia puesta. */
@media (prefers-reduced-motion: reduce) {
  main h2,
  main .tarjeta,
  main .item,
  main details,
  main .tabla-wrap,
  main .panel,
  main .cta-final,
  .entra, .entra-2, .entra-3, .revela, .revela-giro {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tarjeta, .item, .btn { transition: none; }
}

/* ── Adornos: los mismos que usa la portada ─────────────────────────────── */
/* Puramente decorativos, así que van con `aria-hidden` en el HTML y no dicen
   nada a un lector de pantalla. */

.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco-circulo { border-radius: 50%; background: var(--lila); }
/* Un halo, no un círculo. Un círculo sólido recortado por el borde de la caja se
   lee como un fallo de maquetación; difuminado se lee como luz. */
.deco-halo { border-radius: 50%; background: radial-gradient(circle, var(--lila) 0%, transparent 68%); }
.deco-halo-claro { border-radius: 50%; background: radial-gradient(circle, rgba(199,210,254,.42) 0%, transparent 68%); }
.deco-puntos {
  background-image: radial-gradient(var(--tinta-4) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
/* Sobre el héroe de tinta, los puntos oscuros no existen. */
.deco-puntos-claro {
  background-image: radial-gradient(rgba(245, 241, 234, .45) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
/* Un contenedor que recorta sus adornos y coloca el contenido por encima. */
.con-deco { position: relative; overflow: hidden; }
.con-deco > *:not(.deco) { position: relative; z-index: 1; }

/* La etiqueta girada del héroe, como el «CUMPLE EL RD-LEY» de la portada. */
.sello {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ambar); border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg);
  font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; padding: 6px 14px;
}