/* ── Fontes ──────────────────────────────────────────── */
@font-face{font-family:Conthrax;src:url(/assets/fonts/conthrax-sb.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:WorkSans;src:url(/assets/fonts/worksans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:WorkSans;src:url(/assets/fonts/worksans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:WorkSans;src:url(/assets/fonts/worksans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:WorkSans;src:url(/assets/fonts/worksans-700.woff2) format("woff2");font-weight:700;font-display:swap}

/* ── Tokens ──────────────────────────────────────────── */
:root{
  /* marca — valores do Manual Básico, não alterar */
  --azul-naval:#10427e; --ciano:#0e9dd0;
  --verde:#55b848; --verde-claro:#a1cd51;
  --azul-escuro:#081c36;

  /* derivadas de acessibilidade — ver nota abaixo */
  /* Leveza 2026-08-06: escurecido de #3c8333 para #3a7d31. O rótulo do
     hero (.rotulo) agora fica sobre --grad-hero-claro, cuja parada mais
     escura (#f0faf0) dava só 4.38:1 com o tom antigo — reprova AA. O novo
     tom dá folga nos três fundos em que --verde-texto aparece: 5.05:1 no
     branco, 4.86:1 no card, 4.72:1 na parada mais escura do gradiente
     claro. Ver tools/contrast.py. */
  --verde-texto:#3a7d31;
  --tinta:#0d2137;            /* texto principal */
  --tinta-suave:#4a6585;      /* 6.01:1 no branco */
  --fundo:#ffffff;
  --fundo-card:#f7fbff;
  --borda:#ddeef8;

  --grad-principal:linear-gradient(135deg,#10427e,#0e9dd0);
  /* variante de botão: mesmo matiz do ciano da marca (195,8°), só mais
     escura (#0b7fa9), porque #0e9dd0 sob texto branco pequeno cai pra
     3.11:1 e reprova AA. --grad-principal fica intocado para fundos e
     elementos decorativos sem texto pequeno. */
  --grad-botao:linear-gradient(135deg,#10427e,#0b7fa9);
  --grad-destaque:linear-gradient(135deg,#55b848,#a1cd51);
  --grad-escuro:linear-gradient(160deg,#0f3d75,#081c36);
  /* Leveza 2026-08-06: gradiente claro de hero/CTA, copiado literalmente
     de site/lp/index.html (--grad-hero de lá). Três tons quase-brancos da
     própria marca — ver tools/contrast.py para os pares de texto testados
     contra as três paradas. */
  --grad-hero-claro:linear-gradient(160deg,#f8fbff 0%,#eaf4fb 45%,#f0faf0 100%);

  --largura:1160px;
  --raio:14px;
  /* Leveza 2026-08-06: sombras aliviadas (eram 0 4px 24px/.08 e
     0 12px 40px/.14) — a LP não usa sombra por padrão nos cards, só um
     leve realce no hover. Sombra não é texto, não tem requisito de
     contraste — só ajuste visual. */
  --sombra:0 2px 12px rgba(16,66,126,.06);
  --sombra-alta:0 8px 28px rgba(16,66,126,.10);
}

/* ── Reset leve ──────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
img{max-width:100%;height:auto;display:block}

/* ── Base ────────────────────────────────────────────── */
/* Leveza 2026-08-06: 17px → 16px de corpo (LP usa 14-15px; 16px é o piso
   confortável para o volume de texto corrido daqui, ver relatório). */
body{font-family:WorkSans,system-ui,sans-serif;color:var(--tinta);line-height:1.65;font-size:16px;background:var(--fundo)}

/* Títulos em Conthrax (mesma assinatura visual da LP em /site/lp/,
   font-weight:600 porque é o único peso da fonte — ver @font-face acima).
   Pilha de fallback obrigatória (bug corrigido 2026-08-06): sem ela, se a
   fonte falhar ao carregar, o navegador cai no serifado padrão dele em vez
   de WorkSans. WorkSans entra como 2º elo porque tem os mesmos pesos
   declarados (400–700) e é a fonte de corpo do site; system-ui,sans-serif
   é o último elo caso nem WorkSans carregue.
   Leveza 2026-08-06: teto de h1 46px→40px e h2 34px→30px (Conthrax é larga
   e ganha peso como título; a LP usa 40px/26px). line-height da base subiu
   de 1.2 para 1.28 — título em Conthrax pede mais entrelinha que WorkSans
   para respirar; h1 mantém a própria (mais apertada, título de destaque). */
h1,h2,h3{font-family:Conthrax,WorkSans,system-ui,sans-serif;font-weight:600;line-height:1.28;color:var(--azul-naval)}
h1{font-size:clamp(28px,4.5vw,40px);line-height:1.2}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:19px;line-height:1.3}

.marca{font-family:Conthrax,WorkSans,system-ui,sans-serif}

/* ── Layout ──────────────────────────────────────────── */
.container{max-width:var(--largura);margin-inline:auto;padding-inline:24px}

/* Leveza 2026-08-06: mais respiro vertical entre seções (era
   clamp(56px,8vw,96px)) — ar é o que dá leveza, junto com menos blocos
   escuros e sombras mais discretas. */
.secao{padding:clamp(64px,8.5vw,104px) 0}
.secao--clara{background:var(--fundo-card)}
.secao--escura{background:var(--grad-escuro);color:#fff}
.secao--escura h1,.secao--escura h2,.secao--escura h3{color:#fff}
.secao--escura .card h1,
.secao--escura .card h2,
.secao--escura .card h3{color:var(--azul-naval)}

.rotulo{font-family:Conthrax,WorkSans,system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-texto)}
.secao--escura .rotulo{color:var(--verde-claro)}

.titulo-secao{margin-bottom:16px}

/* ── Botões ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .18s,box-shadow .18s}
.btn--primario{background:var(--grad-destaque);color:var(--azul-escuro)}
.btn--secundario{background:var(--grad-botao);color:#fff}
.btn--claro{background:#fff;color:var(--azul-naval);border:2px solid var(--borda)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}

/* ── Grades e cartões ────────────────────────────────── */
/* Leveza 2026-08-06: gap 24px→28px, mesmo raciocínio do padding de .secao
   — mais ar entre cartões. */
.grade{display:grid;gap:28px}
.grade--2{grid-template-columns:repeat(2,1fr)}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--4{grid-template-columns:repeat(4,1fr)}

/* Leveza 2026-08-06: sem sombra por padrão (a LP não sombreia feature-card/
   persona-card em repouso, só no hover) — troca de border-color no hover
   substitui o realce, igual à LP. */
.card{background:#fff;color:var(--tinta);border:1px solid var(--borda);border-radius:var(--raio);padding:28px;transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--ciano);box-shadow:var(--sombra)}

/* Módulos (plataforma): as quatro listas têm tamanhos bem diferentes
   (Relatórios tem 8 itens, Contas a Pagar tem 3) — o esticamento padrão
   do grid (align-items:stretch) deixaria os cards curtos com um vão vazio
   enorme embaixo da lista. align-items:start faz cada card assumir só a
   altura do próprio conteúdo. */
.grade--altura-livre{align-items:start}

/* ── Lista com marca de verificação ──────────────────── */
.lista-check{list-style:none;padding:0}
.lista-check li{padding-left:32px;position:relative;margin-bottom:12px}
.lista-check li:last-child{margin-bottom:0}
.lista-check li::before{content:"✓";color:var(--verde-texto);font-weight:700;position:absolute;left:0}
/* --verde-texto dá só 2.31:1 na ponta clara do --grad-escuro — reprova AA.
   Branco dá 10.80:1 (ponta clara) e 17.08:1 (ponta escura). Ver tools/contrast.py. */
.secao--escura .lista-check li::before{color:#fff}

/* ── Lista "não é para você" (marcador neutro, sem cor de alerta —
   vermelho não está na paleta autorizada) ─────────────── */
.lista-x{list-style:none;padding:0}
.lista-x li{padding-left:32px;position:relative;margin-bottom:12px;color:var(--tinta-suave)}
.lista-x li:last-child{margin-bottom:0}
.lista-x li::before{content:"–";color:var(--tinta-suave);font-weight:700;position:absolute;left:0}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{border-top:1px solid var(--borda)}
.faq__item{border-bottom:1px solid var(--borda)}
.faq__item summary{cursor:pointer;font-weight:600;padding:18px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:0 0 auto;font-size:22px;line-height:1;color:var(--verde-texto)}
.faq__item[open] summary::after{content:"–"}
.faq__item p{color:var(--tinta-suave);padding-bottom:20px;margin-top:-4px}

/* ── Acessibilidade e movimento ──────────────────────── */
:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}

.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--azul-naval);color:#fff;font-weight:600;
  padding:14px 22px;border-radius:0 0 8px 0;text-decoration:none;
}
.pular-para-conteudo:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── Hero ────────────────────────────────────────────── */
/* Leveza 2026-08-06: o hero era .secao--escura (laje azul-escura de tela
   cheia) nas 7 páginas — a primeira impressão do site, e o que mais pesava
   no diagnóstico do cliente. Passa a usar --grad-hero-claro, o mesmo
   gradiente claro da LP, com os mesmos dois brilhos radiais decorativos
   (::before/::after) que ela usa. `secao--escura` foi removida do <section
   class="hero ..."> em todas as páginas — ver contrast.py para os pares
   novos (h1/rótulo/subheadline sobre as três paradas do gradiente). */
.hero{
  padding:clamp(64px,9vw,112px) 0 clamp(56px,8vw,84px);
  background:var(--grad-hero-claro);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:-80px;right:-80px;width:360px;height:360px;
  background:radial-gradient(circle,rgba(14,157,208,.10) 0%,transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;bottom:-50px;left:-60px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(85,184,72,.08) 0%,transparent 70%);
  pointer-events:none;
}
.hero__interno{position:relative;z-index:1}
.hero__subheadline{font-size:19px;line-height:1.65;margin-top:20px;max-width:60ch;color:var(--tinta-suave)}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero__tags{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:44px;padding:0}

/* Imagens 2026-08-06 — captura de tela real da plataforma (prova de
   produto): sem filtro, sem sobreposição de cor, só raio discreto e
   sombra sutil, como pede a categoria 1 do briefing de imagens. Reaproveitada
   em qualquer lugar do site onde uma captura aparece (hero da /plataforma/
   e bloco da home). */
.captura{border-radius:var(--raio);box-shadow:var(--sombra-alta);width:100%;height:auto;display:block}
.hero__captura{margin-top:48px;position:relative;z-index:1}
/* Pastilhas brancas com borda clara — mesmo tratamento do .hero-tag da LP,
   trocado de "pastilha translúcida sobre fundo escuro" (rgba branco 8%)
   para "pastilha branca sobre fundo claro". */
.hero__tags li{font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;border:1px solid var(--borda);background:#fff;color:var(--azul-naval);box-shadow:0 1px 4px rgba(14,157,208,.08)}

/* ── Barra de credibilidade ──────────────────────────── */
.credibilidade{background:var(--fundo-card);border-bottom:1px solid var(--borda);padding:22px 0}
.credibilidade__lista{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;margin-block:0}
.credibilidade__lista p{margin:0;font-weight:600;font-size:14px;color:var(--tinta-suave);position:relative;padding-left:20px}
.credibilidade__lista p:first-child{padding-left:0}
.credibilidade__lista p::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--verde-texto)}
.credibilidade__lista p:first-child::before{display:none}

/* ── Dores ────────────────────────────────────────────── */
.dores__grade{margin-top:40px}
.dores__card{position:relative;padding-top:48px}
.dores__card p{margin:0}
.dores__card::before{
  content:"?";font-family:Conthrax,WorkSans,system-ui,sans-serif;font-size:18px;color:var(--verde-texto);
  position:absolute;top:22px;left:28px;opacity:.6;
}

/* ── Pilares ──────────────────────────────────────────── */
.pilares .card{display:flex;flex-direction:column}
.pilares .card p:not(:last-child){flex-grow:1}
.card__link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--azul-naval);text-decoration:none}
.card__link:hover,.card__link:focus-visible{color:var(--verde-texto)}

/* ── Diferencial (plataforma / marítimo — os dois blocos que
   nenhum concorrente tem, precisam se destacar) ─────────── */
.diferencial__grade{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.diferencial__grade--inverso{grid-template-columns:auto 1fr}
.diferencial__texto{margin-top:18px;font-size:17px;max-width:56ch}
.diferencial--claro .diferencial__texto{color:var(--tinta-suave)}
.diferencial__lista{margin-top:8px}
.diferencial__ilustracao{display:flex;justify-content:center}

/* Imagens 2026-08-06 — variante com foto tratada (duotone) no lugar do
   ícone SVG: bpo-financeiro.html ("Empresa grande × empresa em
   crescimento") e consultoria.html ("Diagnóstico financeiro"). Colunas
   1fr/1fr (em vez de auto/1fr ou 1.25fr/1fr) porque a foto é uma faixa
   larga e baixa (~2.2:1), não um ícone de 120px — precisa de coluna cheia
   para não ficar minúscula. */
.diferencial__grade--foto{grid-template-columns:1fr 1fr}
.diferencial__foto img{border-radius:var(--raio);width:100%;height:auto;display:block}

/* Home — captura da plataforma dentro da seção escura "O sistema é
   nosso". Bloco à parte abaixo do grid (não dentro dele) para não forçar
   a lista de checks a dividir espaço com a imagem; max-width mantém a
   captura (quase quadrada, 900×916) num tamanho de leitura confortável em
   vez de esticar para as bordas do container em telas largas. */
.diferencial__captura{margin-top:48px;max-width:640px;margin-inline:auto}

/* ── Como funciona (etapas) ──────────────────────────── */
.etapas{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding:0;margin-top:40px}
.etapas__num{
  /* WorkSans, não Conthrax: os algarismos "2" e "3" do Conthrax são
     estilizados a ponto de ficarem ilegíveis num badge deste tamanho.
     Continua assim mesmo após h1/h2/h3 passarem a usar Conthrax — este
     badge não é um heading, é um número solto de contagem. */
  font-family:WorkSans,system-ui,sans-serif;font-size:17px;font-weight:700;
  display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--grad-destaque);color:var(--azul-escuro);
  margin-bottom:16px;
}
.etapas__item h3{margin-bottom:8px}
.etapas__item p{margin:0;color:var(--tinta-suave)}

/* ── Para quem ────────────────────────────────────────── */
.para-quem .card h3{margin-bottom:16px}

/* ── CTA final ────────────────────────────────────────── */
.cta-final__interno{max-width:600px;margin-inline:auto;text-align:center}
.cta-final__interno p{margin-top:14px;font-size:18px}
.cta-final__botao{margin-top:32px}
.cta-final__contato{margin-top:22px;font-size:15px;font-weight:600}

/* Leveza 2026-08-06: variante clara do CTA final, para as páginas onde ele
   deixou de ser a seção escura "acento" (home, plataforma, consultoria,
   a-prosperium — ver relatório para o motivo por página). Reaproveita o
   mesmo --grad-hero-claro do hero: a página "fecha" com o mesmo tom claro
   que "abriu", igual à LP (.hero e .cta de lp/index.html usam o mesmo
   --grad-hero). h2 já cai em var(--azul-naval) por herdar a regra base de
   h1,h2,h3 (fora de .secao--escura); só o parágrafo intro precisa do tom
   secundário explícito. */
.cta-final--claro{background:var(--grad-hero-claro);position:relative;overflow:hidden}
.cta-final--claro::before{
  content:"";position:absolute;top:-60px;right:-60px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(14,157,208,.12) 0%,transparent 70%);
  pointer-events:none;
}
.cta-final--claro::after{
  content:"";position:absolute;bottom:-50px;left:-50px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(85,184,72,.10) 0%,transparent 70%);
  pointer-events:none;
}
.cta-final--claro .cta-final__interno{position:relative;z-index:1}
.cta-final--claro .cta-final__interno p{color:var(--tinta-suave)}

/* CTA duplo (plataforma): dois botões lado a lado. .btn é inline-flex, então
   um único botão centraliza com o text-align:center do pai; dois exigem um
   flex wrapper próprio para não colar na borda esquerda do container. */
.cta-final__botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}

/* ── Cabeçalho ───────────────────────────────────────── */
.cabecalho{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
}
.cabecalho--rolado{box-shadow:var(--sombra)}

.cabecalho__interno{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-block:14px;
}
.cabecalho__marca{display:inline-flex}

.cabecalho__nav{display:flex;align-items:center;gap:28px}
.cabecalho__nav a{
  color:var(--azul-naval);font-weight:500;text-decoration:none;
  position:relative;padding-block:6px;
}

/* Acima de 1200px: breakpoint em que a nav vira uma linha horizontal única.
   Medido via CDP (Runtime.evaluate em getBoundingClientRect, não só
   captura visual): com nowrap nos links e flex-shrink:0 na marca (ver
   abaixo), logo+nav somam ~1162px de largura intrínseca, fixa, porque nada
   mais pode encolher. 1200px dá ~38px de folga real acima disso — não é um
   ajuste de 1px como o problema original.
   Por que não um breakpoint menor com gap/fonte ainda mais reduzidos
   (a outra saída possível): chegar de ~1162px até caber com folga real
   dentro de, digamos, 1024px exigiria fonte de nav abaixo de ~13px e gap
   abaixo de ~10px — compressão agressiva demais para legibilidade numa nav
   persistente. Prefiro colapsar em hambúrguer um pouco mais cedo (notebooks
   estreitos, ~1020–1200px) a arriscar texto pequeno demais ou voltar a
   flertar com margens de 1px. */
@media (min-width:1201px){
  /* Sem isto, a única coisa que pode encolher quando falta espaço é a
     logo (o único vizinho flexível) — e ela chega a ficar ilegível
     ("PROSFRUELV"). flex-shrink:0 garante que, se algum dia a viewport
     ficar mais estreita que o conteúdo aqui dentro, o aperto vá para a
     nav, não para a marca. */
  .cabecalho__marca{flex-shrink:0}
  .cabecalho__nav{gap:18px}
  .cabecalho__nav a{font-size:15px;white-space:nowrap}
}
.cabecalho__nav a.ativo{color:var(--verde-texto)}
.cabecalho__nav a.ativo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--verde-texto);border-radius:2px;
}
.cabecalho__cta{margin-left:4px;padding:11px 22px}

