/* ══════════════════════════════════════════════════════════════
   HC360 · CAMADA DE REFINO
   Acabamento visual. Não muda conteúdo, não muda layout, não muda cor.
   Entra DEPOIS do <style> da página e só refina o que já existe.
   Para desligar tudo: remova as 2 linhas do <head>.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* curvas de movimento (é isso que separa "seco" de "caro") */
  --ease-suave:cubic-bezier(.22,.61,.36,1);
  --ease-saida:cubic-bezier(.16,1,.3,1);
  --t-rapido:.18s;
  --t-medio:.32s;
  --t-lento:.7s;

  /* sombras em camadas: luz nunca vem de um ponto só */
  --sh-1:0 1px 2px rgba(var(--sh-tinta,44,62,80),.05), 0 2px 6px rgba(var(--sh-tinta,44,62,80),.04);
  --sh-2:0 2px 4px rgba(var(--sh-tinta,44,62,80),.05), 0 10px 24px rgba(var(--sh-tinta,44,62,80),.07);
  /* A tinta da sombra usa fallback em vez de valor fixo. Se declarasse
     --sh-tinta aqui no :root, o refino carrega depois do <style> da página
     e apagaria a escolha dela. Com fallback, a página manda e o refino cede. */
  --sh-3:0 4px 8px rgba(var(--sh-tinta,44,62,80),.06), 0 18px 44px rgba(var(--sh-tinta,44,62,80),.11);
  --sh-ouro:0 2px 4px rgba(214,175,92,.14), 0 12px 28px rgba(214,175,92,.24);
  /* ── ESCALA · 7 degraus de texto e 3 de canto ──────────────────────
     ⚠️ Estes tokens são usados ~380 vezes no site. Em 24/08 o _escala.py
     trocou os valores por var(...) e NUNCA escreveu esta lista: o site
     rodou um dia inteiro com 380 declarações apontando pro nada, 203
     elementos caídos pra 16px herdado e os botões sem canto.
     Se um dia o site "achatar" de novo, é aqui que se olha primeiro. */
  --t-micro:.68rem;  --t-mini:.78rem;  --t-peq:.86rem;  --t-base:.95rem;
  --t-med:1.05rem;   --t-g:1.25rem;    --t-gg:1.5rem;
  --r-peq:10px;      --r-med:14px;     --r-g:18px;
}

/* ══ BASES QUE VALEM PARA MAIS DE UMA PÁGINA · movidas dos <style> locais em 25/08 ══
   FAQ agora existe nas 5 (a home ganhou a dela); .passos virou o formato único de
   processo (imóvel e veículo); .kick é a nota de fecho. As harmonizações mais
   abaixo neste arquivo continuam ganhando, por isso este bloco fica AQUI no topo. */
/* ── FAQ em cartão (opção C, escolhida 26/08) ──────────────────────────
   Motivo: o padrão de pirâmides atrás de texto corrido cansa a leitura
   (observação do Matheus). Na FAQ a pessoa lê frase inteira, diferente do
   resto do site, onde ela bate o olho. Cada pergunta ganha superfície
   branca própria: nenhum texto fica sobre o padrão.
   Medido antes de decidir: caixas claras por página eram 24 no consórcio,
   16 na home, 8 no câmbio, 7 no imóvel e 5 no veículo. */
.faq{border-top:0}
.faq details{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--r-med);margin-bottom:10px;padding:0 22px;box-shadow:var(--sh-1);
  transition:box-shadow var(--t-medio) var(--ease-suave),border-color var(--t-rapido) var(--ease-suave)}
.faq details:last-child{margin-bottom:0}
.faq details[open]{box-shadow:var(--sh-2);border-color:#DDD8CB}
.faq summary{cursor:pointer;padding:18px 44px 18px 0;font-weight:700;color:var(--marinho);
             font-size:var(--t-med);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:15px;font-size:var(--t-gg);color:var(--dourado);font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq .a{padding:0 0 20px;font-size:var(--t-base);line-height:1.6}
.faq .a p{margin-bottom:11px}.faq .a p:last-child{margin-bottom:0}
/* ── A ESTEIRA em folha branca (padrão B, escolhido 26/08) ────────────
   Mesma régua da FAQ: texto corrido não fica sobre o padrão de pirâmides.
   Aqui a folha é UMA só, para a linha dourada continuar ligando as etapas.
   Se fosse um cartão por etapa, a esteira virava lista solta. */
.passos{counter-reset:p;list-style:none;display:flex;flex-direction:column;gap:18px;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-g);
  padding:28px 30px;box-shadow:var(--sh-1)}
/* No celular a folha cede recuo: com 30px de cada lado sobravam 212px de texto. */
@media(max-width:600px){.passos{padding:20px 16px;border-radius:var(--r-med)}}
.passos li{counter-increment:p;display:flex;gap:17px;align-items:flex-start}
.passos li::before{content:counter(p);flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:var(--marinho);color:var(--creme);display:grid;place-items:center;font-family:var(--serif);font-size:var(--t-med)}
.passos strong{display:block;color:var(--marinho);margin-bottom:2px}
.passos span{color:var(--petroleo);font-weight:600;display:block;margin-top:3px}
.kick{margin-top:28px;padding:22px 26px;background:rgba(214,175,92,.1);
  border:1px solid rgba(214,175,92,.32);border-radius:var(--r-med)}
.kick p{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--marinho);line-height:1.28}

/* ─────────── 1. APARECER AO ROLAR ───────────
   O JS marca <html class="js-rv">. Sem JS, nada some. */
.js-rv [data-rv]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-lento) var(--ease-saida),
             transform var(--t-lento) var(--ease-saida);
  transition-delay:var(--rv-delay,0ms);
  will-change:opacity,transform;
}
.js-rv [data-rv].rv-on{opacity:1;transform:none}

/* variações */
.js-rv [data-rv="esq"]{transform:translateX(-22px)}
.js-rv [data-rv="dir"]{transform:translateX(22px)}
.js-rv [data-rv="zoom"]{transform:scale(.965)}
.js-rv [data-rv="esq"].rv-on,
.js-rv [data-rv="dir"].rv-on,
.js-rv [data-rv="zoom"].rv-on{transform:none}

/* ─────────── 2. CARTÕES ─────────── */
.card{
  box-shadow:var(--sh-1);
  transition:transform var(--t-medio) var(--ease-suave),
             box-shadow var(--t-medio) var(--ease-suave),
             border-color var(--t-medio) var(--ease-suave);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-3);
}
/* border-color saiu de propósito. As 5 páginas já pintam a borda do cartão
   na cor da marca delas, e o refino carrega depois, então apagava as três. */
/* fio dourado que desliza no topo do cartão */
.card{position:relative;overflow:hidden}
.card::before{
  content:"";position:absolute;left:18px;top:0;height:2px;width:calc(100% - 36px);
  background:linear-gradient(90deg,var(--dourado),rgba(214,175,92,0));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-lento) var(--ease-saida);
}
.card:hover::before{transform:scaleX(1)}

/* ─────────── 3. BOTÕES ─────────── */
.btn{
  position:relative;overflow:hidden;
  box-shadow:var(--sh-2);
  transition:transform var(--t-rapido) var(--ease-suave),
             box-shadow var(--t-medio) var(--ease-suave),
             filter var(--t-rapido) var(--ease-suave);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3);filter:saturate(1.06)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1);transition-duration:.06s}
.btn-gold{box-shadow:var(--sh-ouro)}
.btn-gold:hover{box-shadow:0 6px 12px rgba(214,175,92,.07),0 20px 46px rgba(214,175,92,.32)}

/* brilho que atravessa o botão no hover */
/* inset:-2px cobre o border:2px solid transparent que .btn já tem,
   senão fica uma moldura apagada no meio do brilho.
   A transição fica no estado base, senão o brilho VOLTA de estalo. */
.btn::after{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .78s var(--ease-saida);
}
.btn:hover::after{transform:translateX(130%)}

/* .btn-out é botão de contorno. Nunca teve sombra, não é para ganhar uma. */
.btn-out{box-shadow:none}
.btn-out:hover{box-shadow:var(--sh-1)}

/* ─────────── 4. LINKS DE CARTÃO E SETAS ─────────── */
.card-link{transition:color var(--t-rapido) var(--ease-suave)}
.go{display:inline-block;transition:transform var(--t-medio) var(--ease-saida)}
.card:hover .go,.card-link:hover .go{transform:translateX(5px)}

