/* Páginas legales: aviso legal, privacidad y créditos. Se cargan con el dato «css: assets/css/legal.css».
   Texto a la medida de lectura de .prosa; la tabla de privacidad usa más ancho y, en pantallas estrechas,
   cada fila pasa a ser un bloque con el nombre de cada columna delante de su dato. */

.portada-legal { padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px); }
.portada-legal .entradilla { max-width: var(--measure); }
.seccion-legal { padding-top: clamp(8px, 2vw, 16px); }
.legal { display: grid; gap: 1em; }
.legal .prosa > h2:first-child { margin-top: 0; }

/* Datos del titular: término y valor en dos columnas, o uno debajo de otro en el móvil */
.datos { display: grid; gap: 8px; margin: 0; padding: 16px 20px; border-radius: var(--radio); background: var(--surface); font: 500 .96rem/1.5 var(--font-display); }
.datos > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.datos dt { font-weight: 700; color: var(--muted); font-size: .84rem; }
.datos dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 520px) {
  .datos > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .datos dt { font-size: .9rem; }
}

/* Tabla de tratamientos */
.tabla-legal { max-width: 64rem; margin-block: .25em .75em; }
.tabla-legal .tabla { font-size: .9rem; }
.tabla-legal tbody th { font-weight: 700; color: var(--ink); font-size: .92rem; }
.tabla-legal thead th { white-space: nowrap; }
@media (max-width: 759px) {
  .tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada th, .tabla-apilada td { display: block; width: 100%; }
  .tabla-apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabla-apilada tr { padding: 16px 18px; border-radius: var(--radio); background: var(--surface); }
  .tabla-apilada tr + tr { margin-top: 10px; }
  .tabla-apilada th, .tabla-apilada td { padding: 0; border: 0; }
  .tabla-apilada tbody th { font-size: 1rem; margin-bottom: 8px; }
  .tabla-apilada td + td { margin-top: 8px; }
  /* El nombre de la columna se ve, pero el lector de pantalla ya lo da como encabezado: texto alternativo vacío */
  .tabla-apilada td::before { content: attr(data-etiqueta); content: attr(data-etiqueta) / ""; display: block; font-weight: 700; font-size: .8rem; color: var(--muted); }
}