/* =========================================================
   igual — páginas jurídicas (política de privacidade, termos de uso)
   Carregado depois de styles.css e vaga.css: reaproveita tokens,
   header, footer, .container, .eyebrow, .chip e .prose.
   ========================================================= */

/* ---------- Hero ---------- */
.legal-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(30px, 4vw, 52px);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--azul-50), transparent 60%),
    radial-gradient(80% 120% at 0% 0%, var(--goiaba-50), transparent 55%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.legal-hero__symbol {
  position: absolute;
  right: clamp(-80px, -3vw, -20px);
  top: 50%;
  width: clamp(260px, 30vw, 420px);
  transform: translateY(-50%) rotate(-3deg);
  fill: var(--ink);
  opacity: .04;
  pointer-events: none;
}
.legal-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.legal-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
  text-wrap: balance;
}
.legal-hero__lead {
  color: var(--text-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  max-width: 64ch;
  margin-bottom: 24px;
}

/* ---------- Layout corpo + sumário ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  padding: clamp(44px, 6vw, 80px) 0 clamp(60px, 9vw, 110px);
}

.legal-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.legal-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: var(--shadow);
}
.legal-toc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.legal-toc__meta { font-size: .82rem; color: var(--text-muted); }
.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  counter-reset: toc;
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  /* O padding inferior reserva a faixa em que a máscara desvanece, de modo que
     o corte sinalize “há mais abaixo” sem nunca apagar o texto de um item —
     ao chegar ao fim da rolagem, o gradiente cai sobre o padding, não sobre a lista. */
  padding-bottom: var(--toc-fade);
  --toc-fade: 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--toc-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--toc-fade)), transparent 100%);
}
.legal-toc__list::-webkit-scrollbar { width: 5px; }
.legal-toc__list::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.legal-toc__list::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.legal-toc__list li { counter-increment: toc; }
.legal-toc__list a {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: .89rem;
  line-height: 1.4;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  transition: color .2s var(--ease);
}
.legal-toc__list li:first-child a { border-top: 0; }
.legal-toc__list a::before {
  content: counter(toc);
  flex: none;
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--goiaba);
}
.legal-toc__list a:hover { color: var(--ink); }

.legal-aside__contact {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--goiaba-50);
}
.legal-aside__contact p { font-size: .84rem; color: var(--text-soft); line-height: 1.5; }
.legal-aside__contact a { color: var(--goiaba-700); font-weight: 600; }
.legal-aside__contact a:hover { text-decoration: underline; }

/* ---------- Ajustes da prosa para documentos jurídicos ---------- */
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 1.9em;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Listas numeradas: sobrescreve o marcador redondo de vaga.css */
.prose ol {
  list-style: none;
  padding: 0;
  margin-top: 1.1em;
  display: grid;
  gap: 14px;
  counter-reset: item;
}
.prose ol > li {
  counter-increment: item;
  padding-left: 34px;
}
.prose ol > li::before {
  content: counter(item, lower-alpha) ")";
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--goiaba-700);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tabela (finalidades × bases legais) ---------- */
.prose { min-width: 0; }

.legal-table {
  overflow-x: auto;
  margin-top: 1.4em;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.legal-table table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: .92rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  line-height: 1.55;
}
.legal-table thead th {
  border-top: 0;
  background: var(--bg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.legal-table td { color: var(--text-soft); }
.legal-table td:first-child { color: var(--ink); font-weight: 600; }

/* ---------- Destaque / aviso ---------- */
.legal-callout {
  margin-top: 1.6em;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--goiaba);
  border-radius: var(--r);
  background: var(--surface);
}
.legal-callout p { font-size: 1rem !important; }
.legal-callout > * + * { margin-top: .8em; }
.legal-callout strong { color: var(--ink); }

/* ---------- Identificação do controlador / rodapé do documento ---------- */
.legal-identity {
  margin-top: 1.2em;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
}
.legal-identity dl { margin: 0; }
.legal-identity .fact:first-child { border-top: 0; }

.legal-updated {
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--text-muted);
}

/* ---------- Responsivo ---------- */
@media (max-width: 920px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-aside {
    position: static;
    order: -1;
    margin-bottom: clamp(30px, 5vw, 44px);
  }
  .legal-toc__list { max-height: none; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .prose { max-width: none; }
}

/* ---------- Listas aninhadas ---------- */
.prose li > ul,
.prose li > ol {
  margin-top: 12px;
  gap: 10px;
}
.prose li > ul > li,
.prose li > ol > li { font-size: 1rem; }
.prose li > ul > li::before {
  width: 6px; height: 6px;
  top: .68em;
  left: 6px;
  background: var(--azul-700);
  box-shadow: 0 0 0 3px var(--azul-100);
}