/* PreservaCred — base: reset, tipografia, layout, utilidades (redesign 2026-07) */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--pc-ink-900);
  background: var(--pc-bg-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { color: var(--pc-ink-900); letter-spacing: -0.022em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 680; }
h3 { font-size: var(--fs-h3); font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
/* Nível de heading CORRETO p/ a11y (heading-order) SEM mudar o tamanho visual:
   aplica o look de h3/h4 num tag de nível diferente (ex.: <h3 class="h-visual-h4">). */
.h-visual-h3 { font-size: var(--fs-h3); font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; margin: 0; }
.h-visual-h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
/* Tipografia CRÍTICA do hero (above-the-fold) no CSS render-blocking, para o H1/
   lead já nascerem no TAMANHO FINAL. Antes viviam só no components.css (async
   preload+swap) → o H1 trocava fs-h1→fs-display DEPOIS do 1º paint, inchando o
   hero e deslocando tudo (CLS ~0,9). Mantidas idênticas às de components.css. */
.hero h1 { color: #fff; font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.03em; max-width: 21ch; text-wrap: balance; }
.hero .lead { font-size: var(--fs-lead); font-weight: 400; color: var(--pc-dark-text-dim); max-width: 56ch; margin-top: var(--sp-5); }

p { margin: 0 0 var(--sp-4); }
a { color: var(--pc-petrol-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* FOCO — `outline`, não `box-shadow`. O anel era box-shadow com especificidade
   (0,1,0), e .btn-primary/.btn-secondary declaram box-shadow EM REPOUSO com a
   mesma (0,1,0) em components.css, que carrega depois: pela ordem da cascata a
   sombra de repouso vencia e o CTA primário do site ficava SEM indicador de
   foco nenhum (verificado com Tab real, não .focus()). `outline` não colide com
   sombra de componente, então não há empate a perder. Sem `border-radius` aqui:
   a regra antiga impunha 4px a QUALQUER elemento focado (um controle em pílula
   virava retângulo arredondado ao receber foco) — o outline já acompanha o raio
   do próprio elemento. */
:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
::selection { background: var(--pc-petrol-200); color: var(--pc-petrol-950); }

code, .mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--pc-ink-700); }
.num, td.num, .kpi-value { font-variant-numeric: tabular-nums; }

/* Título display (heros e aberturas de página) */
.display {
  font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.05; text-wrap: balance;
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--pc-ink-500); font-weight: 400; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.container-narrow { max-width: 72ch; margin: 0 auto; padding: 0 var(--sp-6); }
.container-wide { max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-6); }
.grid { display: grid; gap: var(--sp-6); }
/* Filhos de grid nunca alargam a coluna além do container (tabelas e mocks
   rolam DENTRO do card, nunca a página) */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
/* grid-5: linha de KPIs do /painel (Créditos do Explorador + 4 medidores). 5 colunas
   no desktop largo; 3 abaixo de 1280 (3+2, cards de largura igual); 2 no tablet; 1 no móvel. */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .grid-5 { grid-template-columns: minmax(0, 1fr); } }

.section { padding: var(--sp-section) 0; }
.section-sm { padding: var(--sp-16) 0; }

/* ═══════════════════════ Ritmo vertical entre seções ═══════════════════════
   REGRA ÚNICA DO SITE: entre duas seções existe UMA unidade de respiro
   (--sp-section) e quem paga é sempre a seção de CIMA — a de baixo zera o
   próprio topo. Nenhuma emenda soma o vão duas vezes.

   O colapso antigo era `.section + .section`, par que quase nenhuma página
   tem: o markup alterna .section ↔ .section-sm o tempo todo, e cada emenda
   cobrava o respiro duas vezes (128 + 64 = 192px de vazio — era o buraco
   entre o hero e os KPIs em /servicos/relatorios). A home contornava isso
   sozinha em pages/home.css; a regra nasce aqui agora e vale para o site todo.

   .faixa = seção que pinta superfície PRÓPRIA (.hero, .section-dark, ou
   qualquer uma marcada com .section-band). Fica fora do colapso porque ali o
   padding não é ritmo de página, é respiração INTERNA da banda — sem ele o
   texto encosta na borda de cor. Na emenda com uma faixa, a vizinha paga meia
   unidade: a própria borda de cor já faz metade da separação.

   Especificidade é parte da regra, não acidente: tudo aqui usa :is() (não
   :where()) para vencer o `.section { padding }` acima, que é (0,1,0), e as
   exceções de faixa empatam de propósito com a regra que devem substituir —
   vencem por virem depois. */

/* (1) Padrão: o vão mora embaixo. */
:is(.section, .section-sm):not(.hero, .section-dark, .section-band) {
  padding-bottom: var(--sp-section);
}
/* (2) Quem tem uma seção de ritmo acima não paga respiro em cima — o vão já
       veio de lá. Irmão GERAL (~) e não adjacente (+), pelos dois lados da
       moeda: entre duas seções cabe um <style> de página (/planos faz isso) e
       o `+` morreria calado ali; e depois de um bloco que NÃO é seção de ritmo
       (a .proc-faixa da home) o respiro de topo TEM de continuar existindo. */
:is(.section, .section-sm):not(.hero, .section-dark, .section-band)
  ~ :where(.section, .section-sm):not(.hero, .section-dark, .section-band) {
  padding-top: 0;
}
/* (3) Emenda com faixa de superfície própria: meia unidade de cada lado — a
       borda de cor faz a outra metade, e a faixa já traz o respiro interno
       dela. Aqui o adjacente é o certo: o que importa é a borda encostada. */
:is(.section, .section-sm):has(+ :is(.hero, .section-dark, .section-band)) {
  padding-bottom: calc(var(--sp-section) / 2);
}
:is(.hero, .section-dark, .section-band)
  + :is(.section, .section-sm):not(.hero, .section-dark, .section-band) {
  padding-top: calc(var(--sp-section) / 2);
}

/* Último bloco de uma seção não deixa margem órfã: o vão é do ritmo, não do
   parágrafo (sem isto o mesmo ritmo media ora 128px, ora 144px). */
:is(.section, .section-sm) > :is(.container, .container-wide, .container-narrow) > :last-child {
  margin-bottom: 0;
}

/* No topo da página não há seção anterior — a trilha já separa o conteúdo do
   header. Sem isto o primeiro texto caía ~144px abaixo do breadcrumb (16px da
   trilha + o vão da seção), um vazio que só aparecia como abertura mal
   calibrada.
   Alvo pelo :first-of-type, não pelo irmão adjacente (+): várias views abrem
   com um <style> de página, que entraria no meio e desarmaria a regra.
   Regra em base.css (render-blocking) de propósito: em components.css
   (async) o topo saltaria depois do 1º paint e geraria CLS. */
main:has(> .breadcrumb-bar) > section.section:not(.section-dark):not(.hero):first-of-type,
main:has(> .breadcrumb-bar) > section.section-sm:not(.section-dark):not(.hero):first-of-type { padding-top: var(--sp-8); }

/* Cabeçalho de seção — overline + título + apoio, respiro generoso */
.section-head { max-width: 62ch; margin-bottom: var(--sp-12); }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .overline { margin-bottom: var(--sp-3); display: block; }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--pc-ink-500); font-size: var(--fs-lead); margin: 0; }

