/* ══════════════════════════════════════════════════════════════════════════
   legal.css — páginas de texto longo: privacy-policy, terms-of-use,
   refund-cancellation-policy (e base de prosa para guarantee).
   Layout editorial: faixa de cabeçalho + coluna de leitura com índice fixo
   no desktop. Só tokens — nenhum valor bruto de cor.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Faixa de cabeçalho ─────────────────────────────────────────────────── */
.legal-head {
  padding-block: var(--sec-y-sm);
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}
.legal-head .eyebrow { margin-bottom: var(--sp-4); }
.legal-title { font-size: var(--fs-h1); max-width: 22ch; }
.legal-lead {
  margin-top: var(--sp-4);
  max-width: 60ch;
  color: var(--ink-3);
  font-size: var(--fs-lg);
  line-height: 1.55;
}
.legal-updated {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: 0.4375rem 0.875rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.legal-updated svg { color: var(--green-600); flex: 0 0 auto; }

/* ── Corpo ──────────────────────────────────────────────────────────────── */
.legal-body { padding-block: var(--sec-y); }
.legal-grid { display: grid; gap: var(--sp-10); }

@media (min-width: 900px) {
  .legal-grid {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--sp-16);
    align-items: start;
    max-width: 64rem; margin-inline: auto;
  }
}

/* ── Índice lateral (só desktop; sem JS ainda funciona como âncoras) ─────── */
.legal-toc { display: none; }
@media (min-width: 900px) {
  .legal-toc { display: block; position: sticky; top: 88px; }
}
.legal-toc-label {
  font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow); color: var(--muted);
  margin-bottom: var(--sp-4);
}
.legal-toc ul {
  display: flex; flex-direction: column;
  border-left: 2px solid var(--line);
}
.legal-toc a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  line-height: 1.3;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.legal-toc a:hover { color: var(--green-800); }
.legal-toc a[aria-current="true"] {
  color: var(--green-800); font-weight: 700;
  border-left-color: var(--green-800);
}

/* ── Prosa ──────────────────────────────────────────────────────────────── */
.legal-prose { max-width: 68ch; color: var(--ink-2); font-size: var(--fs-lg); }
.legal-prose h2 {
  font-size: var(--fs-h3); color: var(--ink);
  margin-top: var(--sp-12); margin-bottom: var(--sp-4);
  scroll-margin-top: 96px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin-bottom: var(--sp-4); line-height: var(--lh-body); }
.legal-prose ul {
  margin: 0 0 var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.legal-prose li { position: relative; padding-left: var(--sp-6); line-height: 1.62; }
.legal-prose li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--lime-500); transform: rotate(45deg);
}
.legal-prose a {
  color: var(--green-800); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--lime-300);
  text-underline-offset: 3px;
  transition: color var(--d-fast) var(--ease), text-decoration-color var(--d-fast) var(--ease);
}
.legal-prose a:hover { color: var(--forest); text-decoration-color: var(--green-800); }
.legal-prose hr,
.legal-prose .section-divider {
  border: 0; border-top: 1px solid var(--line-2);
  margin: var(--sp-8) 0;
}