/* Páginas legais (/privacidade, /termos, /cookies): leitura confortável, mesma marca do site. */
.legal__top { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.legal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.legal__nav { display: flex; gap: 4px; flex-wrap: wrap; font-size: .875rem; }
.legal__nav a { padding: 6px 12px; border-radius: 999px; color: var(--text-2); transition: color .2s, background .2s; }
.legal__nav a:hover { color: var(--text); }
.legal__nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--orange) 16%, transparent); }

.legal { max-width: 760px; padding-top: 56px; padding-bottom: 80px; color: var(--text-2); line-height: 1.75; }
.legal__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-text); }
.legal h1 { margin: 12px 0 6px; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.legal__date { font-size: .875rem; color: var(--text-3); }
.legal__toc { margin: 28px 0 8px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elev); }
.legal__toc ol { columns: 2; column-gap: 28px; padding-left: 20px; font-size: .9rem; list-style: decimal; }
.legal__toc li::marker { color: var(--text-3); }
.legal__toc li { margin: 3px 0; break-inside: avoid; }

.legal section { scroll-margin-top: 84px; }
.legal h2 { margin: 40px 0 10px; font-family: var(--font-display); font-size: 1.3rem; color: var(--text); }
.legal p { margin: 10px 0; }
.legal b { color: var(--text); font-weight: 600; }
.legal a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.legal__links a { color: inherit; }
.legal__links a:hover { color: var(--text); }
@media (max-width: 640px) {
  .legal { padding-top: 36px; }
  .legal__toc ol { columns: 1; }
  .legal__bar { height: auto; padding-top: 12px; padding-bottom: 12px; }
}
.legal .legal__toc a { color: var(--text-2); text-decoration: none; }
.legal .legal__toc a:hover { color: var(--orange-text); }