/* ═══════════════════════════════════════════════════════════════════
   CREDIPTU — primitivos, padrões e superfícies de domínio
   Depende de tokens.css. Nenhum literal de cor/tipo/espaço aqui.
   ═══════════════════════════════════════════════════════════════════ */

/* ── base ────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--tinta);
  color:var(--txt-escuro);
  font-family:var(--f-texto);
  font-size:var(--t-corpo);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit}

:focus-visible{outline:3px solid var(--lima);outline-offset:3px;border-radius:var(--r-mini)}
/* alvo de foco programático para leitor de tela — não é foco de teclado,
   então não desenha anel */
#resultado:focus,#resultado:focus-visible{outline:none}
[data-sobre="breu"] :focus-visible{outline-color:var(--lima)}

::selection{background:var(--lima);color:var(--tinta)}

/* ── tipografia: papéis ──────────────────────────────────────────── */

.display{
  font-family:var(--f-display);
  font-variation-settings:"wght" 800,"wdth" 110;
  line-height:.92;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.display--heroi{font-size:var(--t-heroi);letter-spacing:-.032em;line-height:.88}
.display--secao{font-size:var(--t-secao);letter-spacing:-.026em}
.display--titulo{font-size:var(--t-titulo);font-variation-settings:"wght" 700,"wdth" 100;letter-spacing:-.015em}

.rotulo{
  font-family:var(--f-display);
  font-variation-settings:"wght" 650,"wdth" 88;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:var(--t-micro);
  line-height:1.2;
  margin:0;
}
.dado{font-family:var(--f-dado);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-.03em}
.prosa{font-size:var(--t-corpo-g);line-height:1.6;margin:0;text-wrap:pretty}
.prosa--peq{font-size:var(--t-corpo);line-height:1.58}

/* ── primitivo: ícone ────────────────────────────────────────────────
   Phosphor, local, três pesos com significado fixo:
     regular (i-r-*) → informativo, acompanha rótulo
     bold    (i-b-*) → afordância de ação, vive dentro de botão
     fill    (i-f-*) → estado do débito, nunca decorativo
   Herda cor e tamanho do texto: dimensionar via font-size do pai.       */

.ico{
  width:1em;height:1em;flex:none;
  display:inline-block;vertical-align:-.14em;
  fill:currentColor;pointer-events:none;
}
.ico--g{width:1.35em;height:1.35em}
.ico--xg{width:1.75em;height:1.75em}

/* ── primitivo: botão ────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  padding:var(--e-3) var(--e-5);
  min-height:52px;
  border-radius:var(--r-pill);
  font-family:var(--f-texto);
  font-weight:600;font-size:var(--t-corpo);letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  transition:background var(--t-rapido) ease,color var(--t-rapido) ease,
             transform var(--t-rapido) ease,box-shadow var(--t-rapido) ease;
}
.btn:active{transform:translateY(1px)}
.btn__seta{transition:transform var(--t-medio) var(--curva)}
.btn:hover .btn__seta{transform:translateX(3px)}

.btn--lima{background:var(--lima);color:var(--tinta)}
.btn--lima:hover{background:var(--lima-alto)}

.btn--tinta{background:var(--tinta);color:var(--txt-claro)}
.btn--tinta:hover{background:var(--tinta-3)}

.btn--vidro{color:var(--txt-claro)}

.btn--contorno{
  background:transparent;color:var(--txt-escuro);
  box-shadow:inset 0 0 0 1.5px var(--papel-3);
}
.btn--contorno:hover{background:var(--papel-2)}

.btn--peq{min-height:42px;padding:var(--e-2) var(--e-4);font-size:var(--t-peq)}

/* ── primitivo: chip ─────────────────────────────────────────────── */

.chip{
  display:inline-flex;align-items:center;gap:var(--e-2);
  padding:var(--e-2) var(--e-4);
  border-radius:var(--r-pill);
  font-size:var(--t-peq);line-height:1.35;
  color:var(--txt-claro);
}
/* o texto do chip é UM item de flex. Solto, cada <b> vira item próprio e
   recebe gap dos dois lados, empurrando a pontuação para longe. */
.chip__txt{display:inline}
/* mono tem letra apertada e come a largura do espaço quando encosta na
   fonte de texto; 2px devolvem o respiro óptico sem virar gap */
.chip b,.medidor__pe b{margin-inline:2px}
.chip b{font-family:var(--f-dado);font-weight:600;font-variant-numeric:tabular-nums}
.chip .ico{font-size:1.05rem}
.ico--coral{color:var(--coral)}
.ico--lima{color:var(--lima)}
.ico--cobalto{color:var(--breu)}
.ico--fraco{opacity:.55}

/* ── primitivo: vidro ────────────────────────────────────────────────
   Sobre preto puro não existe "sombra" — nada é mais escuro que o campo.
   A elevação precisa vir de luz: uma película clara translúcida com borda
   interna de 1px. Os três níveis são degraus de contraste, não enfeite;
   use o menor que ainda separe a peça do fundo.                        */

.vidro{
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-radius:var(--r-card);
}
.vidro--2{
  background:rgba(255,255,255,.085);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.19);
}
.vidro--3{
  background:rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
/* peça de vidro clicável ganha resposta de luz, não de sombra */
a.vidro,button.vidro,.vidro--vivo{transition:background var(--t-rapido) ease,box-shadow var(--t-rapido) ease}
a.vidro:hover,button.vidro:hover,.vidro--vivo:hover{
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ── primitivo: tag de estado ────────────────────────────────────── */

.tag{
  display:inline-flex;align-items:center;gap:var(--e-2);
  padding:3px var(--e-3);border-radius:var(--r-pill);
  font-family:var(--f-display);
  font-variation-settings:"wght" 650,"wdth" 88;
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;
}
.tag--devendo{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral)}
.tag--quitado{background:var(--lima);color:var(--tinta)}
.tag--sim{
  background:transparent;color:var(--coral);
  box-shadow:inset 0 0 0 1.5px var(--coral);
}

/* ── primitivo: campo ────────────────────────────────────────────── */

.campo{display:block}
.campo__rot{
  display:block;margin-bottom:var(--e-2);
  font-family:var(--f-display);font-variation-settings:"wght" 650,"wdth" 88;
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;
  color:var(--txt-escuro-2);
}
.campo__linha{display:flex;gap:var(--e-2);flex-wrap:wrap}
.campo__entrada{
  flex:1 1 240px;min-width:0;
  padding:var(--e-4) var(--e-5);
  border-radius:var(--r-card);
  background:var(--papel-2);
  box-shadow:inset 0 0 0 1.5px var(--papel-3);
  font-family:var(--f-dado);font-size:1.3125rem;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--txt-escuro);
  transition:box-shadow var(--t-rapido) ease,background var(--t-rapido) ease;
}
.campo__entrada::placeholder{color:var(--txt-escuro-2);opacity:.5}
.campo__entrada:focus{
  outline:none;background:var(--papel);
  box-shadow:inset 0 0 0 2px var(--breu),0 0 0 4px color-mix(in srgb,var(--breu) 18%,transparent);
}
.campo__erro{
  display:flex;align-items:center;gap:var(--e-2);
  margin:var(--e-3) 0 0;font-size:var(--t-peq);font-weight:500;color:var(--coral);
}
.campo__erro[hidden]{display:none}
.campo__entrada[aria-invalid="true"]{
  background:color-mix(in srgb,var(--coral) 6%,var(--papel));
  box-shadow:inset 0 0 0 2px var(--coral);
}
.campo__ajuda{margin:var(--e-3) 0 0;font-size:var(--t-peq);color:var(--txt-escuro-2)}
.campo__ajuda code{font-family:var(--f-dado);background:var(--papel-2);padding:2px 6px;border-radius:6px;font-size:.8125rem}

