/* ============================================================
   Páginas legales: privacidad.html, terminos.html, cookies.html y la
   guía borrar-cuenta.html.
   Familia Cocuyo, acabado ligero (dueño, 29-sep-2026): tipografía de
   lectura cómoda (Geist 400, líneas de ~68 caracteres, interlineado
   amplio), titulares Geist 500–550, sin bordes ni brillos y la lima
   reservada a la acción. En escritorio, índice lateral fijo con las
   secciones del documento (lo monta assets/js/legal-indice.js); en el
   móvil, el mismo índice se abre con un botón bajo el título.

   Solo presentación: el texto legal no cambia. Colores y medidas con
   var() (tokens.css y los --f-* de familia.css).
   ============================================================ */

/* Negro liso, sin los focos verdes del ambiente antiguo. */
html:has(.legal-pagina) { background: var(--negro-abismo); }
@media (prefers-reduced-motion: no-preference) { html:has(.legal-pagina) { scroll-behavior: smooth; } }
/* La barra inferior antigua ya no se muestra: no reservar su hueco. */
body:has(.legal-pagina) { padding-bottom: 0; background: var(--negro-abismo); }

/* Respaldo sin JavaScript: cabecera y pie propios (con el caparazón común
   montado, familia.css los oculta: [data-f-legado]). */
body:has(.legal-pagina) .cabecera { display: flex; align-items: center; padding-block: calc(var(--f-e-4) + env(safe-area-inset-top)) var(--f-e-4); }
body:has(.legal-pagina) .pie-legal { display: grid; gap: var(--f-e-2); padding: var(--f-e-8) var(--f-e-4) var(--f-e-6); text-align: center; font-size: var(--f-t-xs); }
body:has(.legal-pagina) .pie-legal a { color: var(--f-texto-2); text-decoration: underline; text-underline-offset: 3px; }
body:has(.legal-pagina) .pie-legal a:hover { color: var(--f-texto); }

/* ---------- Marco: columna de lectura (+ índice en escritorio) ---------- */
main.contenedor.legal-pagina {
  --legal-texto: color-mix(in srgb, var(--blanco-luz) 80%, var(--negro-abismo));
  --legal-indice: 232px;
  /* Medida de lectura: unos 66 caracteres del cuerpo, igual para cajas y tablas. */
  --legal-medida: 42.5rem;
  position: relative;
  width: min(100% - 2 * var(--f-gutter), 1120px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(40px, 2rem + 3vw, 96px) 0 clamp(72px, 3.5rem + 4vw, 136px);
  font-family: var(--f-fuente);
  font-size: 1.0625rem;
  font-weight: var(--f-peso-cuerpo);
  line-height: 1.7;
  letter-spacing: -0.003em;
  color: var(--legal-texto);
}
.legal-pagina > *, .legal-pagina > article > * { max-width: var(--legal-medida); }
.legal-pagina > article { max-width: none; padding: 0; }
@media (min-width: 1080px) {
  main.contenedor.legal-pagina { padding-left: calc(var(--legal-indice) + clamp(48px, 5vw, 96px)); }
}

/* ---------- Tipografía ---------- */
.legal-pagina h1 { margin: 0 0 var(--f-e-3); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); font-weight: var(--f-peso-display); line-height: 1.05; letter-spacing: -0.035em; color: var(--f-texto); text-wrap: balance; }
.legal-pagina :is(.actualizacion, .fecha-actualizacion) { margin: 0 0 var(--f-e-10); font-size: var(--f-t-sm); color: var(--f-texto-3); }
.legal-pagina h2 {
  margin: var(--f-e-16) 0 var(--f-e-4); padding: 0; border: 0;
  font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem); font-weight: var(--f-peso-titulo);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--f-texto); text-wrap: balance;
  scroll-margin-top: calc(var(--f-alto-cabecera) + env(safe-area-inset-top) + 32px);
}
.legal-pagina h3 { margin: var(--f-e-8) 0 var(--f-e-3); font-size: var(--f-t-4); font-weight: var(--f-peso-titulo); line-height: 1.35; color: var(--f-texto); }
.legal-pagina p { margin: 0 0 var(--f-e-5); }
.legal-pagina :where(ul, ol) { margin: 0 0 var(--f-e-5); padding-left: 1.25em; }
.legal-pagina li { margin: 0 0 var(--f-e-2); padding-left: .25em; }
.legal-pagina li::marker { color: var(--f-texto-3); }
.legal-pagina strong { color: var(--f-texto); font-weight: 600; }
.legal-pagina .texto-secundario { color: var(--f-texto-3); }
.legal-pagina a:not(.legal-indice a) { color: var(--f-texto); text-decoration: underline; text-decoration-color: var(--f-linea-fuerte); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--f-rapido); }
.legal-pagina a:not(.legal-indice a):hover { text-decoration-color: var(--f-lima); }
.legal-pagina a:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; border-radius: 4px; }

