/* ==========================================================================
   POLÍTICA DE PRIVACIDADE — página documental
   Consome exclusivamente tokens de css/design-system.css. Página de leitura
   contínua (não uma seção de marketing), por isso não segue o ritmo
   off-white/branco alternado nem a grade 1fr/1.5fr usadas na Home — uma
   única coluna, largura de leitura confortável, do início ao fim.

   Direção pedida para esta rodada: visual editorial, sem cards, ícones,
   ilustrações, fotografia, animações ou acordeões. O que seria "hierarquia
   por componente" em outras páginas aqui é hierarquia por tipografia,
   numeração (já existente no conteúdo) e linhas divisórias finas entre
   cláusulas — mesma técnica de --color-border já usada nas transições de
   seção da Home, só que na horizontal, dentro de uma única coluna.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESTRUTURA — fundo off-white padrão (mesmo token do body; declarado aqui
   só por clareza de componente). --space-section no bloco todo: mesmo
   respiro vertical fluido já usado em cada seção da Home.
   -------------------------------------------------------------------------- */
.privacy {
  background-color: var(--color-bg);
  padding-block: var(--space-section);
}

/* --------------------------------------------------------------------------
   COLUNA DE LEITURA — max-width em `ch`, não em px: mesma técnica local já
   autorizada em hero__heading/hero__lead (hero.css), aplicada aqui ao
   documento inteiro em vez de a um título isolado. 68ch fica dentro da
   recomendação de manter linhas de corpo de texto abaixo de ~80 caracteres
   sem deixar a página estreita demais em telas largas. Centralizada dentro
   de .container (que já resolve o padding lateral responsivo).
   -------------------------------------------------------------------------- */
.privacy__inner {
  max-width: 68ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   INTRODUÇÃO — H1 (herda família/peso/entrelinha da regra global "h1, h2,
   h3") + parágrafo de abertura. Mesmo tratamento de .hero__lead (corpo
   18px, --color-text-secundario) para diferenciar a introdução do corpo
   das cláusulas sem depender de tamanho novo.
   -------------------------------------------------------------------------- */
.privacy__heading {
  margin: 0 0 var(--space-lg);
}

.privacy__lead {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secundario);
}

/* --------------------------------------------------------------------------
   CORPO — cláusulas empilhadas. gap grande entre elas (--space-2xl) porque
   a separação visual principal já vem da borda; o gap evita que a borda
   encoste no texto de cima e de baixo.
   -------------------------------------------------------------------------- */
.privacy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-top: var(--space-3xl);
}

/* --------------------------------------------------------------------------
   CADA CLÁUSULA — linha divisória fina no topo de todas menos a primeira
   (:not(:first-child), em vez de border-top em todas + zerar na primeira:
   uma regra só, sem precisar cancelar a anterior). padding-top equivalente
   ao gap do corpo, para o espaço acima e abaixo da linha ficar visualmente
   igual.
   -------------------------------------------------------------------------- */
.privacy__clause:not(:first-child) {
  padding-top: var(--space-2xl);
  border-top: var(--border-width) solid var(--color-border);
}

/* --------------------------------------------------------------------------
   TÍTULO DE CLÁUSULA — semanticamente H2 (mantém a hierarquia de heading
   correta: um H1 na página, um H2 por cláusula), mas com o tamanho visual
   de --text-h3. Com 15 cláusulas em sequência, o H2 "cheio" (38–44px, o
   mesmo tamanho usado uma única vez por seção na Home) ficaria pesado
   demais repetido — o nível semântico e o tamanho visual são coisas
   diferentes no design system (o próprio Footer já faz isso ao usar
   --text-h3 num <p>, não num heading; aqui é o inverso: heading real,
   tamanho emprestado). A numeração já faz parte do texto de cada cláusula
   (decisão de conteúdo, não estilo) — não é um marcador decorativo
   adicionado aqui.
   -------------------------------------------------------------------------- */
.privacy__clause h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-h3);
}

/* --------------------------------------------------------------------------
   PARÁGRAFOS — mesmo padrão de about__body/how-it-works__body: espaçados
   por gap, não margin, para não precisar zerar margin do último filho.
   -------------------------------------------------------------------------- */
.privacy__clause p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
}

.privacy__clause p + p {
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   LISTAS — usadas nas cláusulas 5, 6 e 10 (serviços de terceiros,
   finalidades, direitos do titular). Marcador em travessão tipográfico via
   ::before em vez do disco padrão do navegador: mesma lógica de não
   introduzir um ícone novo, só tipografia — coerente com "sem ícones"
   pedido para esta página, e com o tom editorial do restante do site.
   -------------------------------------------------------------------------- */
.privacy__clause ul {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.privacy__clause li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
}

.privacy__clause li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-text-secundario);
}

/* Quando um parágrafo vem imediatamente antes da lista (ex.: "Atualmente:"),
   a lista já tem margin-top — não duplicar espaço. */
.privacy__clause p + ul {
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   LINKS NO CORPO DO TEXTO — WhatsApp, JIM, aviso de privacidade da
   InfinitePay. Tratamento deliberadamente diferente do link com sublinhado
   "revelado no hover" usado em how-it-works.css/footer.css: aqueles são
   links de navegação isolados (uma frase inteira como alvo de clique); estes
   são links embutidos no meio de frases de um documento legal, onde o
   sublinhado precisa estar visível o tempo todo para o link ser identificável
   como link em varredura de leitura — não é uma inconsistência, é o mesmo
   princípio (affordance clara) aplicado a um contexto diferente.
   -------------------------------------------------------------------------- */
.privacy__clause a {
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy__clause a:hover,
.privacy__clause a:focus-visible {
  color: var(--color-terracota-texto);
}