/* ═══════════════════════════════════════════════════════════════════
   FICOUNT · estilo do site (capa, serviços e conteúdos)
   Cores, topo, rodapé e WhatsApp flutuante ficam em estrutura.css, que
   o simulador também usa. O simulador e os formulários têm estilo próprio.
   Princípio: pouca coisa por tela, muito respiro, uma ideia por bloco.
   Cores e fontes da marca (CLAUDE.md → Identidade da marca).
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{ margin:0; background:var(--creme); color:var(--texto); font-family:var(--corpo);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; }
a{ color:var(--petroleo); text-underline-offset:3px; }
a:hover{ color:var(--petroleo-escuro); }
:focus-visible{ outline:3px solid var(--dourado); outline-offset:3px; border-radius:6px; }
h1,h2,h3{ font-family:var(--titulo); font-weight:600; line-height:1.15; letter-spacing:-.01em;
  margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.35rem); }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.25rem); }
h3, .h3{ font-size:1.18rem; letter-spacing:0; }
p{ margin:0; }
.wrap{ width:100%; max-width:var(--largura); margin:0 auto; padding-inline:24px; }
@media (max-width:560px){ .wrap{ padding-inline:18px; } body{ font-size:16px; } }

/* ── rótulo pequeno acima dos títulos ── */
.eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--petroleo); margin-bottom:14px; }
.escuro .eyebrow{ color:var(--dourado); }