/* Nombres técnicos (cookies, campos): monoespaciada sobre una superficie. */
.legal-pagina :is(code, .codigo) { font-family: var(--fuente-mono); font-size: .85em; color: var(--f-texto); background: var(--f-sup-2); border: 0; border-radius: 6px; padding: .12em .42em; white-space: nowrap; }

/* ---------- Bloques: superficies sin borde ni brillo ---------- */
.legal-pagina :is(.caja-clara, .ficha-legal, .ficha-responsable, .no-rastreo, .panel-borrado) { margin: 0 0 var(--f-e-6); padding: var(--f-e-5) var(--f-e-6); border: 0; border-radius: var(--f-r-tarjeta); background: var(--f-sup-1); box-shadow: none; font-size: .9688rem; }
.legal-pagina :is(.caja-clara, .ficha-legal, .ficha-responsable, .no-rastreo, .panel-borrado) > :last-child { margin-bottom: 0; }
.legal-pagina :is(.ficha-legal, .ficha-responsable) p { margin-bottom: var(--f-e-2); }
.legal-pagina :is(.no-rastreo, .panel-borrado) .frase { display: block; margin-bottom: var(--f-e-4); font-size: var(--f-t-3); font-weight: var(--f-peso-titulo); line-height: 1.3; letter-spacing: -0.015em; color: var(--f-texto); text-shadow: none; }
.legal-pagina .lista-no { list-style: none; margin: 0; padding: 0; }
.legal-pagina .lista-no li { display: flex; gap: var(--f-e-3); padding: 0; }
.legal-pagina .lista-no li::before { content: "✕"; flex: none; color: var(--f-texto-3); font-size: .8em; line-height: 2.1; }
.legal-pagina .lista-navegadores { list-style: none; padding: 0; box-shadow: 0 -1px 0 var(--f-linea); }
.legal-pagina .lista-navegadores li { margin: 0; padding: var(--f-e-3) 0; box-shadow: 0 1px 0 var(--f-linea); }
.legal-pagina .lista-navegadores span { color: var(--f-texto-3); }
.legal-pagina .cierre-lore { margin-top: var(--f-e-12); color: var(--f-texto-3); font-style: italic; }
.legal-pagina .aviso-borrador { margin-top: var(--f-e-12); padding-top: var(--f-e-5); border-top: 0; box-shadow: 0 -1px 0 var(--f-linea); font-size: var(--f-t-sm); color: var(--f-texto-3); }

/* Borrar cuenta: pasos numerados y lista de lo que se borra. */
.legal-pagina .pasos { list-style: none; counter-reset: paso; padding: 0; }
.legal-pagina .pasos li { counter-increment: paso; display: flex; gap: var(--f-e-4); align-items: flex-start; margin: 0 0 var(--f-e-2); padding: var(--f-e-4) var(--f-e-5); border-radius: var(--f-r-tarjeta); background: var(--f-sup-1); }
.legal-pagina .pasos li::before { content: counter(paso); flex: none; width: 28px; height: 28px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--f-sup-3); color: var(--f-texto); font-size: var(--f-t-sm); font-weight: var(--f-peso-titulo); line-height: 1; font-variant-numeric: tabular-nums; }
.legal-pagina .lista-check { list-style: none; margin: 0; padding: 0; }
.legal-pagina .lista-check li { display: flex; gap: var(--f-e-3); padding: 0; }
.legal-pagina .lista-check li::before { content: "✓"; flex: none; color: var(--f-texto-2); }
.legal-pagina .contacto { font-family: var(--fuente-mono); font-size: .9em; color: var(--f-texto); }

