/* ============================================================
   legal.css — Páginas legales (aviso legal · privacidad · cookies)
   Se apoya en publico.css: tokens, fondo firma, header, footer y .reveal.
   Aquí solo vive lo propio de un documento largo de leer: la cabecera
   corta, la tipografía del articulado y la tabla de cookies.
   ============================================================ */

/* ============================================================
   Cabecera del documento
   Reutiliza .page-hero de publico.css, pero un documento legal no
   necesita 78svh de portada: sin foto y sin reclamo, esa altura sería
   una pantalla entera de degradado antes de la primera línea. El
   modificador la recorta y baja el titular a una escala legible.
   ============================================================ */
.page-hero--doc {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-top: calc(var(--header-h) + clamp(48px, 9vh, 104px));
}
.page-hero--doc .hero-content {
  padding-bottom: clamp(28px, 5vh, 56px);
}
.page-hero--doc h1 {
  font-size: clamp(38px, 6.4vw, 84px);
  text-transform: none;
  letter-spacing: -.005em;
}
.page-hero--doc .page-hero__texto {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
}

/* ============================================================
   Articulado
   Medida de lectura acotada: un texto legal a 1320px de ancho no lo
   lee nadie. 72ch es el máximo cómodo con Inter a este tamaño.

   ⚠ La medida va en los HIJOS, no en el contenedor. Puesta en
   `.legal__doc` estrangulaba la tabla de cookies, que necesita más
   ancho del que cabe en una columna de prosa y acababa cortando la
   columna «Duración» aun sobrando sitio en la página. Así el texto
   mantiene su medida y la tabla puede ocupar todo el `.wrap`.
   ============================================================ */
.legal {
  padding: clamp(28px, 5vh, 56px) 0 clamp(60px, 10vh, 120px);
}

.legal__doc {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .9);
}

.legal__doc > p,
.legal__doc > ul,
.legal__doc > h2,
.legal__doc > h3 { max-width: 72ch; }

.legal__doc h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--paper);
  margin: clamp(38px, 5.5vh, 62px) 0 15px;
  scroll-margin-top: calc(var(--header-h) + 24px);   /* el header fijo no tapa el ancla */
}
.legal__doc h2:first-child { margin-top: 0; }

.legal__doc h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: .01em;
  color: var(--paper);
  margin: 28px 0 10px;
}

.legal__doc p { margin: 0 0 18px; }
.legal__doc p:last-child { margin-bottom: 0; }

.legal__doc strong { color: var(--paper); font-weight: 600; }

.legal__doc ul {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.legal__doc li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}
.legal__doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink-glow);
}

.legal__doc a {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .42);
  text-underline-offset: 3px;
  transition: text-decoration-color .25s, color .25s;
}
.legal__doc a:hover { color: var(--pink-glow); text-decoration-color: var(--pink-glow); }

/* Marcador de dato del titular sin rellenar (App\Core\Legal). Chilla a
   propósito: la web no puede abrirse al público con el aviso legal a
   medias, así que el hueco tiene que verse desde el otro lado de la sala. */
.legal__doc .legal-pendiente {
  background: #ffd60a;
  color: var(--ink);
  font-weight: 700;
  font-size: .82em;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

/* ============================================================
   Tabla de cookies
   La compone App\Core\Cookies desde el inventario real. En pantallas
   estrechas no se reflowea a tarjetas: se desplaza dentro de su caja,
   que mantiene la relación fila-columna intacta y es lo que una tabla
   de datos necesita para seguir siendo legible.
   ============================================================ */
.legal-tabla__scroll {
  margin: 26px 0 30px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(22, 4, 9, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.legal-tabla {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}

.legal-tabla__caption {
  caption-side: top;
  padding: 14px 18px 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  text-align: left;
}

.legal-tabla th,
.legal-tabla td {
  padding: 13px 18px;
  vertical-align: top;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.legal-tabla thead th {
  border-top: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  white-space: nowrap;
}

.legal-tabla tbody th {
  font-weight: 400;
  white-space: nowrap;
}
.legal-tabla tbody th code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .1);
  padding: 3px 8px;
  border-radius: 6px;
}

/* La columna de finalidad es la larga; el resto no debe estirarse por ella. */
.legal-tabla td:nth-child(4) { min-width: 260px; }

/* ============================================================
   Navegación entre documentos
   ============================================================ */
.legal__otros {
  max-width: 72ch;
  margin-top: clamp(44px, 7vh, 76px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
}

.legal__otro {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .25s;
}
.legal__otro:hover { opacity: 1; }
.legal__otro .arrow { transition: transform .3s cubic-bezier(.2, .7, .3, 1); display: inline-block; }
.legal__otro:hover .arrow { transform: translateX(5px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .page-hero--doc {
    height: auto;
    min-height: 0;
    padding-top: calc(var(--header-h) + 44px);
  }
}

/* La tabla se apila en tarjetas en cuanto deja de caber.
   Desplazarla en horizontal, que es lo que hace en pantallas medianas, aquí
   no sirve: la columna «Finalidad» es un párrafo entero, así que marca la
   altura de la fila mientras las visibles ocupan una línea, y la caja queda
   alta y vacía con el texto escondido a la derecha. Apilada, cada cookie es
   una ficha que se lee de arriba abajo y no esconde nada. La etiqueta de
   cada dato viene del `data-label` que escribe App\Core\Cookies. */
@media (max-width: 720px) {
  .legal-tabla-scroll { overflow-x: visible; background: none; border: 0; border-radius: 0; }
  .legal-tabla { min-width: 0; display: block; }
  .legal-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-tabla tbody { display: block; }

  .legal-tabla__caption { padding: 0 0 12px; }

  .legal-tabla tr {
    display: block;
    margin-bottom: 14px;
    padding: 4px 16px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(22, 4, 9, .22);
  }
  .legal-tabla tr:last-child { margin-bottom: 0; }

  .legal-tabla th,
  .legal-tabla td {
    display: block;
    padding: 10px 0 0;
    border-top: 0;
    white-space: normal;
  }
  .legal-tabla tbody th { padding-top: 14px; }
  .legal-tabla td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
  }
  .legal-tabla td:nth-child(4) { min-width: 0; }
}

@media (max-width: 520px) {
  .legal__doc { font-size: 15px; line-height: 1.68; }
  .legal-tabla { font-size: 13.5px; }
}