/* ==========================================================================
   99-legal.css — páginas de política (termos, privacidade, cookies, reembolso,
   pld-kyc, seguranca). Geradas por build.py a partir de template-page.html.

   Tudo aqui é escopado em .legal-page / .lg-* / .legal — nenhuma regra global e
   nenhum componente de base.css é redefinido, então este arquivo entra no
   index.html (o build inclui toda a pasta css/sections) sem efeito nenhum lá.
   Só variáveis de css/tokens.css.
   ========================================================================== */

.legal-page {
  /* respiro horizontal próprio: --cell-px chega a 104px em telas largas, o que é
     padding de seção de landing, não de página de leitura */
  --legal-px: clamp(20px, 5vw, 56px);
  --legal-measure: 72ch;
}

/* ---------- 1. Cabeçalho ---------- */
.lg-head__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--legal-px);
  min-height: 84px;
}
.lg-head__logo { display: block; flex-shrink: 0 }
.lg-head__logo img { width: auto; height: 34px }
.lg-head__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: var(--border-1);
  border-radius: var(--r-pill);
  font: 600 15px/1.2 var(--font-display);
  color: var(--c-ink-800);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-default), border-color var(--dur-fast) var(--ease-default);
}
.lg-head__back:hover { background: var(--c-surface-soft); border-color: var(--c-ink-600) }
.lg-head__back svg { flex-shrink: 0 }

@media (max-width: 480px) {
  .lg-head__logo img { height: 28px }
  .lg-head__back { padding: 8px 12px; font-size: 14px }
}

/* ---------- 2. Coluna de leitura ---------- */
.legal { padding: clamp(40px, 7vw, 88px) var(--legal-px) clamp(56px, 9vw, 112px) }
.legal__doc { max-width: var(--legal-measure); margin-inline: auto }

/* 2.1 Abertura */
.legal__head { padding-bottom: var(--sp-8); border-bottom: var(--border-1) }
.legal__kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-bottom: var(--sp-5);
  border: var(--border-1);
  border-radius: var(--r-pill);
  background: var(--c-surface-soft);
  font: 700 12px/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-600);
}
.legal__h1 {
  font: 600 clamp(32px, 5.4vw, 48px)/1.1 var(--font-display);
  letter-spacing: -0.035em;
  color: var(--c-ink-900);
}
.legal__meta {
  margin-top: var(--sp-4);
  font: 500 14px/1.6 var(--font-body);
  color: var(--c-ink-600);
}
.legal__lead {
  margin-top: var(--sp-5);
  font: 500 clamp(16px, 1.4vw, 18px)/1.7 var(--font-body);
  color: var(--c-ink-600);
}

/* 2.2 Sumário */
.legal__toc {
  margin: var(--sp-8) 0 var(--sp-12);
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  border: var(--border-1);
  border-radius: var(--r-lg);
  background: var(--c-surface-soft);
}
.legal__toc-title {
  font: 700 13px/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-600);
}
/* columns (e não grid): numeração desce a 1ª coluna e continua na 2ª,
   que é como se lê um sumário — o grid intercalava 1|2 / 3|4 */
.legal__toc ol { counter-reset: toc; margin-top: var(--sp-4) }
@media (min-width: 700px) { .legal__toc ol { columns: 2; column-gap: var(--sp-8) } }
.legal__toc li { counter-increment: toc; break-inside: avoid }
.legal__toc a {
  display: block;
  padding: 7px 0;
  font: 500 15px/1.5 var(--font-body);
  color: var(--c-ink-800);
  border-bottom: 1px solid transparent;
}
.legal__toc a::before {
  content: counter(toc) ".";
  display: inline-block;
  min-width: 24px;
  font-weight: 600;
  color: var(--c-link-green);
}
.legal__toc a:hover { color: var(--c-link-green) }

/* 2.3 Seções */
.legal__sec { scroll-margin-top: var(--sp-6); margin-top: var(--sp-12) }
.legal__sec:first-of-type { margin-top: 0 }
.legal__sec > h2 {
  font: 600 clamp(22px, 2.6vw, 28px)/1.25 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--c-ink-900);
  padding-top: var(--sp-2);
  border-top: var(--border-1);
  padding-bottom: var(--sp-2);
}
.legal__num { color: var(--c-link-green); margin-right: 10px }
.legal__sec h3 {
  margin-top: var(--sp-7);
  font: 600 clamp(17px, 1.6vw, 19px)/1.4 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--c-ink-800);
}

