/* =============================================================================
   LO LEGAL · la página de privacidad y la banda de cookies
   =============================================================================
   LAS DOS COSAS VIVEN EN LA MISMA HOJA porque son la misma conversación partida
   en dos sitios: la banda pregunta y la página explica. La banda enlaza a la
   página y la página explica cómo volver a abrir la banda. Separarlas en dos
   hojas sería tener que acordarse de tocar las dos cada vez que cambie una.

   Y LA PÁGINA NO SE PARECE AL JUEGO, a propósito. Aquí no hay neón que pulse ni
   letra de píxel: es modo LECTURA. Lo único que se trae de la casa es la
   noche de fondo, la tipografía y el verde justo en los enlaces, para que se
   note que es el mismo sitio sin que parezca una pantalla más del juego.

   Depende de css/tokens.css. No funciona sola.
============================================================================= */

/* =============================================================================
   1 · LA PÁGINA
============================================================================= */

/* La medida de lectura: unos 68 caracteres. Más ancho y el ojo se pierde al
   saltar de renglón, que en un texto legal es justo lo que no interesa. */
.legal {
  --lg-ancho: 68ch;
  background:
    radial-gradient(1100px 620px at 50% -220px, rgba(157, 107, 255, 0.14), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  padding: 0 20px 80px;
}

.lg-cab,
.lg-cuerpo,
.lg-pie {
  width: 100%;
  max-width: var(--lg-ancho);
  margin-inline: auto;
}

/* --- La cabecera --- */
.lg-cab { padding: 56px 0 8px; }

.lg-volver {
  display: inline-block;
  margin-bottom: 34px;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-out);
}
.lg-volver:hover { opacity: 1; }
.lg-volver .marca { height: 34px; }

.lg-h1 {
  margin: 0;
  font-family: var(--face-titular);
  font-weight: 600;
  font-size: clamp(38px, 7vw, 58px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.lg-fecha {
  margin: 14px 0 0;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lg-entrada {
  margin: 26px 0 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* La raya que separa la entradilla del texto. Un degradado y no una línea: una
   línea de lado a lado corta la página en dos; esta se apaga en los extremos. */
.lg-cab::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 44px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* --- El cuerpo --- */
.lg-bloque { margin: 46px 0 0; }

.lg-cuerpo h2 {
  margin: 0 0 18px;
  font-family: var(--face-gorda);
  font-weight: 800;
  font-size: clamp(23px, 3.4vw, 29px);
  line-height: 1.2;
  color: var(--ink);
}

.lg-cuerpo h3 {
  margin: 30px 0 10px;
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}
.lg-cuerpo h3:first-of-type { margin-top: 22px; }

.lg-cuerpo p { margin: 0 0 16px; color: var(--ink-dim); }
.lg-cuerpo p:last-child { margin-bottom: 0; }
.lg-cuerpo b { color: var(--ink); font-weight: 500; }

.lg-cuerpo ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--ink-dim);
}
.lg-cuerpo li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 24px;
}
/* El punto de la lista, en morado: marca el renglón sin gritar. */
.lg-cuerpo li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--violet);
}

.lg-cuerpo a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-color: rgba(168, 244, 37, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease-out);
}
.lg-cuerpo a:hover { text-decoration-color: var(--lime); }

/* --- La ficha del responsable --- */
.lg-ficha {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--line);
}
.lg-ficha dt,
.lg-ficha dd {
  margin: 0;
  padding: 13px 16px;
  background: var(--bg-2);
}
.lg-ficha dt {
  font-size: var(--t-small);
  color: var(--ink-faint);
}
.lg-ficha dd { color: var(--ink); }

/* El apunte que va pegado a la ficha: explica una decisión en vez de dejar un
   hueco. Más chico y con una raya morada a la izquierda, para que se lea como
   una nota al pie de la ficha y no como un párrafo más del texto. */
.lg-cuerpo .lg-apunte {
  margin: 14px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--line);
  font-size: var(--t-small);
  /* `--ink-dim` y no `--ink-faint`: es una nota, pero es la nota que explica por
     qué faltan dos datos obligatorios. A 15 px, el tono apagado se queda por
     debajo del contraste que hace falta para leer sin forzar la vista, y
     esconder precisamente esto sería lo peor que podría hacer la página. */
  color: var(--ink-dim);
}

/* LO QUE FALTA POR RELLENAR, visible desde lejos. Es ámbar y con el trazo a
   rayas porque un hueco legal sin rellenar no es un detalle de maquetación: es
   la página incumpliendo.
   AHORA MISMO NO LA USA NADIE —la página está completa— y se queda aquí a
   propósito: el día que se añada un apartado nuevo a medias, hay dónde
   colgarlo, y scripts/shot-cookies.mjs los cuenta y los canta en cada pasada. */
.lg-falta {
  display: inline-block;
  padding: 2px 9px;
  border: 1px dashed rgba(255, 196, 71, 0.55);
  border-radius: var(--r-sm);
  background: rgba(255, 196, 71, 0.08);
  color: var(--amber) !important;
  font-size: var(--t-small);
  letter-spacing: 0.02em;
}

