/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL — aviso de privacidad y términos y condiciones
   ---------------------------------------------------------------------------
   Segunda hoja, después de `landing.css`, exactamente como `nosotros.css`: de
   allá vienen los tokens, la letra, la barra, los botones y el pie, y aquí solo
   nace lo que estas dos páginas necesitan. La landing no la carga, así que nada
   de lo que se escriba aquí puede romperla.

   LA IDEA DE DISEÑO, EN UNA LÍNEA: un documento legal se lee, no se recorre. No
   lleva ni una imagen, ni una tarjeta, ni un acento de color; lleva UNA columna
   angosta, jerarquía clara y aire. Todo lo que se le agregue le quita legibilidad
   y no le suma nada, porque lo único que esta página tiene que hacer es que
   alguien pueda leerla completa sin perder el hilo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* LA MISMA COLUMNA DE 760 QUE «NOSOTROS», y por la misma razón: es el ancho al
   que un párrafo cae en renglones de 70-80 caracteres, que es donde el ojo
   encuentra solo el principio del siguiente. Más ancho y se pierde el renglón;
   más angosto y el texto se vuelve una tira. Se copia el valor en vez de
   importarlo porque las dos hojas nunca se cargan juntas. */
.franja.legal__caja { max-width: calc(760px + 2 * var(--margen)); }

.legal__rotulo { margin-bottom: clamp(14px, 1.4vw, 20px); }

/* EL TITULAR, UN ESCALÓN MÁS ABAJO que el de «nosotros» (54 px). «Aviso de
   Privacidad Integral» son tres palabras largas y esto no es una portada: el
   título de un documento anuncia, no impacta. */
.legal__titulo { font-size: clamp(28px, 3.4vw, 42px); }

.legal__version { margin-top: 12px; }

/* EL AVISO DE ESTADO. Caja de papel con borde, sin color de alerta: no es un
   error del sitio ni un peligro, es una advertencia de honestidad. Un rojo o un
   ámbar aquí gritarían más de lo que el hecho pide y romperían la única regla
   de la página, que es no tener acentos. */
.legal__aviso {
  margin-top: clamp(24px, 2.4vw, 34px);
  padding: clamp(16px, 1.6vw, 22px);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--curva);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.legal__aviso strong { color: var(--tinta); font-weight: 600; }

/* ── EL DOCUMENTO ───────────────────────────────────────────────────────────
   El HTML de aquí adentro NO lo escribe una plantilla: lo genera
   `legal_render.to_html` a partir del `.txt`. Así que las reglas se cuelgan de
   las etiquetas desnudas —h2, p, ul, li— y no de clases, porque el generador no
   pone clases a propósito: quien edita el `.txt` es el Director o un abogado, y
   no tiene por qué saber una clase de CSS para agregar un párrafo. */
.legal__texto { margin-top: clamp(32px, 3.2vw, 48px); }

/* EL AIRE ANTES DE UN TÍTULO ES MAYOR QUE EL DE DESPUÉS, y es la regla que hace
   que las secciones se vean como secciones: un título pegado a lo de arriba y
   suelto de lo de abajo se lee como el final de la sección anterior. */
.legal__texto h2 {
  margin-top: clamp(40px, 4vw, 60px);
  margin-bottom: clamp(12px, 1.2vw, 18px);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--tinta);
}
.legal__texto > h2:first-child { margin-top: 0; }

.legal__texto p {
  margin-top: clamp(14px, 1.3vw, 20px);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-suave);
}
.legal__texto > p:first-child { margin-top: 0; }

/* LAS LISTAS NO LLEVAN VIÑETA REDONDA sino raya, y van colgadas del margen:
   dentro de un documento legal una lista es una enumeración de lo mismo, no una
   pausa decorativa, y la raya lo dice sin llamar la atención. */
.legal__texto ul {
  margin-top: clamp(14px, 1.3vw, 20px);
  padding-left: 0;
  list-style: none;
}
.legal__texto li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-suave);
}
.legal__texto li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--borde);
}

/* ── LO QUE FALTA, VISIBLE ──────────────────────────────────────────────────
   La decisión de fondo de estas dos páginas, y la única que no se puede tomar
   por gusto: un dato que el documento todavía no tiene se PINTA, no se disimula.

   Va con el mismo punteado que todos los huecos declarados del sitio —la foto
   que falta, la escena del cuarto plan— porque es exactamente la misma clase de
   cosa: un espacio reservado para algo que sí va a llegar. La diferencia es que
   aquí el hueco vive DENTRO de un renglón, así que se comporta como palabra:
   `display: inline` para que parta de línea con el párrafo en vez de abrir un
   agujero, y `box-decoration-break: clone` para que el punteado se cierre a los
   dos lados cuando parte. */
.legal__pendiente {
  display: inline;
  padding: 1px 6px;
  border: 1px dashed var(--borde);
  border-radius: 6px;
  background: var(--nada);
  font-size: 0.92em;
  font-style: normal;
  color: var(--tinta-suave);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 700px) {
  .legal__texto p,
  .legal__texto li { font-size: 16px; }
}