/* ─────────────────────────────────────────────────────────────────────────────
 * Páginas de contenido — Legatium Pensiones
 *
 * HOJA APARTE DE `legal.css`, Y NO ES DUPLICACIÓN. Un aviso de privacidad se
 * lee entero una vez y su medida corta (46ch, alineada a la izquierda) está
 * bien para eso. Una página de captación se HOJEA: quien llega buscando una
 * hoja de cálculo decide en dos segundos si se queda. Necesita otra retícula,
 * otra densidad y una división de secciones que se vea de un vistazo.
 *
 * LA DIVISIÓN LA MARCA EL FILETE, NUNCA EL FONDO. Entre `--lg-blanco`
 * (#FFFFFF) y `--lg-hueso` (#F7F4EF) hay 1.097:1 — menos que un filete de pelo.
 * Alternar fondos aquí no separa nada: sólo ensucia. Cada corte de sección es
 * una regla a sangre más un salto de espacio, y el único bloque con fondo
 * propio es el riel del CTA, que sí contrasta de verdad.
 *
 * TODO SALE DE `tokens.css`. Ni un color, ni un tamaño, ni una duración nueva.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Cimientos ─────────────────────────────────────────────────────────────── */

/* EL RESET VA PRIMERO Y NO ES CEREMONIA. `tokens.css` no lo trae —cada hoja que
   lo consume pone el suyo, y así lo hace `legal.css` en su línea 13—. Sin él,
   `min-block-size: 48px` más 32 de relleno y 4 de filete dan un botón de 84px
   en vez de 48: la caja mínima se aplicaría al CONTENIDO y no al borde. Lo
   mismo le pasa a cada `inline-size` con relleno de esta hoja. */
*, *::before, *::after { box-sizing: border-box; }

.doc {
  margin: 0;
  background: var(--lg-surface-page);
  color: var(--lg-text-body);
  font-family: var(--lg-font-body);
  font-size: var(--lg-size-cuerpo);
  line-height: var(--lg-leading-cuerpo);
}

/* DOS PISTAS, Y ESA ES TODA LA RETÍCULA.
   La prosa va a `--lg-container-lectura` (68ch) y la tabla a una pista más
   ancha. El error que se evita es el de una sola pista topada dentro de un
   contenedor al 100%: deja media pantalla vacía a la derecha en escritorio y
   la página parece rota, no sobria. Cada pista mide lo que mide su contenido. */
.doc__ancho {
  inline-size: min(100% - (var(--lg-space-md) * 2), 64rem);
  margin-inline: auto;
}
.doc__lectura {
  inline-size: min(100% - (var(--lg-space-md) * 2), var(--lg-container-lectura));
  margin-inline: auto;
}

/* ── Rejas ─────────────────────────────────────────────────────────────────── */

/* MEDIDA Y OCUPACIÓN SON DOS PRUEBAS DISTINTAS, y sólo se estaba pasando una.
   Topar cada párrafo a 46ch garantiza que ninguna línea sea ilegible, y no dice
   NADA sobre si el bloque usa su ancho: medida la tinta real —no la caja, que
   siempre ocupa el 100%— el hero llegaba al 59% del contenedor, el riel al 48%
   y el pie al 62%. El texto quedaba topado a la izquierda con un tercio de la
   página vacío a la derecha. La tabla era el único bloque que se ganaba su
   ancho, porque es el único que tenía DOS columnas.
   La solución no es ensanchar la medida —eso sólo empeora la lectura— sino
   darle a cada bloque una segunda columna con algo que decir. Por debajo de
   48rem todas se apilan y vuelve a mandar la medida. */
.reja { display: grid; gap: var(--lg-space-lg); }
@media (min-width: 48rem) {
  .reja { gap: clamp(var(--lg-space-xl), 5vw, var(--lg-space-3xl)); align-items: start; }
  /* El riel entra en el MISMO eje: el botón cae bajo la columna del Instituto,
     que es exactamente el sitio donde la página ha puesto la respuesta correcta
     tres veces seguidas. */
  .reja--porque,
  .reja--riel { grid-template-columns: 56% 44%; gap: 0; }
  .reja--porque > :last-child,
  .reja--riel > :last-child { padding-inline-start: var(--lg-space-md); }
  .reja--pie  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lg-space-xl); }
}

