/* ============================================================
   DYRECO · p-legal.css
   Hoja COMPARTIDA por las tres páginas legales:
     aviso-legal.html · privacidad.html · cookies.html

   Por qué una sola hoja y no tres: las tres son el mismo objeto —
   lectura larga, epígrafes numerados, índice lateral y una medida de
   lectura estrecha—. Lo único que cambia es el texto. Tres hojas
   idénticas serían tres sitios donde arreglar el mismo desborde.

   NOMBRES (comprobados contra §29 de estilos.css el 8-sep-2026 con el
   grep del propio registro: `legal`, `lcab`, `lidx`, `lficha`, `ltab`,
   `lnota` y `lpend` estaban libres en las once hojas). La `l` inicial
   es "legal": son de estas tres páginas y de ninguna más. Si alguna
   sube al sistema, cambia de nombre y se apunta en §29.

   ESTÉTICA: se respeta el contrato. Fondo carbón, el amarillo solo
   como LUZ (filetes, numeración, viñetas en diagonal, foco), display
   condensada en mayúsculas contra Public Sans muy aireada, cortes en
   diagonal, filetes de 1 px y ritmo vertical generoso. No hay ni una
   superficie rellena de amarillo.
   ============================================================ */


/* ------------------------------------------------------------
   0 · Variables de la página
   ------------------------------------------------------------
   --lmed es la MEDIDA DE LECTURA y está en px a propósito.
   Se puso primero en `ch` y se midió con Range en el navegador: la `ch`
   de Public Sans es el ancho del "0", bastante más ancha que su letra
   media (0,427 em), así que la unidad miente por arriba. Primer intento,
   600 px: 84 caracteres reales. Segundo, 530 px con el cuerpo a 18 px:
   69. Y la cuenta no es fija: un párrafo lleno de letras estrechas
   ("píxel de medición") mete cuatro o cinco más por línea que otro con
   la misma anchura: el párrafo del píxel de OpenAI, lleno de íes y de
   tes, metía 69 en la misma caja donde otros metían 61. Con 470 px y el
   cuerpo entre 19 y 20 px el peor párrafo de las TRES páginas, medido a
   1920/1440/1280/1024/834/620/390, se queda por debajo de 66.
   La cifra sale de la medición, no de la unidad.
   ------------------------------------------------------------ */
.legal {
  /* Cuerpo propio de la prosa legal. `--fs-body` da 16 px a 1440 y estas
     páginas son de lectura larga y seguida: suben un escalón, a 19-20 px,
     que es donde el texto deja de pedir esfuerzo. No se toca `--fs-body`
     porque llega a las ocho páginas de la web. */
  --lfs: clamp(1.1875rem, 1.35vw, 1.25rem);
  /* ⚠️ DECISIÓN DE JUAN, 9-sep-2026: títulos y prosa van AL MISMO ANCHO que
     las tablas (800 px) «para que se vea todo más uniforme». Deroga a
     sabiendas la medida de lectura de 470 px (66 caracteres) que dejó
     escrita la nota de arriba; a 800 px la prosa a 19-20 px ronda los 100
     caracteres por línea. */
  --lmed: 800px;          /* antes 470 — medida de lectura medida */
  --lmed-ancha: 800px;    /* antes 860 — la nota tampoco sobresale de la columna */
  --l-linea: 1px solid var(--linea);
}


/* ============================================================
   1 · CABECERA DE PÁGINA
   La cabecera del sitio es `cab--over` (flota sobre el contenido), así
   que el relleno superior tiene que pagar su alto además del aire.
   ============================================================ */

.lcab {
  position: relative;
  overflow: clip;
  background: var(--sup);
  border-bottom: var(--l-linea);
  padding-block: calc(var(--alto-cab) + clamp(64px, 7.5vw, 132px)) clamp(48px, 5.5vw, 88px);
}

/* Los cortes en diagonal de la marca: tres filetes de 1 px inclinados
   -30° (el mismo ángulo que la diagonal del `.kicker`), desvanecidos
   por arriba y por abajo. Es el único gráfico de la cabecera. */
.lcab::after {
  content: "";
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  /* Solo la franja ALTA de la cabecera. Ocupando el 136 % del alto, las
     diagonales cruzaban por detrás de la ficha de vigencia y se leían
     tachones amarillos sobre «8 de septiembre de 2026». Arriba no hay
     nada que estorbar. */
  top: -22%;
  width: 190px;
  height: 68%;
  pointer-events: none;
  transform: skewX(-30deg);
  background:
    linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .55) 34%, rgb(var(--am-rgb) / .55) 66%, transparent) 0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .22) 34%, rgb(var(--am-rgb) / .22) 66%, transparent) 26px 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, rgb(var(--am-rgb) / .10) 34%, rgb(var(--am-rgb) / .10) 66%, transparent) 60px 0 / 1px 100% no-repeat;
}
/* En móvil el adorno se come el margen derecho del titular: fuera. */
@media (max-width: 720px) {
  .lcab::after { display: none; }
}

