/* Política de Privacidade — as peças que só existem NESTA página.
   Mora aqui, e não no style.css, pela regra do SISTEMA-VISUAL §8.1: peça de
   corpo que só existe numa página fica no arquivo daquela página. Se alguma
   delas aparecer numa segunda, muda de arquivo.

   ⚠️ O nome é `hero-<chave da rota>.css` porque é assim que o inc/head.php
   acha o arquivo — mesmo quando a página não tem arte de hero nenhuma. */

/* ── a hero encolhe para o conteúdo ───────────────────────────────────────
   ⚠️ EXCEÇÃO ao SISTEMA-VISUAL §2, que manda a hero ocupar a dobra inteira
   (`min-height: 100svh`). Aquela regra é de página que VENDE: a dobra inteira
   é o espaço da primeira impressão. Esta página é para ser lida, e uma tela
   cheia de título antes do texto é um degrau a mais entre quem chegou e o que
   ele veio ler (Ronaldo, 23/08/2026). */
/* ⚠️⚠️ HERO ENCURTADA TEM DE LIMPAR O CABEÇALHO SOZINHA. O `.topo` é
   `position: fixed`, então ele não ocupa espaço no fluxo: quem segura o
   conteúdo abaixo dele, nas outras páginas, é o `min-height: 100svh` mais o
   `align-content: center` — o texto fica no meio de uma caixa alta e nunca
   chega perto do topo. Ao zerar o min-height eu tirei essa proteção e não pus
   nada no lugar: com 64px de padding e um cabeçalho de 77px, o H1 nascia
   **13px ACIMA** da borda de baixo do cabeçalho e aparecia cortado no
   telefone. No desktop sobrava 11px, que é o "sem respiro" que se via.

   96px é o mesmo número que o site já usa em `:target { scroll-margin-top }`
   para limpar este cabeçalho. Medido: 85px no desktop, 77px no telefone. */
.hero--curta { min-height: 0; padding-block: calc(96px + var(--e6)) var(--e7); }
@media (min-width: 1024px) { .hero--curta { padding-block: calc(96px + var(--e7)) var(--e8); } }

/* ── as tarjas ────────────────────────────────────────────────────────────
   Duas faixas de 88 px do mesmo tom das seções tonais, uma antes e outra depois do
   texto. Elas existem porque uma página inteira branca entre duas seções
   escuras não tem respiro nenhum - a alternância de superfície do §6.2 é o
   ritmo do site, e esta página não tinha como participar dela sem quebrar a
   leitura no meio.

   São DECORAÇÃO: `aria-hidden` no markup, e nada de conteúdo dentro. Ficam
   fora do `.wrap` de propósito, para atravessarem a largura toda. */
.tarja { height: 88px; background: var(--claro-alt); }

/* ── o corpo legal ────────────────────────────────────────────────────────
   Largura TOTAL do `.wrap`, e não a de leitura (Ronaldo, 23/08/2026).
   ⚠️ Isso contraria o `--leitura` (65ch), que existe porque linha longa cansa
   - o preço está pago de propósito, e fica escrito para não voltar por
   distração. */
.legal { display: grid; gap: var(--e3); }

/* Títulos maiores: a numeração precisa se enxergar de longe numa página que
   se percorre procurando um item, não que se lê do começo ao fim. */
.legal h3 {
  margin-top: var(--e8);
  font-size: var(--t5);
  line-height: 1.15;
  padding-bottom: var(--e2);
  border-bottom: 1px solid color-mix(in srgb, var(--navy-900) 12%, transparent);
}
.legal h3:first-of-type { margin-top: 0; }
.legal h4 {
  margin-top: var(--e6);
  font-size: var(--t4);
  line-height: 1.22;
  color: var(--navy-900);
}

.legal p, .legal li { color: color-mix(in srgb, var(--navy-900) 82%, #FFFFFF); }
.legal ul { display: grid; gap: var(--e2); padding-left: var(--e5); }
.legal a { color: var(--pink-500); }

.legal table { width: 100%; border-collapse: collapse; font-size: var(--t2); }
.legal th, .legal td {
  text-align: left;
  padding: var(--e3) var(--e2);
  border-bottom: 1px solid color-mix(in srgb, var(--navy-900) 12%, transparent);
  vertical-align: top;
}
.legal th { font-weight: 600; color: var(--navy-900); }
/* a tabela é a única peça que NÃO ganha largura total: coluna de prazo com um
   metro de vão até o texto vira duas ilhas em vez de uma linha */
.legal table { max-width: 46rem; }

/* A data fica logo ABAIXO do H1 (Ronaldo, 23/08/2026).
   ⚠️ `.hero__texto` é um GRID com `row-gap: 32px`, e margem em item de grid
   SOMA com o gap: os 12px que pus de `margin-top` viraram 44px de vão, e os
   24px do subtítulo viraram 56px. Era esse o "espaçamento exagerado". Quem
   manda aqui é o gap — as margens saíram, e o subtítulo ganha a folga dele por
   cima do gap, de propósito. */
.hero--curta .hero__texto { row-gap: var(--e3); }
.legal__data { margin: 0; font-size: var(--t1); color: var(--navy-200); }
.legal__data + .hero__sub { margin-top: var(--e4); }