/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTOS LEGALES
   Términos y política de privacidad.

   Son páginas de texto largo que alguien lee una vez, casi siempre en el
   celular y con prisa, justo antes de marcar una casilla. Lo único que
   importa aquí es que se pueda leer: medida de línea corta, jerarquía clara
   y nada que distraiga.
   ══════════════════════════════════════════════════════════════════════════ */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--e-8) var(--e-5) var(--e-10);
}

/* El --marca-fuerte que base.css da a los enlaces está pensado para fondo
   blanco y da 4.42:1 sobre el fondo de la página: por debajo de AA. En un
   documento que la ley obliga a poner a disposición del titular, poder leerlo
   no es un detalle, así que aquí se usa el tono tinta. */
.legal a { color: var(--marca-tinta); }

.legal__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
  font-size: var(--t-sm);
}

.legal h1 {
  font-size: var(--t-3xl);
  line-height: 1.2;
  margin: 0 0 var(--e-2);
}

/* Cuándo se actualizó por última vez: en un documento legal es lo primero
   que se mira para saber si cambió desde que uno lo aceptó. */
.legal__fecha {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  margin: 0 0 var(--e-8);
}

.legal__resumen {
  padding: var(--e-5);
  margin-bottom: var(--e-8);
  background: var(--marca-suave);
  border-radius: var(--radio-arco);
  color: var(--marca-tinta);
}

.legal__resumen h2 {
  font-size: var(--t-base);
  margin: 0 0 var(--e-3);
  color: inherit;
}

.legal__resumen ul {
  margin: 0;
  padding-left: var(--e-5);
  font-size: var(--t-sm);
  line-height: 1.7;
}

/* Un enlace aquí toma el --marca-fuerte de base.css, que está pensado para
   fondo blanco: sobre --marca-suave daba 1.54:1, ilegible. Hereda el color
   del bloque y se distingue por el subrayado, que además es lo que un
   documento legal necesita. */
.legal__resumen a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.legal h2 {
  font-size: var(--t-xl);
  margin: var(--e-9) 0 var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
}

.legal h3 {
  font-size: var(--t-base);
  margin: var(--e-6) 0 var(--e-2);
}

.legal p,
.legal li {
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--texto-suave);
}

.legal ul,
.legal ol {
  padding-left: var(--e-6);
}

.legal li { margin-bottom: var(--e-2); }

.legal strong { color: var(--texto); }

.legal__tabla {
  width: 100%;
  border-collapse: collapse;
  margin: var(--e-4) 0;
  font-size: var(--t-sm);
}

.legal__tabla th,
.legal__tabla td {
  padding: var(--e-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
  line-height: 1.6;
}

.legal__tabla th {
  color: var(--texto);
  font-weight: 600;
  white-space: nowrap;
}

.legal__tabla td { color: var(--texto-suave); }

/* Una tabla de tres columnas no cabe en 375 px: se desplaza dentro de su
   caja en vez de estirar la página entera. */
.legal__desplazable {
  overflow-x: auto;
  margin: var(--e-4) calc(var(--e-5) * -1);
  padding: 0 var(--e-5);
}

.legal__contacto {
  padding: var(--e-5);
  margin-top: var(--e-8);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-arco);
}

.legal__contacto p { margin: 0 0 var(--e-2); }
.legal__contacto p:last-child { margin-bottom: 0; }

.legal__pie {
  margin-top: var(--e-10);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-align: center;
}

@media (max-width: 640px) {
  .legal { padding: var(--e-6) var(--e-4) var(--e-8); }
  .legal h1 { font-size: var(--t-2xl); }
  .legal__desplazable {
    margin: var(--e-4) calc(var(--e-4) * -1);
    padding: 0 var(--e-4);
  }
}