.lcab__rej {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(32px, 4vw, 88px);
  align-items: end;
}
@media (max-width: 1024px) {
  .lcab__rej { grid-template-columns: 1fr; align-items: start; gap: clamp(28px, 4vw, 40px); }
}

.lcab__h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.35rem, 5.2vw, 4.6rem);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  max-width: 16ch;
}
.lcab__ent {
  margin-top: var(--pieza);
  max-width: 460px;
  font-size: var(--lfs);
  color: var(--apagado);
}

/* La ficha de vigencia: fecha, titular y a qué web se aplica. */
.lcab__meta {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea-alta);
  justify-self: end;
  width: 100%;
  max-width: 380px;
}
@media (max-width: 1024px) {
  .lcab__meta { justify-self: start; }
}
.lcab__fila {
  display: grid;
  grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
  gap: 8px 18px;
  padding: 13px 0;
  border-bottom: var(--l-linea);
}
.lcab__et {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1.5;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
}
.lcab__val {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--apagado);
}


/* ============================================================
   2 · CUERPO — índice a la izquierda, lectura a la derecha
   ============================================================ */

.legal__rej {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  padding-block: clamp(48px, 5vw, 80px) var(--sec-y);
  align-items: start;
}
@media (max-width: 1080px) {
  .legal__rej { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 52px); }
}


/* --- 2.1 · Índice de contenidos ---------------------------- */

.lidx {
  position: sticky;
  top: calc(var(--alto-cab) + 24px);
  align-self: start;
}
/* Pegado no: en cuanto la ventana es baja el índice de 10 epígrafes no
   cabe y se corta por abajo sin poder desplazarlo. Con `max-height` y
   scroll propio se comporta; por debajo de 1080 deja de ser lateral y
   ya no tiene sentido pegarlo. */
.lidx {
  max-height: calc(100dvh - var(--alto-cab) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1080px) {
  .lidx {
    position: static;
    max-height: none;
    overflow: visible;
    border: var(--l-linea);
    background: var(--sup);
    padding: clamp(20px, 3vw, 28px);
  }
}

.lidx__t {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: var(--l-linea);
}
.lidx__l { display: grid; }
.lidx__l a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 7px 0 7px 14px;
  border-left: var(--l-linea);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--apagado);
  transition: color var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease),
              padding-left var(--dur-ui) var(--ease);
}
.lidx__l a:hover {
  color: var(--texto);
  border-left-color: var(--amarillo);
  padding-left: 20px;
}
.lidx__n {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--amarillo);
}
/* En móvil el índice se reparte en dos columnas para no dejar una
   tira de diez líneas antes de empezar a leer. */
@media (max-width: 1080px) and (min-width: 620px) {
  .lidx__l { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
}


/* --- 2.2 · Epígrafes --------------------------------------- */

.legal__cuerpo {
  /* La columna de lectura no crece con la pantalla. A 1920 el hueco de
     la derecha son 336 px de margen, que es lo que hace que esto se lea
     como un documento y no como una web estirada. Las tablas sí usan
     los 800: ese contraste entre prosa estrecha y tabla ancha es el
     ritmo de la página. */
  max-width: 800px;
}

.legal__sec {
  padding-block: clamp(34px, 3.6vw, 54px);
  border-top: var(--l-linea);
  /* Con la cabecera fija, un salto por ancla mete el titular debajo.
     La regla del sistema solo cubre `main > section[id]` y estos van
     anidados, así que la medida se repite aquí. */
  scroll-margin-top: calc(var(--alto-cab) + 24px);
}
.legal__sec:first-child { border-top: 0; padding-top: 0; }

.legal__h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 1.4vw, 22px);
  align-items: baseline;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--texto);
  text-wrap: balance;
  max-width: var(--lmed);
  margin-bottom: clamp(18px, 1.8vw, 26px);
}
.legal__h2 .num {
  font-size: clamp(.8125rem, 1vw, .9375rem);
  line-height: 1.9;
}

.legal__h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
  margin-top: clamp(26px, 2.6vw, 38px);
  margin-bottom: 12px;
  max-width: var(--lmed);
  text-wrap: balance;
}

.legal__p {
  max-width: var(--lmed);
  font-size: var(--lfs);
  color: var(--apagado);
}
.legal__p + .legal__p,
.legal__lista + .legal__p,
.legal__p + .legal__lista { margin-top: 1.05em; }