/* ── padrão: seção e envelope ────────────────────────────────────── */

.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--calha)}
.secao{padding-block:clamp(var(--e-8),9vw,var(--e-10))}
.secao--breu{background:var(--breu);color:var(--txt-claro)}
.secao--tinta{background:var(--tinta);color:var(--txt-claro)}
.secao--papel{background:var(--papel);color:var(--txt-escuro)}
.secao--papel2{background:var(--papel-2);color:var(--txt-escuro)}

.secao__cab{max-width:22ch;margin-bottom:var(--e-7)}
.secao__cab--largo{max-width:34ch}
/* título grande numa coluna estreita vira uma torre de 5 linhas com meia
   tela vazia ao lado. Quando há prosa, ela ocupa esse vazio. */
.secao__cab--duplo{
  max-width:none;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(var(--e-5),4vw,var(--e-8));align-items:end;
}
.secao__cab--duplo .display{margin-bottom:0;max-width:16ch}
.secao__cab--duplo .prosa{max-width:44ch}
.secao__cab .rotulo{margin-bottom:var(--e-4)}
.secao__cab .display{margin-bottom:var(--e-4)}
.secao--breu .rotulo,.secao--tinta .rotulo{color:var(--txt-claro-2)}
.secao--papel .rotulo,.secao--papel2 .rotulo{color:var(--txt-escuro-2)}
.secao--breu .prosa,.secao--tinta .prosa{color:var(--txt-claro-2)}
.secao--papel .prosa,.secao--papel2 .prosa{color:var(--txt-escuro-2)}
.prosa strong{color:inherit;font-weight:600}
.secao--breu .prosa strong,.secao--tinta .prosa strong{color:var(--txt-claro)}
.secao--papel .prosa strong{color:var(--txt-escuro)}

