/* Paginas legales (2026-09-29): una lamina de lectura. Ancho de medida de la marca (max ~68 caracteres por
   linea), indice al inicio, tablas con filete de tinta y el marcador «[por confirmar]» en la senal naranja
   para que el cliente lo vea y lo complete. Hereda tokens, cabecera y pie de marca.css. */
.legal { width: 100%; max-width: 1440px; margin: 0 auto; padding: 48px 16px 72px; }
@media (min-width: 1024px) { .legal { padding: 72px clamp(20px, 4vw, 64px) 96px; } }

.legal-art { max-width: 60ch; }   /* medido en Plex a 18,4 px: 60ch = ~576 px = ~69 caracteres reales por linea (68ch daban 78) */
.legal-cab h1 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem); max-width: 18ch; }
.legal-meta { margin: 16px 0 0; font: 500 13px/1.4 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--acero); }
.legal-intro { margin: 20px 0 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--t72); }

.indice { margin: 36px 0 8px; padding: 18px 20px 10px; border: 1.5px solid var(--tinta); background: var(--papel); }
.indice ol { margin: 0; padding: 0 0 0 1.5em; columns: 1; }
.indice li { font-size: var(--t-cuerpo); line-height: 1.35; padding: 0 0 0 4px; }
.indice li::marker { font-weight: 600; color: var(--acero); font-variant-numeric: tabular-nums; }
.indice a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; }
.indice a:hover, .indice a:focus-visible { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (min-width: 640px) { .indice ol { columns: 2; column-gap: 32px; } .indice li { break-inside: avoid; } }

.legal section { margin-top: 44px; scroll-margin-top: 120px; }
.legal h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); max-width: 24ch; padding-bottom: 10px; border-bottom: 1px solid var(--tinta); }
.legal p, .legal li, .legal dd, .legal dt { font-size: var(--t-cuerpo); line-height: 1.55; }
.legal p { margin: 16px 0 0; }
.legal ul, .legal ol { margin: 14px 0 0; padding-left: 1.4em; }
.legal li { margin-top: 8px; }
.legal li::marker { color: var(--acero); }
.legal dl { margin: 14px 0 0; }
.legal dt { font-weight: 600; margin-top: 12px; }
.legal dd { margin: 2px 0 0; color: var(--t72); }
.legal a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-color: var(--naranja); text-decoration-thickness: 2px; }
.legal strong { font-weight: 600; }
.legal code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .875em; white-space: nowrap; }

/* lo que el cliente debe completar: visible a proposito */
mark.pendiente { background: var(--naranja); color: var(--tinta); font-weight: 600; padding: 1px 6px; white-space: nowrap; }

/* tablas: ficha del responsable (dos columnas) y cookies (cuatro). La de cookies se desliza en pantallas
   estrechas dentro de su propio marco: la pagina nunca hace scroll horizontal. */
.legal table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .9375rem; line-height: 1.45; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--t14); }
.legal thead th { font: 500 12px/1.2 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--acero); background: rgba(78, 110, 150, .06); }
.legal tbody th { font-weight: 600; width: 38%; }
.ficha th, .ficha td { overflow-wrap: anywhere; }
.tabla-desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; border-bottom: 1px solid var(--t14); }
.tabla-desliza table { margin-top: 0; min-width: 560px; }
.cookies td:first-child { white-space: nowrap; }

.legal-otras { margin-top: 56px; padding-top: 20px; border-top: 1.5px solid var(--tinta); }
.legal-otras ul { list-style: none; padding: 0; margin: 4px 0 0; }
.legal-otras li { margin: 0; }
.legal-otras a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; }
.legal-otras a:hover { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 5px; }