/* ————————————————————————————————————————————————————————————————
   Páginas legales (privacidad/*.html) — Política de Cookies y de
   Privacidad. Documentos largos de leer, así que el índice queda fijo
   a un lado y el texto se mide para una línea cómoda.

   Solo tokens del design system: nada de colores sueltos.
———————————————————————————————————————————————————————————————— */

/* — Cabecera del documento — */
.legal-updated {
    display: inline-block;
    margin-top: var(--space-md);
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    font-family: var(--font-body);
    font-size: var(--caption-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
}

/* — Dos columnas: índice fijo + documento — */
.legal-doc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-3xl);
    max-width: 1000px;
    margin: 0 auto var(--space-3xl);
}

/* El índice sigue el scroll: en un documento de siete apartados, volver
   arriba para cambiar de sección es el movimiento más repetido. */
.legal-toc {
    position: sticky;
    top: calc(var(--nav-h, 71px) + var(--space-lg));
    align-self: start;
}

    .legal-toc h2 {
        margin-bottom: var(--space-sm);
        font-family: var(--font-body);
        font-size: var(--caption-size);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .legal-toc a {
        display: block;
        padding: 7px 0 7px 14px;
        border-left: 2px solid var(--outline-var);
        font-size: var(--body-sm-size);
        line-height: 1.35;
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--t), border-color var(--t);
    }

        .legal-toc a:hover {
            color: var(--primary);
            border-left-color: var(--primary);
        }

        /* Sección en pantalla: la marca el observador de legal.js */
        .legal-toc a.active {
            color: var(--primary-dark);
            font-weight: 600;
            border-left-color: var(--primary);
        }

/* — Cuerpo del documento — */
.legal-body {
    max-width: 68ch; /* medida de lectura, no el ancho que sobre */
}

.legal-section {
    /* La barra fija taparía el título al saltar desde el índice */
    scroll-margin-top: calc(var(--nav-h, 71px) + var(--space-lg));
}

    .legal-section + .legal-section {
        margin-top: var(--space-2xl);
        padding-top: var(--space-2xl);
        border-top: 1px solid var(--border-light);
    }

    .legal-section h2 {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        margin-bottom: var(--space-md);
        font-family: var(--font-display);
        font-size: var(--h3-size);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.01em;
        color: var(--on-surface);
    }

    /* El número, fuera del texto del título: así el h2 se lee solo */
    .legal-section h2 .legal-num {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--primary-soft);
        color: var(--primary-dark);
        font-family: var(--font-mono);
        font-size: 15px;
        font-weight: 700;
    }

    .legal-section p {
        margin-bottom: var(--space-md);
        font-size: var(--body-size);
        line-height: 1.7;
        color: var(--on-surface-var);
    }

        .legal-section p:last-child {
            margin-bottom: 0;
        }

    .legal-section a {
        color: var(--primary);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,109,67,.35);
        transition: border-color var(--t);
    }

        .legal-section a:hover {
            border-bottom-color: var(--primary);
        }

/* — Tipos de cookies, derechos, enlaces de navegador: listas que se
     leen mejor como fichas que como viñetas — */
.legal-cards {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    list-style: none;
}

    .legal-cards li {
        padding: 14px 16px;
        border: 1px solid var(--border-light);
        border-left: 3px solid var(--primary);
        border-radius: var(--radius);
        background: var(--surface);
        font-size: var(--body-size);
        line-height: 1.6;
        color: var(--on-surface-var);
    }

        .legal-cards li strong {
            display: block;
            margin-bottom: 2px;
            font-family: var(--font-display);
            font-size: var(--body-size);
            font-weight: 700;
            color: var(--on-surface);
        }

/* Enlaces a la ayuda de cada navegador: una fila de chips */
.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .legal-links a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 15px;
        border: 1px solid var(--outline-var);
        border-radius: var(--radius-full);
        background: var(--surface);
        font-size: var(--body-sm-size);
        font-weight: 600;
        color: var(--on-surface);
        text-decoration: none;
        border-bottom-width: 1px;
        transition: border-color var(--t), background var(--t);
    }

        .legal-links a:hover {
            background: var(--primary-soft);
            border-color: var(--primary);
        }

        .legal-links .ico-ext {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            opacity: .55;
        }

/* — Responsable del tratamiento: el dato que la gente viene a buscar — */
.legal-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-lg);
    margin-top: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
}

    .legal-contact h3 {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--h4-size);
        font-weight: 700;
        color: var(--primary-dark);
    }

    .legal-contact p {
        margin: 2px 0 0;
        font-size: var(--body-sm-size);
        color: var(--on-surface-var);
    }

    .legal-contact .btn {
        margin-left: auto;
    }

/* — Móvil: el índice deja de ser columna y pasa a ser una fila de
     accesos sobre el texto — */
@media (max-width: 900px) {
    .legal-doc {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .legal-toc {
        position: static;
        padding-bottom: var(--space-md);
        border-bottom: 1px solid var(--border-light);
    }

        .legal-toc nav {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
        }

        .legal-toc a {
            padding: 7px 12px;
            border: 1px solid var(--outline-var);
            border-radius: var(--radius-full);
        }

            .legal-toc a.active {
                background: var(--primary-soft);
                border-color: var(--primary);
            }

    .legal-contact .btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legal-toc a,
    .legal-section a,
    .legal-links a {
        transition: none;
    }
}