/* ═══════════════════════════════════════════════════════════════
   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; }
}