/* Texto utilitário */
.overline {
  font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase;
  letter-spacing: .1em; color: var(--pc-petrol-600);
}
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-dim { color: var(--pc-ink-500); }
.text-faint { color: var(--pc-ink-400); }
.text-danger { color: var(--pc-danger-600); }
.text-success { color: var(--pc-success-600); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Carimbo de fonte/data — componente de confiança (obrigatório em blocos de dados)
   Cor ink-500 (#5B6E71): ≈5,3:1 sobre branco — AA para texto pequeno */
.stamp { font-size: var(--fs-xs); color: var(--pc-ink-500); margin-top: var(--sp-2); letter-spacing: .01em; }

/* Espaçadores */
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .mb-12 { margin-bottom: var(--sp-12); }
.flex { display: flex; gap: var(--sp-3); align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.flex-wrap { flex-wrap: wrap; }

/* Superfície escura — contraste AA garantido */
.surface-dark, .section-dark { background: var(--pc-dark-bg); color: var(--pc-dark-text); }
/* O anel de foco troca de cor junto com a superfície: petrol-600 sobre a faixa
   escura daria 2,16:1 (reprova). Gold-500 sobre #0E3239 dá 5,31:1. Declarado no
   MESMO lugar que declara o fundo — quem pintar uma superfície escura nova
   herda o anel certo sem saber que ele existe. */
.surface-dark, .section-dark, .hero,
/* .site-footer é pintada em components.css com --pc-dark-bg e NÃO carrega
   .surface-dark: sem estar nesta lista ela ficava fora da troca e os 70
   focáveis do rodapé — presentes em TODA página do site, incluindo o botão de
   consentimento e o input da newsletter — recebiam petrol-600 sobre #0B2B30,
   2,36:1. Continua reprovando os 3:1 da SC 1.4.11, só que menos que antes.
   O seletor mora aqui, junto das outras superfícies escuras, e não em
   components.css: a lista de "onde o anel troca" tem que ser uma só. */
.site-footer { --pc-focus: var(--pc-gold-500); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.surface-dark a, .section-dark a { color: var(--pc-petrol-200); }
.surface-dark a:hover, .section-dark a:hover { color: #fff; }
.surface-dark .text-dim, .surface-dark .text-faint, .surface-dark .lead,
.section-dark .text-dim, .section-dark .text-faint, .section-dark .lead { color: var(--pc-dark-text-dim); }
.surface-dark .overline, .section-dark .overline { color: var(--pc-petrol-300); }
.surface-dark .stamp, .section-dark .stamp { color: var(--pc-dark-text-dim); }
.surface-dark .mono, .surface-dark code,
.section-dark .mono, .section-dark code { color: var(--pc-petrol-200); }

/* .section-dark — bloco petróleo de página pública, com respiro próprio */
.section-dark { padding: var(--sp-section) 0; position: relative; overflow: hidden; }

/* A LISTA DE EMPRESAS DA BUSCA TEM DE SAIR DA FAIXA. O `overflow: hidden` da
   linha acima — e o gêmeo de `.hero` (components.css) — recortava o dropdown de
   sugestões na borda de baixo da própria seção: medido a 1440×900 no herói da
   home, a caixa tinha 440px e a seção acabava 301px antes, então a maior parte
   das empresas sugeridas ficava invisível E INCLICÁVEL (`elementFromPoint` 40px
   abaixo da borda devolvia a seção seguinte, não o item da lista). Vale para o
   herói e o fechamento da home e para o herói das LPs de /para — todo campo
   grande de busca mora numa faixa escura.
   Abrir o recorte é seguro AQUI porque ele só existe para conter fundo
   decorativo que sangra, e nenhuma faixa com busca tem um: `.hero-art`, o
   motivo original, não é usado em view nenhuma.

   POR QUE O PISO DE 1025px, em vez da regra solta. Até 1024 o dropdown é
   `position: static` (components.css, `@media (max-width: 1024px)`) e entra no
   FLUXO — não precisa sair de faixa nenhuma. E abrir o recorte lá QUEBRA: como
   item de grade em fluxo, a caixa contribui com o próprio `max-width: 560px`
   para o trilho `1fr`, que a 375px pula de 327 para 560px e arrasta o H1 e o
   campo junto. Hoje o `overflow: hidden` esconde esse estouro; sem ele o
   telefone ganha rolagem lateral assim que a lista abre (medido: scrollWidth
   375 → 584). Se o 1024 de components.css mudar, este piso muda junto. */
@media (min-width: 1025px) {
  .hero:has(form[data-hdr-search]),
  .section-dark:has(form[data-hdr-search]) { overflow: visible; }
}

/* Ilha clara dentro de superfície escura (.card sobre hero/section-dark):
   restaura contraste de texto — NUNCA texto claro sobre fundo claro */
.surface-dark .card, .section-dark .card, .hero .card {
  color: var(--pc-ink-900);
  /* A ilha clara devolve o anel de foco à cor de superfície clara: o gold-500
     que a faixa escura acabou de declarar mede 2,58:1 sobre o branco do cartão.
     É o mesmo tipo de vazamento que deixou o .mono do cartão de prova a 1,45:1 —
     regra de superfície escura alcançando conteúdo que ficou claro. */
  --pc-focus: var(--pc-petrol-600);
}
.surface-dark .card h1, .surface-dark .card h2, .surface-dark .card h3, .surface-dark .card h4,
.section-dark .card h1, .section-dark .card h2, .section-dark .card h3, .section-dark .card h4,
.hero .card h1, .hero .card h2, .hero .card h3, .hero .card h4 { color: var(--pc-ink-900); }
.surface-dark .card a, .section-dark .card a, .hero .card a { color: var(--pc-petrol-600); }
.surface-dark .card a:hover, .section-dark .card a:hover, .hero .card a:hover { color: var(--pc-petrol-700); }
.surface-dark .card .text-dim, .section-dark .card .text-dim, .hero .card .text-dim { color: var(--pc-ink-500); }
.surface-dark .card .text-faint, .section-dark .card .text-faint, .hero .card .text-faint { color: var(--pc-ink-400); }
.surface-dark .card .overline, .section-dark .card .overline, .hero .card .overline { color: var(--pc-petrol-600); }
.surface-dark .card .stamp, .section-dark .card .stamp, .hero .card .stamp { color: var(--pc-ink-400); }
.surface-dark .card .mono, .surface-dark .card code,
.section-dark .card .mono, .section-dark .card code,
.hero .card .mono, .hero .card code { color: var(--pc-ink-700); }
.surface-dark .card .lead, .section-dark .card .lead, .hero .card .lead { color: var(--pc-ink-500); }

/* Prosa (temáticas, glossário, jurídico) */
.prose { max-width: 72ch; }
.prose h2 { margin: var(--sp-10) 0 var(--sp-4); }
.prose h3 { margin: var(--sp-8) 0 var(--sp-3); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: var(--hairline); }
.prose th { background: var(--pc-bg-100); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--pc-ink-500); }
.prose blockquote { border-left: 3px solid var(--pc-petrol-300); padding-left: var(--sp-4); color: var(--pc-ink-500); margin: 0 0 var(--sp-4); }

/* ============================== Ritmo de leitura (regras globais)
   Título nunca gruda no texto que o segue; parágrafos respiram; listas,
   definições e Q&A ganham divisores e padding vertical generoso. */

/* Subtítulo + parágrafo: respiro mínimo de 12px em qualquer contexto */
h3 + p, h4 + p { margin-top: var(--sp-3); }
.card-pad h2 + p, .card-pad h3 + p, .card-pad h4 + p { margin-top: var(--sp-3); }

/* Parágrafos consecutivos em prosa: nunca menos que UMA unidade da escala
   (colapsa com o margin-bottom já existente — garante o mínimo, não soma).
   Era `1em`: o único vão do site cujo tamanho dependia do CORPO DO TEXTO e não
   da escala de espaço. Num parágrafo de 15px rendia 15px; num de 11px renderia
   11. Espaço vem da escala de espaço. */
.prose p + p, .card-pad p + p { margin-top: var(--sp-4); }

/* Prosa: parágrafo que abre uma seção não gruda no h2/h3 anterior nem no
   próximo título; último elemento não deixa margem órfã no card */
.card-pad > :last-child, .prose > :last-child { margin-bottom: 0; }
.prose p + h2, .prose ul + h2, .prose ol + h2, .prose table + h2 { margin-top: var(--sp-10); }
.prose p + h3, .prose ul + h3, .prose ol + h3 { margin-top: var(--sp-8); }

/* Listas: itens com respiro em qualquer superfície de leitura */
.card-pad ul:not([class]) li + li,
.card-pad ol:not([class]) li + li { margin-top: var(--sp-2); }

/* Definições (dt/dd): termo destacado, definição indentada, pares espaçados */
dl { margin: 0 0 var(--sp-4); }
dt { font-weight: 600; color: var(--pc-ink-900); }
dt:not(:first-child) { margin-top: var(--sp-4); }
dd { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); color: var(--pc-ink-700); }

/* FAQ / Q&A com details-summary: padding vertical generoso + divisores */
details.qa, .qa-list details {
  border-bottom: var(--hairline);
}
details.qa summary, .qa-list details summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--sp-5) var(--sp-8) var(--sp-5) 0;
  font-weight: 600; color: var(--pc-ink-900);
  transition: color var(--t-fast);
}
details.qa summary::-webkit-details-marker, .qa-list details summary::-webkit-details-marker { display: none; }
details.qa summary::after, .qa-list details summary::after {
  content: ""; position: absolute; right: var(--sp-2); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--pc-ink-400); border-bottom: 1.5px solid var(--pc-ink-400);
  transform: rotate(45deg); transition: transform var(--t-fast);
}
details.qa[open] summary::after, .qa-list details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
details.qa summary:hover, .qa-list details summary:hover { color: var(--pc-petrol-700); }
details.qa > *:not(summary), .qa-list details > *:not(summary) { padding: 0 0 var(--sp-5); }
details.qa p, .qa-list details p { color: var(--pc-ink-700); max-width: 72ch; }

/* Blocos de pergunta e resposta em cards (FAQ atual): a pergunta respira
   antes da resposta — coberto pelas regras .card-pad h2/h3/h4 + p acima */

/* Divisor com fade — separação sutil entre blocos */
.divider-fade {
  border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--pc-line-200) 18%, var(--pc-line-200) 82%, transparent);
}
.section-dark .divider-fade, .surface-dark .divider-fade {
  background: linear-gradient(90deg, transparent, var(--pc-dark-line) 18%, var(--pc-dark-line) 82%, transparent);
}

/* Acessibilidade */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* O ATALHO É O PRIMEIRO ALVO DO SITE para quem navega por teclado, e media 40px
   de altura — abaixo dos 44 que todo o resto do cabeçalho respeita. Ele só
   aparece com foco, o que fez a varredura passar por ele durante meses. */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--pc-petrol-800);
  color: #fff; padding: var(--sp-2) var(--sp-4); z-index: var(--z-toast); border-radius: 0 0 var(--r-md) 0;
  display: inline-flex; align-items: center; min-height: 44px;
}
.skip-link:focus { left: 0; }