/* =============================================================
   LEGALES — aviso legal, privacidad, cookies y beta

   Paginas de texto largo. Heredan base.css (tipografia, colores,
   botones) y solo anaden lo que un documento necesita: una columna
   de lectura estrecha y tablas que no se rompen en movil.

   Se carga DESPUES de base.css y ANTES de acabado.css.
   ============================================================= */

/* -------------------------------------------- 0. Solo para lectores de pantalla */

/* Los <caption> de las tablas: explican la tabla a quien navega con lector
   de pantalla, sin ocuparlo en pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- 1. Portada */

.legal-portada {
  padding: 7rem 0 3rem;
  background:
    radial-gradient(60% 80% at 15% 0%, #efecff 0%, transparent 60%),
    linear-gradient(180deg, #f6f5ff, var(--papel));
  border-bottom: 1px solid var(--linea);
}

/* La portada se alinea con la columna de texto, no con el borde del
   envoltorio: si no, el titulo arranca 180px a la izquierda de su propio
   texto y la pagina se lee descuadrada.

   Se centra la COLUMNA entera, no cada elemento por separado: asi la
   entradilla, que es mas corta, se queda alineada a la izquierda con el
   titulo en vez de flotar en el centro.

   El ancho va en rem, no en `ch`: la portada tiene un cuerpo mas grande que
   el texto, asi que sus `ch` son mas anchos y la columna salia 49px desviada
   respecto al documento de abajo. */
.legal-portada > .envoltorio {
  max-width: 52rem;
}

.legal-portada__migas {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--tinta-suave);
  margin-bottom: 1rem;
}

.legal-portada__migas a { color: var(--tinta-media); text-decoration: none; }
.legal-portada__migas a:hover { color: var(--violeta); }

.legal-portada__titulo {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0 0 .7rem;
}

.legal-portada__entrada {
  font-size: 1.05rem;
  color: var(--tinta-media);
  /* Mas corta que la columna, y alineada a su izquierda */
  max-width: 54ch;
  margin: 0 0 1.4rem;
}

.legal-portada__fecha {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--violeta);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .35rem .85rem;
  box-shadow: var(--sombra-baja);
}

.legal-portada__fecha::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verde);
}

/* ------------------------------------------------------ 2. Columna de texto */

/* Una sola columna de lectura, centrada. Sin indice: el texto legal se lee
   de arriba abajo y el indice lateral solo anadia ruido. */
.legal-reja {
  padding: 2.8rem 0 4.5rem;
  /* Sin esto, una tabla ancha empuja el ancho de TODA la pagina y aparece
     scroll horizontal en movil. La tabla ya se desliza dentro de su caja. */
  min-width: 0;
}

.legal-reja > * { min-width: 0; }

/* secciones.css trata cualquier <section> como una seccion de la landing:
   le mete 144px de padding y una animacion de entrada. Dentro de un texto
   legal los <section> son apartados, no secciones de pagina. */
.legal-reja > *,
.legal-texto > section {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  padding: 0 !important;
}

.legal-texto > section:first-child { margin-top: 0; }
.legal-texto > section:first-child > h2:first-child { margin-top: 0; }

/* ------------------------------------------------------------- 4. Texto */

/* Un documento corrido, como el original: texto justificado, titulos del
   mismo cuerpo que el parrafo y pegados a el. No es una pagina de marketing
   con secciones aireadas, es un texto legal que se lee seguido. */
.legal-texto {
  /* La misma medida que la portada, para que arranquen a la misma altura.
     En rem y no en `ch` por lo explicado alli. */
  max-width: 52rem;
  /* Centrada dentro del envoltorio. Sin esto la columna se queda pegada a la
     izquierda y en pantallas anchas deja 300px muertos a la derecha: el texto
     parece desplazado en vez de centrado. */
  margin-inline: auto;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta-media);
  text-align: justify;
  /* Justificar sin partir palabras deja "rios" de espacio en blanco */
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Los apartados van seguidos, no separados como bloques */
.legal-texto > section + section { margin-top: 1.1rem; }

/* Titulo de apartado: mismo cuerpo que el texto, solo en negrita y oscuro.
   Como en el documento original. */
.legal-texto h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--tinta);
  margin: 0 0 .15rem;
  text-align: left;
  scroll-margin-top: 6rem;
}

/* El numero del apartado va pegado al titulo, sin color ni adorno */
.legal-texto h2 .legal-num {
  font-variant-numeric: tabular-nums;
  margin-right: .3rem;
}

.legal-texto h3 {
  font-size: .95rem;
  font-weight: 650;
  color: var(--tinta);
  margin: .9rem 0 .15rem;
  text-align: left;
  scroll-margin-top: 6rem;
}

.legal-texto p { margin: 0 0 .7rem; }
.legal-texto p:last-child { margin-bottom: 0; }

