/* ==========================================================================
   pages/legal.css — Textos legales y créditos
   Solo aviso-legal.html, privacidad.html y creditos.html: texto largo en una
   columna de lectura (.legal) y la tabla de créditos de imágenes (.tabla).
   ========================================================================== */
.legal { max-width: var(--medida-texto); }
.legal h2 { max-width: none; margin-top: var(--space-7); font-size: var(--text-2xl); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin-top: var(--space-5); font-size: var(--text-lg); }
.legal ul { margin: 0 0 var(--espacio-parrafo); padding-left: var(--space-5); }
.legal li + li { margin-top: var(--space-2); }
.legal a { color: var(--c-laguna); }
.legal__fecha { color: var(--c-texto-suave); font-size: var(--text-sm); }

/* Tabla de créditos: en móvil se desplaza en horizontal dentro de su caja, no la página */
.tabla-desplazable { max-width: 100%; margin-bottom: var(--space-5); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabla caption { margin-bottom: var(--space-3); text-align: left; color: var(--c-texto-suave); }
.tabla th, .tabla td { padding: var(--space-3); border-bottom: var(--hairline) solid var(--c-borde); text-align: left; vertical-align: top; }
.tabla th { font-weight: 700; color: var(--c-texto); background: var(--c-bruma); }
.tabla a { color: var(--c-laguna); }