/* ─────────── 5. LINKS DE TEXTO: sublinhado que cresce ─────────── */
.prose a:not(.btn):not(.card-link),
.lead a:not(.btn){
  text-decoration:none;
  background-image:linear-gradient(var(--petroleo),var(--petroleo));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t-medio) var(--ease-saida);
  padding-bottom:1px;
}
.prose a:not(.btn):not(.card-link):hover,
.lead a:not(.btn):hover{background-size:100% 1.5px}

/* ─────────── 6. O FIO DOURADO (.rule) se desenha ───────────
   Só afeta .rule que entrou no sistema (tem data-rv).
   Uma .rule solta em qualquer canto do site nunca some. */
.js-rv .rule[data-rv]{transform-origin:left;transform:scaleX(0);
  transition:transform .85s var(--ease-saida) .12s}
.js-rv .rule[data-rv].rv-on{transform:scaleX(1)}

/* ─────────── 7. ÍCONES ─────────── */
.ico{transition:transform var(--t-medio) var(--ease-saida),
                 color var(--t-medio) var(--ease-suave)}
.card:hover .ico{transform:scale(1.08) rotate(-3deg)}

/* ─────────── 8. NÚMEROS GRANDES ─────────── */
.num,.big{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ─────────── 9. IMAGENS ───────────
   Sem zoom no hover: .foto não é link, e hover em coisa que não
   clica é promessa falsa (regra da casa). */

/* ─────────── 10. SELEÇÃO DE TEXTO NA COR DA MARCA ─────────── */
/* Cor opaca de propósito. A versão translúcida sumia com o texto
   nas seções de fundo marinho: contraste de 1,1 para 1. */
::selection{background:var(--dourado);color:var(--marinho)}

/* ─────────── 11. FOCO VISÍVEL (acessibilidade + acabamento) ─────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{
  outline:2px solid var(--dourado);outline-offset:3px;
}
/* consorcio e crédito têm .f input:focus{outline:0}. Esta regra empata em
   especificidade e ganha pela ordem, sem precisar de !important. */
.f input:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}

/* ─────────── 12. ROLAGEM SUAVE ───────────
   ⚠️ NUNCA pôr scroll-padding-top aqui. consorcio.html e
   credito-garantia-imovel.html já usam section[id]{scroll-margin-top:158px},
   e os dois valores SOMAM: a âncora parava 246px além do alvo.
   Quem precisa de compensação declara na própria página. */
html{scroll-behavior:smooth}

/* ─────────── 13. QUEM DESLIGOU ANIMAÇÃO NO SISTEMA ───────────
   Obrigatório. Sem isso o site dá enjoo em quem tem sensibilidade. */
@media (prefers-reduced-motion:reduce){
  .js-rv [data-rv],.js-rv [data-rv].rv-on,.js-rv .rule{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. RÉGUA TIPOGRÁFICA ÚNICA · 9 degraus
   50 / 36 / 23 / 21 / 18 / 16 / 15 / 13 / 12   (escala baixada um degrau em 22/08:
   o conjunto estava grande demais na tela cheia. Proporcoes preservadas.)
   O site tinha 29 tamanhos, muitos separados por menos de 1px.
   Regra: passo mínimo de 2px abaixo de 24. Nada fica a 1px de nada.
   ══════════════════════════════════════════════════════════════ */

/* D1 · título de página (um por página) */
h1{font-size:clamp(1.9rem,4.35vw,3.15rem);font-weight:400}
.faixa .frase{font-size:clamp(1.72rem,4.05vw,2.8rem)}            /* D1b: faixa de 3 linhas */

/* D2 · título de seção */
h2{font-size:clamp(1.5rem,3.05vw,2.25rem);font-weight:400}

/* D3 · título de ferramenta e da resposta (não existia) */
.tool h3,#saida h3,.toolHead h3{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.24rem,2.15vw,1.44rem);line-height:1.18}

/* D4 · número de resultado, citação, manifesto */
.res .v{font-size:var(--t-g)}
.quote p,.kick p{font-size:clamp(.97rem,1.42vw,1.05rem)}   /* 22/08: dois degraus abaixo do original */
.verdict p{font-size:clamp(1.02rem,1.85vw,1.3rem)}

/* D5 · apoio grande. Um tamanho, papéis separados por PESO. */
.lead{font-size:clamp(1rem,1.6vw,1.12rem);font-weight:400;line-height:1.6}
h3{font-size:var(--t-med);font-weight:600;line-height:1.3}
.faq summary{font-size:var(--t-med);font-weight:700}
.step .num,.socio .ini,.prob .n,.trilho span,.foto h4{font-size:var(--t-med)}

/* D6 · DENTRO DO SIMULADOR · o degrau que faltava.
   Rótulo salta de 13 para 18 e deixa de empatar com a dica de 12. */
.q>label{font-size:var(--t-med);font-weight:700;line-height:1.3}
.f label{font-size:var(--t-mini);font-weight:700;line-height:1.3} /* rótulo de campo menor (rodada Milena 20/08) */
.fields{align-items:end} /* alinha os campos pela base: inputs e Price/SAC na mesma linha */
.f input{font-size:var(--t-med);font-weight:600;font-variant-numeric:tabular-nums}

/* D7 · corpo de texto e botão principal */
.prose p,.card p,.serve li,.faq .a,.lance p,.custo p,
.grupo-ajuda>p,#saida p,.end p,.draft,.inline-cta p,.proof p,
.porta b,.faixa .sub,.btn{font-size:var(--t-base)}

/* D8 · interface secundária */
.nav .menu a,.subnav a,.opts button,.seg button,
.mini,.sticky-cta .btn,.card .go,.card .who,
.passos span,.lance .kv,.verdict .obs{font-size:var(--t-peq)}
/* .nav ul e .nav .btn moram no D7 (16px): ver seção 19, navegação */

/* D9 · miúdo e rótulo. Mesmo tamanho, papéis distintos por caixa alta. */
.f .hint,.res .sub,.aviso,.legal,.bread,.serve .mk,.marca .tag{font-size:var(--t-mini)}
.sticky-cta p{font-size:var(--t-peq)}
.over,.res h4,.custo h4,.fgrid h4,.lance .kv b,
.card .tag,.porta span,.quote span,.end h4,.pills span{
  font-size:var(--t-mini);font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ══════════════════════════════════════════════════════════════
   15. HOVER ONDE A PESSOA REALMENTE CLICA
   Regra da casa: hover em coisa que não clica é promessa falsa.
   ══════════════════════════════════════════════════════════════ */

/* navegação: topo, menu, índice fixo, rodapé */
.nav a,.nav .menu a,.subnav a,.fgrid a,.bread a{
  transition:color var(--t-rapido) var(--ease-suave),
             opacity var(--t-rapido) var(--ease-suave),
             background-color var(--t-rapido) var(--ease-suave)}
.nav .menu{transition:opacity var(--t-rapido) var(--ease-saida),
                      transform var(--t-rapido) var(--ease-saida),
                      visibility 0s linear var(--t-rapido)}
.nav li.drop:hover .menu,.nav li.drop:focus-within .menu{transition-delay:0s}

/* logo: sobe 1px. Movimento sim, brilho não. */
.nav img{transition:transform var(--t-rapido) var(--ease-suave)}
.nav a:hover img{transform:translateY(-1px)}

/* .mini é o botão de conversão dentro do simulador. Herda tudo do .btn.
   inset:0 porque .mini não tem a borda de 2px do .btn. */
.mini{position:relative;overflow:hidden;box-shadow:var(--sh-2);
  transition:transform var(--t-rapido) var(--ease-suave),
             background-color var(--t-rapido) var(--ease-suave),
             box-shadow var(--t-medio) var(--ease-suave)}
.mini:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.mini:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1);transition-duration:.06s}
.mini::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform .78s var(--ease-saida)}
.mini:hover::after{transform:translateX(130%)}

/* portas do hero: são link de verdade e carregam data-porta para o pixel */
.porta{transition:transform var(--t-medio) var(--ease-suave),
                  background-color var(--t-medio) var(--ease-suave),
                  border-color var(--t-medio) var(--ease-suave),
                  box-shadow var(--t-medio) var(--ease-suave)}
.porta:hover{transform:translateY(-4px)}
.porta span::after{content:'→';display:inline-block;margin-left:7px;
  transition:transform var(--t-medio) var(--ease-saida)}
.porta:hover span::after{transform:translateX(5px)}
/* sobre marinho a sombra tem que ser preta: a tinta 44,62,80 some no escuro */
.hero .porta:hover{box-shadow:0 12px 30px rgba(0,0,0,.26)}

/* A barra dourada ao lado da pergunta SAIU junto com o cartão: dentro de
   uma caixa ela vira a "linha colorida ao lado" que ele aposentou em 25/08.
   Quem marca o estado agora é o próprio cartão (sombra e borda). */