/* ── botões ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px;
  padding:12px 24px; border-radius:10px; border:1.5px solid transparent; font:600 1rem/1.2 var(--corpo);
  text-decoration:none; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .22s var(--suave-sai); }
.btn:hover{ transform:translateY(-1px); }
.btn-pri{ background:var(--petroleo); color:#fff; }
.btn-pri:hover{ background:var(--petroleo-escuro); color:#fff; }
.btn-sec{ background:transparent; color:var(--petroleo); border-color:var(--petroleo); }
.btn-sec:hover{ background:var(--petroleo-claro); color:var(--petroleo-escuro); }
.btn-ouro{ background:var(--dourado); color:var(--tinta); }
.btn-ouro:hover{ background:#D4B27A; color:var(--tinta); }
.btn-claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-claro:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.06); }
.btn .seta{ transition:transform .22s var(--suave-sai); }
.btn:hover .seta{ transform:translateX(3px); }
.acoes{ display:flex; flex-wrap:wrap; gap:12px; }

/* ── seções ── */
.secao{ padding-block:88px; }
.secao.faixa{ background:var(--faixa); }
.escuro{ background:var(--tinta); color:#E8EFED; }
.escuro h2, .escuro h3{ color:#fff; }
.cab{ max-width:640px; margin-bottom:44px; }
.cab p{ color:var(--suave); margin-top:14px; font-size:1.06rem; }
.escuro .cab p{ color:var(--sage); }
.cab.centro{ margin-inline:auto; text-align:center; }
@media (max-width:720px){ .secao{ padding-block:60px; } .cab{ margin-bottom:32px; } }

/* ── herói ── */
.heroi{ padding-block:72px 88px; }
.heroi-grade{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.heroi h1{ max-width:15ch; }
.heroi .lede{ margin-top:22px; font-size:1.2rem; color:var(--suave); max-width:36ch; }
.heroi .acoes{ margin-top:32px; }
.selos{ list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.selos li{ display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--suave); }
.selos svg{ width:18px; height:18px; color:var(--petroleo); flex:none; }
@media (max-width:900px){ .heroi-grade{ grid-template-columns:1fr; gap:40px; } .heroi{ padding-block:44px 64px; } }

/* o símbolo da marca virando gráfico */
.painel{ margin:0; background:var(--tinta); border-radius:22px; padding:34px 32px 30px; color:var(--sage);
  box-shadow:0 30px 60px rgba(12,20,22,.18); }
.painel .cabeca{ display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:26px; }
.painel .cabeca b{ color:var(--dourado); font-weight:600; }
.barra{ margin-bottom:22px; }
.barra:last-child{ margin-bottom:0; }
.barra .rot{ font-size:.93rem; color:#E8EFED; margin-bottom:9px; }
.barra .corpo{ height:34px; border-radius:4px; transform-origin:left center; }
.barra.b1 .corpo{ width:100%; background:#FCFCFC; }
.barra.b2 .corpo{ width:74%; background:#008280; }
.barra.b3 .corpo{ width:26%; background:#D6A255; }
@media (prefers-reduced-motion: no-preference){
  .barra .corpo{ animation:cresce 1.8s var(--suave-sai) .25s both; }
  .barra.b2 .corpo{ animation-delay:.55s; } .barra.b3 .corpo{ animation-delay:.85s; }
}
@media (max-width:560px){ .painel{ padding:24px 22px; border-radius:18px; } .painel .cabeca{ margin-bottom:18px; }
  .barra{ margin-bottom:14px; } .barra .corpo{ height:22px; } }
@keyframes cresce{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ── cartões de serviço ── */
.grade{ display:grid; gap:20px; }
.grade.g4{ grid-template-columns:repeat(4, 1fr); }
.grade.g3{ grid-template-columns:repeat(3, 1fr); }
.grade.g2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:1000px){ .grade.g4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:820px){ .grade.g3{ grid-template-columns:1fr; } }
@media (max-width:620px){ .grade.g4, .grade.g2{ grid-template-columns:1fr; } }
.cartao{ display:flex; flex-direction:column; gap:12px; background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); padding:28px 26px; text-decoration:none; color:var(--texto);
  transition:border-color .2s ease, transform .22s var(--suave-sai), box-shadow .22s ease; }
a.cartao:hover{ border-color:var(--petroleo); transform:translateY(-3px); box-shadow:var(--sombra); color:var(--texto); }
.cartao p{ color:var(--suave); font-size:.98rem; }
.cartao .mais{ margin-top:auto; padding-top:6px; font-weight:600; color:var(--petroleo); font-size:.95rem; }
.icone{ width:48px; height:48px; border-radius:12px; background:var(--petroleo-claro); color:var(--petroleo);
  display:grid; place-items:center; }
.icone svg{ width:24px; height:24px; }

/* ── passos (é uma sequência: número) ── */
.passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; counter-reset:p; }
.passos li{ counter-increment:p; position:relative; padding-top:62px; }
.passos li::before{ content:counter(p); position:absolute; top:0; left:0; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--petroleo); color:#fff; font:600 1.1rem var(--titulo); }
.passos li:not(:last-child)::after{ content:""; position:absolute; top:22px; left:56px; right:-16px; height:2px; background:var(--linha); }
.passos h3{ margin-bottom:6px; }
.passos p{ color:var(--suave); }
.escuro .passos p{ color:var(--sage); }
@media (max-width:720px){
  .passos{ grid-template-columns:1fr; gap:22px; }
  .passos li{ padding:0 0 0 62px; min-height:44px; }
  .passos li::after{ display:none; }
}

/* ── motivos ── */
.motivo h3{ margin-bottom:8px; }
.motivo p{ color:var(--suave); }
.motivo::before{ content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--dourado); margin-bottom:18px; }

/* ── faixa do simulador ── */
.chamada{ display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center; }
.chamada p:not(.eyebrow){ color:var(--suave); margin-top:14px; font-size:1.06rem; max-width:48ch; }
.escuro .chamada p:not(.eyebrow){ color:var(--sage); }
.chamada .acoes{ justify-content:flex-end; }
@media (max-width:820px){ .chamada{ grid-template-columns:1fr; } .chamada .acoes{ justify-content:flex-start; } }

/* ── perguntas ── */
.faq{ max-width:780px; }
.cab.centro + .faq{ margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--linha); }
.faq details:first-child{ border-top:1px solid var(--linha); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center;
  padding:22px 4px; font:600 1.07rem/1.4 var(--corpo); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--faixa); color:var(--petroleo); font:500 1.3rem/1 var(--titulo); transition:transform .22s var(--suave-sai); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .resp{ overflow:hidden; }
.faq .resp p{ padding:0 4px 24px; color:var(--suave); max-width:64ch; }

/* ── contato final ── */
.fecho{ background:var(--petroleo); color:#fff; border-radius:24px; padding:56px; display:grid;
  grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; }
.fecho h2{ color:#fff; }
.fecho p{ margin-top:12px; color:#D5E7E4; }
.fecho .dados{ display:grid; gap:14px; }
.fecho .dados a, .fecho .dados span{ color:#fff; }
.fecho .dados small{ display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#BFDAD6; }
@media (max-width:820px){ .fecho{ grid-template-columns:1fr; padding:36px 26px; } }

/* ── páginas internas ── */
.trilha{ font-size:.88rem; color:var(--fraco); padding-top:28px; }
.trilha ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.trilha li:not(:last-child)::after{ content:"›"; margin-left:6px; color:var(--linha); }
.trilha a{ color:var(--fraco); }
.interna{ padding-block:40px 72px; }
.interna .lede{ margin-top:20px; font-size:1.18rem; color:var(--suave); max-width:52ch; }
.interna .acoes{ margin-top:30px; }
.lista-check{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 32px; }
.lista-check li{ display:flex; gap:12px; align-items:flex-start; }
.lista-check svg{ width:22px; height:22px; color:var(--petroleo); flex:none; margin-top:2px; }
@media (max-width:720px){ .lista-check{ grid-template-columns:1fr; } }

/* ── artigo (conteúdos) ── */
.artigo{ max-width:760px; }
.artigo .meta{ margin-top:18px; font-size:.92rem; color:var(--fraco); }
.artigo .meta b{ color:var(--suave); font-weight:600; }
.resposta{ margin-top:30px; background:var(--branco); border:1px solid var(--linha); border-left:4px solid var(--petroleo);
  border-radius:12px; padding:22px 24px; }
.resposta .eyebrow{ margin-bottom:8px; }
.resposta p{ font-size:1.06rem; }
.texto{ margin-top:12px; }
.texto h2{ font-size:1.55rem; margin:48px 0 14px; }
.texto h3{ margin:30px 0 10px; }
.texto p{ margin:0 0 16px; max-width:66ch; }
.texto ul, .texto ol{ margin:0 0 18px; padding-left:22px; max-width:64ch; }
.texto li{ margin-bottom:8px; }
.texto li::marker{ color:var(--petroleo); }
.texto aside{ margin:24px 0; background:var(--faixa); border-radius:12px; padding:18px 22px; color:var(--texto); }
.texto aside p{ margin:0; }
.fontes{ margin-top:48px; padding-top:24px; border-top:1px solid var(--linha); font-size:.93rem; color:var(--suave); }
.fontes h2{ font-size:1rem; font-family:var(--corpo); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.fontes ul{ margin:0; padding-left:20px; display:grid; gap:8px; }
.fontes .aviso{ margin-top:16px; font-size:.86rem; color:var(--fraco); }
.autor{ margin-top:36px; display:flex; gap:16px; align-items:center; background:var(--branco); border:1px solid var(--linha);
  border-radius:12px; padding:18px 20px; }
.autor .inicial{ width:48px; height:48px; border-radius:50%; background:var(--tinta); color:var(--dourado);
  display:grid; place-items:center; font:600 1.1rem var(--titulo); flex:none; }
.autor p{ font-size:.93rem; color:var(--suave); }
.autor b{ color:var(--texto); }
.cartao .categoria{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--petroleo); }

/* ── resposta ao toque: o botão reage na hora ── */
.btn:active, a.cartao:active{ transform:scale(.98); transition-duration:.05s; }
.btn.abrindo{ cursor:progress; opacity:.75; }
.btn.abrindo .seta{ animation:vai-e-vem .6s ease-in-out infinite alternate; }
@keyframes vai-e-vem{ to{ transform:translateX(4px); } }

/* ── aparecer ao rolar (só com JavaScript; sem ele, tudo visível) ──
   Devagar e em sequência. É animação, não transição: assim o atraso de
   entrada não atrasa o efeito de passar o mouse. */
.js [data-revela]{ opacity:0; }
.js [data-revela].visto{ opacity:1; animation:revela 1s var(--suave-sai) backwards; }
/* nas grades, um cartão depois do outro */
.js .grade > [data-revela].visto:nth-child(4n+2){ animation-delay:.1s; }
.js .grade > [data-revela].visto:nth-child(4n+3){ animation-delay:.2s; }
.js .grade > [data-revela].visto:nth-child(4n+4){ animation-delay:.3s; }
/* passos e listas: um item de cada vez, depois que o bloco aparece */
.js .passos[data-revela] > li, .js .lista-check[data-revela] > li{ opacity:0; }
.js .passos[data-revela].visto > li, .js .lista-check[data-revela].visto > li{ opacity:1;
  animation:sobe .9s var(--suave-sai) backwards; }
.js [data-revela].visto > li:nth-child(1){ animation-delay:.1s; }
.js [data-revela].visto > li:nth-child(2){ animation-delay:.2s; }
.js [data-revela].visto > li:nth-child(3){ animation-delay:.3s; }
.js [data-revela].visto > li:nth-child(4){ animation-delay:.4s; }
.js [data-revela].visto > li:nth-child(5){ animation-delay:.5s; }
.js [data-revela].visto > li:nth-child(n+6){ animation-delay:.6s; }
/* abertura da página: rótulo, título, texto e botões entram em sequência */
@media (prefers-reduced-motion: no-preference){
  .js .heroi-grade > div > *, .js .interna .wrap > :is(.eyebrow, h1, .lede, .acoes, .meta, .resposta){
    animation:sobe .7s var(--suave-sai) backwards; }
  .js .heroi-grade > div > :nth-child(2), .js .interna .wrap > h1{ animation-delay:.05s; }
  .js .heroi-grade > div > :nth-child(3), .js .interna .wrap > :is(.lede, .meta){ animation-delay:.1s; }
  .js .heroi-grade > div > :nth-child(4), .js .interna .wrap > :is(.acoes, .resposta){ animation-delay:.15s; }
  .js .heroi-grade > div > :nth-child(5){ animation-delay:.2s; }
  .js .painel{ animation:aparece 1s ease .1s backwards; }
}
@keyframes revela{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes sobe{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes aparece{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js [data-revela], .js [data-revela] > li{ opacity:1; }
}