/* ── Corte de sección ──────────────────────────────────────────────────────── */

.doc__seccion {
  padding-block: clamp(var(--lg-space-xl), 6vw, var(--lg-space-3xl));
  border-block-start: var(--lg-filete-fino) solid var(--lg-rule-hairline);
}
.doc__seccion:first-of-type { border-block-start: 0; }
/* El único corte fuerte del documento: separa el diagnóstico de la salida. */
.doc__seccion--corte { border-block-start: var(--lg-filete-grueso) solid var(--lg-rule-strong); }

/* ── Rótulos ───────────────────────────────────────────────────────────────── */

/* Versalitas Y tracking juntos, no uno solo: la caja alta con 0.18em es el
   rótulo del sitio, y quitarle el tracking dejaría al descubierto que la
   tipografía de respaldo rompe distinto y mueve el bloque al cargar. */
.doc__rotulo {
  margin: 0 0 var(--lg-space-sm);
  color: var(--lg-text-secondary);
  font-size: var(--lg-size-etiqueta);
  font-weight: var(--lg-weight-semibold);
  line-height: var(--lg-leading-etiqueta);
  letter-spacing: var(--lg-tracking-etiqueta);
  text-transform: uppercase;
}

/* ── Titulares ─────────────────────────────────────────────────────────────── */

.doc__titulo {
  margin: 0 0 var(--lg-space-md);
  max-inline-size: 20ch;
  color: var(--lg-text-heading);
  font-family: var(--lg-font-display);
  font-size: var(--lg-size-titular);
  font-weight: var(--lg-weight-semibold);
  line-height: var(--lg-leading-titular);
  letter-spacing: var(--lg-tracking-titular);
}
/* La portada ya no lleva cifras, así que EL TITULAR es la pieza grande. No es
   decoración: la página entera se resume en esa frase, y quien llega buscando
   una hoja de cálculo tiene que poder leerla sin acercarse. */
.doc__titulo--grande {
  /* SIN tope de medida, al revés que el resto del texto. Un titular no se lee
     renglón a renglón como la prosa —se abarca de un vistazo—, así que la medida
     corta que protege la lectura aquí sólo deja la portada al 67% del ancho.
     Que lo delimite la pista y ya. */
  max-inline-size: none;
  font-size: var(--lg-size-display);
  line-height: var(--lg-leading-display);
  letter-spacing: var(--lg-tracking-display);
}

.doc__subtitulo {
  margin: 0 0 var(--lg-space-md);
  color: var(--lg-text-heading);
  font-family: var(--lg-font-display);
  font-size: var(--lg-size-subtitulo);
  font-weight: var(--lg-weight-semibold);
  line-height: var(--lg-leading-subtitulo);
}
.doc__entrada {
  margin: 0;
  max-inline-size: var(--lg-measure-prosa);
  font-size: var(--lg-size-subtitulo);
  line-height: var(--lg-leading-subtitulo);
  color: var(--lg-text-body);
}
.doc__parrafo { margin: 0 0 var(--lg-space-sm); max-inline-size: var(--lg-measure-prosa); }
.doc__parrafo:last-child { margin-block-end: 0; }
.doc__nota {
  margin: var(--lg-space-md) 0 0;
  max-inline-size: var(--lg-measure-prosa);
  color: var(--lg-text-secondary);
  font-size: var(--lg-size-cuerpo);
}

/* ── Los motivos, en lista ─────────────────────────────────────────────── */

/* Una LISTA, y ya no una tabla de dos columnas. La tabla comparaba bien pero
   pedía leer en dos ejes a la vez; con público de 50+ y una página que se
   decide en segundos, tres líneas seguidas se entienden sin instrucciones.
   Cada regla se separa con filete, que es como se separa todo aquí. */
.reglas { margin: 0; padding: 0; list-style: none; }
.reglas__item {
  padding-block: var(--lg-space-sm);
  border-block-start: var(--lg-filete-fino) solid var(--lg-rule-hairline);
  color: var(--lg-text-body);
}
.reglas__item:first-child { border-block-start: var(--lg-filete-grueso) solid var(--lg-rule-strong); }
.reglas__item strong { color: var(--lg-text-heading); }

/* ── La cifra del riel ─────────────────────────────────────────────────────── */

