/* ═══════════════════════════════════════════════════════════════════
   FICOUNT · estrutura comum: cores, topo, rodapé e WhatsApp flutuante
   Vale para todas as páginas, inclusive o simulador (/diagnostico/), que
   tem estilo próprio para o resto. Por isso os seletores daqui ficam presos
   ao topo e ao rodapé (.topo …, .rodape …): nada vaza para o simulador.
   Cores e fontes da marca (CLAUDE.md → Identidade da marca).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --tinta:#0C1416; --petroleo:#226961; --verde-cl:#4E9A92;
  --sage:#8FB4AF;  --dourado:#C29E64;  --creme:#F9FAF9;
  --branco:#FFFFFF;
  --texto:#0C1416; --suave:#4B5B57; --fraco:#6E7D79;
  --linha:#DCE4E2; --faixa:#EEF3F2; --petroleo-escuro:#1B554E; --petroleo-claro:#E4EFED;
  --titulo:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --corpo:'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --largura:1120px; --raio:14px;
  --sombra:0 1px 2px rgba(12,20,22,.04), 0 8px 24px rgba(12,20,22,.06);
  /* ritmo do movimento: devagar e suave */
  --suave-sai:cubic-bezier(.16,1,.3,1);
}

.pular{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--tinta); color:#fff;
  padding:10px 16px; border-radius:8px; }
.pular:focus{ left:12px; }

.topo > .wrap, .rodape > .wrap{ width:100%; max-width:var(--largura); margin:0 auto; padding:0 24px; }
@media (max-width:560px){ .topo > .wrap, .rodape > .wrap{ padding:0 18px; } }

/* ── topo ── */
.topo{ position:sticky; top:0; z-index:40; background:rgba(249,250,249,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid transparent;
  font-family:var(--corpo); transition:border-color .22s ease, box-shadow .22s ease; }
.topo.rolou{ border-bottom-color:var(--linha); box-shadow:0 4px 18px rgba(12,20,22,.05); }
.topo > .wrap{ display:flex; align-items:center; gap:24px; min-height:72px; }
.topo .marca, .rodape .marca{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--tinta); }
.topo .marca svg, .rodape .marca svg{ width:30px; height:30px; flex:none; }
.topo .marca .nome, .rodape .marca .nome{ font:600 1.25rem/1 var(--titulo); letter-spacing:.2em; }
.menu{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.menu a{ color:var(--suave); text-decoration:none; font-size:.95rem; font-weight:500; padding:8px 12px; border-radius:8px;
  transition:background .16s ease, color .16s ease; }
.menu a:hover, .menu a[aria-current="page"]{ color:var(--tinta); background:var(--faixa); }
/* toque sem espera de zoom (o navegador não aguarda um segundo toque) */
a, button, summary, label{ touch-action:manipulation; }
.menu .topo-cta:active, .zap:active{ transform:scale(.97); }

/* ícone do WhatsApp nos botões que abrem o WhatsApp */
.ico-zap{ width:20px; height:20px; fill:currentColor; flex:none; }
.menu .topo-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-left:10px; min-height:44px;
  padding:10px 18px; border-radius:10px; background:var(--petroleo); color:#fff; font-weight:600; }
.menu .topo-cta:hover{ background:var(--petroleo-escuro); color:#fff; }
.abre-menu{ display:none; margin-left:auto; background:none; border:1.5px solid var(--linha); border-radius:10px;
  min-height:44px; padding:0 14px; font:600 .95rem var(--corpo); color:var(--tinta); cursor:pointer; align-items:center; gap:8px; }
.abre-menu span{ display:block; width:18px; height:2px; background:var(--tinta); position:relative; }
.abre-menu span::before,.abre-menu span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--tinta); }
.abre-menu span::before{ top:-6px; } .abre-menu span::after{ top:6px; }
@media (max-width:980px){
  .js .abre-menu{ display:inline-flex; }
  .js .menu{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:2px; padding:12px 18px 20px; background:var(--creme); border-bottom:1px solid var(--linha); box-shadow:0 18px 30px rgba(12,20,22,.08); }
  .js .topo.aberto .menu{ display:flex; }
  .menu a{ padding:12px 10px; font-size:1.05rem; }
  .menu .topo-cta{ margin:10px 0 0; }
  .menu{ flex-wrap:wrap; }
}

/* ── rodapé ── */
.rodape{ background:var(--tinta); color:var(--sage); padding-block:64px 36px; font:400 .95rem/1.6 var(--corpo); }
.rodape .colunas{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
.rodape p{ margin:0; }
.rodape h3{ color:#fff; font:600 .8rem var(--corpo); letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rodape a{ color:#E8EFED; text-decoration:none; }
.rodape a:hover{ color:#fff; text-decoration:underline; }
.rodape .marca{ color:#fff; margin-bottom:16px; }
.rodape .lema{ color:var(--dourado); font-family:var(--titulo); letter-spacing:.08em; margin-top:8px; }
.rodape .legal{ border-top:1px solid rgba(143,180,175,.25); margin-top:48px; padding-top:24px; font-size:.84rem; line-height:1.7; }
.rodape .legal p + p{ margin-top:8px; }
.rodape .legal b{ color:#E8EFED; font-weight:600; }
.rodape .redes{ display:flex; gap:10px; margin-top:20px; }
.rodape .redes a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#E8EFED;
  border:1px solid rgba(143,180,175,.35); transition:background .16s ease, border-color .16s ease, color .16s ease; }
.rodape .redes a:hover{ background:rgba(255,255,255,.08); border-color:var(--dourado); color:#fff; text-decoration:none; }
.rodape .redes svg{ width:18px; height:18px; }
@media (max-width:900px){ .rodape .colunas{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .rodape .colunas{ grid-template-columns:1fr; } }

/* ── WhatsApp flutuante ── */
.zap{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:30;
  display:inline-flex; align-items:center; gap:10px; background:#1F8F5F; color:#fff; text-decoration:none;
  padding:12px 18px 12px 14px; border-radius:999px; font:600 .95rem/1.2 var(--corpo); box-shadow:0 10px 24px rgba(12,20,22,.22);
  transition:background .16s ease; }
.zap svg{ width:24px; height:24px; fill:currentColor; }
.zap:hover{ color:#fff; background:#197A51; }
@media (max-width:560px){ .zap span{ display:none; } .zap{ padding:14px; } }

@media (prefers-reduced-motion: reduce){
  .topo, .menu a, .zap{ transition:none !important; }
}