/* Viñeta: el filete de 1 px en diagonal de la marca, no un punto. */
.legal__lista { display: grid; gap: .7em; }
.legal__lista li {
  position: relative;
  max-width: var(--lmed);
  padding-left: 28px;
  font-size: var(--lfs);
  color: var(--apagado);
}
.legal__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * .5em);
  width: 14px;
  height: 1px;
  background: var(--amarillo);
  transform: skewX(-30deg);
}
.legal__lista strong,
.legal__p strong { color: var(--texto); font-weight: 600; }

/* Enlaces dentro del texto: subrayado amarillo de 1 px, nunca relleno. */
.legal__p a,
.legal__lista a,
.lficha a,
.ltab a {
  color: var(--texto);
  border-bottom: 1px solid rgb(var(--am-rgb) / .55);
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.legal__p a:hover,
.legal__lista a:hover,
.lficha a:hover,
.ltab a:hover { color: var(--amarillo); border-bottom-color: var(--amarillo); }

/* Enlaces que son direcciones de contacto y se repiten mucho: mismo
   trato, pero con objetivo táctil de 44 px cuando van sueltos. */
.legal__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 1.05em;
}
.legal__contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .03em;
  color: var(--amarillo);
  transition: color var(--dur-ui) var(--ease);
}
.legal__contacto a:hover { color: var(--texto); }

.legal__botones { margin-top: clamp(22px, 2.4vw, 32px); }


/* ============================================================
   3 · FICHA DE DATOS  (identificación del titular, responsable…)
   ============================================================ */

.lficha {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  max-width: var(--lmed);
  border-top: 1px solid var(--linea-alta);
  /* Aire propio ARRIBA Y ABAJO: sin el de abajo, el párrafo que sigue
     arrancaba pegado al último filete de la ficha y las dos cosas se
     leían como una sola. */
  margin-block: 1.05em 1.8em;
}
.lficha dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  line-height: 1.6;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  padding: 15px 20px 15px 0;
  border-bottom: var(--l-linea);
}
.lficha dd {
  max-width: none;    /* 9-sep-2026: la ficha va al ancho de la columna */
  padding: 15px 0;
  border-bottom: var(--l-linea);
  color: var(--texto);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .lficha { grid-template-columns: 1fr; }
  .lficha dt { padding: 16px 0 2px; border-bottom: 0; }
  .lficha dd { padding: 0 0 16px; }
}


/* ============================================================
   4 · TABLA DE COOKIES
   ------------------------------------------------------------
   Escritorio: tabla de verdad, con su scroll propio si no cabe (el
   body del sitio va en `overflow-x: clip`; una tabla ancha sin caja
   propia arrastraría la página entera).
   Móvil (≤760px): la tabla se convierte en fichas apiladas y cada
   celda recupera su rótulo desde `data-et`. Sin scroll lateral.
   ============================================================ */

.ltab__caja {
  margin-block: 1.2em 1.9em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--linea-alta);
}
.ltab {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  /* Un escalón por encima de --fs-sm: al subir la prosa a 19-20 px, los
     14 px de la tabla quedaban como letra pequeña de contrato. */
  font-size: clamp(.9375rem, 1vw, 1rem);
  text-align: left;
  /* Reparto FIJO. Con el reparto automático, la columna de finalidad se
     comía todo el sobrante y sus celdas llegaban a 81 caracteres reales
     por línea a 1440: más larga que la prosa que hay encima. Con el
     reparto declarado se queda en 60. */
  table-layout: fixed;
}
/* Tabla de cookies — cinco columnas */
.ltab--cookies th:nth-child(1), .ltab--cookies td:nth-child(1) { width: 16%; }
.ltab--cookies th:nth-child(2), .ltab--cookies td:nth-child(2) { width: 16%; }
.ltab--cookies th:nth-child(3), .ltab--cookies td:nth-child(3) { width: 33%; }
.ltab--cookies th:nth-child(4), .ltab--cookies td:nth-child(4) { width: 19%; }
.ltab--cookies th:nth-child(5), .ltab--cookies td:nth-child(5) { width: 16%; }
/* Tabla de bases jurídicas — tres columnas */
.ltab--bases th:nth-child(1), .ltab--bases td:nth-child(1) { width: 27%; }
.ltab--bases th:nth-child(2), .ltab--bases td:nth-child(2) { width: 36%; }
.ltab--bases th:nth-child(3), .ltab--bases td:nth-child(3) { width: 37%; }
.ltab caption {
  text-align: left;
  padding-bottom: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}
