/**
 * Folha das três páginas institucionais (privacidade, termos, trocas).
 *
 * Elas não vieram do WordPress — não existe Elementor por trás — então esta é a
 * única folha que carregam. Fica fora dos HTML de propósito: são três páginas
 * com o mesmo desenho, e o `?v=<hash>` que o patch injeta na URL faz o cache da
 * borda soltar as três de uma vez quando o estilo muda.
 *
 * Cores tiradas do próprio site (post-118.css), não inventadas:
 *   #0E0E0D  preto do rodapé            #F4F0EB  creme da marca
 *   #B4ACA5  cinza quente de apoio      #6B6560  cinza de texto secundário
 *   #171715  preto um passo mais claro  #F9F7F5  creme mais claro
 *
 * O corpo do documento é CLARO, ao contrário do 404 e do rodapé. São páginas de
 * leitura longa (a de privacidade tem 15 seções) e texto claro sobre fundo preto
 * cansa a vista nesse comprimento. As faixas de topo e rodapé continuam pretas,
 * então a página permanece reconhecível como parte do site.
 */

@font-face {
  font-family: 'Gotham Book';
  src: url('/wp-content/uploads/2026/05/Gotham-Book.woff2') format('woff2'),
       url('/wp-content/uploads/2026/05/Gotham-Book.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Medium';
  src: url('/wp-content/uploads/2026/05/Gotham-Medium.woff2') format('woff2'),
       url('/wp-content/uploads/2026/05/Gotham-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Largura da coluna, borda a borda — o padding lateral de 24px vive dentro
     dela (box-sizing: border-box lá embaixo), então sobram 568px de texto.

     Medido no navegador, com a Gotham Book de 16px carregada: dá 71 caracteres
     por linha. É a faixa que se quer para leitura corrida — abaixo de ~45 o
     olho quebra linha demais; acima de ~75 ele erra o começo da linha seguinte,
     e este é um texto de 15 seções.

     Aqui NÃO serve `ch`, que seria o caminho óbvio: `ch` é a largura do
     algarismo 0, e na Gotham o 0 é gordo perto da média das letras. `68ch`
     rendia 730px de texto — 86 caracteres por linha, não 68. O valor em px é
     o que sobrou depois de medir de verdade. */
  --coluna: 616px;

  --preto: #0E0E0D;
  --preto-claro: #171715;
  --creme: #F4F0EB;
  --creme-claro: #F9F7F5;
  --cinza: #6B6560;
  --cinza-quente: #B4ACA5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--creme);
  color: var(--preto);
  font-family: 'Gotham Book', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
}

/* ── Faixa de topo ─────────────────────────────────────────── */

.doc-topo { background: var(--preto); padding: 22px 0; }

/* Topo, corpo e rodapé usam a mesma caixa: --coluna de largura, centrada, com
   24px de padding lateral por dentro. É isso que põe a logo, o texto e os links
   do rodapé todos no mesmo eixo — e o padding continua protegendo as bordas
   quando a tela é mais estreita que a coluna. */
.doc-topo-inner {
  max-width: var(--coluna); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* O símbolo é 53x92 — vertical. A altura fixa é quem manda; a largura acompanha. */
.doc-marca img { height: 34px; width: auto; display: block; }

.doc-voltar {
  color: #F4F0EBB8;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; transition: color 0.3s;
  white-space: nowrap;
}
.doc-voltar:hover { color: var(--creme); }

/* ── Corpo do documento ────────────────────────────────────── */

.doc { max-width: var(--coluna); margin: 0 auto; padding: 64px 24px 80px; }

.doc-rotulo {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cinza); margin-bottom: 18px;
}

.doc h1 {
  font-family: 'Gotham Medium', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.015em;
}

.doc-sub { color: var(--cinza); margin-top: 12px; }

.doc-meta {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid #B4ACA550;
  font-size: 13px; color: var(--cinza);
}

.doc h2 {
  font-family: 'Gotham Medium', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.2rem; line-height: 1.35; letter-spacing: -0.005em;
  margin-top: 52px; margin-bottom: 14px;
}

.doc h3 {
  font-family: 'Gotham Medium', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem; line-height: 1.4;
  margin-top: 32px; margin-bottom: 10px;
}

.doc p { margin-bottom: 16px; }

.doc ul { margin: 0 0 16px 0; padding: 0; list-style: none; }

/* O marcador é desenhado à mão porque o `list-style` do navegador não permite
   alinhar o texto que quebra para a segunda linha — e aqui quase todo item
   quebra. O `padding-left` reserva a calha e o `::before` ocupa ela. */
.doc li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.doc li::before {
  content: ''; position: absolute;
  left: 2px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cinza-quente);
}

.doc strong { font-family: 'Gotham Medium', system-ui, sans-serif; font-weight: 500; }

/* Bloco de definição / destaque em linha ("Razão social: ...", "Passo 1 — ..."). */
.doc .doc-campo { margin-bottom: 8px; }

/* Caixa de dados da empresa e do encarregado. */
.doc-caixa {
  background: var(--creme-claro);
  border: 1px solid #B4ACA550;
  border-radius: 3px;
  padding: 22px 24px;
  margin: 22px 0 24px;
}
.doc-caixa p:last-child { margin-bottom: 0; }

/* Assinatura do fim do documento. */
.doc-fim {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid #B4ACA550;
  font-size: 13px; color: var(--cinza);
}
.doc-fim strong { color: var(--preto); }

.doc a { color: var(--preto); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--cinza); }

/* ── Rodapé ────────────────────────────────────────────────── */

.doc-rodape { background: var(--preto); padding: 44px 0; }

.doc-rodape-inner { max-width: var(--coluna); margin: 0 auto; padding: 0 24px; }

.doc-rodape nav {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-bottom: 22px;
}

/* 12px e #F4F0EBB8 são os mesmos do rodapé das páginas do site (ecf747a). */
.doc-rodape a {
  color: #F4F0EBB8; font-size: 12px; text-decoration: none;
  transition: color 0.3s;
}
.doc-rodape a:hover { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.doc-rodape a[aria-current='page'] { color: var(--creme); }

.doc-rodape p { color: #F4F0EB70; font-size: 12px; line-height: 1.9; }

@media (max-width: 600px) {
  /* os três continuam no mesmo eixo — 22px em vez de 24px, nos três */
  .doc { padding: 44px 22px 60px; }
  .doc-topo-inner, .doc-rodape-inner { padding: 0 22px; }
  .doc-topo-inner { gap: 14px; }
  .doc-voltar { letter-spacing: 0.12em; }
}