.faq summary{position:relative;transition:color var(--t-rapido) var(--ease-suave)}
.faq summary:hover{color:var(--petroleo)}

/* A barra lateral colorida dos cartões foi APOSENTADA em 25/08 ("cara de IA",
   palavra do dono). O marcador é o número em medalhão, igual ao .passos. */

/* moldura do hero de garantia: as duas camadas douradas se afastam */
.moldura::before,.moldura::after{transition:transform var(--t-lento) var(--ease-saida)}
.moldura:hover::before{transform:translate(4px,-4px)}
.moldura:hover::after{transform:translate(-4px,4px)}

/* ══════════════════════════════════════════════════════════════
   16. O SIMULADOR VIVO
   Nada aqui toca número, campo ou textContent. Só pintura e tempo.
   ══════════════════════════════════════════════════════════════ */

/* o selo de vencedor atravessa de um cartão ao outro quando a conta vira */
.res>div{transition:border-color var(--t-medio) var(--ease-suave),
                    background-color var(--t-medio) var(--ease-suave)}

/* a caixa da ferramenta: sombra em camadas e resposta ao toque.
   focus-within funciona no celular, onde não existe mouse. */
.tool{box-shadow:var(--sh-3);
  transition:box-shadow var(--t-medio) var(--ease-suave),
             border-color var(--t-medio) var(--ease-suave)}
.tool:focus-within{box-shadow:var(--sh-3),0 0 0 4px rgba(34,104,102,.10)}

/* resultado deixa de parecer rascunho: tracejado vira sólido */
.out{border:1px solid rgba(214,175,92,.42)}
#saida{border-style:solid}

/* a resposta do guia chega com tempo, não de estalo */
#saida.pronto{background:#fff;border-color:var(--dourado)}
#saida.pronto h3,#saida.pronto p{animation:saidaEntra .42s var(--ease-saida) both}
#saida.pronto p{animation-delay:.06s}
@keyframes saidaEntra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* CTA do guia: entra e sai com transição em vez de display:none */
#s-b{opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--t-medio) var(--ease-saida),
             transform var(--t-medio) var(--ease-saida)}
#saida.pronto #s-b{opacity:1;transform:none;pointer-events:auto}

/* fio de progresso: 2px petróleo. Ouro fica para .rule e botão. */
.tool{position:relative}
.tool::after{content:'';position:absolute;left:0;bottom:0;height:2px;
  width:calc(var(--passo,0) / 3 * 100%);background:var(--petroleo);
  border-radius:0 2px 2px 0;
  transition:width var(--t-medio) var(--ease-saida)}

/* numeral da pergunta: mesma gramática dos passos da seção Como funciona */
.qn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  margin-right:11px;vertical-align:-6px;
  font-family:var(--serif);font-size:var(--t-peq);font-style:normal;font-weight:400;
  color:var(--petroleo);background:#fff;border:1.5px solid var(--linha);
  transition:background-color var(--t-medio) var(--ease-suave),
             border-color var(--t-medio) var(--ease-suave),
             color var(--t-medio) var(--ease-suave)}
.q.feita .qn{background:var(--petroleo);border-color:var(--petroleo);color:var(--creme)}

/* os botões de opção: lista explícita + curva, e o pico do logo no escolhido */
.opts button{position:relative;padding:11px 26px;
  transition:background-color var(--t-rapido) var(--ease-suave),
             border-color var(--t-rapido) var(--ease-suave),
             color var(--t-rapido) var(--ease-suave),
             box-shadow var(--t-medio) var(--ease-suave)}
.opts button:hover{border-color:var(--petroleo);color:var(--petroleo);box-shadow:var(--sh-1)}
.opts button:active{transform:scale(.98);transition-duration:.06s}
.opts button[aria-pressed="true"]::before{
  content:'';position:absolute;left:11px;top:50%;margin-top:-3px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:7px solid var(--dourado)}

/* Price / SAC */

/* ══════════════════════════════════════════════════════════════
   BOTÕES DE ESCOLHA (.seg) · base no comum · 25/08
   Estava só no <style> de duas páginas, e no câmbio os botões saíam
   com a cara crua do navegador. Vale para as três, então mora aqui.
   ══════════════════════════════════════════════════════════════ */
.seg{display:flex;gap:6px;background:var(--papel);border:1.5px solid var(--linha);
  border-radius:var(--r-peq);padding:4px}
.seg button{flex:1;font-family:inherit;font-size:var(--t-peq);font-weight:700;
  color:var(--texto);background:none;border:0;border-radius:7px;padding:9px 8px;cursor:pointer;
  line-height:1.2;white-space:nowrap}