/* 2.4 Texto corrido */
.legal p, .legal li, .legal dd {
  font: 500 16px/1.8 var(--font-body);
  letter-spacing: var(--ls-body-md);
  color: var(--c-ink-600);
}
.legal__sec p { margin-top: var(--sp-4) }
.legal strong { font-weight: 700; color: var(--c-ink-800) }
.legal__sec a, .legal__note a, .legal__foot a, .legal__lead a {
  color: var(--c-link-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* 2.5 Listas (ul/ol vêm zeradas de base.css) */
.legal__list { margin-top: var(--sp-4); display: grid; gap: var(--sp-3) }
.legal__list > li { position: relative; padding-left: 26px }
.legal__list > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-green);
}
.legal__list--num { counter-reset: item }
.legal__list--num > li { counter-increment: item; padding-left: 32px }
.legal__list--num > li::before {
  content: counter(item) ".";
  position: static;
  float: left;
  width: 32px;
  margin-left: -32px;
  height: auto;
  border-radius: 0;
  background: none;
  font: 600 16px/1.8 var(--font-body);
  color: var(--c-link-green);
}

/* 2.6 Definições */
.legal__dl { margin-top: var(--sp-6); display: grid; gap: var(--sp-6) }
.legal__dl dt {
  font: 700 17px/1.4 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--c-ink-900);
}
.legal__dl dd { margin: 6px 0 0; padding-left: var(--sp-4); border-left: 2px solid var(--c-hairline) }

/* 2.7 Destaque / aviso */
.legal__note {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: var(--border-1);
  border-left: 4px solid var(--c-lime);
  border-radius: var(--r-md);
  background: var(--c-surface-soft);
}
.legal__note > :first-child { margin-top: 0 }
.legal__note p { margin-top: var(--sp-3); font-size: 15px }
.legal__note p:first-child { margin-top: 0 }

/* 2.8 Tabela simples (taxas, prazos) */
.legal__table-wrap { margin-top: var(--sp-5); overflow-x: auto; border: var(--border-1); border-radius: var(--r-md) }
.legal__table { width: 100%; border-collapse: collapse; min-width: 420px }
.legal__table th, .legal__table td {
  padding: 12px var(--sp-4);
  text-align: left;
  font: 500 15px/1.6 var(--font-body);
  color: var(--c-ink-600);
  border-bottom: var(--border-1);
}
.legal__table th { font-family: var(--font-display); font-weight: 600; color: var(--c-ink-900); background: var(--c-surface-soft) }
.legal__table tr:last-child td { border-bottom: 0 }

/* 2.9 Rodapé do documento */
.legal__foot { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: var(--border-1) }
.legal__foot p { font-size: 14px; line-height: 1.7 }

/* ---------- 3. Rodapé da página ---------- */
.lg-foot__cell { padding: clamp(32px, 5vw, 56px) var(--legal-px) }
.lg-foot__title {
  font: 700 13px/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-600);
}
.lg-foot__links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-4) }
.lg-foot__links a {
  font: 500 16px/1.5 var(--font-body);
  color: var(--c-ink-800);
  padding: 4px 0;
}
.lg-foot__links a:hover { color: var(--c-link-green) }
.lg-foot__links a[aria-current="page"] { color: var(--c-link-green); font-weight: 700 }
.lg-foot__rule { height: 1px; margin: var(--sp-7) 0; background: var(--c-hairline) }
.lg-foot__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-12); justify-content: space-between }
.lg-foot__corp, .lg-foot__copy {
  font: 500 14px/1.8 var(--font-body);
  letter-spacing: var(--ls-body-sm);
  color: var(--c-ink-600);
}
.lg-foot__corp strong { color: var(--c-ink-800) }
.lg-foot__copy { text-align: left }
.lg-foot__copy a { color: var(--c-link-green) }
@media (min-width: 700px) { .lg-foot__copy { text-align: right } }