/* Páginas legales (/terminos, /privacidad): prosa larga legible sobre el design system.
   Tipografía utilitaria — el contenido es el protagonista, sin hero ni decoración. */
.legal {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 20px 80px;
}
.legal h1 {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    color: var(--text-strong);
    line-height: 1.2;
    margin-bottom: 8px;
    text-wrap: balance;
}
.legal .legal-updated {
    color: var(--text-muted);
    font-size: .9rem;
    margin-bottom: 28px;
}
.legal .legal-intro {
    background: var(--bg-surface);
    border: 1px solid var(--line, #e5e7eb);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 32px;
}
.legal .legal-intro p { margin: 0; }
.legal h2 {
    font-size: 1.25rem;
    color: var(--text-strong);
    margin: 36px 0 10px;
    line-height: 1.3;
}
.legal h3 {
    font-size: 1.02rem;
    color: var(--text-strong);
    margin: 22px 0 6px;
}
.legal p, .legal li {
    line-height: 1.7;
    margin-bottom: 10px;
    color: var(--text-default);
}
.legal ul { padding-left: 22px; margin-bottom: 14px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--color-primary); }
.legal strong { color: var(--text-strong); }
.legal .legal-note {
    font-size: .9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--line, #e5e7eb);
    margin-top: 40px;
    padding-top: 16px;
}