.seg button.on{background:var(--petroleo);color:#fff}
.seg button{transition:background-color var(--t-rapido) var(--ease-suave),
                       color var(--t-rapido) var(--ease-suave),
                       box-shadow var(--t-medio) var(--ease-suave)}
.seg button:not(.on):hover{background:var(--papel);color:var(--petroleo)}
.seg button:active{transform:scale(.98);transition-duration:.06s}
.seg button.on{box-shadow:0 1px 2px rgba(44,62,80,.14),0 4px 10px rgba(44,62,80,.12)}

/* campos: reagem ao mouse, avisam valor fora da faixa */
.f input{transition:border-color var(--t-rapido) var(--ease-suave),
                    background-color var(--t-rapido) var(--ease-suave)}
.f input:hover:not(:focus){border-color:var(--linha)}
.f input:out-of-range{border-color:var(--alerta);background:var(--branco)}

/* número estável e nota com linha reservada */
.res .v{font-variant-numeric:tabular-nums}
.res .sub{min-height:2.6em}

/* ══════════════════════════════════════════════════════════════
   17. BRANDBOOK · triângulos e losangos
   Tile = a construção do logo: um pico cheio + um pico em contorno.
   Regra de proporção: primárias (creme, petróleo) sempre mais fortes
   que a secundária (dourado). Dourado é detalhe e linha.
   ══════════════════════════════════════════════════════════════ */

/* trama de montanhas no hero, "mais fraquinho assim" */
.hero .trama{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='294' viewBox='0 0 420 294'><path d='M0 294 L117 80 L234 294 Z' fill='%23FFF3DD' fill-opacity='0.03'/><path d='M190 294 L303 106 L416 294 Z' fill='none' stroke='%23D6AF5C' stroke-opacity='0.06' stroke-width='1.6'/></svg>");
  background-size:420px 294px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 100%,#000 42%,transparent 80%);
          mask-image:radial-gradient(130% 95% at 50% 100%,#000 42%,transparent 80%)}

/* picos espelhados fechando a página de consórcio (abre e fecha com a montanha) */
#tenho-cota{position:relative;overflow:hidden}
#tenho-cota .wrap{position:relative;z-index:2}
.peaksEsp{position:absolute;left:-90px;bottom:-70px;width:min(52vw,540px);opacity:.13;z-index:1}

/* textura de triângulos na faixa da tese (consórcio) */
.faixa{position:relative;overflow:hidden}
.faixa .wrap{position:relative;z-index:2}
.faixa::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='133' viewBox='0 0 190 133'><path d='M0 133 L53 34 L106 133 Z' fill='%23226866' fill-opacity='0.055'/><path d='M88 133 L139 48 L190 133 Z' fill='none' stroke='%23226866' stroke-opacity='0.05' stroke-width='1.6'/></svg>");
  background-size:190px 133px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 50%,transparent 34%,#000 88%);
          mask-image:radial-gradient(85% 75% at 50% 50%,transparent 34%,#000 88%)}

/* marca d'água de montanha nas caixas (garantia de imóvel): papel timbrado */
.box{position:relative;overflow:hidden}
.box::before{content:'';position:absolute;right:-14px;bottom:-16px;
  width:0;height:0;pointer-events:none;
  border-left:66px solid transparent;border-right:66px solid transparent;
  border-bottom:96px solid rgba(34,104,102,.045)}

/* o fio que liga os passos (garantia): dourado como LINHA, uso do brandbook */
.passos li{position:relative}
.passos li:not(:last-child)::after{content:'';position:absolute;
  left:17px;top:36px;bottom:-18px;width:2px;
  background:linear-gradient(180deg,var(--dourado),rgba(214,175,92,.25))}

/* losangos concêntricos: exatamente TRÊS no site. Ornamento vale por ser raro. */
.losangos{position:absolute;pointer-events:none}
.losangos i{position:absolute;inset:0;margin:auto;transform:rotate(45deg);
  border:1.1px solid currentColor;border-radius:2px}

.quote{position:relative;overflow:hidden}
.quote>p,.quote>span{position:relative;z-index:2}
.lq{right:-30px;top:-30px;width:140px;height:140px;color:var(--dourado);z-index:1}
.lq i:nth-child(1){opacity:.30}
.lq i:nth-child(2){inset:18px;opacity:.22}
.lq i:nth-child(3){inset:36px;opacity:.15}
.lq i:nth-child(4){inset:54px;opacity:.09}

.verdict{position:relative;overflow:hidden}
.verdict p{position:relative;z-index:2}
.lv{right:-46px;top:-24px;width:120px;height:120px;color:var(--dourado);z-index:0}
.lv i:nth-child(1){opacity:.34}
.lv i:nth-child(2){inset:20px;opacity:.20}

.final{position:relative;overflow:hidden}
.final .wrap{position:relative;z-index:2}
.lf{left:50%;top:50%;transform:translate(-50%,-50%);width:380px;height:380px;
    color:var(--creme);z-index:1}
.lf i:nth-child(1){opacity:.10}
.lf i:nth-child(2){inset:56px;opacity:.065}
.lf i:nth-child(3){inset:112px;opacity:.04}

/* itens de rodapé sem página: mesma geometria dos links, sem clique */
/* 22/08: esta regra dava 8px de margem só aos itens "em breve", e eles
   ficavam mais espaçados que os links ao lado. Mesmo espaçamento para todos. */
.fgrid .f-soon{display:block;opacity:.45;cursor:default;margin:0;padding:3px 0}

/* ══════════════════════════════════════════════════════════════
   18. RITMO DE FUNDOS · decisão fechada em 19/08
   Escuro = picos grandes · Branco = limpo de propósito ·
   Creme = MOLDURA DESENCONTRADA nos cantos opostos (escolha C
   do dono na _amostra-fundos.html; tile repetido foi reprovado).
   O HTML de cada seção creme carrega:
   <div class="cantos" aria-hidden="true"><i></i><i></i></div>
   ══════════════════════════════════════════════════════════════ */
section.cream{position:relative;overflow:hidden}
section.cream>.wrap{position:relative;z-index:1}
.cantos{position:absolute;inset:0;pointer-events:none;z-index:0}
.cantos i{position:absolute;width:150px;height:150px}
.cantos i:first-child{left:22px;top:22px;
  border-left:1.5px solid rgba(34,104,102,.35);border-top:1.5px solid rgba(34,104,102,.35)}
.cantos i:first-child::after{content:'';position:absolute;left:9px;top:9px;width:100%;height:100%;
  border-left:1.5px solid rgba(214,175,92,.45);border-top:1.5px solid rgba(214,175,92,.45)}
.cantos i:last-child{right:22px;bottom:22px;
  border-right:1.5px solid rgba(34,104,102,.35);border-bottom:1.5px solid rgba(34,104,102,.35)}
.cantos i:last-child::after{content:'';position:absolute;right:9px;bottom:9px;width:100%;height:100%;
  border-right:1.5px solid rgba(214,175,92,.45);border-bottom:1.5px solid rgba(214,175,92,.45)}
@media(max-width:900px){.cantos i{width:84px;height:84px}
  .cantos i:first-child{left:14px;top:14px}.cantos i:last-child{right:14px;bottom:14px}}

/* ══════════════════════════════════════════════════════════════
   19. NAVEGAÇÃO COM PRESENÇA
   Os links do topo eram texto solto de 14px com opacidade.
   Viram pílulas: fundo e contorno sutis SEMPRE, acendem no hover.
   ══════════════════════════════════════════════════════════════ */
/* Decisão A+B do dono (19/08, amostra de menus): links EDITORIAIS com
   fio dourado que se desenha, mais o andar de endereço acima do header. */
.nav ul{font-size:var(--t-base);gap:30px}
.nav ul a{position:relative;display:inline-block;padding:6px 2px;opacity:1;
  color:rgba(255,243,221,.85);
  transition:color var(--t-rapido) var(--ease-suave)}
.nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--dourado);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease-saida)}
.nav ul a:hover{color:var(--creme)}
.nav ul a:hover::after,.nav ul a.atual::after{transform:scaleX(1)}
.nav ul a.atual{color:var(--creme)}

/* o andar de endereço: credibilidade à mostra (Paulista 1636) */
.topo-info{background:var(--marinho);font-size:var(--t-mini);font-weight:600;color:rgba(255,243,221,.72)}
.topo-info .wrap{display:flex;gap:26px;align-items:center;padding-top:8px;padding-bottom:8px}
.topo-info span::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--dourado);margin-right:8px;vertical-align:2px}
.topo-info a{color:var(--creme);text-decoration:none;margin-left:auto;
  transition:color var(--t-rapido) var(--ease-suave)}
.topo-info a:hover{color:var(--dourado)}
@media(max-width:860px){.topo-info{display:none}}

/* o CTA acompanha o degrau dos links para não ficar menor que eles */
.nav .btn{font-size:var(--t-base)}

/* o header ganha peso quando a página rola (classe posta pelo refino.js) */
header{transition:box-shadow var(--t-medio) var(--ease-suave)}
header.rolou{box-shadow:0 2px 4px rgba(0,0,0,.14),0 12px 32px rgba(0,0,0,.22)}

/* subnav das páginas de produto: era barra branca com pílula verde,
   destoava do resto ("menu sem graça", feedback do dono). Agora fala a
   mesma língua editorial do menu de cima: escura, integrada ao header,
   item ativo com o fio dourado. */
.subnav{background:rgba(44,62,80,.96);backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,243,221,.08);
  border-bottom:1px solid rgba(214,175,92,.22)}
.subnav .wrap{gap:22px;align-items:center}
.subnav .sn-rotulo{flex:none;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(214,175,92,.9);margin-right:4px}
.subnav a{position:relative;background:none;border-radius:0;padding:8px 2px;
  color:rgba(255,243,221,.72);font-size:var(--t-peq);
  transition:color var(--t-rapido) var(--ease-suave)}
.subnav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--dourado);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease-saida)}
.subnav a:hover{background:none;color:var(--creme)}
.subnav a:hover::after{transform:scaleX(1)}
.subnav a.on{background:none;color:var(--creme)}
.subnav a.on::after{transform:scaleX(1)}

/* ══════════════════════════════════════════════════════════════
   20. SERVE / NÃO SERVE · o quadro de honestidade
   Feedback dos assessores: estava bege sobre bege, colunas tortas,
   texto quebrando. Agora cada painel tem identidade e cada item
   tem um fio próprio.
   ══════════════════════════════════════════════════════════════ */
