/* ============================================================
   Landing do ITBI — camada de adequação ao padrão do site.
   Carregada DEPOIS de af.css e af-v2.css.

   Só duas coisas mudam, que é o que foi autorizado:
     · as fontes (Poppins/Inter/Manrope → Newsreader/Figtree)
     · as cores de texto, botões e superfícies (marrom-e-dourado → petróleo)

   Estrutura, espaçamento, cortes de seção, tramas, animações e o funil vêm da
   landing original sem um único ajuste. A landing declarou tudo em variáveis no
   :root, então remapear as variáveis é literalmente a mudança mínima possível.
   ============================================================ */

:root {
  /* ---- tipografia ---- */
  --display: 'Newsreader', Georgia, serif;
  --sans:    'Figtree', system-ui, -apple-system, sans-serif;
  --num:     'Figtree', system-ui, sans-serif;

  /* ---- o escuro: era marrom-café (#17120f), passa a ser a tinta do site ---- */
  --navy:      #101A1E;
  --navy-2:    #1B2A30;
  --navy-3:    #2A3D45;
  --navy-deep: #0B1215;
  --navy-ink:  #101A1E;

  /* ---- o acento: era dourado (#9a7440), passa a ser o petróleo aprovado ---- */
  --gold:     #14515C;
  --gold-2:   #1C6B79;
  --gold-hot: #1C6B79;
  --gold-ink: #0F3F48;

  /* ---- superfícies: eram creme quente, passam a neutras ---- */
  --bg:      #FAFAF9;
  --cream:   #FAFAF9;
  --cream-2: #F0F0EE;
  --card:    #FFFFFF;

  /* ---- texto ---- */
  --ink:   #101A1E;
  --ink-2: #3C4B51;
  --muted: #5F6E75;

  /* ---- linhas ---- */
  --line:      #DBE3E4;
  --line-cool: #DBE3E4;

  /* ---- o botão principal: --clay era terracota (#8a4230). É a cor de ação da
         landing, e por isso vai para o acento, igual ao botão do resto do site.
         --gap (o "buraco", vermelho de alerta) fica no vermelho de erro que já
         temos; --verde (confirmação) no verde de sucesso do sistema. ---- */
  --clay:   #14515C;
  --clay-2: #1C6B79;
  --gap:    #8C2F1E;
  --verde:  #15803D;
  --verde-2:#1A9349;

  /* ---- sombras: a landing as tinha em marrom; ficam na tinta nova ---- */
  --sh-soft: 0 1px 2px rgb(16 26 30 / .05), 0 8px 20px -6px rgb(16 26 30 / .08);
  --sh-med:  0 2px 4px rgb(16 26 30 / .05), 0 18px 40px -10px rgb(16 26 30 / .12);
  --sh-big:  0 2px 4px rgb(16 26 30 / .05), 0 30px 66px -14px rgb(16 26 30 / .18);
  --sh-gold: 0 12px 26px -8px rgb(20 81 92 / .28);
}

/* A Newsreader tem olho maior que a Poppins no mesmo corpo: sem isto os
   títulos da landing crescem uns 6% e estouram as quebras pensadas lá. */
.afv2-h1, h1, h2, h3 { letter-spacing: -.012em; }

/* A landing rodava com o cabeçalho próprio dela. Aqui ela vive dentro do nosso,
   que é fixo e transparente — o primeiro bloco precisa de respiro para não
   nascer debaixo do menu. */
.pg-itbi .hero { padding-top: calc(var(--alt-topo) + var(--e5)); }

/* O nosso rodapé e o nosso botão flutuante já existem na página; os equivalentes
   da landing sairiam duplicados. */
.pg-itbi .topbar, .pg-itbi > footer { display: none; }

/* ---------- correção de acessibilidade ----------
   Os links "Simular este caso →" dos cartões de situação vinham com 22px de
   altura; a norma pede 24px para link de texto isolado (WCAG 2.5.8). Dois
   pixels de respiro resolvem sem mexer no desenho. */
.afv2-ask .go, a.go { min-height: 24px; }

/* Mesma régua para os outros três alvos curtos, achados na varredura a 390px:
   o link da política dentro do FAQ e do aviso de consentimento (18px e 14px),
   e o campo de município do funil (17px, abaixo dos 44px de campo). */
.pg-itbi .resp a, .pg-itbi .consent-note a { display: inline-block; min-height: 24px;
  padding-block: 3px; }
.pg-itbi .tela input[type="text"], .pg-itbi .tela input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 44px; }

/* ---------- 05/08: o cabeçalho do site volta a mandar no cabeçalho do site ----
   O `af.css` da landing declara `.btn{display:inline-flex}` e carrega DEPOIS do
   componentes.css. Mesma especificidade (0,1,0), então quem decide é a ordem: o
   `.topo__cta{display:none}` do site perdia, e o botão "Conte o seu caso"
   aparecia no celular por cima do herói claro — branco sobre creme, 1,02:1, e
   ainda quebrado em três linhas espremidas na borda direita. Só acontecia aqui;
   nas outras 58 páginas o mesmo botão se comporta, porque só esta carrega as
   folhas da landing. */
.pg-itbi .topo__cta { display: none; }
.pg-itbi .topo.encolhido .topo__cta { display: inline-flex; }
@media (max-width: 860px) { .pg-itbi .topo.encolhido .topo__cta { display: none; } }

/* O "Como funciona" é botão-fantasma herdado de um herói ESCURO: texto claro,
   borda clara, fundo transparente. O herói DESTA página é claro — foto em tom
   areia no desktop, véu creme a 97% no celular —, e ele saía a 1,01:1: existia
   no HTML e não existia na tela. Fantasma sobre claro pede tinta escura. */
.pg-itbi .btn-ghost { color: var(--ink); border-color: rgb(16 26 30 / .45); }
.pg-itbi .btn-ghost:hover { border-color: var(--ink); }

/* Mesmo piso de 18px aqui: o parágrafo da faixa de urgência tem 224 caracteres e
   vinha num `clamp(.98rem, 1.35vw, 1.1rem)` — 15,7px no celular, 17,6px no
   desktop. Corpo é corpo em qualquer largura. */
.pg-itbi .urgencia .tx p { font-size: 18px; }