/* ═══════════════════════════════════════════════════════════════════
   NAVEGAÇÃO
   ═══════════════════════════════════════════════════════════════════ */

.nav{position:absolute;top:0;left:0;right:0;z-index:40;padding-block:var(--e-5)}
.nav__int{display:flex;align-items:center;gap:var(--e-5)}
.nav__espaco{flex:1}
.nav__links{display:flex;gap:var(--e-5)}
.nav__links a{
  text-decoration:none;font-size:var(--t-peq);color:var(--txt-claro);
  opacity:.78;transition:opacity var(--t-rapido) ease;
}
.nav__links a:hover{opacity:1}

.marca{display:inline-flex;align-items:center;text-decoration:none}
/* o nome se divide no que a marca faz: CRED é o que entra, IPTU é o que
   ele extingue. Uma palavra só, dois pesos, nenhum símbolo avulso. */
.marca__nome{
  font-family:var(--f-display);
  font-size:1.375rem;letter-spacing:-.01em;line-height:1;
  display:inline-flex;align-items:baseline;
}
.marca__nome b{
  font-variation-settings:"wght" 800,"wdth" 100;
  color:var(--txt-claro);font-weight:400;
}
.marca__nome i{
  font-variation-settings:"wght" 500,"wdth" 100;
  font-style:normal;color:var(--lima);
}

/* ═══════════════════════════════════════════════════════════════════
   HERÓI
   Coluna única centralizada: o título ocupa a largura toda e o painel
   de ofertas entra embaixo, atravessando a borda da seção seguinte.
   O corte é o convite para rolar — o produto começa antes do herói
   terminar.
   ═══════════════════════════════════════════════════════════════════ */

.heroi{
  position:relative;background:var(--breu);color:var(--txt-claro);
  padding-top:clamp(7rem,13vw,10rem);
  padding-bottom:0;
}
/* trama de carnê: a única textura da página, e ela vem do assunto */
.heroi::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 72px);
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 68%,transparent);
}
/* halo frio atrás do painel, para o escuro não ficar chapado */
.heroi::after{
  content:"";position:absolute;pointer-events:none;
  width:min(70vw,900px);aspect-ratio:1;border-radius:50%;
  left:50%;transform:translateX(-50%);bottom:-28%;
  background:radial-gradient(circle,color-mix(in srgb,var(--lima) 13%,transparent) 0%,transparent 66%);
  filter:blur(50px);
}
.heroi__int{position:relative;z-index:1}

.heroi__texto{text-align:center}
.heroi h1{margin:0 auto var(--e-5);max-width:19ch}
.heroi__corpo{max-width:52ch;margin:0 auto var(--e-6);color:rgba(255,255,255,.78)}
.heroi__corpo strong{color:var(--txt-claro);font-weight:600}
.heroi__acoes{display:flex;flex-wrap:wrap;gap:var(--e-3);justify-content:center}

