/* =========================================================================
   ONCRED — Landing page
   -------------------------------------------------------------------------
   Estrutura do layout de referência (fundo escuro, seções claras
   intercaladas, círculos numerados), porém nas cores da marca:
   azul-marinho + carmim do logo. O verde aparece só onde há WhatsApp
   de verdade, que é onde ele significa alguma coisa.

   Escrito para CELULAR primeiro: os valores base valem para telas
   pequenas e as media queries só acrescentam espaço.
   ========================================================================= */

:root{
  /* Escuro */
  --fundo:#050C1B;
  --fundo-2:#0A1730;        /* cartões sobre o escuro */
  --fundo-3:#0E1E3C;        /* campos */
  --borda:#1B2F52;
  --borda-2:#24406B;

  /* Claro */
  --claro:#FFFFFF;
  --claro-2:#F3F6FB;
  --linha:#DCE3EE;
  --linha-2:#E9EEF6;

  /* Texto */
  --txt:#FFFFFF;
  --txt-2:#9FB0CC;
  --txt-3:#6E82A3;
  --tinta:#0A1730;
  --tinta-2:#54658ategy;
  --tinta-2:#546584;

  /* Marca */
  --acao:#CC1E59;
  --acao-claro:#F5407E;
  --acao-forte:#A81448;
  --acao-fraca:rgba(204,30,89,.13);

  /* WhatsApp */
  --zap:#1FA855;
  --zap-forte:#17853F;

  --shell:1140px;
  --margem:18px;
  --curva:cubic-bezier(.22,.9,.3,1);
}

/* Variação verde, mantida para o config.php */
body.tema-verde{
  --acao:#16DB65;
  --acao-claro:#4DFB94;
  --acao-forte:#0E9E48;
  --acao-fraca:rgba(22,219,101,.14);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--fundo);
  color:var(--txt);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(204,30,89,.12);
  overflow-x:hidden;
  padding-bottom:74px;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:'Montserrat','Inter',Helvetica,Arial,sans-serif;
  font-weight:700;line-height:1.2;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
svg{flex:none}

:focus-visible{outline:2px solid var(--acao-claro);outline-offset:2px}

[id]{scroll-margin-top:76px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--margem)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.marca-cor{color:var(--acao-claro)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Movimento ---------- */
.js [data-sobe]{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--curva),transform .6s var(--curva)}
.js [data-sobe].visivel{opacity:1;transform:none}