.ltab th {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  padding: 14px 22px 14px 0;
  border-bottom: var(--l-linea);
  vertical-align: bottom;
  white-space: nowrap;
}
.ltab td {
  padding: 16px 22px 16px 0;
  border-bottom: var(--l-linea);
  color: var(--apagado);
  line-height: 1.55;
  vertical-align: top;
}
.ltab td:last-child, .ltab th:last-child { padding-right: 0; }
.ltab tbody tr:hover td { color: var(--texto); }
/* La columna del identificador: es código, se lee como código.
   ⚠️ NADA de `white-space: nowrap` aquí. Con `table-layout: fixed` un
   nombre largo (`_ga_<identificador>`) no ensancha su columna: se sale
   por encima de la siguiente y se lee «_ga_<identificadorGoogle». Se
   parte donde haga falta. */
.ltab__id {
  font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--texto);
  overflow-wrap: anywhere;
}
.ltab__dur { overflow-wrap: break-word; }
/* Un marcador de pendiente dentro de una celda tampoco puede desbordarla. */
.ltab .lpend { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .ltab__caja { overflow-x: visible; border-top: 0; }
  .ltab, .ltab tbody, .ltab tr, .ltab td { display: block; }
  .ltab { min-width: 0; table-layout: auto; }
  .ltab td[class] , .ltab td { width: auto !important; }
  .ltab thead { display: none; }
  .ltab tr {
    border: var(--l-linea);
    background: var(--sup);
    max-width: 480px;
    padding: 6px clamp(16px, 4vw, 22px) 14px;
    margin-bottom: 14px;
  }
  .ltab tbody tr:hover td { color: var(--apagado); }
  .ltab td {
    border-bottom: 0;
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 82px) minmax(0, 1fr);
    gap: 4px 16px;
    align-items: baseline;
  }
  .ltab td + td { border-top: var(--l-linea); padding-top: 10px; }
  .ltab td::before {
    content: attr(data-et);
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-micro);
    line-height: 1.7;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amarillo);
  }
}
/* Muy estrecho: el rótulo se pone encima del dato o no cabe ninguno. */
@media (max-width: 400px) {
  .ltab td { grid-template-columns: 1fr; gap: 2px; }
}


/* ============================================================
   5 · DATO PENDIENTE Y NOTA DE PRODUCCIÓN
   ------------------------------------------------------------
   Lo que no se ha podido verificar NO se inventa y NO se disfraza de
   texto legal. Se marca con `.lpend`, que solo aparece dentro de una
   FICHA o de una TABLA —nunca en mitad de una frase publicada— y se
   recoge entero en la nota del final, que lleva escrito que hay que
   borrarla antes de publicar.
   ============================================================ */

.lpend {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amarillo);
  border-bottom: 1px dotted rgb(var(--am-rgb) / .7);
  padding-bottom: 2px;
}

.lnota {
  position: relative;
  margin-top: clamp(44px, 5vw, 72px);
  padding: clamp(24px, 3vw, 38px);
  border: 1px dashed rgb(var(--am-rgb) / .45);
  background: var(--am-04);
  max-width: var(--lmed-ancha);
}
.lnota__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 14px;
}
.lnota__p { color: var(--apagado); max-width: var(--lmed); font-size: var(--lfs); }
.lnota__l { display: grid; gap: .6em; margin-top: 1em; }
.lnota__l li {
  position: relative;
  padding-left: 26px;
  font-size: var(--lfs);
  color: var(--apagado);
  max-width: var(--lmed);
}
.lnota__l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * .5em);
  width: 12px;
  height: 1px;
  background: rgb(var(--am-rgb) / .8);
  transform: skewX(-30deg);
}
.lnota__l strong { color: var(--texto); font-weight: 600; }


/* ============================================================
   6 · PIE DE LA LECTURA — salto a los otros dos documentos
   ============================================================ */

.legal__otros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  margin-top: clamp(44px, 5vw, 72px);
  background: var(--linea);
  border: var(--l-linea);
}
.legal__otro {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--fondo);
  min-height: 44px;
  transition: background var(--dur-ui) var(--ease);
}
.legal__otro:hover { background: var(--sup); }
.legal__otro-et {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
}
.legal__otro-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto);
}
.legal__otro[aria-current="page"] { background: var(--sup-2); }
.legal__otro[aria-current="page"] .legal__otro-t { color: var(--apagado); }


/* ============================================================
   7 · IMPRESIÓN
   Un documento legal se imprime y se archiva. §28 ya pone el fondo en
   blanco y el texto en negro; aquí solo se quitan las piezas que no
   pintan nada en papel y se evita partir una fila de cookie en dos.
   ============================================================ */

@media print {
  .lidx, .legal__otros, .legal__botones { display: none; }
  .legal__rej { display: block; }
  .lcab { padding-block: 0 18pt; }
  .lcab::after { display: none; }
  .legal__sec, .lnota, .ltab tr, .lficha { break-inside: avoid; }
  .legal__p, .legal__lista li, .lnota__p { max-width: none; }
  .ltab__caja { overflow: visible; }
  .ltab { min-width: 0; }
}