.two{grid-template-columns:1fr 1fr}          /* colunas iguais: era 1.15/.85 e espremia o "não" */
@media(max-width:840px){.two{grid-template-columns:1fr}} /* celular empilha; sem isso o refino matava a media query das páginas */
.box:has(.serve){background:#fff;box-shadow:var(--sh-1);border-radius:var(--r-med);padding:28px 26px 20px}
.box:has(.serve.sim),.box:has(.serve:not(.nao)){border-top:3px solid var(--petroleo)}
.box:has(.serve.nao){border-top:3px solid var(--alerta)}
.box:has(.serve) h3{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.box:has(.serve) h3::before{content:'';width:10px;height:10px;border-radius:50%;flex:none}
.box:has(.serve.sim) h3::before,.box:has(.serve:not(.nao)) h3::before{background:var(--petroleo)}
.box:has(.serve.nao) h3::before{background:var(--alerta)}
.serve{gap:0}
.serve li{padding:13px 0;font-size:var(--t-base);line-height:1.5;align-items:flex-start}
.serve li+li{border-top:1px solid var(--papel)}
.serve li strong{color:var(--marinho)}
.serve.nao li strong{color:var(--alerta)}
.serve .mk{margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   21. ADORNO DOS CAMPOS · R$ e % dentro do campo, sem máscara
   Pedido dos assessores. O valor que o motor lê continua limpo:
   o adorno é só pintura por cima (attr data-pre / data-suf no .f).
   ══════════════════════════════════════════════════════════════ */
/* A grade estica o .f até o vizinho mais alto e sobrava vão sob o input.
   Flex-coluna com o input no pé alinha TODOS os campos da fileira
   e dá âncora exata para o adorno. */
.f{display:flex;flex-direction:column}
.f input{display:block;margin-top:auto}
.f[data-pre],.f[data-suf]{position:relative}
.f[data-pre] input{padding-left:48px}
.f[data-pre]::before{content:attr(data-pre);position:absolute;left:15px;top:auto;bottom:0;height:var(--alt-campo,42px);display:flex;align-items:center;
  font-size:var(--t-base);font-weight:600;color:var(--texto-2);pointer-events:none}
.f[data-suf] input{padding-right:46px}
.f[data-suf]::after{content:attr(data-suf);position:absolute;right:15px;top:auto;bottom:0;height:var(--alt-campo,42px);display:flex;align-items:center;
  font-size:var(--t-base);font-weight:600;color:var(--texto-2);pointer-events:none}

/* ══════════════════════════════════════════════════════════════
   SISTEMA DE COR · 21/08/2026 (decisão do Alexandre)
   VERDE petróleo = a cor da marca (topo, herói, blocos de peso)
   BEGE           = respiro, sempre COM textura de marca atrás
   AZUL marinho   = fecho da página e destaques pontuais
   BRANCO         = base
   Regra: nunca dois fundos escuros seguidos; bege nunca fica vazio.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · topo e herói em verde nas 5 páginas ── */
header{background:rgba(34,104,102,.97);border-bottom-color:rgba(214,175,92,.3)}
.hero{background:linear-gradient(155deg,var(--petroleo) 0%,var(--petroleo) 55%,var(--petroleo) 100%)}
.hero .peaks{opacity:.11}

/* ── 2 · blocos de peso: verde profundo (era azul) ── */
#serve{background:linear-gradient(158deg,var(--petroleo) 0%,var(--petroleo) 58%,var(--petroleo) 100%);color:var(--creme)}
#tenho-cota{background:linear-gradient(158deg,var(--petroleo),var(--petroleo))}

/* ── 3 · bege com textura do brandbook, para não ficar vazio ── */
.cream{background:var(--areia);position:relative;overflow:hidden}
.cream::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='38' viewBox='0 0 20 38'><path d='M1.8 15.7 L6.8 7.4 L11.7 15.7 Z' fill='%23226866' fill-opacity='0.045'/><path d='M10.1 1.1 L13.6 15.7 L18.2 15.7 Z' fill='none' stroke='%23226866' stroke-opacity='0.108' stroke-width='0.55'/><path d='M5.8 2.6 L12.6 17.8' fill='none' stroke='%23226866' stroke-opacity='0.108' stroke-width='0.55'/><path d='M-8.2 34.7 L-3.2 26.4 L1.7 34.7 Z' fill='%23226866' fill-opacity='0.045'/><path d='M0.1 20.1 L3.6 34.7 L8.2 34.7 Z' fill='none' stroke='%23226866' stroke-opacity='0.108' stroke-width='0.55'/><path d='M-4.2 21.6 L2.6 36.8' fill='none' stroke='%23226866' stroke-opacity='0.108' stroke-width='0.55'/><path d='M11.8 34.7 L16.8 26.4 L21.7 34.7 Z' fill='%23226866' fill-opacity='0.045'/><path d='M20.1 20.1 L23.6 34.7 L28.2 34.7 Z' fill='none' stroke='%23226866' stroke-opacity='0.108' stroke-width='0.55'/><path d='M15.8 21.6 L22.6 36.8' fill='none' stroke='%23226866' stroke-opacity='0.108' stroke-width='0.55'/></svg>");
  background-size:20px 38px}
.cream>.wrap{position:relative;z-index:1}

/* ── 4 · a faixa de tese deixa de ser escura: vira respiro claro ── */
.faixa{background:var(--areia);color:var(--cinza);position:relative;overflow:hidden}
.faixa::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='32' viewBox='0 0 17 32'><path d='M1.8 13.0 L5.8 6.1 L9.9 13.0 Z' fill='%23226866' fill-opacity='0.034'/><path d='M8.6 0.9 L11.4 13.0 L15.2 13.0 Z' fill='none' stroke='%23226866' stroke-opacity='0.082' stroke-width='0.55'/><path d='M5.0 2.2 L10.6 14.6' fill='none' stroke='%23226866' stroke-opacity='0.082' stroke-width='0.55'/><path d='M-6.7 29.0 L-2.7 22.1 L1.4 29.0 Z' fill='%23226866' fill-opacity='0.034'/><path d='M0.1 16.9 L2.9 29.0 L6.7 29.0 Z' fill='none' stroke='%23226866' stroke-opacity='0.082' stroke-width='0.55'/><path d='M-3.5 18.2 L2.1 30.6' fill='none' stroke='%23226866' stroke-opacity='0.082' stroke-width='0.55'/><path d='M10.3 29.0 L14.3 22.1 L18.4 29.0 Z' fill='%23226866' fill-opacity='0.034'/><path d='M17.1 16.9 L19.9 29.0 L23.7 29.0 Z' fill='none' stroke='%23226866' stroke-opacity='0.082' stroke-width='0.55'/><path d='M13.5 18.2 L19.1 30.6' fill='none' stroke='%23226866' stroke-opacity='0.082' stroke-width='0.55'/></svg>");
  background-size:17px 32px}
.faixa>.wrap{position:relative;z-index:1}
.faixa .frase{color:var(--marinho)}
.faixa .sub{color:var(--cinza)}

/* ── 5 · fecho e rodapé em azul (contraste com o verde da marca) ── */
.final{background:linear-gradient(150deg,var(--marinho),var(--marinho))}
footer{background:var(--marinho)}

/* ── 6 · azul como destaque pontual dentro do conteúdo ── */
.kick{background:var(--marinho);border-radius:var(--r-med)}
.kick p{color:var(--creme)}
.verdict{background:var(--marinho)}

/* ── 7 · índice da página em branco (21/08): destaca sem pesar sob o verde ── */
.subnav{background:rgba(255,255,255,.97);
  border-top:1px solid rgba(44,62,80,.06);
  border-bottom:1px solid rgba(44,62,80,.1);
  box-shadow:0 2px 14px rgba(44,62,80,.06)}
.subnav .sn-rotulo{color:var(--petroleo)}
.subnav a{color:rgba(81,81,81,.86)}
.subnav a:hover,.subnav a.on{color:var(--petroleo)}

/* ── 8 · correções finas (21/08) ── */

/* cantos decorativos não convivem com ferramenta grande: some onde há simulador */
section:has(.tool) .cantos,section:has(.orbita) .cantos,section:has(.erros-grid) .cantos{display:none}

/* HOME: header verde colava no herói verde. O herói ganha profundidade e um fio de ouro separa */
body:not(:has(.subnav)) header{border-bottom:2px solid rgba(214,175,92,.42)}
body:not(:has(.subnav)) .hero{background:linear-gradient(168deg,var(--petroleo) 0%,var(--petroleo) 30%,var(--petroleo) 70%,var(--petroleo) 100%)}

/* ══════════════════════════════════════════════════════════════
   DINAMISMO SUTIL · 21/08/2026
   Referência: a seção "Onde mora o custo" ficou boa. Aqui o repertório
   que dá vida sem virar carnaval. Tudo cede a prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · cantos decorativos param de brigar com os cartões ──
   Eram 150px a 22px da borda e atravessavam a grade. Agora ficam mais
   para fora, menores e mais discretos. */
.cantos i{width:112px;height:112px;opacity:.7}
.cantos i:first-child{left:10px;top:10px}
.cantos i:last-child{right:10px;bottom:10px}
@media(max-width:1100px){.cantos i{width:76px;height:76px;opacity:.55}}
@media(max-width:820px){.cantos{display:none}}   /* no celular só atrapalha */

/* ── 2 · cartão branco que responde ao mouse (padrão da casa) ── */
.orbita .sat,.erro-card,.passo,.custo>div,.box,.res>div{
  transition:transform var(--t-medio,.28s) var(--ease-suave,cubic-bezier(.4,0,.2,1)),
             box-shadow var(--t-medio,.28s) var(--ease-suave,cubic-bezier(.4,0,.2,1)),
             border-color var(--t-rapido,.16s) var(--ease-suave,cubic-bezier(.4,0,.2,1))}
.orbita .sat:hover,.erro-card:hover,.passo:hover,.custo>div:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(44,62,80,.07),0 22px 44px rgba(44,62,80,.11);
  border-color:rgba(214,175,92,.5)}

/* ── 3 · o núcleo escuro respira junto ── */
.orbita .nucleo{transition:transform .5s var(--ease-saida,cubic-bezier(.16,1,.3,1)),
                           box-shadow .5s var(--ease-saida,cubic-bezier(.16,1,.3,1))}
.orbita:hover .nucleo{transform:scale(1.015);box-shadow:0 26px 60px rgba(44,62,80,.26)}

