/* ==========================================================================
   Páginas legales (Política de privacidad y las que vengan): se cargan DESPUÉS de
   style.css y reutilizan sus tokens (--bg-*, --ink-*, --accent, fuentes, .btn, .ic).
   Documento largo = lectura cómoda: columna de ~72 caracteres, índice fijo a la
   izquierda en escritorio y desplegable arriba en el celular.
   ========================================================================== */

html{ scroll-padding-top:calc(var(--header-h) + 24px); }

.legal-header .container{ gap:16px; }
.legal-header__acciones{ display:flex; align-items:center; gap:12px; }
@media (max-width:560px){
  .legal-header__volver span[data-i18n-es]{ display:none; }
  .legal-header__volver{ padding:7px 12px; }
}

/* -------- Encabezado del documento -------- */
.legal-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--header-h) + 72px) 0 48px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-0));
  border-bottom:1px solid var(--line-soft);
}
.legal-hero__anillos{ position:absolute; right:-140px; top:50%; width:520px; transform:translateY(-50%); opacity:.35; pointer-events:none; }
.legal-hero__anillos svg{ width:100%; height:auto; display:block; }
.legal-hero .container{ position:relative; }
.legal-hero h1{ font-size:clamp(2rem,4.4vw,3.2rem); text-transform:uppercase; max-width:18ch; }
.legal-hero h1 span{ color:var(--accent); }
.legal-hero__intro{ margin:18px 0 0; max-width:62ch; color:var(--ink-dim); font-size:16.5px; }
.legal-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px; font-size:13px; color:var(--ink-faint); }
.legal-meta span{ display:inline-flex; align-items:center; gap:8px; }
.legal-meta .ic{ font-size:15px; color:var(--ink-dim); }
@media (max-width:640px){
  .legal-hero{ padding:calc(var(--header-h) + 44px) 0 36px; }
  .legal-hero__anillos{ width:340px; right:-170px; opacity:.25; }
}

/* -------- Cuerpo: índice + documento -------- */
.legal-body{ padding:56px 0 96px; }
.legal-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; align-items:start; }
/* minmax(0,…): sin eso, el ancho mínimo de las tablas (560 px) ensancha toda la página en el celular */
@media (max-width:960px){ .legal-layout{ grid-template-columns:minmax(0,1fr); gap:28px; } }
.legal-layout > *{ min-width:0; }

.legal-toc{ position:sticky; top:calc(var(--header-h) + 28px); }
.legal-toc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
  padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.legal-toc summary::-webkit-details-marker{ display:none; }