/* --- La tabla de cookies --- */
.lg-tabla-marco {
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.lg-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  line-height: 1.5;
}
.lg-tabla th {
  padding: 12px 14px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 500;
  font-size: var(--t-nano);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lg-tabla td {
  padding: 14px;
  background: var(--bg-2);
  border-bottom: 1px solid rgba(157, 107, 255, 0.14);
  color: var(--ink-dim);
  vertical-align: top;
}
.lg-tabla tr:last-child td { border-bottom: 0; }

.lg-nota {
  display: block;
  margin-top: 3px;
  font-size: var(--t-nano);
  color: var(--ink-faint);
}

/* EN EL MÓVIL LA TABLA DEJA DE SER TABLA. Cuatro columnas en 390 píxeles son
   cuatro columnas de dos palabras cada una; aquí cada fila se convierte en una
   tarjeta y cada celda se presenta con su propio encabezado (el `data-th` del
   HTML), que es la única manera de que se siga sabiendo qué es cada cosa. */
@media (max-width: 640px) {
  .lg-tabla thead { display: none; }
  .lg-tabla,
  .lg-tabla tbody,
  .lg-tabla tr,
  .lg-tabla td { display: block; width: 100%; }
  .lg-tabla tr { border-bottom: 1px solid var(--line); }
  .lg-tabla tr:last-child { border-bottom: 0; }
  .lg-tabla td { border-bottom: 0; padding: 4px 14px; }
  .lg-tabla td:first-child { padding-top: 14px; }
  .lg-tabla td:last-child { padding-bottom: 16px; }
  .lg-tabla td::before {
    content: attr(data-th);
    display: block;
    margin-bottom: 2px;
    font-size: var(--t-nano);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

/* --- El pie --- */
.lg-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-faint);
}
.lg-pie a { color: var(--lime); text-decoration: none; }
.lg-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   2 · LA BANDA DE COOKIES
   =============================================================================
   La pinta client/js/ui/cookies.js. Va abajo y pegada a la ventana porque es lo
   único que puede aparecer encima de la portada sin tapar el encabezado, que es
   lo primero que se mira al llegar.

   NO ES UNA CORTINA. No oscurece la página ni bloquea el desplazamiento: se
   puede leer la web entera sin contestar, y contestar luego. Un muro que obliga
   a pulsar para seguir es la manera más rápida de que todo el mundo pulse el
   «sí» sin leer, que es justo lo contrario de lo que esto es.
============================================================================= */

.ck {
  position: fixed;
  z-index: 70;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass-2);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  /* Entra desde abajo, y empieza fuera para que el primer fotograma no la pille
     a medias. La clase `ck--on` la trae; quitarla la devuelve. */
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.ck--on { transform: none; opacity: 1; }

.ck-dentro { display: grid; gap: 14px; }

.ck-t {
  display: block;
  margin-bottom: 5px;
  font-family: var(--face-gorda);
  font-weight: 800;
  font-size: var(--t-lead);
  line-height: 1.2;
  color: var(--ink);
}
.ck-p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-dim);
}
.ck-mas {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-color: rgba(168, 244, 37, 0.4);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ck-mas:hover { text-decoration-color: var(--lime); }

.ck-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* LOS DOS BOTONES MIDEN LO MISMO Y PESAN LO MISMO. El «no» va primero y es un
   botón de verdad, no un enlace en gris en una esquina: si decir que no costara
   más trabajo que decir que sí, lo que se recogería no sería consentimiento.
   La única diferencia es el color del «sí», que es el verde de la acción de
   toda la casa y marca cuál es la respuesta afirmativa — no cuál es la buena. */
.ck-b {
  padding: 11px 14px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(157, 107, 255, 0.1);
  color: var(--ink);
  font-family: var(--face-ui);
  font-size: var(--t-small);
  font-weight: 500;
  cursor: var(--cursor-pulsable);
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.ck-b:hover { background: rgba(157, 107, 255, 0.2); border-color: var(--violet); }

.ck-b--si {
  border-color: var(--line-lit);
  background: rgba(168, 244, 37, 0.14);
  color: var(--lime-soft);
}
.ck-b--si:hover { background: rgba(168, 244, 37, 0.24); border-color: var(--lime); }

/* A partir de cierta anchura cabe todo en una línea: el texto a la izquierda y
   los dos botones a la derecha, que es la forma que ocupa menos pantalla. */
@media (min-width: 720px) {
  .ck { max-width: 720px; }
  .ck-dentro {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 22px;
  }
  /* SIGUEN SIENDO DOS COLUMNAS IGUALES y no `auto auto`: con `auto`, cada botón
     mide lo que mide su palabra, y «Rechazar» tiene una letra más que «Aceptar».
     Diez píxeles de diferencia no se ven, pero son diez píxeles de empujón —y en
     otro idioma pueden ser cuarenta. */
  .ck-botones { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .ck-b { padding-inline: 20px; }
}