/* ── painel de ofertas: atravessa para a seção seguinte ──────────── */

.painel{
  max-width:920px;
  margin:clamp(var(--e-7),6vw,var(--e-9)) auto 0;
  padding:var(--e-5);border-radius:var(--r-tela) var(--r-tela) 0 0;
  position:relative;z-index:3;
  /* sólido, não vidro: sobre a seção clara o backdrop-filter clarearia
     a peça inteira e ela deixaria de ler como um objeto */
  background:var(--breu-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 -8px 60px rgba(0,0,0,.6);
}
.painel__cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-4);flex-wrap:wrap;margin-bottom:var(--e-4);
}
.painel__vivo{display:flex;align-items:center;gap:var(--e-2);color:var(--lima)}
.painel__base{text-align:right}
.painel__base dt{font-size:var(--t-micro);color:var(--txt-claro-2);margin-bottom:2px}
.painel__base dd{
  margin:0;font-family:var(--f-dado);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}

.painel__lista{display:flex;flex-direction:column;gap:var(--e-2)}
.linha{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--e-3);
  padding:var(--e-3);border-radius:var(--r-mini);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.linha--vence{background:var(--lima);color:var(--breu);box-shadow:none;padding-block:var(--e-4)}
.linha__marca{
  width:58px;height:34px;flex:none;border-radius:8px;background:var(--papel);
  display:flex;align-items:center;justify-content:center;padding:5px 7px;
}
.linha__marca img{max-width:100%;max-height:20px;width:auto;object-fit:contain}
.linha__banco{min-width:0}
.linha__banco b{display:block;font-size:var(--t-peq);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha__banco span{display:block;font-size:var(--t-micro);color:var(--txt-claro-2)}
.linha--vence .linha__banco span{color:color-mix(in srgb,var(--breu) 62%,transparent)}
.linha__valor{text-align:right;white-space:nowrap}
.linha__valor b{
  display:block;font-family:var(--f-dado);font-weight:600;
  font-size:1.0625rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.15;
}
.linha--vence .linha__valor b{font-size:1.3125rem}
.linha__valor span{font-size:var(--t-micro);color:var(--txt-claro-2)}
.linha--vence .linha__valor span{color:color-mix(in srgb,var(--breu) 62%,transparent)}

.painel__pe{margin:var(--e-4) 0 0;font-size:var(--t-micro);color:var(--txt-claro-2);display:flex;align-items:center;gap:var(--e-2)}

.js .painel .linha{animation:entra var(--t-medio) var(--curva) both;animation-delay:calc(var(--i,0) * 90ms + 300ms)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════
   SIMULADOR — a superfície de produto, flutuando sobre o cobalto
   ═══════════════════════════════════════════════════════════════════ */

.palco{background:var(--papel-2);padding-top:clamp(var(--e-8),9vw,var(--e-9))}
.palco__int{padding-bottom:clamp(var(--e-8),8vw,var(--e-9))}

.simulador{
  background:var(--papel);
  border-radius:var(--r-tela);
  box-shadow:var(--sombra-tela);
  overflow:hidden;
  position:relative;
}

.sim__topo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding:var(--e-4) clamp(var(--e-5),3vw,var(--e-7));
  border-bottom:1px solid var(--papel-3);
  flex-wrap:wrap;
}
.sim__orgao{display:flex;align-items:center;gap:var(--e-3);min-width:0}
.sim__orgao b{font-size:var(--t-peq);font-weight:600;display:block;line-height:1.3}
.sim__orgao span{font-size:var(--t-micro);color:var(--txt-escuro-2);display:block}
/* o brasão real do município: é a prova de a quem esta tela pertence */
.sim__brasao{width:auto;height:42px;flex:none}

/* — face: consulta — */
.sim__consulta{padding:clamp(var(--e-6),4.5vw,var(--e-8)) clamp(var(--e-5),3vw,var(--e-7))}
.sim__consulta-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(var(--e-6),5vw,var(--e-8));align-items:center}
.sim__consulta h2{margin:0 0 var(--e-3);max-width:14ch}
.sim__consulta .prosa{color:var(--txt-escuro-2);max-width:38ch;margin-bottom:var(--e-6)}