/* Tabla de cookies: filas con línea fina; en el móvil se desplaza dentro. */
.legal-pagina .marco-tabla { margin: var(--f-e-4) 0 var(--f-e-6); border: 0; border-radius: 0; background: transparent; overflow-x: auto; }
.legal-pagina .tabla-cookie { width: 100%; border-collapse: collapse; font-size: .9688rem; line-height: 1.6; }
.legal-pagina .tabla-cookie :is(th, td) { padding: var(--f-e-4) var(--f-e-4) var(--f-e-4) 0; text-align: left; vertical-align: top; border: 0; box-shadow: 0 1px 0 var(--f-linea); }
.legal-pagina .tabla-cookie thead th { padding-block: var(--f-e-3); font-size: var(--f-t-xs); font-weight: var(--f-peso-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--f-texto-3); }
.legal-pagina .tabla-cookie tbody th { width: 1%; white-space: nowrap; font-weight: var(--f-peso-cuerpo); }
.legal-pagina .tabla-cookie tr:last-child :is(th, td) { box-shadow: none; }

/* ---------- Índice (legal-indice.js) ---------- */
.legal-indice { max-width: none; margin: 0 0 var(--f-e-8); font-size: var(--f-t-sm); line-height: 1.45; }
.legal-indice__boton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--f-r-pill); background: var(--f-sup-2); color: var(--f-texto); font: var(--f-peso-ui) var(--f-t-sm)/1 var(--f-fuente); cursor: pointer; }
.legal-indice__boton::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--f-medio); }
.legal-indice__boton[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.legal-indice__boton:focus-visible { outline: 2px solid var(--f-lima); outline-offset: 3px; }
.legal-indice__titulo { display: none; margin: 0 0 var(--f-e-3); font-size: var(--f-t-xs); font-weight: var(--f-peso-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--f-texto-3); }
.legal-indice__lista { list-style: none; margin: var(--f-e-3) 0 0; padding: var(--f-e-2) 0; border-radius: var(--f-r-tarjeta); background: var(--f-sup-1); }
.legal-indice__lista[hidden] { display: none; }
.legal-indice__lista li { margin: 0; padding: 0; }
.legal-indice a { display: flex; align-items: center; min-height: 44px; padding: 6px var(--f-e-4); color: var(--f-texto-2); text-decoration: none; transition: color var(--f-rapido); }
.legal-indice a:hover { color: var(--f-texto); }
.legal-indice a[aria-current="true"] { color: var(--f-texto); font-weight: var(--f-peso-ui); }

@media (min-width: 1080px) {
  /* Columna propia a la izquierda; la lista acompaña la lectura. */
  .legal-indice { position: absolute; top: clamp(40px, 2rem + 3vw, 96px); bottom: 0; left: 0; width: var(--legal-indice); margin: 0; }
  .legal-indice__fijo { position: sticky; top: calc(var(--f-alto-cabecera) + env(safe-area-inset-top) + 32px); max-height: calc(100vh - var(--f-alto-cabecera) - 64px); overflow-y: auto; scrollbar-width: thin; }
  .legal-indice__boton { display: none; }
  .legal-indice__titulo { display: block; }
  .legal-indice__lista, .legal-indice__lista[hidden] { display: block; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: inset 1px 0 0 var(--f-linea); }
  .legal-indice a { min-height: 0; padding: 7px 0 7px 16px; }
  .legal-indice a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--f-texto); }
}

@media (prefers-reduced-motion: reduce) {
  .legal-pagina a, .legal-indice a, .legal-indice__boton::after { transition: none; }
}

/* Móvil: cada cookie en su bloque (nombre arriba, finalidad debajo), sin
   una columna estrecha de texto. La cabecera de la tabla queda para los
   lectores de pantalla. */
@media (max-width: 560px) {
  .legal-pagina .tabla-cookie, .legal-pagina .tabla-cookie tbody, .legal-pagina .tabla-cookie tr, .legal-pagina .tabla-cookie :is(th, td) { display: block; width: auto; }
  .legal-pagina .tabla-cookie thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-pagina .tabla-cookie tr { padding: var(--f-e-4) 0; box-shadow: 0 1px 0 var(--f-linea); }
  .legal-pagina .tabla-cookie tr:last-child { box-shadow: none; }
  .legal-pagina .tabla-cookie :is(th, td) { padding: 0; box-shadow: none; }
  .legal-pagina .tabla-cookie tbody th { margin-bottom: var(--f-e-2); white-space: normal; }
}