/* «18 de 18» ES el argumento de cierre, así que se trata como cifra y no como
   frase: es el único dato de exactitud MEDIDO que existe —nueve importes por
   cada una de las dos resoluciones reales— y por eso puede ir a este tamaño
   sin inventar nada. */
.riel__cifra {
  margin: 0 0 var(--lg-space-sm);
  color: var(--lg-text-on-rail);
  font-family: var(--lg-font-data);
  font-size: var(--lg-size-display);
  font-weight: var(--lg-weight-semibold);
  line-height: var(--lg-leading-display);
  letter-spacing: var(--lg-tracking-display);
  font-variant-numeric: var(--lg-numeric-cifra);
}
.riel__cifra-de {
  display: block;
  color: var(--lg-text-label-on-rail);
  font-family: var(--lg-font-body);
  font-size: var(--lg-size-subtitulo);
  font-weight: var(--lg-weight-regular);
  letter-spacing: normal;
}

/* ── El riel del CTA ───────────────────────────────────────────────────────── */

/* El ÚNICO bloque con fondo propio de la página, y por eso funciona: el navy
   contra el papel sí separa, mientras que hueso contra blanco no separaría
   nada. Gastar el contraste una sola vez es lo que lo hace significar algo. */
.riel {
  margin-block-start: 0;
  padding-block: clamp(var(--lg-space-xl), 5vw, var(--lg-space-2xl));
  background: var(--lg-surface-rail);
  color: var(--lg-text-on-rail);
}
.riel__titulo {
  margin: 0 0 var(--lg-space-sm);
  color: var(--lg-text-on-rail);
  font-family: var(--lg-font-display);
  font-size: var(--lg-size-subtitulo);
  font-weight: var(--lg-weight-semibold);
  line-height: var(--lg-leading-subtitulo);
}
.riel__texto { margin: 0; max-inline-size: var(--lg-measure-prosa); color: var(--lg-text-on-rail); }
.riel__nota { margin: var(--lg-space-md) 0 0; max-inline-size: none; color: var(--lg-text-label-on-rail); font-size: var(--lg-size-apoyo); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--lg-touch-recomendado);
  padding: var(--lg-space-sm) var(--lg-space-lg);
  border: var(--lg-filete-simple) solid var(--lg-cta-rail-fill);
  border-radius: var(--lg-radius-control);
  background: var(--lg-cta-rail-fill);
  color: var(--lg-on-cta-rail, var(--lg-navy));
  font-family: inherit;
  font-size: var(--lg-size-cuerpo);
  font-weight: var(--lg-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--lg-duration-rapida) var(--lg-ease-unica),
              color var(--lg-duration-rapida) var(--lg-ease-unica);
}
.boton:hover { background: transparent; color: var(--lg-text-on-rail); }
@media (pointer: coarse) { .boton:hover { background: var(--lg-cta-rail-fill); color: var(--lg-on-cta-rail, var(--lg-navy)); } }
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }

/* ── Cabecera, pie, foco ───────────────────────────────────────────────────── */

.doc__cabecera { padding-block: var(--lg-space-md); border-block-end: var(--lg-filete-fino) solid var(--lg-rule-hairline); }
.doc__marca { display: inline-flex; }
.doc__marca img { display: block; block-size: auto; max-inline-size: 100%; }

.doc__pie { padding-block: var(--lg-space-xl); border-block-start: var(--lg-filete-fino) solid var(--lg-rule-hairline); }
.doc__pie p { margin: 0 0 var(--lg-space-xs); max-inline-size: none; color: var(--lg-text-secondary); font-size: var(--lg-size-apoyo); }
.doc__pie p:last-child { margin-block-end: 0; }

/* `:not(.boton)` NO SOBRA. Sin él, `.doc a` (0,1,1) gana a `.boton` (0,1,0) y
   además viene después en el archivo: el botón hereda el color del riel, que es
   hueso, sobre un fondo que también es hueso, y el CTA desaparece. */
.doc a:not(.boton) { color: inherit; text-underline-offset: 0.15em; }
.riel a:not(.boton) { color: var(--lg-text-on-rail); }
.doc :focus-visible { outline: var(--lg-focus-width) var(--lg-focus-style) var(--lg-focus-color-claro); outline-offset: var(--lg-focus-offset); }
.riel :focus-visible { outline-color: var(--lg-focus-color-riel); }