/* o resumo do débito ao lado — mostra o problema antes de resolver */
.previa{
  background:var(--tinta);color:var(--txt-claro);
  border-radius:var(--r-card);padding:var(--e-5);
}
.previa__cab{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);margin-bottom:var(--e-4)}
.previa__cab .rotulo{color:var(--txt-claro-2)}
.previa__lin{display:flex;justify-content:space-between;gap:var(--e-4);padding:var(--e-3) 0;border-bottom:1px solid var(--tinta-3);font-size:var(--t-peq)}
.previa__lin:last-of-type{border-bottom:0}
.previa__lin dt{color:var(--txt-claro-2)}
.previa__lin dd{margin:0;font-family:var(--f-dado);font-variant-numeric:tabular-nums}
.previa__oculto{filter:blur(5px);opacity:.7;user-select:none}

/* — face: carregando — */
.sim__carga{display:none;padding:clamp(var(--e-8),8vw,var(--e-9)) var(--e-5);text-align:center}
.simulador.carregando .sim__carga{display:block}
.simulador.carregando .sim__consulta{display:none}
.carga__trilho{height:4px;border-radius:var(--r-pill);background:var(--papel-3);max-width:320px;margin:0 auto var(--e-4);overflow:hidden}
.carga__trilho i{display:block;height:100%;width:38%;border-radius:var(--r-pill);background:var(--breu);animation:corre 1s var(--curva) infinite}
@keyframes corre{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.carga__txt{font-family:var(--f-dado);font-size:var(--t-peq);color:var(--txt-escuro-2);margin:0}

/* — face: resultado — */
.sim__resultado{display:none;padding:clamp(var(--e-5),3vw,var(--e-6)) clamp(var(--e-5),3vw,var(--e-7)) clamp(var(--e-6),4vw,var(--e-7))}
.simulador.pronto .sim__consulta{display:none}
.simulador.pronto .sim__resultado{display:block}

.res__pessoa{
  display:flex;justify-content:space-between;gap:var(--e-5);flex-wrap:wrap;
  padding-bottom:var(--e-4);border-bottom:1px solid var(--papel-3);margin-bottom:var(--e-5);
}
.res__pessoa h3{margin:0;font-family:var(--f-display);font-variation-settings:"wght" 700,"wdth" 100;font-size:1.25rem;letter-spacing:-.02em}
.res__pessoa .dado{font-size:var(--t-peq);color:var(--txt-escuro-2)}
.res__imovel{text-align:right}
.res__imovel dd{margin:var(--e-1) 0 0;font-family:var(--f-dado);font-size:1.0625rem;font-weight:600}
.res__imovel small{display:block;font-size:var(--t-micro);color:var(--txt-escuro-2);margin-top:2px}

.res__saida{margin-bottom:var(--e-6)}
.res__saida-cab{display:flex;align-items:center;gap:var(--e-3);margin-bottom:var(--e-4);flex-wrap:wrap}
.res__saida-cab h4{margin:0;font-family:var(--f-display);font-variation-settings:"wght" 700,"wdth" 95;font-size:1.0625rem;letter-spacing:-.01em}
.res__saida-cab em{font-style:normal;font-size:var(--t-peq);color:var(--txt-escuro-2)}
.res__ordem{
  width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--tinta);color:var(--txt-claro);
  font-family:var(--f-dado);font-size:var(--t-micro);font-weight:600;
}

