/* =========================================================
   GHS Engenharia — folha de estilo
   Cor, fonte e espaçamento se ajustam AQUI.
   ========================================================= */

:root{
  --azul:#151A3C;          /* azul exato da logo (G+ e texto) */
  --azul-vivo:#1D2350;     /* mesmo azul da logo, usado em botões e links — antes era um azul mais claro */
  --azul-vivo-escuro:#0B0E26; /* estado :hover/:active do azul-vivo */
  --azul-fundo:#0A0C22;    /* fundos escuros, ainda mais próximo do preto-azulado da logo */
  --azul-lavado:#EAEBF2;
  --cinza-logo:#A6A8AD;    /* cinza do "iS" da logo */
  --cinza-logo-escuro:#7D7F85;
  --grafite:#1A1D2B;
  --cinza:#5A6070;
  --linha:#DCE0EA;
  --concreto:#F4F4F7;
  --branco:#FFFFFF;
  --verde-zap:#25D366;
  --foco:#F2B705;
  --status-critico:#B33226; /* único tom novo: a paleta não tinha um "vermelho de alerta" para o resultado do Raio-X */

  --larg:min(1180px, 92vw);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px} /* cabeçalho fixo (.topo) não cobre o título ao pular para #âncoras */
body{
  font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;color:var(--grafite);background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.12;letter-spacing:-.018em;font-weight:700}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:var(--larg);margin-inline:auto}
.wrap.estreito{width:min(820px,92vw)}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

.titulo{font-size:clamp(31px,3.7vw,46px);color:var(--azul)}
.sub{margin-top:14px;color:var(--cinza);max-width:62ch;font-size:17.5px}
.bloco{padding:88px 0}

/* ícones */
.ico{width:20px;height:20px;flex-shrink:0;vertical-align:-4px}
.ico-grande{width:34px;height:34px;color:var(--azul-vivo);display:block;transition:transform .3s cubic-bezier(.2,.7,.3,1)}

/* botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;border-radius:4px;font-weight:600;font-size:15.5px;
  padding:11px 21px;white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn.grande{padding:15px 28px;font-size:17px}
.btn-cta{background:var(--azul-vivo);color:#fff;box-shadow:0 3px 12px rgba(29,35,80,.35)}
.btn-cta:hover{background:var(--azul-vivo-escuro);transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,14,38,.4)}
.btn-cta:active{transform:translateY(0)}
.btn-linha{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-linha:hover{border-color:#fff;background:rgba(255,255,255,.09);transform:translateY(-2px)}
/* variante "fantasma" para fundo claro (ex.: botões secundários dentro de cards brancos) */
.btn-fantasma{border:1.5px solid var(--azul-vivo);color:var(--azul-vivo);background:transparent}
.btn-fantasma:hover{background:var(--azul-vivo);color:#fff;transform:translateY(-2px)}

.ir{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15.5px;
  text-decoration:none;color:var(--azul-vivo);border-bottom:2px solid var(--azul-vivo);
  padding-bottom:1px;transition:color .18s ease,border-color .18s ease,gap .18s ease;
}
.ir:after{content:"→";display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.ir:hover{color:var(--azul);border-color:var(--azul)}
.ir:hover:after{transform:translateX(4px)}

/* ---------------- logo ---------------- */
/* logo de verdade (arquivo enviado pelo cliente), não mais texto estilizado.
   width:auto + height fixo mantém a proporção certa a partir do width/height
   do <img> no HTML — sem isso, o navegador esmaga a imagem (mesmo bug já visto
   na foto da fachada). Versão branca no rodapé porque o fundo lá é escuro e a
   logo colorida (azul-marinho + cinza) ficaria quase invisível. */
.marca{display:inline-flex;flex-shrink:0;text-decoration:none;line-height:1}
.marca img{display:block;width:auto;flex-shrink:0}
.topo .marca img{height:34px}
.rodape-marca img{height:24px}

/* ---------------- cabeçalho ---------------- */
.topo{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;gap:28px;padding:12px 0;position:relative}
.nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:15.5px;font-weight:500}
.nav a{text-decoration:none;color:var(--cinza);padding:3px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--azul);border-color:var(--azul-vivo)}
/* o quiz é o carro-chefe — destaca em amarelo no menu, igual o "Orçamento" se destaca em azul */
.nav a.nav-quiz{
  color:var(--azul-vivo-escuro);background:var(--foco);font-weight:700;
  padding:7px 14px;border-radius:100px;border-bottom:none;
}
.nav a.nav-quiz:hover{background:#FFC826;color:var(--azul-vivo-escuro);border-color:transparent}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linha);border-radius:4px;padding:9px 14px;font:inherit;font-weight:500;cursor:pointer;color:var(--azul)}

/* ---------------- hero ---------------- */
.hero{position:relative;isolation:isolate;color:#fff}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-veu{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg, rgba(21,26,60,.96) 0%, rgba(21,26,60,.88) 46%, rgba(21,26,60,.55) 100%);
}
.hero-txt{padding:104px 0 88px}
.olho{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:#C3CBEA;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  padding:7px 15px;border-radius:100px;margin-bottom:22px;
}
.hero h1{font-size:clamp(34px,4.5vw,56px);max-width:19ch}
/* o que a GHS faz, em duas frentes (incêndio / SST), logo abaixo do título */
.hero-lista{list-style:none;margin-top:22px;display:grid;gap:12px;max-width:62ch}
.hero-lista li{display:flex;gap:12px;align-items:flex-start;font-size:17.5px;line-height:1.5;color:#CDD4EC}
.hero-lista .ico{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:var(--foco)}
.hero-lista + .lede{margin-top:18px;font-size:17.5px}
.lede b{color:#fff;font-weight:600}
.lede{margin-top:20px;font-size:19.5px;color:#CDD4EC;max-width:56ch}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-nota{margin-top:16px;font-size:14.5px;color:#9AA3C8}

.hero-barra{background:var(--azul-vivo)}
.hero-barra-in{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:24px 0}
.hero-barra .ico{color:var(--cinza-logo);margin-bottom:7px;display:block;width:24px;height:24px;transition:transform .3s ease}
.hero-barra-in>div:hover .ico{transform:scale(1.12)}
.hero-barra b{font-family:'Archivo',sans-serif;font-size:17px;display:block}
.hero-barra span{font-size:14.5px;color:#B9BFDD;display:block;margin-top:2px}

/* ---------------- obrigatoriedade ---------------- */
.obrigatorio{background:var(--azul-lavado);padding:74px 0}
.obrigatorio h2{font-size:clamp(30px,3.6vw,44px);color:var(--azul);text-align:center}
.obrigatorio .sub{text-align:center;margin-inline:auto}
/* marca-texto amarelo na palavra-chave do título */
.destaque{
  color:inherit;padding:0 .08em;
  background:linear-gradient(transparent 55%, var(--foco) 55%, var(--foco) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
}
/* grid de 4 colunas iguais — com 8 selos isso sempre fecha 2 linhas simétricas,
   em vez do flex-wrap deixar um item sobrando sozinho numa linha */
.selos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:30px}
.selos li{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--branco);color:var(--azul);font-weight:600;font-size:15.5px;
  padding:10px 19px;border-radius:100px;border:1px solid #D3D8EC;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.selos li:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(21,26,60,.12);border-color:var(--azul-vivo)}
.selos .ico{width:17px;height:17px;color:var(--azul-vivo);transition:transform .3s ease}
.selos li:hover .ico{transform:scale(1.15)}

/* ---------------- serviços ---------------- */
/* flex em vez de grid: a última linha, se não fechar, fica centralizada em vez de colada à esquerda */
.grade{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.grade > .serv{flex:0 0 calc((100% - 40px) / 3)}
.serv{
  border:1px solid var(--linha);border-radius:6px;padding:26px 24px 24px;
  display:flex;flex-direction:column;background:var(--branco);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.serv:hover{border-color:var(--azul-vivo);box-shadow:0 14px 32px rgba(21,26,60,.14);transform:translateY(-6px)}
.serv:hover .ico-grande{transform:scale(1.15) rotate(-4deg)}
.serv .norma{
  display:inline-block;margin-top:16px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;color:var(--cinza-logo-escuro);transition:color .25s ease,letter-spacing .25s ease;
}
.serv:hover .norma{color:var(--azul-vivo);letter-spacing:.07em}
.serv h3{font-size:22px;color:var(--azul);margin:6px 0 9px}
.serv p{font-size:15.5px;color:var(--cinza);line-height:1.55}
.serv .ir{margin-top:auto;padding-top:16px;align-self:flex-start;border-bottom:0}
.serv .ir span{border-bottom:2px solid var(--azul-vivo)}

/* ---------------- etapas ---------------- */
.etapas{background:var(--concreto);padding:88px 0}
.clausulas{list-style:none;counter-reset:c;margin-top:44px;display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.clausulas li{counter-increment:c;transition:transform .25s ease}
.clausulas li:hover{transform:translateY(-4px)}
/* barrinha acima de cada etapa — elemento de verdade (não pseudo-elemento),
   pra poder ser o "sujeito" da scroll-timeline mais adiante */
.barra-etapa{display:block;height:3px;margin-bottom:16px;background:var(--azul-vivo);transform-origin:left;transition:background-color .25s ease}
.clausulas li:hover .barra-etapa{background:var(--cinza-logo)}
.clausulas li:before{
  content:counter(c) ".";font-family:'Archivo',sans-serif;font-weight:800;
  color:var(--azul-vivo);font-size:16px;display:block;margin-bottom:6px;transition:color .25s ease;
}
.clausulas li:hover:before{color:var(--cinza-logo-escuro)}
.clausulas h3{font-size:20px;color:var(--azul);margin-bottom:6px}
.clausulas p{font-size:15.5px;color:var(--cinza);line-height:1.5}

/* ---------------- cidades / cobertura nacional ---------------- */
.cidades{padding:80px 0}

.mapa-cobertura{
  margin-top:24px;display:grid;grid-template-columns:minmax(180px,400px) minmax(240px,1fr);column-gap:clamp(24px,5cqi,56px);container-type:inline-size;
  align-items:center;background:var(--concreto);border-radius:10px;padding:28px 40px;
}
.mapa-cobertura img,.mapa-br{width:100%;height:auto;max-height:400px;justify-self:center}
.mapa-cobertura img{object-fit:contain}

/* mapa interativo (js/mapa.js embute o SVG na página) */
.mapa-br{overflow:visible;touch-action:manipulation}
.mapa-br path{
  fill:#E4E6EF;stroke:#fff;stroke-width:.7;stroke-linejoin:round;cursor:pointer;
  transform-box:fill-box;transform-origin:center;
  transition:fill .25s ease,transform .3s cubic-bezier(.2,.7,.3,1),filter .3s ease,stroke .25s ease;
}
.mapa-br path.atende{fill:var(--azul-vivo)}
/* estado onde a GHS já atuou: acende num azul mais claro, cresce e ganha sombra */
.mapa-br path.atende.ativo{fill:#3B4799;transform:scale(1.08);filter:drop-shadow(0 6px 8px rgba(21,26,60,.4))}
/* estado onde ainda não atuou: só contorno tracejado, sem "pular" */
.mapa-br path:not(.atende).ativo{fill:#fff;stroke:var(--cinza-logo-escuro);stroke-width:1.2;stroke-dasharray:3 2.5}

.mapa-info{min-height:170px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.mapa-selo{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;color:var(--azul-vivo);background:var(--azul-lavado);padding:5px 12px;border-radius:99px;
  border:1.5px solid transparent;
}
.mapa-estado{
  display:block;margin-top:14px;font-family:'Archivo',sans-serif;font-weight:800;line-height:1.05;
  font-size:clamp(30px,6.4cqi,60px);color:var(--azul);letter-spacing:-.01em;
}
.mapa-desc{margin-top:12px;color:var(--cinza);max-width:42ch}
.mapa-info.atende .mapa-selo{background:var(--azul-vivo);color:#fff}
.mapa-info.nao-atende .mapa-selo{background:transparent;color:var(--cinza);border-color:var(--cinza-logo-escuro);border-style:dashed}
.mapa-info.nao-atende .mapa-estado{color:var(--cinza-logo-escuro)}

.lista-cidades{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lista-cidades li{
  border:1px solid var(--linha);border-radius:4px;padding:9px 17px;
  font-size:15.5px;font-weight:500;color:var(--azul);background:var(--concreto);
  transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
}
.lista-cidades li:hover{background:var(--azul-vivo);color:#fff;border-color:var(--azul-vivo);transform:translateY(-3px)}

/* ---------------- obras ---------------- */
.obras-grid{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.obra{border:1px solid var(--linha);border-radius:6px;overflow:hidden;background:var(--branco);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.obra:hover{border-color:var(--azul-vivo);box-shadow:0 14px 30px rgba(21,26,60,.14);transform:translateY(-5px)}
.obra img{width:100%;height:252px;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.obra:hover img{transform:scale(1.06)}
.obra figcaption{padding:16px 18px}
.obra figcaption b{font-family:'Archivo',sans-serif;font-size:17.5px;color:var(--azul);display:block}
.obra figcaption span{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--cinza);margin-top:3px}
.obra figcaption .ico{width:15px;height:15px;color:var(--azul-vivo)}
.obra.vazia{display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:var(--concreto)}
.obra.vazia ul{list-style:none}
.obra.vazia li{padding:11px 0;border-bottom:1px solid var(--linha);font-size:16px}
.obra.vazia .ir{margin-top:18px;align-self:flex-start}

/* ---------------- empresa ---------------- */
/* dobra em azul — quebra o trecho todo branco entre a fita do quiz e o contato */
.empresa{padding:88px 0;background:var(--azul)}
.empresa .titulo{color:#fff}
.empresa-in{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.empresa-in p{margin-top:18px;color:#CDD4EC;font-size:17.5px}
.empresa-in img{border-radius:6px;height:100%;max-height:420px;width:100%;object-fit:cover}
.empresa .ir{color:#fff;border-color:rgba(255,255,255,.55)}
.empresa .ir:hover{color:var(--foco);border-color:var(--foco)}

/* ---------------- dúvidas ---------------- */
.faq{margin-top:34px;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;color:var(--azul);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:"+";position:absolute;right:4px;top:16px;
  font-size:26px;font-weight:400;color:var(--azul-vivo);line-height:1;
}
.faq details[open] summary:after{content:"–"}
.faq p{padding:0 0 22px;color:var(--cinza);font-size:16.5px;max-width:72ch}

/* ---------------- contato ---------------- */
.contato{background:var(--azul);color:#fff;padding:88px 0}
.contato .titulo{color:#fff}
.contato .sub{color:#B7BEDD}
.contato-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.unidade{border-top:1px solid rgba(255,255,255,.16);padding:20px 0;margin-top:12px}
.unidade h3{display:flex;align-items:center;gap:9px;font-size:21px}
/* Fundo da seção é --azul: --azul-vivo (escurecido para o tom da logo) ficava invisível aqui. */
.unidade h3 .ico{color:var(--cinza-logo)}
.unidade p{color:#A7AFD0;font-size:15.5px;margin:5px 0 10px}
.unidade a{color:#fff;text-decoration:none;font-weight:600;font-size:18px;border-bottom:2px solid rgba(255,255,255,.55)}

/* Escopado em #orcamento (não em "form"/"label"/"input" soltos) — esses seletores
   são o estilo do formulário de contato da home; sem escopo eles vazavam para
   QUALQUER formulário da página, inclusive o do Quiz de SST. */
#orcamento{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:28px}
#orcamento h3{font-size:26px}
.form-nota{font-size:14.5px;color:#A7AFD0;margin:4px 0 18px}
#orcamento label{display:block;font-size:14px;font-weight:600;color:#C6CCE8;margin:14px 0 6px}
#orcamento input,#orcamento select,#orcamento textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:16px;color:#fff;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.22);border-radius:4px;
}
#orcamento textarea{min-height:94px;resize:vertical}
#orcamento button{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:22px;padding:15px;background:var(--azul-vivo);color:#fff;
  border:0;border-radius:4px;font:inherit;font-size:17px;font-weight:600;cursor:pointer;
}
#orcamento button:hover{background:var(--azul-vivo-escuro)}

/* ---------------- rodapé e flutuante ---------------- */
.rodape{background:var(--azul-fundo);color:#8E95B5;font-size:14.5px;padding:30px 0}
.rodape-in{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.rodape a{color:#C4CAE4}
.flutua{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--verde-zap);color:#fff;text-decoration:none;font-weight:600;
  padding:13px 22px;border-radius:100px;box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
.flutua:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 26px rgba(0,0,0,.34)}

/* ---------------- responsivo ---------------- */
@media (max-width:1000px){
  .grade > .serv{flex-basis:calc((100% - 20px) / 2)}
  .clausulas{grid-template-columns:repeat(2,1fr)}
  .obras-grid{grid-template-columns:1fr 1fr}
  .empresa-in,.contato-in{grid-template-columns:1fr;gap:44px}
  .empresa-in img{max-height:320px}
  .hero-barra-in{grid-template-columns:1fr;gap:18px}
  .mapa-cobertura{grid-template-columns:1fr;row-gap:20px;text-align:center;padding:24px}
  .mapa-cobertura img,.mapa-br{max-width:300px;max-height:310px;margin-inline:auto}
  .mapa-info{align-items:center;min-height:150px}
  .selos{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .nav.aberto{
    display:flex;flex-direction:column;gap:16px;margin:0;
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--linha);padding:20px 4vw;
  }
  .menu-btn{display:block}
  .topo .btn-cta{display:none}
}
@media (max-width:680px){
  body{font-size:16px}
  .bloco,.etapas,.empresa,.contato,.cidades{padding:56px 0}
  .obrigatorio{padding:48px 0}
  .hero-txt{padding:40px 0 84px}
  .hero-acoes{margin-top:22px}
  .lede{margin-top:14px}
  .obras-grid,.clausulas{grid-template-columns:1fr}
  .grade > .serv{flex-basis:100%}
  .hero-acoes .btn{width:100%}
  .topo .marca img{height:28px}
  .selos{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:no-preference){
  .olho,.hero h1,.hero-lista,.lede,.hero-acoes{animation:entra .6s cubic-bezier(.2,.7,.3,1) backwards}
  .hero h1{animation-delay:.06s}
  .hero-lista{animation-delay:.1s}
  .lede{animation-delay:.13s}
  .hero-acoes{animation-delay:.2s}
  @keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* =========================================================
   Páginas internas (serviços, empresa, blog)
   ========================================================= */

/* trilha / breadcrumb */
.trilha{padding:18px 0;border-bottom:1px solid var(--linha);background:var(--concreto)}
.trilha ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--cinza)}
.trilha a{text-decoration:none;color:var(--cinza)}
.trilha a:hover{color:var(--azul-vivo)}
.trilha li:not(:last-child):after{content:"/";margin-left:6px;color:#B6BBCB}
.trilha li:last-child{color:var(--azul);font-weight:600}

/* hero de página interna (serviço, empresa, blog) */
.pag-hero{background:var(--azul);color:#fff;padding:56px 0 50px}
.pag-hero .norma{
  display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:#AEB8F0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  padding:6px 13px;border-radius:100px;margin-bottom:16px;
}
/* variante amarela do selo — usada na página do quiz, o carro-chefe do site */
.pag-hero .norma.norma-destaque{
  color:var(--azul-vivo-escuro);background:var(--foco);border-color:transparent;font-weight:700;
}
.pag-hero .ico-grande{color:#fff;margin-bottom:14px}
.pag-hero .ico-raio-grande{width:52px;height:52px;color:var(--foco);margin-bottom:16px}
.pag-hero h1{font-size:clamp(30px,4vw,44px);max-width:22ch;color:#fff}
.pag-hero p.lede{color:#CDD4EC;margin-top:16px;max-width:60ch;font-size:18px}
.pag-hero .hero-acoes{margin-top:28px}

/* corpo de texto (artigo de serviço / post do blog) */
.conteudo{padding:64px 0}
.conteudo-in{display:grid;grid-template-columns:2fr 1fr;gap:56px;align-items:start}
.prosa h2{font-size:26px;color:var(--azul);margin-top:40px;margin-bottom:14px}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:20px;color:var(--azul);margin-top:26px;margin-bottom:10px}
.prosa p{color:var(--grafite);font-size:16.5px;margin-bottom:16px;max-width:68ch}
.prosa ul,.prosa ol{margin:0 0 20px 22px;color:var(--grafite);font-size:16.5px}
.prosa li{margin-bottom:9px;line-height:1.55}
.prosa ul.lista-check{list-style:none;margin-left:0}
.prosa ul.lista-check li{display:flex;gap:10px;align-items:flex-start}
.prosa ul.lista-check .ico{color:var(--azul-vivo);flex-shrink:0;margin-top:3px}
/* height:auto é essencial aqui: a imagem tem width/height fixos no HTML (evita
   layout shift) + max-width inline — sem isso o navegador mantém a altura fixa
   do atributo e só encolhe a largura, esmagando a foto e deixando tudo "torto" */
.prosa img{border-radius:6px;margin:8px 0 28px;height:auto}
.prosa a:not(.btn){color:var(--azul-vivo);font-weight:600;text-decoration:underline}
/* tabelas dos posts: rolam de lado no celular em vez de estourar a tela */
.conteudo-in > *{min-width:0} /* sem isso a coluna da grade cresce até caber a tabela inteira */
.tabela-rolagem{overflow-x:auto;margin:6px 0 24px;border:1px solid var(--linha);border-radius:6px}
.tabela{width:100%;border-collapse:collapse;font-size:15px;color:var(--grafite);min-width:460px}
.tabela caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:13.5px;color:var(--cinza)}
.tabela th,.tabela td{padding:11px 14px;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top}
.tabela thead th{background:var(--concreto);color:var(--azul);font-weight:600}
.tabela tbody th{font-weight:500}
.tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}

/* barra lateral (páginas de serviço) */
.lateral{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.caixa-lateral{border:1px solid var(--linha);border-radius:6px;padding:22px}
.caixa-lateral h3{font-size:18px;color:var(--azul);margin-bottom:12px}
.caixa-lateral ul{list-style:none;display:flex;flex-direction:column;gap:9px}
/* :not(.btn) — sem isso, essa regra ganhava dos botões (.btn-cta, .btn-fantasma...)
   dentro da caixa lateral e pintava o texto do botão de cinza, cortando o contraste
   com o fundo azul-escuro do botão */
.caixa-lateral a:not(.btn){text-decoration:none;color:var(--cinza);font-size:15.5px;font-weight:500}
.caixa-lateral a:not(.btn):hover{color:var(--azul-vivo)}
.caixa-lateral.zap{background:var(--azul-lavado);border-color:#D3D8EC}
.caixa-lateral.zap p{font-size:15px;color:var(--cinza);margin-bottom:14px}
.caixa-lateral.raiox{background:var(--branco);border:2px solid var(--azul-vivo)}
.caixa-lateral.raiox p{font-size:15px;color:var(--cinza);margin-bottom:14px}
.caixa-lateral .btn{width:100%}

/* faixa de chamada (CTA) reutilizável */
.fita-cta{background:var(--azul-vivo);color:#fff;padding:56px 0}
.fita-cta-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.fita-cta-texto{max-width:640px}
.fita-cta h2{font-size:clamp(24px,2.8vw,32px);color:#fff;max-width:34ch}
.fita-cta p{color:#DCE1F6;margin-top:10px}

/* selo amarelo em destaque acima do título — chama atenção antes do texto */
.fita-cta-selo{
  display:inline-flex;align-items:center;gap:7px;background:var(--foco);color:var(--azul-vivo-escuro);
  font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;
  padding:6px 14px;border-radius:100px;margin-bottom:14px;
}
.fita-cta-selo .ico{width:15px;height:15px}

/* CTA principal do quiz — amarelo em vez do padrão azul, é o "carro-chefe" do site */
.btn-quiz{
  background:var(--foco);color:var(--azul-vivo-escuro);font-size:17.5px;font-weight:800;
  box-shadow:0 6px 24px rgba(242,183,5,.5);flex-shrink:0;
}
.btn-quiz:hover{background:#FFC826;transform:translateY(-3px) scale(1.02);box-shadow:0 10px 32px rgba(242,183,5,.65)}
.btn-quiz:active{transform:translateY(0) scale(1)}
.ico-raio{width:24px;height:24px;flex-shrink:0}

/* relacionados */
.relacionados{margin-top:46px}
.relacionados h2{font-size:22px;color:var(--azul);margin-bottom:20px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{
  border:1px solid var(--linha);border-radius:6px;padding:18px 20px;text-decoration:none;
  display:block;transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.rel-card:hover{border-color:var(--azul-vivo);transform:translateY(-4px);box-shadow:0 10px 24px rgba(21,26,60,.12)}
.rel-card .norma{display:block;font-size:12px;font-weight:600;color:var(--cinza-logo-escuro);letter-spacing:.03em;margin-bottom:6px;transition:color .22s ease}
.rel-card:hover .norma{color:var(--azul-vivo)}
.rel-card b{font-family:'Archivo',sans-serif;color:var(--azul);font-size:16.5px;display:block}

/* imagem-placeholder (usada enquanto não há fotos reais) */
.foto-placeholder{position:relative;background:var(--azul-lavado)}
.foto-placeholder img{width:100%;height:100%;object-fit:cover;opacity:.9}

/* ---------------- blog ---------------- */
.blog-intro{padding:56px 0 12px}
.blog-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:88px}
.post-card{border:1px solid var(--linha);border-radius:6px;overflow:hidden;background:var(--branco);text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.7,.3,1)}
.post-card:hover{border-color:var(--azul-vivo);box-shadow:0 14px 30px rgba(21,26,60,.14);transform:translateY(-6px)}
.post-card img{width:100%;height:190px;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.post-card:hover img{transform:scale(1.06)}
.post-card .post-corpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card .tag{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--azul-vivo);text-transform:uppercase}
.post-card h2{font-family:'Archivo',sans-serif;font-size:19.5px;color:var(--azul);margin:8px 0 10px;line-height:1.3}
.post-card p{color:var(--cinza);font-size:15px;line-height:1.55;flex:1}
.post-card time{margin-top:14px;font-size:13.5px;color:#9198B3}
/* um post só: cartão largo, imagem à esquerda (em vez de um cartão sozinho na 1ª coluna) */
.blog-grid.um-post{grid-template-columns:1fr}
.post-card.destaque{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.post-card.destaque img{height:100%;min-height:260px}
.post-card.destaque .post-corpo{padding:30px 32px;justify-content:center}
.post-card.destaque h2{font-size:24px}

/* página de post individual */
.post-cabecalho{padding:52px 0 0}
.post-cabecalho .tag{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--azul-vivo);text-transform:uppercase}
.post-cabecalho h1{font-size:clamp(28px,3.8vw,42px);color:var(--azul);margin:14px 0 16px;max-width:24ch}
.post-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--cinza);font-size:14.5px;margin-bottom:6px}
/* margin-top (não "margin" curto) — a versão curta zerava as margens
   esquerda/direita e cancelava o margin-inline:auto que centraliza o .wrap,
   fazendo a imagem "escorregar" pra esquerda e sobrar um vão vazio à direita */
.post-capa{margin-top:34px;border-radius:6px;overflow:hidden}
.post-capa img{width:100%;height:380px;object-fit:cover}

/* ---------------- 404 ---------------- */
.erro404{padding:130px 0;text-align:center}
.erro404 .num{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(60px,10vw,120px);color:var(--azul-vivo);line-height:1}
.erro404 h1{margin-top:6px}
.erro404 p{margin:16px auto 30px;color:var(--cinza);max-width:50ch}

/* ---------------- rodapé com colunas (sitemap interno) ---------------- */
.rodape-mapa{background:var(--azul-fundo);color:#B9BEDA;padding:60px 0 30px}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.09)}
.rodape-grade p{color:#8E95B5;font-size:14.5px;margin-top:12px;max-width:34ch}
.rodape-grade h3{font-family:'Archivo',sans-serif;font-size:15px;color:#fff;margin-bottom:16px;letter-spacing:.02em}
.rodape-grade ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.rodape-grade a{color:#B9BEDA;text-decoration:none;font-size:14.5px}
.rodape-grade a:hover{color:#fff}
.rodape-baixo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:14px;color:#8E95B5}
.rodape-baixo a{color:#C4CAE4}

/* ---------------- responsivo (páginas internas) ---------------- */
@media (max-width:1000px){
  .conteudo-in{grid-template-columns:1fr}
  .lateral{position:static;flex-direction:row;flex-wrap:wrap}
  .caixa-lateral{flex:1;min-width:240px}
  .rel-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .rodape-grade{grid-template-columns:1fr 1fr;gap:34px 24px}
}
@media (max-width:680px){
  .pag-hero{padding:40px 0 36px}
  .conteudo{padding:44px 0}
  .rel-grid,.blog-grid{grid-template-columns:1fr}
  .post-card.destaque{display:flex}
  .post-card.destaque img{height:190px;min-height:0}
  .post-card.destaque .post-corpo{padding:20px 22px 24px}
  .post-card.destaque h2{font-size:19.5px}
  .fita-cta-in{flex-direction:column;align-items:flex-start}
  .fita-cta .btn{width:100%}
  .post-capa img{height:220px}
  .rodape-grade{grid-template-columns:1fr}
  .lateral{flex-direction:column}
}

/* =========================================================
   Animações contínuas e de componentes
   (as animações de entrada ao rolar ficam no bloco "Efeitos
   dinâmicos", no fim do arquivo, junto com js/efeitos.js)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  /* etapas do AVCB: a barrinha azul acima de cada etapa "carrega" da esquerda
     pra direita conforme a seção entra na tela. Feito com IntersectionObserver
     (JS, no fim do index.html) em vez de animation-timeline:view() — essa
     propriedade CSS só roda em Chrome/Edge; assim funciona em qualquer navegador.
     A classe .js-anima só é adicionada pelo JS, então sem JS (ou com JS quebrado)
     a barrinha fica cheia e azul o tempo todo — nunca some. */
  .js-anima .barra-etapa{transform:scaleX(0);transition:transform .7s ease-out}
  .js-anima .barra-etapa.carregada{transform:scaleX(1)}
  .js-anima .clausulas li:nth-child(2) .barra-etapa{transition-delay:.12s}
  .js-anima .clausulas li:nth-child(3) .barra-etapa{transition-delay:.24s}
  .js-anima .clausulas li:nth-child(4) .barra-etapa{transition-delay:.36s}
  .js-anima .clausulas li:nth-child(5) .barra-etapa{transition-delay:.48s}

  /* o botão do WhatsApp "respira" discretamente para chamar atenção */
  .flutua{animation:respira 3.2s ease-in-out infinite}
  .flutua:hover{animation-play-state:paused}
  @keyframes respira{
    0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.28)}
    50%{box-shadow:0 6px 22px rgba(37,211,102,.55)}
  }

  /* o CTA amarelo do quiz pulsa devagar — é o botão que mais queremos que clique */
  .flutua-quiz{animation:pulsa-quiz 2.6s ease-in-out infinite}
  .flutua-quiz:hover{animation-play-state:paused}
  @keyframes pulsa-quiz{
    0%,100%{box-shadow:0 6px 24px rgba(242,183,5,.5)}
    50%{box-shadow:0 6px 30px rgba(242,183,5,.9)}
  }

  /* o raio grande no topo do quiz "acende" devagar, discreto */
  .ico-raio-grande{animation:acende-raio 2.6s ease-in-out infinite}
  @keyframes acende-raio{
    0%,100%{opacity:1}
    50%{opacity:.55}
  }
}

/* =========================================================
   Raio-X da Conformidade — quiz de diagnóstico SST
   ========================================================= */

/* hero da página do quiz — lista de benefícios + CTA que rola até o quiz */
.raiox-beneficios{
  list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:24px;
}
.raiox-beneficios li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#CDD4EC}
.raiox-beneficios .ico{width:18px;height:18px;color:var(--foco);flex-shrink:0}
.raiox-hero-nota{font-size:14px;font-weight:500;color:#9AA3C8}

.quiz-secao{padding:56px 0 100px}
.quiz-shell{width:min(640px,94vw);margin-inline:auto}

.quiz-card{
  background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  padding:36px 32px;box-shadow:0 10px 34px rgba(21,26,60,.08);
}

/* barra de progresso */
.quiz-progresso{margin-bottom:26px}
.quiz-progresso-texto{font-size:13.5px;font-weight:600;color:var(--cinza);margin-bottom:8px;display:flex;justify-content:space-between}
.quiz-progresso-trilha{height:6px;border-radius:100px;background:var(--linha);overflow:hidden}
.quiz-progresso-barra{height:100%;background:var(--azul-vivo);border-radius:100px;transition:width .35s cubic-bezier(.2,.7,.3,1)}

/* tela de abertura */
.quiz-abertura{text-align:center;padding:12px 0}
.quiz-abertura .selo-tempo{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--azul-vivo);background:var(--azul-lavado);padding:7px 15px;border-radius:100px;margin-bottom:18px;
}
.quiz-abertura h2{font-size:clamp(24px,3.6vw,30px);color:var(--azul);margin-bottom:14px}
/* o título de cada etapa recebe foco por script (pra leitor de tela avisar a troca de tela) —
   como tem tabindex="-1", nunca é alcançado pelo Tab do teclado, então o anel de foco
   visível só atrapalha (virou uma caixa amarela em volta do título) */
[data-foco-inicial]:focus{outline:none}
.quiz-abertura p{color:var(--cinza);font-size:16.5px;max-width:46ch;margin-inline:auto}
.quiz-abertura .btn{margin-top:26px}
.quiz-abertura .quiz-nota-legal{margin-top:16px;font-size:13px;color:#9198B3}

/* pergunta */
.quiz-pergunta h2{font-size:21px;color:var(--azul);margin-bottom:22px;line-height:1.4}
.quiz-opcoes{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.quiz-opcao{flex:1 1 150px}
.quiz-opcao label{
  display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  border:1.5px solid var(--linha);border-radius:8px;padding:14px 16px;
  font-weight:600;font-size:15.5px;color:var(--azul);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
  min-height:52px;
}
.quiz-opcao input{position:absolute;opacity:0;width:1px;height:1px}
.quiz-opcao label:hover{border-color:var(--azul-vivo)}
.quiz-opcao input:checked + label{
  border-color:var(--azul-vivo);background:var(--azul-vivo);color:#fff;transform:translateY(-1px);
}
.quiz-opcao input:focus-visible + label{outline:3px solid var(--foco);outline-offset:2px}
/* perguntas com 4+ opções (Q0/Q1) ficam empilhadas — mais fáceis de ler no celular */
.quiz-opcoes.empilhada .quiz-opcao{flex-basis:100%}
.quiz-opcoes.empilhada label{justify-content:flex-start;text-align:left}

.quiz-dica{margin-top:14px;font-size:13px;color:#9198B3;text-align:center}

.quiz-nav-botoes{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:14px}
.quiz-nav-botoes .btn-voltar{
  background:none;border:0;color:var(--cinza);font-weight:600;font-size:15px;cursor:pointer;
  padding:11px 6px;display:inline-flex;align-items:center;gap:6px;
}
.quiz-nav-botoes .btn-voltar:hover{color:var(--azul-vivo)}

/* só pra leitor de tela / teclado (Enter avança) — invisível na tela */
.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;
}

/* explicação de cada item faltante, no resultado */
.quiz-itens-faltantes .item-faltante{display:flex;flex-direction:column;gap:3px}
.quiz-itens-faltantes .item-texto{font-weight:600;color:var(--azul)}
.quiz-itens-faltantes .item-porque{font-size:13.5px;color:var(--cinza);line-height:1.45}

/* ---------- transição entre perguntas (avanço automático) ---------- */
@media (prefers-reduced-motion:no-preference){
  .quiz-card.entra-direita{animation:quiz-entra-dir .32s cubic-bezier(.2,.7,.3,1) both}
  .quiz-card.entra-esquerda{animation:quiz-entra-esq .32s cubic-bezier(.2,.7,.3,1) both}
  .quiz-card.sai-esquerda{animation:quiz-sai-esq .22s ease-in both}
  .quiz-card.sai-direita{animation:quiz-sai-dir .22s ease-in both}
  @keyframes quiz-entra-dir{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
  @keyframes quiz-entra-esq{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
  @keyframes quiz-sai-esq{to{opacity:0;transform:translateX(-40px)}}
  @keyframes quiz-sai-dir{to{opacity:0;transform:translateX(40px)}}

  /* "pulso" na opção escolhida: confirma que a resposta foi registrada */
  .quiz-opcao input:checked + label{animation:quiz-escolha .26s ease-out}
  @keyframes quiz-escolha{0%{transform:scale(.97)}60%{transform:scale(1.03)}100%{transform:translateY(-1px)}}
}
.quiz-lead .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* calculando */
.quiz-calculando{text-align:center;padding:50px 0}
.quiz-spinner{
  width:44px;height:44px;border-radius:50%;margin:0 auto 22px;
  border:4px solid var(--linha);border-top-color:var(--azul-vivo);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.quiz-calculando p{color:var(--cinza);font-weight:600}

/* resultado */
.quiz-resultado-topo{text-align:center;padding-bottom:26px;border-bottom:1px solid var(--linha);margin-bottom:26px}
.quiz-alerta-autuacao{
  background:#FBEAE7;border:1px solid var(--status-critico);color:#7A2418;
  border-radius:6px;padding:12px 16px;font-size:14px;text-align:left;margin-bottom:22px;
}
.quiz-score{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(48px,10vw,68px);line-height:1;color:var(--faixa-cor,var(--azul))}
.quiz-score .pct{font-size:.4em;font-weight:700}
.quiz-faixa-badge{
  display:inline-block;margin-top:10px;padding:7px 18px;border-radius:100px;
  font-weight:700;font-size:14.5px;color:#fff;background:var(--faixa-cor,var(--azul));
}
/* faixas de cor clara (amarelo / verde): texto branco ficava ilegível (contraste < 2:1) */
[data-faixa="atencao"] .quiz-faixa-badge,[data-faixa="conforme"] .quiz-faixa-badge{color:var(--grafite)}
.quiz-resultado-texto{margin-top:16px;color:var(--grafite);font-size:16px;max-width:48ch;margin-inline:auto}
.quiz-resultado-aplicaveis{margin-top:8px;color:var(--cinza);font-size:14.5px}

.quiz-itens-faltantes{margin:0 0 30px}
.quiz-itens-faltantes h3{font-size:16px;color:var(--azul);margin-bottom:14px}
.quiz-itens-faltantes ol{list-style:none;display:flex;flex-direction:column;gap:10px}
.quiz-itens-faltantes li{
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--linha);
  border-radius:6px;font-size:14.5px;color:var(--grafite);
}
.quiz-itens-faltantes .num{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--status-critico);color:#fff;
  font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;
}

/* captura de lead — bloco em destaque, para "puxar" o olho depois do resultado */
.quiz-lead{
  margin-top:30px;padding:26px 24px;background:var(--azul-lavado);
  border:1px solid var(--linha);border-radius:10px;
}
.quiz-lead-selo{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--azul-vivo);background:var(--branco);border:1px solid var(--linha);
  padding:6px 13px;border-radius:100px;margin-bottom:14px;
}
.quiz-lead-selo .ico{width:15px;height:15px}
.quiz-lead h3{font-size:20px;color:var(--azul);margin-bottom:6px}
.quiz-lead > p{color:var(--cinza);font-size:15px;margin-bottom:16px}
.quiz-lead-beneficios{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.quiz-lead-beneficios li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--grafite);font-weight:500}
.quiz-lead-beneficios .ico{width:16px;height:16px;color:var(--verde-zap);flex-shrink:0}
.quiz-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quiz-lead label{display:block;font-size:13.5px;font-weight:600;color:var(--grafite);margin-bottom:6px}
.quiz-lead input[type="text"],.quiz-lead input[type="email"],.quiz-lead input[type="tel"]{
  width:100%;padding:12px 13px;font:inherit;font-size:15.5px;color:var(--grafite);
  background:var(--branco);border:1.5px solid var(--linha);border-radius:6px;
}
.quiz-lead input:focus-visible{outline:3px solid var(--foco);outline-offset:1px;border-color:var(--azul-vivo)}
.quiz-lead .campo-largo{grid-column:1 / -1}
/* honeypot anti-spam: fora da tela, mas continua no DOM/fluxo do documento
   (display:none seria ignorado por alguns bots) — só um humano nunca preenche */
.hp-campo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quiz-consentimento{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;font-size:13.5px;color:var(--cinza)}
.quiz-consentimento input{margin-top:3px}
.quiz-consentimento a{color:var(--azul-vivo);font-weight:600}
.quiz-lead-erro{color:var(--status-critico);font-size:13.5px;margin-top:10px}
.quiz-lead-sucesso{
  text-align:center;padding:20px 0;color:var(--azul);font-weight:600;font-size:16px;
}
.quiz-lead-sucesso .ico{color:var(--verde-zap);width:32px;height:32px;display:block;margin:0 auto 10px}

.quiz-ctas{display:flex;flex-direction:column;gap:12px;margin-top:24px}
/* white-space:normal também no celular: com o nowrap do .btn, "Receber o plano de ação
   por e-mail" (~370px) alargava o formulário inteiro além da tela em aparelhos de 360-414px. */
.quiz-ctas .btn{width:100%;white-space:normal;text-align:center}

.quiz-reiniciar-wrap{text-align:center;margin-top:22px}
.quiz-reiniciar{
  display:inline-flex;align-items:center;gap:7px;background:none;border:none;
  color:var(--azul-vivo);font-weight:600;font-size:14.5px;font-family:inherit;
  cursor:pointer;padding:6px 2px;
}
.quiz-reiniciar .ico{width:16px;height:16px}
.quiz-reiniciar:hover{text-decoration:underline}

.quiz-disclaimer{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--linha);
  font-size:12.5px;color:#9198B3;line-height:1.6;text-align:center;
}

@media (min-width:560px){
  /* grid em vez de flex-row: stretch de altura entre <a> e <button> é bem mais confiável em grid
     (flex tem inconsistência conhecida esticando botões nativos) */
  .quiz-ctas{display:grid;grid-template-columns:1fr 1fr}
  /* min-width:0 é essencial aqui: sem isso, um grid item com white-space:nowrap
     nunca encolhe abaixo do tamanho do próprio texto — o botão "estoura" a coluna
     de 1fr e os dois ficam com larguras diferentes (o "botão torto"). Com
     min-width:0 + white-space:normal, o texto quebra em 2 linhas se precisar,
     e os dois botões respeitam a mesma coluna de 50%. */
  .quiz-ctas .btn{width:auto;height:100%;min-width:0;white-space:normal;text-align:center}
}
@media (max-width:560px){
  .quiz-card{padding:26px 18px}
  .quiz-lead{padding:20px 16px}
  .quiz-lead-grid{grid-template-columns:minmax(0,1fr)} /* minmax(0,…): a coluna nunca passa da largura do cartão */
}
@media (prefers-reduced-motion:reduce){
  .quiz-spinner{animation-duration:1.6s}
}

/* =========================================================
   Efeitos dinâmicos (js/efeitos.js) — VERSÃO DE TESTE
   Tudo aqui só age com a classe .efeitos (posta pelo JS) ou dentro de
   prefers-reduced-motion:no-preference. Sem JS / com "reduzir
   movimento", o site fica exatamente como antes.
   ========================================================= */

/* barra de progresso de leitura */
.barra-rolagem{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none;
  background:linear-gradient(90deg,var(--foco),#FFD24D);transform-origin:left;transform:scaleX(0);
}

/* cabeçalho fica mais baixo e ganha sombra depois de rolar */
.topo{transition:box-shadow .25s ease}
.topo-in{transition:padding .25s ease}
.topo .marca img{transition:height .25s ease}
.topo.rolou{box-shadow:0 6px 22px rgba(21,26,60,.09)}
.topo.rolou .topo-in{padding:7px 0}
.topo.rolou .marca img{height:28px}

/* sublinhado do menu "cresce" da esquerda (o Quiz SST mantém a pílula amarela) */
.nav a:not(.nav-quiz){
  border-bottom:0;padding-bottom:4px;
  background:linear-gradient(var(--azul-vivo),var(--azul-vivo)) 0 100% / 0 2px no-repeat;
  transition:background-size .28s cubic-bezier(.2,.7,.3,1),color .2s ease;
}
.nav a:not(.nav-quiz):hover{background-size:100% 2px}

/* a capa não deixa a foto "vazar" com o zoom/parallax */
.hero{overflow:clip}

/* brilho que segue o mouse nos cards */
.com-brilho:hover{
  background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(59,71,153,.16),transparent 62%);
}

@media (prefers-reduced-motion:no-preference){
  /* surgir ao rolar — animação (não transition) em opacity/translate, pra não
     atrasar nem brigar com o hover dos cards, que usa transform */
  .efeitos .surge{opacity:0}
  .efeitos .surge.visivel{animation:surgir .75s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--ordem,0) * 85ms)}
  @keyframes surgir{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}

  /* zoom lento na foto da capa ao abrir a página (usa "scale"; o parallax usa "translate") */
  .hero-foto{animation:capa-zoom 14s cubic-bezier(.2,.7,.3,1) both}
  @keyframes capa-zoom{from{scale:1.12}to{scale:1}}

  /* reflexo de luz passando nos botões principais */
  .btn-cta,.btn-quiz{position:relative;overflow:hidden;isolation:isolate}
  .btn-cta::after,.btn-quiz::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
    transform:translateX(-120%);transition:transform .7s ease;
  }
  .btn-cta:hover::after,.btn-quiz:hover::after{transform:translateX(120%)}

  /* transição suave entre páginas (Chrome/Edge; os outros simplesmente trocam de página) */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
  .topo{view-transition-name:topo}

  /* nota do quiz "conta" de 0 até o resultado */
  .mapa-info.troca .mapa-estado,.mapa-info.troca .mapa-selo{animation:mapa-troca .35s cubic-bezier(.2,.7,.3,1) both}
  .mapa-info.troca .mapa-selo{animation-duration:.25s}
  @keyframes mapa-troca{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}

  .efeitos .surge .destaque{background-size:0 100%;transition:background-size .9s cubic-bezier(.2,.7,.3,1) .35s}
  .efeitos .surge.visivel .destaque{background-size:100% 100%}

  .quiz-score.contando{animation:nota-surge .5s cubic-bezier(.2,.7,.3,1) both}
  @keyframes nota-surge{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
}

/* ---------------- aviso de cookies (js/clarity.js) ---------------- */
.aviso-cookies{
  position:fixed;left:18px;bottom:18px;z-index:80;max-width:440px;
  background:var(--azul-vivo);color:#fff;border-radius:10px;padding:16px 18px;
  box-shadow:0 8px 28px rgba(0,0,0,.32);display:grid;gap:12px;font-size:14.5px;line-height:1.5;
}
.aviso-cookies p{margin:0}
.aviso-cookies a{color:#fff;font-weight:600}
.aviso-cookies-acoes{display:flex;gap:10px}
.aviso-cookies button{
  flex:1;font:inherit;font-weight:600;padding:9px 14px;border-radius:7px;cursor:pointer;
  background:transparent;color:#fff;border:1.5px solid #fff;
}
.aviso-cookies button:hover{background:#fff;color:var(--azul-vivo)}
@media (max-width:560px){
  .aviso-cookies{left:10px;right:10px;bottom:10px;max-width:none}
}