/*
 * SAO Vox: páginas legales (/privacidad y /eliminacion-de-datos). Encima de estilos.css, que pone la cabecera, el contenedor y el pie.
 * Texto largo para leer de corrido: una columna de ~70 caracteres, secciones con filete arriba y tablas que se desplazan
 * dentro de su caja en el teléfono, nunca la página.
 */

.legal { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.legal__columna { max-width: 44rem; }

.legal h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: var(--sv-weight-bold); line-height: 1.06; letter-spacing: -0.03em; }
.legal__fecha { margin-top: 0.75rem; color: var(--sv-text-3); font-size: var(--sv-text-sm); }

.legal__resumen { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-card); background: var(--sv-surface-1); }
.legal h2 { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--sv-border); font-size: var(--sv-text-2xl); font-weight: var(--sv-weight-bold); line-height: 1.2; letter-spacing: -0.01em; }
.legal h3 { margin-top: 1.75rem; font-size: var(--sv-text-lg); font-weight: var(--sv-weight-semibold); line-height: 1.3; }
.legal .legal__resumen h2 { padding-top: 0; border-top: 0; margin-top: 0; font-size: var(--sv-text-base); }

.legal p, .legal ul { margin-top: 0.875rem; color: var(--sv-text-1); line-height: var(--sv-leading-relaxed); }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.5rem; }
.legal li::marker { color: var(--sv-text-3); }
.legal a { color: var(--sv-link); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal a:hover { color: var(--sv-link-hover); }
.legal strong { font-weight: var(--sv-weight-semibold); }

.legal__tabla { margin-top: 1rem; overflow-x: auto; border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--sv-text-sm); line-height: var(--sv-leading-normal); }
.legal__tabla--tres table { min-width: 36rem; }
.legal th, .legal td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; }
.legal th { background: var(--sv-surface-1); color: var(--sv-text-2); font-weight: var(--sv-weight-semibold); }
.legal tr + tr td, .legal thead + tbody tr:first-child td { border-top: 1px solid var(--sv-border); }
.legal td:first-child { font-weight: var(--sv-weight-medium); }