/* negociação — quatro células, a última é o resultado */
.negoc{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-2)}
.negoc__cel{background:var(--papel-2);border-radius:var(--r-card);padding:var(--e-4)}
.negoc__cel dt{font-family:var(--f-display);font-variation-settings:"wght" 650,"wdth" 88;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--txt-escuro-2);margin-bottom:var(--e-2)}
.negoc__cel dd{margin:0;font-family:var(--f-dado);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.negoc__cel small{display:block;font-size:var(--t-micro);color:var(--txt-escuro-2);margin-top:var(--e-1);font-family:var(--f-texto);letter-spacing:0}
.negoc__cel--desc dd{color:var(--coral)}
.negoc__cel--saldo{background:var(--tinta);color:var(--txt-claro)}
.negoc__cel--saldo dt{color:var(--txt-claro-2)}
.negoc__cel--saldo dd{color:var(--lima)}
.negoc__cel--saldo small{color:var(--txt-claro-2)}

/* ofertas — o eixo é a parcela; custo total em letra menor */
.ofertas{display:flex;flex-direction:column;gap:var(--e-2)}
.oferta{
  display:grid;
  grid-template-columns:minmax(150px,1.1fr) minmax(120px,.85fr) minmax(130px,.95fr) auto;
  align-items:center;gap:var(--e-4);
  padding:var(--e-4) var(--e-5);
  border-radius:var(--r-card);
  background:var(--papel-2);
  position:relative;
  transition:background var(--t-rapido) ease,transform var(--t-rapido) ease;
}
.oferta:hover{background:var(--papel-3)}
.oferta--melhor{background:var(--tinta);color:var(--txt-claro)}
.oferta--melhor:hover{background:var(--tinta-2)}

.oferta__banco{display:flex;align-items:center;gap:var(--e-3);min-width:0}
/* a identidade do banco é a cor da marca dele sobre um ladrilho neutro —
   ícone genérico de instituição, nunca um logo redesenhado à mão */
/* o logo real do banco vive sobre ladrilho branco: é o momento em que o
   contribuinte escolhe uma instituição, então a marca precisa estar certa —
   inclusive na linha destacada, que é escura. */
.oferta__marca{
  width:46px;height:46px;flex:none;border-radius:var(--r-mini);
  display:grid;place-items:center;padding:6px;
  background:var(--papel);
}
.oferta__marca img{max-width:100%;max-height:26px;width:auto;object-fit:contain}
.oferta__banco b{display:block;font-size:var(--t-corpo);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oferta__banco span{display:block;font-size:var(--t-micro);color:var(--txt-escuro-2)}
.oferta--melhor .oferta__banco span{color:var(--txt-claro-2)}

.oferta__parcela{font-family:var(--f-dado);font-weight:600;font-size:1.5rem;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.oferta__parcela i{font-style:normal;font-family:var(--f-texto);font-size:var(--t-peq);font-weight:400;color:var(--txt-escuro-2);letter-spacing:0}
.oferta--melhor .oferta__parcela{color:var(--lima)}
.oferta--melhor .oferta__parcela i{color:var(--txt-claro-2)}

.oferta__meta{font-size:var(--t-micro);color:var(--txt-escuro-2);line-height:1.45}
.oferta__meta b{display:block;font-family:var(--f-dado);font-weight:500;font-size:var(--t-peq);color:var(--txt-escuro);letter-spacing:-.02em}
.oferta--melhor .oferta__meta{color:var(--txt-claro-2)}
.oferta--melhor .oferta__meta b{color:var(--txt-claro)}

.oferta__fita{
  position:absolute;top:calc(-1 * var(--e-2));left:var(--e-5);
  background:var(--lima);color:var(--tinta);
  font-family:var(--f-display);font-variation-settings:"wght" 700,"wdth" 88;
  font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;
  padding:2px var(--e-2);border-radius:var(--r-pill);
}

.ofertas__pe{
  display:flex;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap;
  margin-top:var(--e-3);font-size:var(--t-micro);color:var(--txt-escuro-2);
}
.ofertas__pe b{font-family:var(--f-dado);font-weight:500;color:var(--txt-escuro)}

.res__pe{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);flex-wrap:wrap;margin-top:var(--e-5);padding-top:var(--e-4);border-top:1px solid var(--papel-3)}
.res__pe p{margin:0;font-size:var(--t-micro);color:var(--txt-escuro-2);max-width:58ch}

/* entrada escalonada do resultado */
.simulador.pronto .sobe{animation:sobe var(--t-medio) var(--curva) both;animation-delay:calc(var(--i,0) * 60ms + 40ms)}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════
   FLUXO — as duas saídas se somando
   Quatro caixas iguais lado a lado diziam "quatro coisas do mesmo tipo".
   São quatro momentos de uma mesma quantia mudando de mão, então a forma
   é uma trilha vertical com fio contínuo: o valor desce e se transforma.
   ═══════════════════════════════════════════════════════════════════ */

.fluxo{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(var(--e-6),5vw,var(--e-9));align-items:start;
}

.trilha{display:flex;flex-direction:column}
.etapa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e-5);padding-bottom:var(--e-6)}
.etapa:last-child{padding-bottom:0}

