/* =========================================================================
   legal-pages.css — Estilos compartidos de Aviso legal y Privacidad.

   Páginas informativas, no comerciales: sobrias, editoriales, muy legibles.
   Un único Hero corto (eyebrow + H1, sin composición visual) seguido de una
   columna de lectura contenida. Fondo Cal en toda la página. Sin CTA, sin
   piezas modulares, sin fotografía.

   Reutiliza de los archivos globales:
     · .container ..................... layout.css
     · .eyebrow ....................... components.css
     · tokens de color, tipografía y espaciado ... variables.css
   ========================================================================= */

/* ---------------------------------------------------------------
   HERO — compacto, bastante más bajo que el de las páginas
   comerciales: aquí no hay nada que "vender".
   --------------------------------------------------------------- */

.legal-hero {
    padding-block: var(--space-lg) var(--space-md);
    background-color: var(--bg-page);              /* Cal */
}

.legal-hero__inner {
    max-width: 60ch;
}

.legal-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-sm);
}

.legal-hero__title {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
}

.legal-hero__text {
    max-width: 65ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* ---------------------------------------------------------------
   CONTENIDO — columna de lectura contenida (65-75ch), mucho aire
   entre secciones. Fondo Cal continuo con el Hero.
   --------------------------------------------------------------- */

.legal-content {
    padding-block: var(--space-lg) var(--space-section-sm);
    background-color: var(--bg-page);
}

.legal-content__inner {
    max-width: 68ch;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.legal-content h2 {
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.legal-content h3 {
    margin-top: var(--space-sm);
    font-size: var(--fs-300);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}

.legal-content p,
.legal-content li {
    color: var(--text-strong);
    line-height: var(--lh-base);
}

.legal-content section > p,
.legal-content section > ul,
.legal-content section > address {
    margin-top: var(--space-sm);
}

.legal-content ul {
    padding-left: 1.25em;
}
.legal-content li + li {
    margin-top: var(--space-2xs);
}

.legal-content a {
    color: var(--text-strong);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.legal-content a:hover,
.legal-content a:focus-visible {
    color: var(--accent);
}

/* Ficha de identificación del titular (Aviso legal §1): datos en pares
   etiqueta/valor, sin tabla — más legible en móvil que una tabla real. */
.legal-datos {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
    background-color: var(--bg-surface);            /* Piedra, puntual */
    border-radius: var(--radius-sm);
}
.legal-datos__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
}
.legal-datos__label {
    flex: 0 0 9rem;
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.legal-datos__value {
    flex: 1 1 16rem;
    color: var(--text-strong);
}
.legal-datos address {
    font-style: normal;
}