/* ═══════════════════════════════════════════════════════════════
   LEGALES — partials/legal.php y partials/legal-cierre.php

   Privacy, Terms y Cookies. Una hoja para las tres: son el mismo
   documento con distinta prosa dentro.

   LA DECISIÓN DE FONDO: aquí se lee, no se mira. Un documento legal que
   nadie termina es un documento legal que no informa a nadie, y la
   excusa habitual —«total, no lo lee ni Dios»— es circular: no lo lee
   nadie porque está maquetado para que no se lea. Así que la columna es
   estrecha, el cuerpo es grande y hay aire entre párrafos. Es lo
   contrario de la letra pequeña, a propósito.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* El ancho de la columna de texto. 68ch son unas 12-14 palabras por
     renglón: por debajo el ojo salta de línea demasiado seguido, por
     encima pierde de vista dónde empieza la siguiente. */
  --lg-ancho: 68ch;
}

.lg {
  background: var(--bg);
  padding: clamp(80px, 14vh, 170px) var(--hd-pad) clamp(50px, 9vh, 120px);
}

.lg-dentro {
  max-width: var(--lg-ancho);
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   1. La cabecera
   ═══════════════════════════════════════════════════════════════ */

.lg-cabeza {
  padding-bottom: clamp(28px, 5vh, 52px);
  margin-bottom: clamp(28px, 5vh, 52px);
  border-bottom: 1px solid var(--border);
}

/* Bastante más pequeño que el titular de /services o /the-team. Un
   «Privacy Policy» a 168px sería un chiste: la página no es un
   escaparate, es un documento, y su titular tiene que comportarse como
   el de un documento. */
.lg-titular {
  font-size: clamp(34px, 5.5vw, 62px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--tinta-alta);
}

.lg-fecha {
  margin-top: clamp(10px, 1.8vh, 16px);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .04em;
  color: var(--muted);
}

.lg-entrada {
  max-width: 58ch;
  margin-top: clamp(16px, 3vh, 26px);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--tinta-alta);
}

/* ── Las tres pestañas ─────────────────────────────────────────── */
.lg-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 3.5vh, 32px);
}

.lg-pestana {
  display: inline-flex;
  align-items: center;
  padding: clamp(7px, .8vw, 10px) clamp(13px, 1.3vw, 18px);
  border-radius: 999px;
  font-size: clamp(11.5px, .95vw, 13px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gris);
  color: var(--tinta);
  transition: background .25s ease, color .25s ease;
}
.lg-pestana:hover { background: var(--gris-on); color: var(--tinta-alta); }

/* La actual va en tinta llena y NO es un enlace: la dibuja un <span>.
   Un enlace a la página en la que ya estás gasta el clic de quien lo
   pulsa y enseña a desconfiar de los otros dos. */
.lg-pestana.es-actual {
  background: var(--tinta-alta);
  color: var(--bg);
  cursor: default;
}


/* ═══════════════════════════════════════════════════════════════
   2. La prosa

   Se estiliza por etiqueta y no por clase: dentro de .lg-cuerpo el
   documento escribe <h2> y <p> pelados. Ponerle una clase a cada
   párrafo de tres documentos legales es la clase de trabajo que se
   abandona a la mitad, y entonces la mitad del texto se ve distinta.
   ═══════════════════════════════════════════════════════════════ */

.lg-cuerpo {
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.75;
  color: var(--tinta);
}

.lg-cuerpo h2 {
  margin-top: clamp(34px, 6vh, 58px);
  margin-bottom: clamp(10px, 1.6vh, 16px);
  font-size: clamp(19px, 1.85vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--tinta-alta);
}
/* El primero no separa de nada: encima tiene el borde de la cabecera. */
.lg-cuerpo h2:first-child { margin-top: 0; }

.lg-cuerpo h3 {
  margin-top: clamp(22px, 3.6vh, 34px);
  margin-bottom: 6px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tinta-alta);
}