.etapa__eixo{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.etapa__no{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:1.2rem;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:var(--txt-claro);
}
.etapa--municipio .etapa__no{color:var(--coral);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coral) 45%,transparent)}
.etapa--final .etapa__no{background:var(--lima);color:var(--breu);box-shadow:none}
/* o fio é o dinheiro seguindo em frente; ele não passa do último nó */
.etapa__fio{flex:1;width:2px;margin-top:var(--e-2);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06))}
.etapa:last-child .etapa__fio{display:none}

.etapa__corpo{padding-top:var(--e-2);min-width:0}
.etapa__ator{color:var(--txt-claro-2);margin:0 0 var(--e-3)}
.etapa--municipio .etapa__ator{color:var(--coral)}
.etapa--final .etapa__ator{color:var(--lima)}
.etapa__val{
  font-family:var(--f-dado);font-weight:600;font-size:var(--t-valor);
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  line-height:1;margin:0 0 var(--e-2);color:var(--txt-claro);
}
.etapa--municipio .etapa__val{color:var(--coral)}
.etapa--final .etapa__val{color:var(--lima)}
.etapa__nome{font-weight:600;margin:0 0 var(--e-1)}
.etapa__desc{font-size:var(--t-peq);color:var(--txt-claro-2);line-height:1.5;margin:0;max-width:46ch}

/* o resumo: o argumento de caixa, que é o que o município compra */
.resumo{padding:var(--e-6);position:sticky;top:var(--e-6)}
.resumo__cab{margin:0 0 var(--e-5);color:var(--txt-claro-2)}
.resumo__caso{padding:var(--e-5) 0;border-top:1px solid rgba(255,255,255,.12)}
.resumo__caso:first-of-type{border-top:0;padding-top:0}
.resumo__quando{display:flex;align-items:center;gap:var(--e-2);margin:0 0 var(--e-3)}
.resumo__val{
  font-family:var(--f-display);font-variation-settings:"wght" 750,"wdth" 100;
  font-size:clamp(1.5rem,2.4vw,2.05rem);
  letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--e-2);
}
.resumo__caso--hoje .resumo__val{color:var(--txt-claro-2)}
.resumo__caso--agora .resumo__val{color:var(--lima)}
.resumo__desc{font-size:var(--t-peq);color:var(--txt-claro-2);line-height:1.5;margin:0}

/* ═══════════════════════════════════════════════════════════════════
   BANCOS — mural
   ═══════════════════════════════════════════════════════════════════ */

.bancos__topo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(var(--e-5),4vw,var(--e-8));align-items:end;
  margin-bottom:var(--e-6);
}
.mural{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--e-2)}
.mural__item{
  padding:var(--e-5);display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--e-6);min-height:148px;
}
/* Inverter o logo para branco quebra qualquer marca com placa sólida:
   o Banco do Brasil vira uma barra chapada e o Itaú, um quadrado vazio.
   Então cada logo ganha sua própria placa clara e aparece na cor certa —
   a mesma regra que vale no simulador. */
.mural__logo{
  background:var(--papel);border-radius:var(--r-mini);
  min-height:60px;padding:var(--e-3) var(--e-4);
  display:flex;align-items:center;justify-content:center;
}
.mural__logo img{max-height:26px;max-width:100%;width:auto;object-fit:contain}
.mural__estado{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-micro);color:var(--txt-claro-2)}
.mural__ponto{width:6px;height:6px;border-radius:50%;flex:none;background:var(--lima)}
.mural__ponto--espera{background:var(--txt-claro-2)}