.legal-toc summary .ic{ font-size:14px; transform:rotate(90deg); transition:transform .3s var(--ease-fluid); }
.legal-toc[open] summary .ic{ transform:rotate(-90deg); }
.legal-toc ol{ margin:14px 0 0; padding:0; list-style:none; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; }
.legal-toc a{
  display:flex; gap:10px; padding:6px 0; font-size:13.5px; line-height:1.45; color:var(--ink-dim);
  transition:color .25s;
}
.legal-toc a::before{ content:counter(toc, decimal-leading-zero); flex-shrink:0; width:22px; font-size:11px; padding-top:2px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.legal-toc a:hover, .legal-toc a.is-active{ color:var(--accent); }
.legal-toc a.is-active::before{ color:var(--accent); }
@media (min-width:961px){
  .legal-toc summary{ cursor:default; pointer-events:none; }
  .legal-toc summary .ic{ display:none; }
}
@media (max-width:960px){
  .legal-toc{ position:static; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
  .legal-toc summary{ padding-bottom:0; border-bottom:0; }
  .legal-toc[open] summary{ padding-bottom:12px; border-bottom:1px solid var(--line-soft); }
}

/* -------- Documento -------- */
.legal-doc{ max-width:760px; counter-reset:sec; }
.legal-doc[hidden]{ display:none; }
.legal-doc section{ counter-increment:sec; padding:36px 0; border-top:1px solid var(--line-soft); }
.legal-doc section:first-of-type{ padding-top:0; border-top:0; }
.legal-doc h2{
  display:flex; align-items:baseline; gap:14px;
  font-size:clamp(1.25rem,2.2vw,1.55rem); text-transform:uppercase; margin-bottom:16px;
}
.legal-doc h2::before{
  content:counter(sec, decimal-leading-zero); flex-shrink:0;
  font-family:var(--font-texto); font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--accent);
  transform:translateY(-3px);
}
.legal-doc h3{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin:24px 0 8px; color:var(--ink); }
.legal-doc p, .legal-doc li{ color:var(--ink-dim); font-size:15.5px; line-height:1.75; }
.legal-doc p{ margin:0 0 14px; }
.legal-doc strong{ color:var(--ink); font-weight:600; }
.legal-doc a{ color:var(--accent); text-decoration:underline; text-decoration-color:rgba(95,185,1,.4); text-underline-offset:3px; }
.legal-doc a:hover{ text-decoration-color:var(--accent); }
.legal-doc ul{ margin:0 0 16px; padding:0; }
.legal-doc ul li{ position:relative; padding-left:22px; margin-bottom:8px; }
.legal-doc ul li::before{ content:''; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* Ficha del responsable */
.legal-ficha{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin:6px 0 18px; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
  background:var(--line);
}
.legal-ficha div{ background:var(--bg-2); padding:14px 18px; }
.legal-ficha dt{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.legal-ficha dd{ margin:0; color:var(--ink); font-size:14.5px; line-height:1.5; overflow-wrap:anywhere; }
.legal-ficha dd a{ color:var(--ink); text-decoration:none; }
.legal-ficha dd a:hover{ color:var(--accent); }
.legal-ficha .is-ancho{ grid-column:1 / -1; }
@media (max-width:560px){ .legal-ficha{ grid-template-columns:1fr; } }

/* Tablas (datos, cookies, derechos) */
.legal-tabla-wrap{ margin:6px 0 18px; border:1px solid var(--line); border-radius:14px; overflow-x:auto; }
.legal-tabla{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.legal-tabla th, .legal-tabla td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft); line-height:1.55; }
.legal-tabla th{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); background:var(--bg-2); }
.legal-tabla td{ color:var(--ink-dim); }
.legal-tabla td:first-child{ color:var(--ink); font-weight:600; }
.legal-tabla tr:last-child td{ border-bottom:0; }
.legal-tabla code{ font-family:Consolas, 'Courier New', monospace; font-size:13px; color:var(--accent-2); }

/* Derechos ARCO-POL en tarjetas */
.legal-derechos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:6px 0 20px; }
.legal-derechos div{ padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015); }
.legal-derechos b{ display:flex; align-items:center; gap:10px; font-family:var(--font-titulo); font-size:14px; text-transform:uppercase; color:var(--ink); margin-bottom:6px; }
.legal-derechos b i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; border:1px solid rgba(95,185,1,.5); color:var(--accent); font-size:12px; font-family:var(--font-texto); }
.legal-derechos span{ display:block; color:var(--ink-dim); font-size:14px; line-height:1.6; }
@media (max-width:560px){ .legal-derechos{ grid-template-columns:1fr; } }

/* Llamado final */
.legal-aviso{
  display:flex; gap:14px; align-items:flex-start;
  margin:8px 0 0; padding:18px 20px; border-radius:14px;
  border:1px solid rgba(95,185,1,.35); background:rgba(95,185,1,.07);
}
.legal-aviso .ic{ font-size:22px; color:var(--accent); margin-top:2px; }
.legal-aviso p{ margin:0; color:var(--ink); }
.legal-contacto{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.legal-contacto .btn{ text-decoration:none; color:#fff; }
.legal-contacto .btn:hover{ color:var(--accent); }

/* Resumen rápido al inicio de un documento largo */
.legal-resumen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 8px; }
.legal-resumen div{ padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
.legal-resumen .ic{ font-size:20px; color:var(--ink); margin-bottom:10px; display:block; }
.legal-resumen b{ display:block; font-family:var(--font-titulo); font-size:13.5px; text-transform:uppercase; color:var(--ink); margin-bottom:6px; }
.legal-resumen span{ display:block; color:var(--ink-dim); font-size:13.5px; line-height:1.6; }
@media (max-width:760px){ .legal-resumen{ grid-template-columns:1fr; } }

/* -------- Pie compacto -------- */
.legal-footer{ padding:0 0 32px; }
.legal-footer .footer-bottom{ border-top:1px solid var(--line-soft); padding-top:22px; }
.legal-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; padding:28px 0 22px; }
.legal-links a{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-dim); transition:color .25s; }
.legal-links a:hover{ color:var(--accent); }
.legal-links a[aria-current="page"]{ color:var(--accent); }
.legal-links a[aria-current="page"]::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:2px; }
@media (max-width:560px){ .legal-footer{ padding-bottom:40px; } }