/* ── 4 · entrada em cascata: cada cartão da grade chega um pouquinho depois ── */
.js-rv .erros-grid>*:nth-child(1),.js-rv .custo>*:nth-child(1),.js-rv .passos>*:nth-child(1){--rv-delay:0ms}
.js-rv .erros-grid>*:nth-child(2),.js-rv .custo>*:nth-child(2),.js-rv .passos>*:nth-child(2){--rv-delay:70ms}
.js-rv .erros-grid>*:nth-child(3),.js-rv .custo>*:nth-child(3),.js-rv .passos>*:nth-child(3){--rv-delay:140ms}
.js-rv .erros-grid>*:nth-child(4),.js-rv .custo>*:nth-child(4){--rv-delay:210ms}
.js-rv .erros-grid>*:nth-child(5),.js-rv .custo>*:nth-child(5){--rv-delay:280ms}

/* ── 5 · a bolinha dourada do rótulo pisca de leve quando o cartão é olhado ── */
.orbita .sat h4::before{transition:transform var(--t-medio,.28s) var(--ease-saida,cubic-bezier(.16,1,.3,1)),
                                   box-shadow var(--t-medio,.28s) ease}
.orbita .sat:hover h4::before{transform:scale(1.45);box-shadow:0 0 0 4px rgba(214,175,92,.18)}

/* ── 6 · O brilho do botão é UM só, o do .btn genérico lá em cima.
   Existia um segundo aqui, exclusivo do dourado: os dois atravessavam juntos
   e o texto sumia no clarão (reclamação dele, 25/08). Não recriar. */

/* ── 7 · linhas de tabela e itens de lista deslizam de leve ── */
.cB .linha,.serve li{transition:background-color var(--t-rapido,.16s) ease,padding-left var(--t-rapido,.16s) ease}

/* ── 8 · o valor do resultado pulsa de leve quando muda ── */
@keyframes valorMudou{0%{transform:scale(1)}38%{transform:scale(1.05)}100%{transform:scale(1)}}
.res .v.mudou{animation:valorMudou .42s var(--ease-saida,cubic-bezier(.16,1,.3,1))}

@media (prefers-reduced-motion:reduce){
  .orbita .sat:hover,.erro-card:hover,.passo:hover,.custo>div:hover,.orbita:hover .nucleo{
    transform:none!important;box-shadow:var(--sh-2,0 8px 20px rgba(44,62,80,.08))!important}
  .btn::after{display:none}   /* o brilho generico; o do dourado ja nao existe */
  .res .v.mudou{animation:none}
}


/* ══════════════════════════════════════════════════════════════
   RESPIRO DE SEÇÃO · 22/08
   Com a escala menor, o padding antigo abria buracos entre blocos.
   Encolhe junto com a tipografia para a página não virar rolagem.
   ══════════════════════════════════════════════════════════════ */
section{padding:clamp(34px,4.4vw,58px) 0}
.head{margin-bottom:clamp(20px,2.6vw,30px)}
.faixa{padding:clamp(40px,5vw,66px) 0}
.faixa .fio{margin-bottom:22px}
.faixa .sub{margin-top:20px}

/* ══════════════════════════════════════════════════════════════
   SIMULADOR COMPACTO · #comparador (consórcio) · 22/08
   Feedback: "o simulador está muito grande, sem mudar nada do que
   foi colocado lá". Então: NENHUM campo, texto ou resultado sai.
   Só encolhem padding, entrelinha e corpo de letra.
   Medido antes: 1334px (1,6 tela). Alvo: caber em uma tela.
   ══════════════════════════════════════════════════════════════ */
#comparador .tool{padding:clamp(17px,2.2vw,25px);border-radius:var(--r-g)}
#comparador .abas{margin-bottom:15px;padding:4px;border-radius:var(--r-peq)}
#comparador .abas button{padding:9px 12px;font-size:var(--t-peq);border-radius:var(--r-peq)}
#comparador .comum{gap:12px 16px;margin-bottom:15px}
#comparador .duplo{gap:14px}
#comparador .coluna{border-radius:var(--r-med)}
#comparador .coluna>header{padding:10px 15px;font-size:var(--t-peq);gap:7px}
#comparador .coluna>header i{font-size:var(--t-micro)}
#comparador .coluna .campos{padding:13px 15px;gap:10px}
#comparador .coluna .saida{padding:13px 15px;gap:10px}
#comparador .f label{font-size:var(--t-micro);margin-bottom:4px}
#comparador .f .hint{font-size:var(--t-micro);min-height:1.3em;margin-top:2px;line-height:1.32}
#comparador .f input{padding:8px 11px;font-size:var(--t-base);border-radius:var(--r-peq)}
/* o atalho acima apaga o espaço reservado ao adorno: devolve, na medida nova */
#comparador .f[data-pre] input{padding-left:40px}
/* o adorno acompanha a altura real do campo, senão fica calçado na base */
.f[data-pre],.f[data-suf]{--alt-campo:42px}
#simulador .f[data-pre],#simulador .f[data-suf],
#comparador .f[data-pre],#comparador .f[data-suf],
#ferramenta .f[data-pre],#ferramenta .f[data-suf]{--alt-campo:38px}
#comparador .f[data-suf] input{padding-right:38px}
#comparador .f[data-pre]::before{left:12px;font-size:var(--t-peq)}
#comparador .f[data-suf]::after{right:12px;font-size:var(--t-peq)}
#comparador .seg{min-height:0}
#comparador .seg button{padding:8px 6px;font-size:var(--t-peq)}
#comparador .coluna .linha-res .v{font-size:var(--t-g)}
#comparador .coluna .linha-res h4{font-size:var(--t-micro)}
#comparador .coluna .sub{font-size:var(--t-micro);margin-top:-6px}
#comparador .verdict{margin-top:14px!important;padding:14px 17px;border-radius:var(--r-peq)}
#comparador .verdict p{font-size:clamp(.97rem,1.55vw,1.12rem);line-height:1.3}
#comparador .verdict .obs{font-size:var(--t-mini);margin-top:7px;line-height:1.45}
#comparador .nota-cet{margin-top:12px;gap:7px 15px}
#comparador .nota-cet p{font-size:var(--t-mini);line-height:1.45}
#comparador .nota-cet a{font-size:var(--t-mini)}
#comparador .aviso{margin-top:11px;font-size:var(--t-micro);line-height:1.45}
#comparador .fields{gap:11px 14px}
#comparador .out{margin-top:18px;padding:17px;border-radius:var(--r-med)}
#comparador .res{gap:11px}
#comparador .res>div{padding:13px;border-radius:var(--r-peq)}
#comparador .res .v{font-size:var(--t-g)}
#comparador .res h4{font-size:var(--t-micro);margin-bottom:5px}
#comparador .res .sub{font-size:var(--t-micro);margin-top:4px}

/* ══════════════════════════════════════════════════════════════
   ALINHAMENTO DOS BLOCOS LONGOS · 22/08
   Feedback com print: texto de 3 parágrafos ao lado de um card
   mais alto ficava pendurado no topo. Centraliza no eixo vertical.
   ══════════════════════════════════════════════════════════════ */
#tenho-cota .two{align-items:center}
#tenho-cota .prose p{margin-bottom:13px}

/* ══════════════════════════════════════════════════════════════
   LEITURA DOS BLOCOS LONGOS · 22/08
   Feedback: "ajuste a justificativa dos blocos de texto à
   esquerda, talvez deixar a letra menor". Linha longa demais é o
   que cansa, mais que o corpo da letra: 62 caracteres é o
   confortável. Corpo desce um degrau e a entrelinha abre.
   ══════════════════════════════════════════════════════════════ */
.prose p{font-size:var(--t-base);line-height:1.68;max-width:62ch}
.prose p + p{margin-top:13px}

/* ══════════════════════════════════════════════════════════════
   TOPO ALINHADO ENTRE TEXTO E CARTÃO · 22/08
   Feedback com print: o texto da esquerda começava no topo e o
   cartão da direita, por causa do próprio padding, começava mais
   abaixo. A primeira linha dos dois lados agora nasce na mesma
   altura. Só onde o par é texto + cartão.
   ══════════════════════════════════════════════════════════════ */
/* alinhar TOPOS resolvia só quando os dois lados tinham altura parecida.
   Quando o cartão é bem mais alto (o exemplo com números do veículo, por
   exemplo), sobrava um vazio embaixo do texto. Centralizar no eixo
   vertical funciona nos dois casos. */
.two:has(> .box){align-items:center}
@media(max-width:820px){.two:has(> .box){align-items:start}}

/* ══════════════════════════════════════════════════════════════
   RÓTULO DAS PORTAS · 22/08
   O respiro morava no .portas, então o rótulo colava nos botões
   de cima. Passa para o bloco inteiro.
   ══════════════════════════════════════════════════════════════ */
/* o respiro precisa morar no RÓTULO, não no wrap: no imóvel as portas
   estão num wrap próprio, nas outras três estão dentro do wrap do hero,
   e um seletor preso à estrutura só consertava uma das quatro. */