/* ═══════════════════════════════════════════════════════════════════
   FECHO E RODAPÉ
   ═══════════════════════════════════════════════════════════════════ */

/* o fecho carrega a única fotografia da página: a malha residencial de
   São Paulo. Ela existe para tornar o número físico — cada telhado é uma
   inscrição imobiliária — e não para decorar. Por isso fica atrás do
   argumento, sob o campo de marca, e não numa moldura ao lado. */
.fecho{position:relative;isolation:isolate;overflow:hidden}
.fecho__foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
  z-index:-2;
}
.fecho::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,
      var(--breu) 0%,
      color-mix(in srgb,var(--breu) 94%,transparent) 38%,
      color-mix(in srgb,var(--breu) 66%,transparent) 72%,
      color-mix(in srgb,var(--breu) 52%,transparent) 100%);
}
.fecho__grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(var(--e-6),5vw,var(--e-8));align-items:end;position:relative}
.fecho__credito{
  position:absolute;right:var(--calha);bottom:var(--e-3);
  font-size:.625rem;color:rgba(255,255,255,.5);letter-spacing:.02em;
}
.fecho__credito a{color:inherit}
.fecho h2{margin:var(--e-4) 0 var(--e-5);max-width:15ch}
.fecho .prosa{margin-bottom:var(--e-6);max-width:46ch}
.fecho__acoes{display:flex;gap:var(--e-3);flex-wrap:wrap}

.contrato{background:rgba(255,255,255,.1);border-radius:var(--r-card);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.contrato__cab{padding:var(--e-4) var(--e-5);background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.contrato__lin{display:flex;justify-content:space-between;gap:var(--e-4);padding:var(--e-3) var(--e-5);font-size:var(--t-peq)}
.contrato__lin:not(:last-child){border-bottom:1px solid rgba(255,255,255,.12)}
.contrato__lin dt{color:rgba(255,255,255,.7)}
.contrato__lin dd{margin:0;font-family:var(--f-dado);font-size:var(--t-peq);text-align:right}

.rodape{background:var(--tinta);color:var(--txt-claro-2);padding-block:var(--e-6) var(--e-7)}
.rodape__int{display:flex;justify-content:space-between;gap:var(--e-6);flex-wrap:wrap}
.rodape p{margin:0;font-size:var(--t-micro);line-height:1.6;max-width:62ch}
.rodape strong{color:var(--txt-claro)}

/* ═══════════════════════════════════════════════════════════════════
   MOVIMENTO — cláusula 1: o repouso é o estado legível
   O reveal só ADICIONA. Nada nasce invisível sem caminho garantido.
   ═══════════════════════════════════════════════════════════════════ */

.js .rev{opacity:0;transform:translateY(16px);transition:opacity var(--t-lento) var(--curva),transform var(--t-lento) var(--curva)}
.js .rev.visto{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rev{opacity:1;transform:none}
  .medidor__parte--pago{width:17.4%}
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:1040px){
  .oferta{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);row-gap:var(--e-3)}
  .oferta .btn{grid-column:1 / -1;justify-self:start}
  .fluxo{grid-template-columns:1fr;gap:var(--e-6)}
  .resumo{position:static}
}
@media (max-width:900px){
  .nav__links{display:none}
  .heroi__grade,.sim__consulta-grade,.bancos__topo,.fecho__grade{grid-template-columns:1fr}
  .heroi h1{max-width:14ch}
  .heroi::after{display:none}
  .bancos__topo{gap:var(--e-4)}
  .fecho__grade{align-items:start}
  .negoc{grid-template-columns:repeat(2,1fr)}
  
}
@media (max-width:620px){
  .oferta{grid-template-columns:1fr;gap:var(--e-3)}
  .linha{grid-template-columns:auto minmax(0,1fr);row-gap:var(--e-2)}
  .linha__valor{grid-column:1 / -1;text-align:left}
  .etapa{gap:var(--e-4)}
  .etapa__no{width:40px;height:40px;font-size:1.05rem}
  .oferta__fita{left:var(--e-4)}
  .res__pessoa{flex-direction:column}
  .res__imovel{text-align:left}
}