@keyframes pecaEntra{from{opacity:0;transform:translateY(34px)}}
@keyframes flutua{50%{transform:translateY(-9px)}}
@keyframes riscaCheck{to{stroke-dashoffset:0}}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}}
@keyframes pulsa{50%{box-shadow:0 0 0 10px rgba(31,168,85,0)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js [data-sobe]{opacity:1;transform:none}
}

/* ---------- Botões ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 24px;border:1px solid transparent;border-radius:9px;
  font-family:'Montserrat','Inter',Helvetica,Arial,sans-serif;
  font-size:.94rem;font-weight:700;letter-spacing:.02em;cursor:pointer;
  transition:background-color .18s linear,border-color .18s linear,color .18s linear;
}
.botao--acao{background:var(--acao);color:#fff}
.botao--acao:hover{background:var(--acao-forte)}
.botao--zap{background:var(--zap);color:#fff}
.botao--zap:hover{background:var(--zap-forte)}
.botao--vazado{background:transparent;border-color:var(--borda-2);color:#fff}
.botao--vazado:hover{border-color:var(--acao);background:var(--acao-fraca)}
.botao--claro{background:#fff;border-color:var(--linha);color:var(--tinta)}
.botao--claro:hover{border-color:var(--acao);color:var(--acao)}
.botao--bloco{display:flex;width:100%}
.botao[disabled]{opacity:.55;cursor:default}
.botao--alto{text-transform:uppercase}

/* ---------- Cabeçalho ---------- */
.cabecalho{position:sticky;top:0;z-index:80;background:rgba(5,12,27,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--borda)}
.cabecalho .shell{display:flex;align-items:center;gap:12px;height:66px}
.marca{display:flex;align-items:center;min-height:46px;margin-right:auto}
.marca img{height:32px;width:auto}
.menu{display:none}

.zap-redondo{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid rgba(31,168,85,.55);color:#3FD47C;background:rgba(31,168,85,.12);
}
.zap-redondo:hover{background:rgba(31,168,85,.24)}

/* O CTA do cabecalho e' do desktop; no celular quem chama e' a gaveta. */
.menu-cta{display:none}
.abre-menu{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  flex:none;background:none;border:1px solid var(--borda-2);color:#fff;cursor:pointer}
.abre-menu:hover{border-color:var(--acao)}

/* Gaveta do menu no celular */
.gaveta{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(3,8,18,.72);backdrop-filter:blur(3px);
}
.gaveta.ver{display:block}
.gaveta-caixa{
  position:absolute;top:0;right:0;width:min(320px,86vw);height:100%;
  background:var(--fundo-2);border-left:1px solid var(--borda);
  padding:18px;display:flex;flex-direction:column;gap:4px;
  animation:gavetaEntra .28s var(--curva);
}
@keyframes gavetaEntra{from{transform:translateX(100%)}}
.gaveta-topo{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.gaveta-topo img{height:28px;width:auto}
.fecha-menu{width:44px;height:44px;border-radius:10px;background:none;
  border:1px solid var(--borda-2);color:#fff;cursor:pointer;display:grid;place-items:center}
.gaveta-caixa a.gaveta-link{padding:14px 4px;font-size:1rem;font-weight:600;
  color:var(--txt-2);border-bottom:1px solid var(--borda)}
.gaveta-caixa a.gaveta-link:hover{color:#fff}
.gaveta-caixa .botao{margin-top:16px}

/* =========================================================================
   Topo
   ========================================================================= */
.hero{position:relative;overflow:hidden;padding-block:34px 40px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 420px at 88% -6%, rgba(204,30,89,.24), transparent 62%),
    radial-gradient(620px 460px at 6% 18%, rgba(21,47,92,.6), transparent 66%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 0%,#000,transparent 76%);
          mask-image:radial-gradient(72% 62% at 50% 0%,#000,transparent 76%);
}
.hero > .shell{position:relative;z-index:1}

.hero-grid{display:grid;grid-template-columns:1fr;
  grid-template-areas:"texto" "arte" "selos";gap:28px}
.hero-texto{grid-area:texto}
.hero-arte{grid-area:arte}
.hero-selos{grid-area:selos}

.hero h1{font-size:clamp(1.95rem,7.8vw,3.1rem);max-width:15ch}
.hero-lead{margin-top:16px;font-size:1.02rem;color:var(--txt-2);max-width:42ch}
.hero-acoes{margin-top:26px;display:grid;gap:10px;max-width:420px}
.hero-acoes .botao{white-space:nowrap}

.hero-selos{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.hero-selos li{display:flex;align-items:flex-start;gap:11px;font-size:.82rem;
  line-height:1.35;color:var(--txt-2)}
.hero-selos .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid var(--borda-2);background:rgba(204,30,89,.1);color:var(--acao-claro);
}

.hero-arte{display:flex;justify-content:center}
.arte{width:100%;max-width:470px;height:auto;overflow:visible;will-change:transform}
.arte-chao{filter:blur(13px)}
.arte-peca{animation:pecaEntra .8s var(--curva) backwards}
.arte-fone{animation-delay:.08s}
.arte-cartao{animation-delay:.2s}
.arte-notas{animation-delay:.32s}
/* Flutuação finita: a peça respira ao chegar e descansa. Laço infinito
   consumiria bateria à toa num público que é quase todo de celular. */
.arte-flutua{animation:flutua 5.6s ease-in-out 3}
.arte-cartao .arte-flutua{animation-duration:6.5s;animation-delay:-1.4s}
.arte-check{stroke-dasharray:44;stroke-dashoffset:44;
  animation:riscaCheck .55s 1.1s var(--curva) forwards}

/* =========================================================================
   Seções
   ========================================================================= */
.secao{padding-block:48px}
.secao--clara{background:var(--claro);color:var(--tinta)}
.secao--clara2{background:var(--claro-2);color:var(--tinta)}

.sobrancelha{
  display:block;font-family:'Montserrat','Inter',Helvetica,Arial,sans-serif;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acao);margin-bottom:10px;
}
.secao-cab{text-align:center;max-width:620px;margin:0 auto 32px}
.secao-titulo{font-size:clamp(1.5rem,5.4vw,2.05rem)}
/* O padrao da pagina e' fundo escuro: o subtitulo nasce claro e so
   escurece dentro das secoes de fundo branco. */
.secao-cab p{margin-top:12px;font-size:.95rem;color:var(--txt-2)}
.secao--clara .secao-cab p,.secao--clara2 .secao-cab p{color:var(--tinta-2)}

/* ---------- Passos ---------- */
.passos{display:grid;grid-template-columns:1fr;gap:30px}
.passo{text-align:center;position:relative}
.passo-ic{
  width:78px;height:78px;margin:0 auto 16px;border-radius:50%;display:grid;
  place-items:center;background:var(--fundo-2);color:var(--acao-claro);
  box-shadow:0 0 0 2px var(--acao),0 14px 30px -14px rgba(204,30,89,.55);
}
.passo-n{font-family:'Montserrat','Inter',Helvetica,Arial,sans-serif;
  font-size:1.02rem;font-weight:700;color:var(--acao);letter-spacing:.05em}
.passo h3{font-size:1.02rem;margin:7px 0 8px}
.passo p{font-size:.9rem;color:var(--tinta-2);max-width:32ch;margin-inline:auto}
.passo-seta{display:none}

/* ---------- Simulador ---------- */
.painel{
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:18px;
  overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.painel-cab{padding:22px 18px 4px;text-align:center}
.painel-cab h2{font-size:1.18rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--acao-claro)}
.painel-cab p{margin-top:6px;font-size:.85rem;color:var(--txt-2)}
.sim-corpo{padding:20px 18px 24px}

.campo+.campo{margin-top:18px}
.campo>label,.campo>legend{display:block;font-size:.88rem;font-weight:600;
  color:#DCE6F5;margin-bottom:9px;padding:0}
fieldset{border:0;padding:0;margin:0;min-width:0}

.campo-ic{position:relative}
.campo-ic .marca-ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--txt-3);pointer-events:none}

/* 16px é o mínimo: abaixo disso o iOS dá zoom ao focar o campo */
.entrada{
  width:100%;min-height:52px;padding:14px 15px;
  border:1px solid var(--borda);border-radius:9px;background:var(--fundo-3);
  color:#fff;font-size:16px;
  transition:border-color .18s linear,box-shadow .18s linear;
}
.campo-ic .entrada{padding-right:44px}
.entrada::placeholder{color:var(--txt-3)}
.entrada:focus{outline:0;border-color:var(--acao);
  box-shadow:0 0 0 3px var(--acao-fraca)}
select.entrada{appearance:none;cursor:pointer}
select.entrada option{background:var(--fundo-2);color:#fff}

/* Três por linha, como no layout de referência */
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.valor-btn{
  min-height:50px;padding:13px 4px;border:1px solid var(--borda);border-radius:9px;
  background:var(--fundo-3);color:#fff;font-size:.88rem;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums lining-nums;
  transition:border-color .18s linear,background-color .18s linear;
}
.valor-btn:hover{border-color:var(--borda-2)}
.valor-btn.ativo{background:var(--acao);border-color:var(--acao);color:#fff}
.linha-outro{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:8px}
.linha-outro .valor-btn{grid-column:1}
#valor-outro{grid-column:2;min-height:50px}
.linha-outro.so-outro{grid-template-columns:1fr}
.linha-outro.so-outro #valor-outro{grid-column:1}

.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opcao{cursor:pointer}
.opcao input{position:absolute;opacity:0;pointer-events:none}
.opcao span{
  display:flex;align-items:center;gap:10px;min-height:52px;padding:13px 15px;
  border:1px solid var(--borda);border-radius:9px;background:var(--fundo-3);
  font-size:.95rem;font-weight:500;
  transition:border-color .18s linear,background-color .18s linear;
}
.opcao span::before{
  content:"";width:19px;height:19px;flex:none;border-radius:50%;
  border:1.6px solid var(--txt-3);transition:all .18s linear;
}
.opcao input:checked+span{border-color:var(--acao);background:var(--acao-fraca)}
.opcao input:checked+span::before{border-color:var(--acao);border-width:6px}
.opcao input:focus-visible+span{outline:2px solid var(--acao-claro);outline-offset:2px}

.sim-enviar{margin-top:24px}
.sim-erro{display:none;margin-top:12px;padding:12px 14px;border-radius:9px;
  font-size:.88rem;background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);
  color:#FFB3B3}
.sim-erro.ver{display:block}
.sim-nota{display:flex;align-items:flex-start;gap:9px;margin-top:16px;
  font-size:.78rem;color:var(--txt-3);line-height:1.5;justify-content:center;
  text-align:center}
.sim-nota svg{margin-top:2px}

/* Resultado */
.sim-resultado{display:none;padding:20px 18px 24px}
.sim-resultado.ver{display:block;animation:aparece .32s var(--curva)}
.res-cab{text-align:center;padding-bottom:18px;border-bottom:1px solid var(--borda)}
.res-rotulo{font-size:.8rem;color:var(--txt-2);text-transform:uppercase;
  letter-spacing:.1em;font-weight:600}
.res-valor{font-family:'Montserrat','Inter',Helvetica,Arial,sans-serif;
  font-size:2.1rem;font-weight:700;letter-spacing:-.03em;margin-top:6px;
  font-variant-numeric:tabular-nums lining-nums}
.res-cidade{font-size:.85rem;color:var(--txt-2);margin-top:4px}
.res-item{display:flex;align-items:center;gap:10px;padding:14px 0;
  border-bottom:1px solid var(--borda)}
.res-item .qtd{font-weight:700;font-size:1rem;width:4.5ch;flex:none;
  font-variant-numeric:tabular-nums lining-nums}
.res-item .obs{font-size:.8rem;color:var(--txt-3)}
.res-item .parc{margin-left:auto;font-size:1.16rem;font-weight:700;
  font-variant-numeric:tabular-nums lining-nums}
.res-item.destaque .parc{color:var(--acao-claro)}
.res-selo{padding:3px 9px;border-radius:999px;background:var(--acao);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.res-obs{margin-top:16px;font-size:.78rem;color:var(--txt-3);line-height:1.5}
.res-voltar{display:block;width:100%;min-height:46px;margin-top:10px;padding:11px;
  border:0;background:none;color:var(--txt-2);font-size:.88rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.res-voltar:hover{color:#fff}
.sim-resultado .botao{margin-top:20px}

/* ---------- Tabela de parcelas ---------- */
.abas{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.aba{flex:1;min-width:120px;min-height:46px;padding:11px 14px;border-radius:9px;
  border:1px solid var(--borda);background:var(--fundo-3);color:var(--txt-2);
  font-size:.9rem;font-weight:600;cursor:pointer}
.aba:hover{color:#fff}
.aba.ativa{background:var(--acao);border-color:var(--acao);color:#fff}

.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--borda);border-radius:14px;background:var(--fundo-2)}
table.parcelas{width:100%;font-variant-numeric:tabular-nums lining-nums}
table.parcelas th,table.parcelas td{padding:12px 8px;text-align:right;font-size:.92rem}
table.parcelas thead th{background:rgba(255,255,255,.05);color:#fff;font-weight:700;
  font-size:.8rem;letter-spacing:.03em}
table.parcelas th:first-child,table.parcelas td:first-child{text-align:left;
  padding-left:13px}
table.parcelas th:last-child,table.parcelas td:last-child{padding-right:13px}
table.parcelas tbody th{font-weight:700;color:#fff}
table.parcelas tbody td{color:var(--txt-2);font-weight:500}
table.parcelas tbody tr+tr th,table.parcelas tbody tr+tr td{
  border-top:1px solid var(--borda)}
/* Precisa de thead/tbody: só ".melhor" venceria "thead th" na especificidade
   e apagaria o texto branco do cabeçalho. */
table.parcelas thead th.melhor{background:var(--acao);color:#fff}
table.parcelas tbody .melhor{color:var(--acao-claro);font-weight:700;
  background:rgba(204,30,89,.07)}

.tabela-rodape{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;
  margin-top:14px;font-size:.82rem;color:var(--txt-3)}
.tabela-rodape .promo{color:var(--acao-claro);font-weight:600}

@media (max-width:400px){
  table.parcelas th,table.parcelas td{padding:11px 6px;font-size:.88rem}
  table.parcelas th:first-child,table.parcelas td:first-child{padding-left:10px}
  table.parcelas th:last-child,table.parcelas td:last-child{padding-right:10px}
  table.parcelas thead th{font-size:.76rem}
}

/* ---------- Por que escolher ---------- */
.motivos{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px}
.motivo{text-align:center}
.motivo-ic{width:54px;height:54px;margin:0 auto 13px;border-radius:15px;
  display:grid;place-items:center;border:1px solid var(--borda-2);
  background:rgba(204,30,89,.1);color:var(--acao-claro)}
.motivo h3{font-size:.98rem;margin-bottom:7px}
.motivo p{font-size:.85rem;color:var(--txt-2)}

/* ---------- Ainda tem dúvidas ---------- */
.duvidas-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.duvidas h2{font-size:clamp(1.5rem,5.4vw,2.05rem)}
.duvidas p{margin-top:14px;color:var(--tinta-2);max-width:40ch;font-size:.97rem}
.atendentes{display:grid;gap:11px;margin-top:26px;max-width:440px}
.atendente{
  display:flex;align-items:center;gap:13px;min-height:66px;padding:13px 16px;
  border:1px solid var(--linha);border-radius:11px;background:#fff;
  transition:border-color .18s linear,box-shadow .18s linear;
}
.atendente:hover{border-color:var(--zap);box-shadow:0 10px 26px -18px rgba(31,168,85,.7)}
.atendente .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  flex:none;background:rgba(31,168,85,.12);color:var(--zap);
  box-shadow:0 0 0 0 rgba(31,168,85,.4);animation:pulsa 2.6s infinite}
.atendente b{display:block;font-size:.97rem;font-weight:700;color:var(--tinta)}
.atendente small{display:block;font-size:.83rem;color:var(--tinta-2)}
.atendente .seta{margin-left:auto;color:var(--txt-3)}
.arte-zap{width:100%;max-width:280px;height:auto;margin-inline:auto}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--linha);border-radius:12px}
.faq details[open]{border-color:var(--acao)}
.faq summary{display:flex;align-items:center;gap:13px;padding:17px 18px;cursor:pointer;
  list-style:none;font-weight:600;font-size:.97rem;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:none;font-size:1.3rem;
  font-weight:500;color:var(--acao);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq-corpo{padding:0 18px 18px;color:var(--tinta-2);font-size:.92rem}

/* ---------- Barra de números ---------- */
.marcos{background:var(--claro-2);border-top:1px solid var(--linha);
  padding-block:26px;color:var(--tinta)}
.marcos ul{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.marcos li{display:flex;align-items:center;gap:11px}
.marcos .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  flex:none;background:#fff;color:var(--acao);border:1px solid var(--linha)}
.marcos b{display:block;font-family:'Montserrat','Inter',Helvetica,Arial,sans-serif;
  font-size:1rem;line-height:1.2}
.marcos span{font-size:.78rem;color:var(--tinta-2);line-height:1.3}

/* ---------- Rodapé ---------- */
.rodape{background:var(--fundo);border-top:1px solid var(--borda);padding-block:40px 0}
.rodape-grid{display:grid;grid-template-columns:1fr;gap:28px}
.rodape img{height:34px;width:auto;margin-bottom:14px}
.rodape h3{font-size:.86rem;font-weight:700;color:#fff;margin-bottom:13px;
  letter-spacing:.03em}
.rodape p{font-size:.87rem;color:var(--txt-2);max-width:36ch}
.rodape li a,.rodape li{font-size:.87rem;color:var(--txt-2)}
.rodape li a{display:inline-block;padding-block:12px}
.rodape li a:hover{color:var(--acao-claro)}
.rodape .telefone{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

.aviso{margin-top:32px;padding-top:20px;border-top:1px solid var(--borda);
  font-size:.77rem;line-height:1.65;color:var(--txt-3);max-width:84ch}
.rodape-fim{margin-top:16px;padding-block:16px 22px;border-top:1px solid var(--borda);
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  font-size:.77rem;color:var(--txt-3)}
.rodape-selo{display:flex;align-items:center;gap:8px}

/* ---------- Barra fixa no celular ---------- */
.barra-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(5,12,27,.97);border-top:1px solid var(--borda);
  backdrop-filter:blur(12px);
}
.barra-mobile .botao{flex:1;min-width:0;min-height:46px;padding:11px 6px;
  font-size:.85rem;gap:7px}
.barra-mobile .botao span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =========================================================================
   Telas maiores
   ========================================================================= */
@media (min-width:560px){
  .hero-selos{grid-template-columns:repeat(4,1fr)}
  .hero-acoes{grid-template-columns:auto auto;justify-content:start;max-width:none}
  table.parcelas th,table.parcelas td{padding:14px 14px;font-size:1rem}
}

@media (min-width:768px){
  :root{--margem:24px}
  .barra-mobile{display:none}
  body{padding-bottom:0}
  .secao{padding-block:70px}
  .hero{padding-block:48px 60px}
  .painel-cab{padding:26px 26px 4px}
  .sim-corpo,.sim-resultado{padding:24px 26px 28px}
  .motivos{grid-template-columns:repeat(4,1fr)}
  .marcos ul{grid-template-columns:repeat(4,1fr)}
  .rodape-grid{grid-template-columns:1.5fr 1fr 1.2fr}
  .duvidas-grid{grid-template-columns:1.1fr .9fr}
  .arte-zap{max-width:260px}

  .passos{grid-template-columns:repeat(3,1fr);gap:22px}
  /* seta entre os passos, como no layout de referência */
  .passo-seta{display:block;position:absolute;top:39px;left:calc(50% + 56px);
    right:calc(-50% + 56px);height:1px;background:var(--linha)}
  .passo-seta::after{content:"";position:absolute;right:0;top:-3px;
    width:7px;height:7px;border-top:1px solid var(--linha);
    border-right:1px solid var(--linha);transform:rotate(45deg)}
  .passo:last-child .passo-seta{display:none}
}

@media (min-width:1000px){
  [id]{scroll-margin-top:90px}
  .cabecalho .shell{height:80px;gap:30px}
  .marca img{height:40px}
  .marca{margin-right:0}
  .menu{display:flex;gap:26px;margin-left:auto;font-size:.93rem;font-weight:600;
    color:var(--txt-2)}
  .menu a{padding-block:6px;border-bottom:2px solid transparent}
  .menu a:hover{color:#fff;border-bottom-color:var(--acao)}
  .abre-menu{display:none}
  .menu-cta{display:inline-flex}
  .cabecalho .botao{min-height:46px;padding:12px 20px;font-size:.88rem}

  .secao{padding-block:92px}
  .hero{padding-block:64px 76px}
  .hero-grid{grid-template-columns:1fr 500px;
    grid-template-areas:"texto arte" "selos selos";
    column-gap:54px;row-gap:48px;align-items:center}
  .arte{max-width:520px}
  .sim-largo{max-width:860px;margin-inline:auto}
  .duvidas-grid{gap:60px}
  .arte-zap{max-width:300px}
}