.hero .over.gold:has(+ .portas){margin-top:clamp(26px,3.4vw,38px)}
.hero .over.gold + .portas{margin-top:0}

/* ══════════════════════════════════════════════════════════════
   SIMULADOR DO IMÓVEL COMPACTO · #simulador · 22/08
   Mesmo tratamento que o comparador do consórcio já recebeu:
   nenhum campo sai, só encolhem padding, entrelinha e corpo.
   ══════════════════════════════════════════════════════════════ */
#simulador .tool{padding:clamp(17px,2.2vw,25px);border-radius:var(--r-g)}
#simulador .fields{gap:11px 14px}
#simulador .f label{font-size:var(--t-micro);margin-bottom:4px}
#simulador .f .hint{font-size:var(--t-micro);margin-top:2px;line-height:1.32}
#simulador .f input{padding:8px 11px;font-size:var(--t-base);border-radius:var(--r-peq)}
#simulador .f[data-pre] input{padding-left:40px}
#simulador .f[data-suf] input{padding-right:38px}
#simulador .f[data-pre]::before{left:12px;font-size:var(--t-peq)}
#simulador .f[data-suf]::after{right:12px;font-size:var(--t-peq)}
#simulador .seg{min-height:0}
#simulador .seg button{padding:8px 6px;font-size:var(--t-peq)}
#simulador .out{margin-top:18px;padding:17px;border-radius:var(--r-med)}
#simulador .res{gap:11px}
#simulador .res>div{padding:13px;border-radius:var(--r-peq)}
#simulador .res .v{font-size:var(--t-g)}
#simulador .res h4{font-size:var(--t-micro);margin-bottom:5px}
#simulador .res .sub{font-size:var(--t-micro);margin-top:4px}
#simulador .verdict{margin-top:14px!important;padding:14px 17px;border-radius:var(--r-peq)}
#simulador .verdict p{font-size:clamp(.97rem,1.55vw,1.12rem);line-height:1.3}
#simulador .verdict .obs{font-size:var(--t-mini);margin-top:7px;line-height:1.45}
#simulador .aviso{margin-top:11px;font-size:var(--t-micro);line-height:1.45}
#simulador .nota-cet{margin-top:12px;gap:7px 15px}
#simulador .nota-cet p{font-size:var(--t-mini);line-height:1.45}
#simulador .nota-cet a{font-size:var(--t-mini)}

/* mesma compactação nas ferramentas de veículo e câmbio */
#ferramenta .tool{padding:clamp(17px,2.2vw,25px);border-radius:var(--r-g)}
#ferramenta .fields{gap:11px 14px}
#ferramenta .f label{font-size:var(--t-micro);margin-bottom:4px}
#ferramenta .f .hint{font-size:var(--t-micro);margin-top:2px;line-height:1.32}
#ferramenta .f input{padding:8px 11px;font-size:var(--t-base);border-radius:var(--r-peq)}
#ferramenta .f[data-pre] input{padding-left:52px}
#ferramenta .f[data-suf] input{padding-right:38px}
#ferramenta .f[data-pre]::before{left:12px;font-size:var(--t-peq)}
#ferramenta .f[data-suf]::after{right:12px;font-size:var(--t-peq)}
#ferramenta .seg{min-height:0}
#ferramenta .seg button{padding:8px 6px;font-size:var(--t-peq)}
#ferramenta .out{margin-top:18px;padding:17px;border-radius:var(--r-med)}
#ferramenta .res{gap:11px}
#ferramenta .res>div{padding:13px;border-radius:var(--r-peq)}
#ferramenta .res .v{font-size:var(--t-g)}
#ferramenta .res h4{font-size:var(--t-micro);margin-bottom:5px}
#ferramenta .res .sub{font-size:var(--t-micro);margin-top:4px}
#ferramenta .verdict{margin-top:14px!important;padding:14px 17px;border-radius:var(--r-peq)}
#ferramenta .verdict p{font-size:clamp(.97rem,1.55vw,1.12rem);line-height:1.3}
#ferramenta .verdict .obs{font-size:var(--t-mini);margin-top:7px;line-height:1.45}
#ferramenta .aviso{margin-top:11px;font-size:var(--t-micro);line-height:1.45}

/* ══════════════════════════════════════════════════════════════
   RODAPÉ · uma definição só, para as cinco · 22/08
   Veículo e câmbio tinham um rodapé encurtado, sem colunas, e por
   isso nunca receberam este CSS. Ao padronizar o conteúdo, o
   estilo ficou faltando e as colunas viraram uma pilha de links.
   Agora a regra vive aqui, no arquivo que todas carregam.
   ══════════════════════════════════════════════════════════════ */
footer{background:var(--marinho);color:rgba(255,243,221,.62);font-size:var(--t-peq);padding:44px 0 36px}
footer img{height:34px;margin-bottom:20px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:26px;margin-bottom:28px}
.fgrid h4{color:var(--creme);font-size:var(--t-mini);letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.fgrid a{text-decoration:none;display:block;padding:3px 0}
.fgrid a:hover{color:var(--dourado)}
.fgrid p{margin:0 0 6px;line-height:1.5}
footer .legal{border-top:1px solid rgba(255,243,221,.14);padding-top:22px;font-size:var(--t-mini);line-height:1.6}
.f-soon{opacity:.45;cursor:default;display:block;padding:3px 0}
.menu .f-soon{display:block;padding:8px 14px}

/* ══════════════════════════════════════════════════════════════
   QUEM SOMOS · home · 22/08
   Era "Quem está do outro lado da mesa", com dois cartões de sócio
   em iniciais. Vira a estrutura da casa: unidades, alcance e a
   Paulista em preto e branco. Pedido: "falando da estrutura, das
   filiais, que atendemos todo brasil".
   ══════════════════════════════════════════════════════════════ */
.casa-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,3.4vw,44px);
  align-items:center;margin-bottom:clamp(24px,3vw,36px)}
@media(max-width:820px){.casa-grid{grid-template-columns:1fr}}
.casa-num{display:grid;gap:12px}
.casa-num > div{background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r-med);padding:14px 18px;display:flex;align-items:baseline;gap:12px}
.casa-num b{font-family:var(--serif);font-weight:400;font-size:1.85rem;color:var(--petroleo);line-height:1}
.casa-num span{font-size:var(--t-peq);color:var(--texto-2);line-height:1.3}
.casa-txt p{font-size:var(--t-base);margin-bottom:12px}
.casa-txt p:last-child{margin-bottom:0}
.casa-foto{margin:0;position:relative;border-radius:var(--r-g);overflow:hidden}
.casa-foto img{width:100%;max-height:400px;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06);transition:filter .6s ease}
.casa-foto:hover img{filter:grayscale(.55) contrast(1.02)}
/* mesma regra da marca para foto em <img>: cor vem do marinho */
.casa-foto{background:var(--marinho)}
.casa-foto img{mix-blend-mode:luminosity}
.casa-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 15px;
  font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--creme);
  background:linear-gradient(transparent,rgba(44,62,80,.72))}

/* ══════════════════════════════════════════════════════════════
   HERO EM DUAS COLUNAS · 22/08
   Pedido: "todas as páginas seguir no padrão com uma imagem do
   lado na frase inicial". A regra mora aqui, no arquivo que as
   cinco carregam, senão cada página precisa da sua cópia e a
   primeira que esquecer quebra o padrão de novo.
   ══════════════════════════════════════════════════════════════ */
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,4vw,58px);align-items:center}
/* no celular o texto vem primeiro: é o título que vende, a arte ilustra.
   Antes a arte subia (order:-1) e comia a primeira dobra. */
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}
  .hero-grid .moldura{order:2;margin-top:6px}}
.moldura{position:relative;padding:26px 26px 30px}
.moldura::before,.moldura::after{content:'';position:absolute;border:2px solid var(--dourado);
  border-radius:4px;pointer-events:none}
.moldura::before{top:0;right:14px;width:74%;height:62%}
.moldura::after{bottom:0;left:0;width:64%;height:56%;opacity:.62}
.moldura .arte{position:relative;z-index:1;border-radius:6px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.35)}
.moldura .arte svg{display:block;width:100%;height:auto}

/* ══════════════════════════════════════════════════════════════
   SIMULADOR DE CÂMBIO · dois lados da operação · 22/08
   Antes mostrava só o custo. Agora mostra o que sai e o que chega,
   que é a pergunta real de quem envia ou recebe do exterior.
   ══════════════════════════════════════════════════════════════ */