.cabecalho__menu-btn{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:8px;margin:-4px;background:none;border:0;cursor:pointer;
}
.cabecalho__menu-btn span{display:block;height:2px;width:100%;background:var(--azul-naval);border-radius:2px}

@media (max-width:1200px){
  /* Estado sem JavaScript (padrão): nav sempre visível, empilhada abaixo do
     cabeçalho. Funcional por padrão — o botão hambúrguer não existe até o
     JS adicionar .js a .cabecalho, então não há como isso depender dele. */
  .cabecalho__interno{flex-wrap:wrap}
  .cabecalho__nav{
    flex-basis:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--borda);
  }
  .cabecalho__nav a{padding:14px 0;border-bottom:1px solid var(--borda)}
  .cabecalho__nav a.ativo::after{display:none}
  .cabecalho__cta{margin:16px 0 0;justify-content:center}

  /* Só com JS (site.js adiciona .js a .cabecalho): colapsa em hambúrguer. */
  .cabecalho.js .cabecalho__menu-btn{display:flex}
  .cabecalho.js .cabecalho__nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;box-shadow:var(--sombra);padding:8px 24px 24px;
    border-top:0;
  }
  .cabecalho.js .cabecalho__nav.aberto{display:flex}
}

/* ── Rodapé ──────────────────────────────────────────── */
.rodape{background:var(--azul-escuro);color:#fff;padding:64px 0 32px}
.rodape a{color:#c9dcee;text-decoration:none}
.rodape a:hover,.rodape a:focus-visible{color:#fff}

.rodape__colunas{margin-bottom:48px}
/* .rodape__titulo é um <h2> (marcação semântica de coluna do rodapé), mas
   visualmente é rótulo de lista, não título de seção — fica em WorkSans,
   não em Conthrax, para não competir com os h2 de verdade da página nem
   pesar visualmente um bloco que é só navegação secundária. */
.rodape__titulo{font-family:WorkSans,system-ui,sans-serif;font-size:16px;font-weight:700;margin-bottom:16px;color:#fff}

.rodape__links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;color:#c9dcee}

.rodape__logo-bloco{
  display:inline-flex;background:#fff;padding:14px 18px;
  border-radius:var(--raio);margin-bottom:20px;
}
.rodape__missao{color:#c9dcee;max-width:34ch}
.rodape__institucional{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
.rodape__institucional a{font-weight:500}

.rodape__redes{display:flex;gap:12px}
.rodape__rede{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);color:#fff;
}
.rodape__rede:hover,.rodape__rede:focus-visible{
  background:rgba(255,255,255,.14);color:var(--verde-claro);border-color:var(--verde-claro);
}

.rodape__base{
  padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
  color:#c9dcee;font-size:14px;text-align:center;
}

/* ── Botão flutuante de WhatsApp ─────────────────────── */
.wpp-flutuante{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.wpp-flutuante:hover{transform:translateY(-2px)}

/* ── Responsivo ──────────────────────────────────────── */
@media (max-width:900px){
  /* .grade--3 NÃO entra aqui de propósito: com 5 itens (dores) ou 3 itens
     (pilares), um recorte em 2 colunas sempre deixa um item órfão sozinho
     numa linha. Mantém 3 colunas estreitas até a largura realmente exigir
     1 coluna, em vez de trocar "órfão largo" por "órfão colado à esquerda". */
  .grade--4{grid-template-columns:repeat(2,1fr)}

  .diferencial__grade,.diferencial__grade--inverso,.diferencial__grade--foto{grid-template-columns:1fr;gap:40px}
  .diferencial__grade--inverso .diferencial__ilustracao{order:-1}
  .etapas{grid-template-columns:repeat(2,1fr)}
}

/* ── Tributário (consultoria) — lista de checks solta abaixo do
   parágrafo introdutório, dentro de .secao--escura sem o grid de
   .diferencial__grade ao lado; reaproveita o mesmo max-width de leitura
   de .diferencial__texto para não esticar linha em telas largas ────── */
.tributario__lista{margin-top:24px;max-width:56ch}

/* ── A Prosperium — o dado do Sebrae ─────────────────────
   Parágrafo de abertura + lista dos fatores citados na fonte. Reaproveita
   .lista-x (marcador neutro "–") porque são problemas citados pelo Sebrae,
   não benefícios da Prosperium — o "✓" de .lista-check ficaria enganoso
   aqui. */
.origem__texto{max-width:64ch;margin-bottom:24px}
.origem__texto:last-of-type{margin-bottom:0}
.origem__lista{max-width:56ch;margin:24px 0}

/* ── A Prosperium — história ─────────────────────────────
   Dois parágrafos corridos, largura de leitura confortável (a mesma de
   .diferencial__texto), sem grid ao lado. */
.historia__texto{max-width:68ch;margin-bottom:20px;color:var(--tinta-suave)}
.historia__texto:last-child{margin-bottom:0}

/* ── A Prosperium — "Nossa estratégia" com foto da sede ──────
   Imagens 2026-08-06, categoria 2 (fundo sutil). Fonte real: Office1.jpg
   (não sobre.webp, citada como exemplo no briefing) — mesma família de
   render 3D da recepção da sede, em resolução maior (1500×1095 contra
   600×450 de sobre.webp). Recorte escolhido a dedo: painel de madeira +
   porta de vidro + escritório ao fundo, SEM a marca-d'água "PROSPERIUM
   ASSESSORIA E TECNOLOGIA" que aparece no restante da parede — testado com
   o wordmark incluído e o resultado é ruim (texto duplicado meio-visível
   atrás do H2/parágrafo, decisão errada mesmo com contraste OK; corrigido
   para este recorte só de arquitetura). Fica clara (overlay --fundo-card a
   85%), não escura: a foto já é predominantemente clara (parede, vidro),
   então um overlay escuro seria um tratamento maior do que ela pede.
   Contraste no PIOR ponto: o pixel mais escuro da imagem final (preto puro,
   0,0,0 — friso da porta de vidro) misturado com o overlay a 85% dá
   #d2d5d9. --azul-naval nesse fundo passa em 6.80:1; --tinta (usado no
   parágrafo) passa em 11.08:1. Ver tools/contrast.py. --verde-texto (rótulo
   padrão) NÃO passa nesse pior ponto (3.44:1) — por isso o rótulo desta
   seção é sobrescrito para --azul-naval abaixo, em vez de manter o verde
   padrão de .rotulo. */
.secao--foto-sede{
  position:relative;
  background:
    linear-gradient(rgba(247,251,255,.85),rgba(247,251,255,.85)),
    url(/assets/img/a-prosperium-sede-1400.webp) center/cover no-repeat;
}
.secao--foto-sede .rotulo{color:var(--azul-naval)}

/* ── Contato — mapa (link externo, sem iframe) ───────────
   Só precisa do espaçamento acima do botão que .hero__cta já dá a pares
   de botões; aqui é um botão só, então basta a margem. */
.mapa__cta{margin-top:24px}

/* ── Contato — redes sociais em fundo claro ──────────────
   Mesmo ícone do rodapé (.rodape__rede), mas essa seção não é
   .secao--escura: cor do texto/borda trocada de branco para os tokens já
   verificados em fundo claro (--azul-naval e --borda, ver
   tools/contrast.py — mesmos pares usados em .cabecalho__nav a e
   .card__link, não é uma cor nova). */
.redes-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.redes-links a{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;
  border:1px solid var(--borda);color:var(--azul-naval);
  font-weight:600;text-decoration:none;
}
.redes-links a:hover,.redes-links a:focus-visible{
  border-color:var(--azul-naval);color:var(--verde-texto);
}
.redes-links svg{flex-shrink:0}

/* ── CEP sem quebra ───────────────────────────────────────
   Em colunas estreitas (.grade--3 do card "Endereço" em telas ~768px), o
   navegador trata o hífen de "89221-155" como ponto de quebra e separa o
   número ao meio. O texto em si continua com hífen normal (nada muda no
   endereço caractere a caractere); só a quebra de linha é impedida via CSS. */
.nao-quebra{white-space:nowrap}

/* ── Contato — dados da empresa ──────────────────────────
   Bloco de texto curto (razão social, CNPJ, endereço); só precisa de
   espaçamento vertical entre parágrafos porque o reset zera toda margin. */
.dados-empresa p{margin-bottom:10px}
.dados-empresa p:last-child{margin-bottom:0}

@media (max-width:640px){
  .grade--2,.grade--3,.grade--4{grid-template-columns:1fr}
  /* Leveza 2026-08-06: era "body{font-size:16px}" aqui — regra redundante
     agora que o corpo padrão já é 16px (antes era 17px). Removida. */
  .rodape__redes{justify-content:center}
  .rodape__marca{text-align:center}
  .rodape__logo-bloco{display:flex}

  .etapas{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center;text-align:center}
  .credibilidade__lista{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .credibilidade__lista p{padding-left:0}
  .credibilidade__lista p::before{display:none}
}