/* ═══════════════════════════════════════════════════════════
   MISUNET · Páginas legales
   Reutiliza tokens, base, layout y componentes. Sólo añade
   lo específico del documento largo.
   ═══════════════════════════════════════════════════════════ */

.legal-hero{
  padding:calc(var(--header-h) + clamp(3.5rem,7vw,6rem)) 0 clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line-dark);
}
.legal-hero h1{
  font-size:var(--fs-3xl);
  color:var(--on-dark);
  max-width:20ch;
}
.legal-hero__meta{
  margin-top:var(--space-5);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-3);
}

.legal{ padding-block:clamp(3rem,6vw,5rem); }
.legal__grid{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:960px){
  .legal__grid{ grid-template-columns:260px 1fr; align-items:start; }
}

/* Índice lateral */
.legal__toc{
  position:sticky; top:calc(var(--header-h) + 1.5rem);
  padding:var(--space-5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--paper-2);
}
@media (max-width:959px){ .legal__toc{ position:static; } }
.legal__toc h2{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--space-4);
}
.legal__toc ol{ display:grid; gap:.55rem; counter-reset:toc; }
.legal__toc a{
  display:block;
  font-size:.8125rem; line-height:1.45; color:var(--ink-2);
  transition:color var(--t-fast) var(--ease-out);
}
.legal__toc a::before{
  counter-increment:toc; content:counter(toc) ". ";
  font-family:var(--font-mono); color:var(--brand-400);
}
.legal__toc a:hover{ color:var(--brand-600); }

/* Cuerpo del documento */
.legal__body{ max-width:72ch; }
.legal__body section + section{ margin-top:clamp(2.25rem,4vw,3rem); }
.legal__body h2{
  font-size:var(--fs-xl);
  margin-bottom:var(--space-4);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.legal__body h3{
  font-size:var(--fs-md);
  margin:var(--space-5) 0 var(--space-3);
}
.legal__body p{ margin-bottom:var(--space-4); color:var(--ink-2); }
.legal__body ul{
  display:grid; gap:.6rem;
  margin-bottom:var(--space-4); padding-left:1.25rem;
}
.legal__body li{
  position:relative; color:var(--ink-2); font-size:.9375rem; line-height:1.65;
}
.legal__body li::before{
  content:''; position:absolute; left:-1.25rem; top:.62em;
  width:5px; height:5px; background:var(--brand-400); transform:rotate(45deg);
}
.legal__body a{
  color:var(--brand-600); text-decoration:underline; text-underline-offset:2px;
}
.legal__body a:hover{ color:var(--brand-700); }
.legal__body strong{ color:var(--ink); }

/* Marcador de dato pendiente de completar */
.fill{
  display:inline-block;
  padding:.05em .45em;
  border-radius:4px;
  background:rgb(255 196 0 / .18);
  border:1px dashed rgb(180 130 0 / .5);
  font-family:var(--font-mono); font-size:.85em;
  color:#7A5600;
}

.legal__note{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:var(--space-5);
  border-left:3px solid var(--brand-600);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--paper-2);
  font-size:.875rem; color:var(--ink-3);
}