.cx-linha1{display:grid;grid-template-columns:1.6fr 1fr;gap:11px 14px;margin-bottom:12px}
@media(max-width:640px){.cx-linha1{grid-template-columns:1fr}}
#ferramenta select{width:100%;font-family:inherit;font-size:var(--t-base);font-weight:600;
  color:var(--marinho);background:var(--papel);border:1.5px solid var(--linha);border-radius:var(--r-peq);
  padding:8px 11px;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--petroleo) 50%),
                   linear-gradient(135deg,var(--petroleo) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
#ferramenta select:focus{outline:0;border-color:var(--petroleo);background-color:#fff}
/* a lista suspensa ABERTA é desenhada pelo sistema, não pelo site: o item destacado
   sai no azul do macOS. accent-color é o único gancho que o navegador dá. */
#ferramenta select,.tool select,select{accent-color:var(--petroleo)}
#ferramenta select option:checked{background:var(--petroleo);color:var(--creme)}

.cx-resultado{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
@media(max-width:640px){.cx-resultado{grid-template-columns:1fr}.cx-seta{transform:rotate(90deg)}}
.cx-lado{background:#fff;border:1px solid var(--areia);border-radius:var(--r-med);padding:15px 17px}
.cx-lado.destaque{border-color:var(--dourado);background:var(--branco)}
.cx-lado h4{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;
  color:var(--petroleo);margin-bottom:6px}
.cx-lado.destaque h4{color:var(--dourado-escuro)}
.cx-lado .v{font-weight:700;font-size:var(--t-g);color:var(--marinho);line-height:1.1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cx-lado .sub{display:block;font-size:var(--t-mini);color:var(--texto-2);margin-top:5px;line-height:1.35}
.cx-seta{font-size:var(--t-g);color:var(--dourado);text-align:center}

.cx-quebra{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));
  gap:1px;margin-top:14px;background:var(--areia);border:1px solid var(--areia);border-radius:var(--r-peq);overflow:hidden}
.cx-quebra > div{background:#fff;padding:10px 12px}
.cx-quebra span{display:block;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-2);margin-bottom:3px}
.cx-quebra b{font-size:var(--t-base);color:var(--marinho);font-variant-numeric:tabular-nums}
.cx-quebra .tot{background:var(--papel)}
.cx-quebra .tot b{color:var(--petroleo)}

/* ══════════════════════════════════════════════════════════════
   ALERTA DO TETO · simulador de imóvel · 22/08
   O aviso existia, mas em 12px e cor apagada dentro do bloco
   escuro do veredito: passava despercebido. Retorno do Gustavo:
   "se o cliente coloca um valor maior do que os 60%, não aparece
   nenhuma informação". Agora é tarja, antes do resultado.
   ══════════════════════════════════════════════════════════════ */
.alerta-teto{display:flex;gap:13px;align-items:flex-start;margin-top:18px;
  background:var(--papel);border:1px solid rgba(184,65,59,.38);
  border-radius:var(--r-peq);padding:14px 17px}
.alerta-teto[hidden]{display:none}
.alerta-teto i{font-style:normal;flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:var(--alerta);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--t-peq)}
.alerta-teto b{display:block;color:var(--alerta);font-size:var(--t-base);line-height:1.35;margin-bottom:4px}
.alerta-teto span{display:block;font-size:var(--t-peq);color:var(--texto-2);line-height:1.5}

/* ══════════════════════════════════════════════════════════════
   GUIA EM DUAS ETAPAS · home · 22/08
   A etapa 2 nasce depois da escolha do caminho, então entra com
   um movimento curto para o leitor perceber que a página respondeu.
   ══════════════════════════════════════════════════════════════ */
#etapa2[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  #etapa2 .q{animation:guiaEntra .34s cubic-bezier(.16,1,.3,1) both}
  #etapa2 .q:nth-child(2){animation-delay:.07s}
  @keyframes guiaEntra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}
.recomecar{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-mini);font-weight:600;color:var(--petroleo);
  border-bottom:1.5px solid rgba(34,104,102,.3);padding:2px 0}
.recomecar:hover{border-bottom-color:var(--petroleo)}
.recomecar[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════
   HERO COM FOTO DE FUNDO · 24/08
   O mecanismo mora aqui porque as 5 páginas vão usar. A imagem de
   cada uma entra na própria página, na variável --foto.
   O escurecimento é em diagonal: pesado onde fica o texto, leve do
   outro lado, senão o título não lê.
   ══════════════════════════════════════════════════════════════ */
body .hero.hero--foto{
  /* a foto entra só com a luminosidade e a cor vem do marinho: é isso que faz
     a imagem pertencer à marca em vez de parecer preto e branco de banco de imagem */
  background-color:var(--marinho);
  background-image:
    linear-gradient(100deg, rgba(44,62,80,.93) 0%, rgba(44,62,80,.82) 38%,
                            rgba(44,62,80,.46) 70%, rgba(44,62,80,.3) 100%),
    var(--foto);
  background-blend-mode:normal, luminosity;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat}
.hero--foto .peaks,.hero--foto .trama{display:none}
.hero--foto .hero-inner{max-width:660px}
/* o cabeçalho é petróleo sólido, que casava com o hero verde. Sobre foto ele
   vira uma faixa destoante, então acompanha o escuro da imagem. Só onde há foto. */
body:has(.hero--foto) header{background:rgba(44,62,80,.94)}
body:has(.hero--foto) header{border-bottom:1px solid rgba(255,243,221,.09)}
@media(max-width:900px){                 /* mesmo ponto em que .hero-grid vira 1 coluna */
  body .hero.hero--foto{
    background-image:
      linear-gradient(178deg, rgba(44,62,80,.9) 0%, rgba(44,62,80,.84) 55%,
                              rgba(44,62,80,.64) 100%),
      var(--foto)}
}

/* ══════════════════════════════════════════════════════════════
   PALETA · BRANDBOOK HC360 (Bôdhi)
   As 5 primeiras são as oficiais. Nada além delas é cor nova:
   o resto é derivação declarada, para papel que o manual não cobre
   (borda, cartão, texto secundário, sinal de erro).
   ⚠️ Escuro NUNCA se inventa. Precisou de mais escuro? use o marinho
   com transparência. Foi assim que o site ganhou três azuis diferentes.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ── oficiais, do manual ── */
  --marinho:         #2C3E50;   /* primária · fundo dominante */
  --petroleo:        #226866;   /* primária · ícone, acento */
  --creme:           #FFF3DD;   /* primária · texto sobre escuro */
  --dourado:         #D6AF5C;   /* secundária · detalhe, linha, padrão */
  --texto:           #515151;   /* texto corrido */

  /* ── derivações do creme, para superfícies claras ── */
  --branco:          #FFFFFF;   /* cartão */
  --papel:           #FAF8F4;   /* cartão alternativo, campo */
  --areia:           #F7F3E9;   /* faixa clara da página */
  --linha:           #E8E4DA;   /* toda borda clara */

  /* ── derivações para papéis que o manual não cobre ── */
  --marinho-claro:   #3A4E5E;   /* borda e hover dentro do escuro */
  --dourado-claro:   #E8C96A;   /* hover do dourado */
  --dourado-escuro:  #6B5410;   /* dourado legível sobre fundo claro */
  --texto-2:         #7A7466;   /* secundário, legenda */
  --alerta:          #B8413B;   /* erro. não é cor de marca, é sinal */
  --positivo:        #8FD4B6;   /* acerto. idem */
}

/* ══════════════════════════════════════════════════════════════
   SIMULADOR DE CÂMBIO · escolhas em cartão · 25/08
   A lista suspensa do sistema saía com a cara do macOS e o item
   destacado em azul de fora da paleta. Virou cartão, no mesmo
   vocabulário do resto do site.
   ══════════════════════════════════════════════════════════════ */
.cx-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-escolhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,104px),1fr));gap:5px;
  background:var(--papel);border:1.5px solid var(--linha);border-radius:var(--r-peq);padding:4px}
.cx-opt{font-family:inherit;font-size:var(--t-peq);font-weight:700;color:var(--texto);
  background:none;border:0;border-radius:7px;padding:10px 8px;cursor:pointer;line-height:1.2;
  transition:background-color var(--t-rapido) var(--ease-suave),color var(--t-rapido) var(--ease-suave)}
.cx-opt:not([aria-pressed="true"]):hover{background:var(--branco);color:var(--petroleo)}
.cx-opt[aria-pressed="true"]{background:var(--petroleo);color:#fff}
.cx-opt:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}
.cx-moe i{font-style:normal;opacity:.6;margin-left:4px;font-weight:600}
@media(prefers-reduced-motion:reduce){.cx-opt{transition:none}}
