/* ─────────────────────────────────────────────────────────────────────────────
 * Páginas legales — Legatium Pensiones
 *
 * Hoja aparte y no en línea: el CSP declara `style-src 'self'` y un bloque
 * <style> quedaría bloqueado en producción. Todo sale de `tokens.css`.
 *
 * UN AVISO DE PRIVACIDAD SE LEE, NO SE HOJEA, y esta audiencia tiene 55-64
 * años: cuerpo de lectura completo —el mismo de la portada, no letra pequeña—,
 * medida corta y jerarquía visible para poder saltar al apartado que importa.
 * Ninguna decisión de aquí es distinta de las del sitio; sólo son menos.
 * ───────────────────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  padding: 0 var(--lg-space-margen-pagina) var(--lg-space-2xl);
  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);
  -webkit-font-smoothing: antialiased;
}

.legal__cabecera {
  padding-block: var(--lg-space-lg);
  border-block-end: var(--lg-border-hairline) solid var(--lg-rule-hairline);
  margin-block-end: var(--lg-space-2xl);
}
.legal__marca { display: inline-block; }
.legal__marca img { display: block; inline-size: 208px; block-size: auto; }

.legal { max-inline-size: 46ch; }

.legal__etiqueta {
  margin: 0 0 var(--lg-space-sm);
  font-size: var(--lg-size-apoyo);
  line-height: var(--lg-leading-etiqueta);
  letter-spacing: var(--lg-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--lg-text-secondary);
}

.legal__titulo {
  margin: 0 0 var(--lg-space-md);
  font-family: var(--lg-font-display);
  font-size: var(--lg-size-titular);
  line-height: var(--lg-leading-titular);
  letter-spacing: var(--lg-tracking-titular);
  font-weight: var(--lg-weight-semibold);
  color: var(--lg-text-heading);
  text-wrap: balance;
}

.legal__entradilla {
  margin: 0 0 var(--lg-space-2xl);
  padding-block-end: var(--lg-space-lg);
  border-block-end: var(--lg-filete-simple) solid var(--lg-rule-strong);
  color: var(--lg-text-secondary);
}

/* Cada apartado abre con su propio filete: es lo que permite saltar de uno a
   otro sin leerlo todo, que es como se usa un documento así. */
.legal__seccion { margin-block-end: var(--lg-space-2xl); }
.legal__seccion h2 {
  margin: 0 0 var(--lg-space-md);
  padding-block-start: var(--lg-space-md);
  border-block-start: var(--lg-border-hairline) solid var(--lg-rule-hairline);
  font-family: var(--lg-font-display);
  font-size: var(--lg-size-subtitulo);
  line-height: var(--lg-leading-subtitulo);
  font-weight: var(--lg-weight-semibold);
  color: var(--lg-text-heading);
}
.legal__seccion p { margin: 0 0 var(--lg-space-md); }
.legal__seccion p:last-child { margin-block-end: 0; }
.legal__seccion ul {
  margin: 0 0 var(--lg-space-md);
  padding-inline-start: var(--lg-space-md);
}
.legal__seccion li { margin-block-end: var(--lg-space-sm); }
.legal__seccion li:last-child { margin-block-end: 0; }
.legal strong { font-weight: var(--lg-weight-semibold); color: var(--lg-text-heading); }

a {
  color: var(--lg-text-heading);
  text-decoration-thickness: var(--lg-border-hairline);
  text-underline-offset: 3px;
}
a:hover { color: var(--lg-cta-primary-hover); }
@media (pointer: coarse) { a:hover { color: var(--lg-text-heading); } }

.legal__volver {
  margin: 0;
  padding-block-start: var(--lg-space-lg);
  border-block-start: var(--lg-border-hairline) solid var(--lg-rule-hairline);
}

:focus-visible {
  outline: var(--lg-border-trazo) solid var(--lg-rule-strong);
  outline-offset: 3px;
}