.lg-cuerpo p { margin-bottom: clamp(12px, 2vh, 18px); }

.lg-cuerpo strong { color: var(--tinta-alta); font-weight: 600; }
.lg-cuerpo em     { font-style: italic; }

/* Los enlaces van SUBRAYADOS, al revés que en el resto del sitio.
   En una página de prosa larga, un enlace que solo cambia de color se
   pierde entre renglones — y en un documento legal, no ver que una
   frase lleva a otro documento es perderse una parte del documento.
   El offset lo separa de las bajadas de las letras. */
.lg-cuerpo a {
  color: var(--tinta-alta);
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s ease, color .25s ease;
}
.lg-cuerpo a:hover {
  color: var(--acento);
  text-decoration-color: var(--acento);
}

/* Las URLs de las políticas de terceros son largas y sin espacios: sin
   esto, una sola desborda la columna a lo ancho en móvil. */
.lg-cuerpo a { overflow-wrap: anywhere; }

.lg-cuerpo ul {
  margin: 0 0 clamp(12px, 2vh, 18px);
  padding-left: 1.15em;
  list-style: none;
}
.lg-cuerpo ul li {
  position: relative;
  margin-bottom: 8px;
}
/* La viñeta a mano y en el acento: la del navegador no se puede pintar
   sin ::marker, que aún falla en navegadores que este sitio soporta. */
.lg-cuerpo ul li::before {
  content: '';
  position: absolute;
  left: -1.15em;
  top: .68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acento);
}


/* ═══════════════════════════════════════════════════════════════
   3. La caja de dudas
   ═══════════════════════════════════════════════════════════════ */

.lg-dudas {
  margin-top: clamp(44px, 8vh, 80px);
  padding: clamp(22px, 3vw, 36px);
  border-radius: clamp(14px, 1.5vw, 24px);
  background: var(--gris);
}

.lg-dudas-txt {
  max-width: 52ch;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.65;
  color: var(--tinta);
}

.lg-dudas-cta {
  display: inline-block;
  margin-top: clamp(12px, 2vh, 18px);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--acento);
  text-decoration: none;
  transition: opacity .25s ease;
}
.lg-dudas-cta:hover { opacity: .7; }


/* ═══════════════════════════════════════════════════════════════
   Tamaños
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* En móvil la columna ya la marca el ancho de la pantalla, y 68ch
     dejaría de aplicar de todas formas. Lo que se ajusta es el aire de
     arriba, que a pantalla completa era casi un tercio del alto. */
  .lg { padding-top: clamp(60px, 12vh, 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-pestana, .lg-cuerpo a, .lg-dudas-cta { transition: none; }
}


/* ── LA TABLA DE COOKIES ────────────────────────────────────────
   La usa /cookies cuando hay analítica encendida, para listar cada
   cookie por su nombre, qué hace y cuánto dura. Con GA4_ID vacío esa
   tabla no se dibuja y estas reglas no las usa nadie.

   EN MÓVIL NO SE APILA: se deja desplazar a lo ancho. Una tabla de
   cuatro columnas convertida en fichas apiladas pierde justo lo que la
   hace útil, que es poder comparar la columna «cuánto dura» de un
   vistazo. El scroll horizontal se anuncia con tabindex para que
   también se pueda recorrer con el teclado. */

.lg-tabla-caja { overflow-x: auto; margin: 22px 0; }

.lg-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 620px;              /* por debajo de esto, a desplazar */
}

.lg-tabla th,
.lg-tabla td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}

.lg-tabla th {
  font-weight: 600;
  color: var(--tinta-alta);
  border-bottom-width: 2px;
  white-space: nowrap;
}

.lg-tabla td { color: var(--tinta); }

.lg-tabla code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  color: var(--tinta-alta);
  background: var(--gris);
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.lg-tabla tbody tr:last-child th,
.lg-tabla tbody tr:last-child td { border-bottom: 0; }