/* En movil la linea es tan corta que justificar abre huecos enormes entre
   palabras. Alineado a la izquierda se lee mucho mejor. */
@media (max-width: 700px) {
  .legal-texto { text-align: left; hyphens: none; -webkit-hyphens: none; }
}

.legal-texto a {
  color: var(--violeta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.legal-texto a:hover { color: var(--violeta-tinta); }

.legal-texto ul {
  margin: 0 0 .7rem;
  padding: 0;
  list-style: none;
}

.legal-texto li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .3rem;
  text-align: left;
}

.legal-texto li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violeta);
  opacity: .5;
}

/* ----------------------------------------------------------- 6. Tablas */

/* Tablas de datos (titular, finalidades, proveedores, cookies).
   En movil no se encogen: se deslizan dentro de su caja. */
.legal-tabla-caja {
  margin: .8rem 0 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-corto);
  overflow-x: auto;
  background: #fff;
  box-shadow: var(--sombra-baja);
  -webkit-overflow-scrolling: touch;
}

.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  min-width: 460px;
}

/* Las tablas miden EXACTAMENTE lo mismo que el texto: nada se sale de la
   columna de lectura. Si una tabla no cabe, se desliza dentro de su caja. */
.legal-tabla-caja--ancha { width: 100%; max-width: 100%; margin-left: 0; }

/* Tabla de cookies (5 columnas): anchos repartidos para que ninguna se
   aplaste y quepa entera sin deslizarse en escritorio. */
.legal-tabla--cookies { table-layout: fixed; min-width: 620px; }
.legal-tabla--cookies th:nth-child(1),
.legal-tabla--cookies td:nth-child(1) { width: 19%; white-space: normal; }
.legal-tabla--cookies th:nth-child(2),
.legal-tabla--cookies td:nth-child(2) { width: 13%; }
.legal-tabla--cookies th:nth-child(3),
.legal-tabla--cookies td:nth-child(3) { width: 33%; }
.legal-tabla--cookies th:nth-child(4),
.legal-tabla--cookies td:nth-child(4) { width: 15%; white-space: normal; }
.legal-tabla--cookies th:nth-child(5),
.legal-tabla--cookies td:nth-child(5) { width: 20%; }

/* Tabla de 3 columnas (finalidades, proveedores): sin reparto de anchos la
   primera columna se come el espacio y las otras dos se aplastan. */
.legal-tabla--tres { table-layout: fixed; min-width: 560px; }
.legal-tabla--tres th:nth-child(1),
.legal-tabla--tres td:nth-child(1) { width: 27%; white-space: normal; }
.legal-tabla--tres th:nth-child(2),
.legal-tabla--tres td:nth-child(2) { width: 36%; }
.legal-tabla--tres th:nth-child(3),
.legal-tabla--tres td:nth-child(3) { width: 37%; }

/* En movil la tabla no se ensancha: se queda en su caja y se desliza. */
@media (max-width: 980px) {
  .legal-tabla-caja--ancha { width: 100%; max-width: 100%; }
  .legal-tabla--cookies { min-width: 620px; }
}

.legal-tabla th {
  text-align: left;
  font-weight: 650;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
  background: #fbfbfe;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--linea);
}

.legal-tabla td {
  /* Un nombre largo sin espacios (una URL, "Meta Platforms Ireland Limited")
     ensancha la tabla y la obliga a deslizarse. Que parta la palabra. */
  overflow-wrap: anywhere;
  padding: .6rem .9rem;
  border-bottom: 1px solid #f1f1f8;
  vertical-align: top;
  line-height: 1.5;
  text-align: left;
}

.legal-tabla tr:last-child td { border-bottom: 0; }
.legal-tabla tbody tr:hover { background: #fcfcff; }

/* Primera columna: el nombre del dato o del proveedor */
.legal-tabla td:first-child {
  font-weight: 600;
  color: var(--tinta);
}

/* Tabla de dos columnas (identificacion del titular): la primera
   estrecha y en gris, como una ficha */
.legal-tabla--ficha td:first-child {
  width: 34%;
  font-weight: 600;
  color: var(--tinta-suave);
  background: #fbfbfe;
  white-space: normal;
}

/* Fila que separa bloques dentro de la tabla de cookies */
.legal-tabla__grupo td {
  background: #f4f2ff;
  font-weight: 650;
  color: var(--violeta);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: normal;
}

/* ------------------------------------------------------- 7. Pie de pagina */

.legal-cierre {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea);
  font-size: .88rem;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------- 8. Impresion */

@media print {
  .cabecera, .pie, .legal-portada__migas { display: none; }
  .legal-reja { padding: 0; }
  .legal-texto { max-width: none; font-size: 11pt; }
  .legal-tabla-caja { overflow: visible; box-shadow: none; }
  .legal-portada { padding: 0 0 1rem; background: none; }
  a { color: inherit; text-decoration: none; }
}