/* ==========================================================================
   Páginas legales (política de privacidad, y el aviso legal cuando llegue).

   El problema que resuelve: el texto corría a los 1344 px de .inner, unos 149
   caracteres por línea. A partir de ~75 el ojo pierde el salto de renglón y
   el documento se vuelve ilegible justo donde más importa entenderlo. Aquí la
   columna se limita en ch, no en px, para que la medida siga a la tipografía.

   Y los dos bloques de datos —tratamientos y proveedores— eran <p> con <br>.
   Son tablas: cuatro y tres columnas, filas comparables. Marcadas como tales
   se leen, se auditan y se navegan con lector de pantalla.
   ========================================================================== */

.legal{max-width:92rem;}
/* La medida se limita en el propio elemento de texto: `ch` en el contenedor se
   resolvía contra SU font-size (18px), no contra el de los párrafos (14,2px),
   y dejaba pasar unos 116 caracteres por línea. Las tablas no llevan tope: son
   datos en columnas y agradecen el ancho. */
.legal p, .legal li, .legal__intro{max-width:66ch;}
.legal h1{margin-bottom:var(--space-m);}

/* Fecha de actualización: dato, no prosa. */
.legal__fecha{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.2rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);
  margin:0 0 var(--space-l);}

.legal__intro{font-size:var(--text-m);line-height:1.6;color:rgba(255,255,255,.82);}

.legal p{font-size:var(--text-s);line-height:1.7;color:rgba(255,255,255,.72);
  margin:0 0 1.4rem;}
.legal a{color:var(--secondary);text-decoration:underline;text-underline-offset:2px;}
.legal b{color:var(--secondary);font-weight:500;}

/* --- índice ------------------------------------------------------------- */
/* Una política se consulta, no se lee de arriba abajo: casi nadie entra aquí
   sin una pregunta concreta. */
.legal__toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--space-m) 0;margin:0 0 var(--space-xl);}
.legal__toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--space-l);}
@media(max-width:620px){ .legal__toc ol{columns:1;} }
.legal__toc li{counter-increment:toc;margin:0 0 .8rem;break-inside:avoid;}
.legal__toc a{font-size:var(--text-s);color:rgba(255,255,255,.72);text-decoration:none;}
.legal__toc a:hover{color:var(--secondary);}
.legal__toc a::before{content:counter(toc,decimal-leading-zero) " ";
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.15rem;color:var(--tertiary);}
.legal__toc ol{counter-reset:toc;}

/* --- secciones ---------------------------------------------------------- */
/* El ritmo era plano: h2 y p con el mismo aire, así que nada agrupaba. */
.legal section{padding-top:var(--space-xl);margin-top:var(--space-xl);
  border-top:1px solid var(--line);scroll-margin-top:2rem;}
.legal section:first-of-type{padding-top:0;margin-top:0;border-top:0;}
.legal h2{font-size:var(--text-l);line-height:1.2;margin:0 0 var(--space-m);}

.legal ul{margin:0 0 1.4rem;padding-left:1.8rem;}
.legal li{font-size:var(--text-s);line-height:1.7;color:rgba(255,255,255,.72);margin-bottom:.7rem;}

/* --- tablas ------------------------------------------------------------- */
.ltab{width:100%;border-collapse:collapse;margin:0 0 1.8rem;text-align:left;}
.ltab th{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.1rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tertiary);
  font-weight:400;padding:0 1.4rem .9rem 0;border-bottom:1px solid var(--line);
  vertical-align:bottom;}
.ltab td{font-size:1.4rem;line-height:1.55;color:rgba(255,255,255,.72);
  padding:1.3rem 1.4rem 1.3rem 0;border-bottom:1px solid var(--line);vertical-align:top;}
.ltab td:first-child{color:var(--secondary);}
.ltab code{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.25rem;
  color:var(--secondary);}

/* En móvil una tabla de 4 columnas o se sale o se vuelve ilegible. Cada fila
   pasa a ser una ficha y la cabecera se repite delante de cada dato, que es
   la única forma de que un valor suelto siga significando algo. */
@media(max-width:740px){
  .ltab, .ltab tbody, .ltab tr, .ltab td{display:block;width:100%;}
  .ltab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .ltab tr{border:1px solid var(--line);border-radius:var(--radius-s);
    padding:1.6rem;margin-bottom:1.2rem;}
  .ltab td{border:0;padding:0 0 1.1rem;}
  .ltab td:last-child{padding-bottom:0;}
  .ltab td::before{content:attr(data-l);display:block;
    font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.05rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tertiary);margin-bottom:.4rem;}
}

/* --- botón de preferencias --------------------------------------------- */
.legal__ck{font-family:'Roboto Mono',ui-monospace,monospace;font-size:1.3rem;
  letter-spacing:.04em;padding:1.1rem 1.8rem;border:1px solid var(--secondary-20);
  border-radius:var(--radius-s);background:transparent;color:var(--secondary);
  cursor:pointer;margin-bottom:1.4rem;transition:background .2s ease,border-color .2s ease;}
.legal__ck:hover{background:rgba(255,255,255,.08);border-color:var(--secondary);}

/* --- fondo ---------------------------------------------------------------- */
/* Negro liso. El grano es textura de marca y funciona detrás de fotos y
   titulares; detrás de un documento legal de 5.000 px sólo añade ruido a lo
   único que la página tiene que hacer, que es leerse. */
body:has(.legal-plano) #page-grain{display:none;}
body:has(.legal-plano){background:#000;}

/* La primera columna es la etiqueta de la fila: si se parte en tres líneas
   deja de leerse como tal. Se le da suelo y se reparte el resto. */
.ltab th:first-child, .ltab td:first-child{width:20%;min-width:14rem;}
@media(max-width:740px){ .ltab td:first-child{width:auto;min-width:0;} }