/* ==========================================================================
   ajustes.css — Correções de layout e tema, aplicadas a todas as páginas.

   Centraliza aqui o que precisava ser corrigido em muitas páginas de uma vez,
   em vez de editar o <style> de cada arquivo. Incluído logo após a fonte,
   então sobrescreve o CSS inline das páginas por vir depois na cascata.

   Feito a partir do feedback do César (24/07/2026) sobre 6 problemas:
   1. header fixo cortando o conteúdo
   2. botões "Favoritos"/"Entrar" saindo vermelhos
   3. ícones sociais ilegíveis (some no dark, quadrado do Instagram)
   4. etiquetas dos cards divergentes do site antigo + modo escuro
   5. bloco da assessoria parceira com espaço mal aproveitado
   6. contraste geral no tema escuro
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HEADER FIXO — reserva de espaço
   O header é position:fixed e mede ~82px. Sem folga no topo do conteúdo,
   ele cobre o começo da página. Cada página compensava por conta própria
   (118px, 150px ou nada). Aqui a folga é uma só, com variável, e some do
   .hero/.page-hero que já embutem o espaço no próprio padding.
   -------------------------------------------------------------------------- */
:root { --header-h: 82px; }

body { padding-top: var(--header-h); }

/* Seções cujo padding-top já contava com o header não podem levar a folga
   duas vezes: elas ficam coladas no topo do body, que agora já tem a folga. */
body > .hero,
body > .page-hero,
body > header + .hero,
body > header + .page-hero { margin-top: calc(var(--header-h) * -1); }

/* Âncoras internas (#faq, #story...) precisam parar abaixo do header fixo,
   senão o título fica escondido atrás dele ao clicar no menu. */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

@media (max-width: 640px) {
  :root { --header-h: 74px; }
}

/* --------------------------------------------------------------------------
   2) BOTÕES DO HEADER — "Favoritos" e "Entrar" saíam vermelhos
   Causa: a regra .btn-fav{color:#e11d48} foi feita para o coração dos cards,
   mas os botões do header também usam .btn-fav e herdavam o vermelho.
   Aqui o botão do header volta a ser branco, igual ao "Entrar"/cadastro.
   O coração continua vermelho porque tem classe própria (.btn-fav-heart).
   -------------------------------------------------------------------------- */
header .btn-fav,
.nav .btn-fav {
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
}
header .btn-fav:hover,
.nav .btn-fav:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .4);
}
/* o contador dentro do botão (ex.: "Favoritos 0") acompanha o branco */
header .btn-fav span,
.nav .btn-fav span { color: inherit; }

/* --------------------------------------------------------------------------
   3) ÍCONES SOCIAIS — legíveis em claro e escuro
   No dark ficavam azuis sobre azul (sumiam). O Instagram aparecia como
   quadrado por causa do fill. Padroniza: fundo translúcido claro, traço
   branco, sem preenchimento sólido, com hover laranja da marca.
   -------------------------------------------------------------------------- */
.soc {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
/* O CSS inline das páginas tem ".soc svg{fill:currentColor}", que pintava o
   retângulo do Instagram de branco (o "quadrado"). Aqui forçamos o SVG a não
   ter preenchimento e desenhamos só o contorno. As formas que precisam de
   preenchimento (o ponto da câmera) trazem fill="currentColor" no próprio
   markup, e essa regra específica devolve o fill só a elas. */
.soc svg {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 2;
}
.soc svg [fill="currentColor"] { fill: currentColor !important; }
.soc:hover {
  background: var(--laranja);
  color: #fff;
  transform: translateY(-2px);
}
:root[data-theme="dark"] .soc {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4) ETIQUETAS DOS CARDS — padrão do site antigo, legível nos dois temas
   O site antigo usava fundo sólido: tipo em verde-escuro, modalidade em
   laranja. O novo deixava a cor a cargo do JS, sem fundo garantido, o que
   sumia no escuro. Aqui fixamos um fundo sólido de base; o JS ainda pode
   sobrescrever a cor por modalidade, mas nunca fica sem contraste.
   -------------------------------------------------------------------------- */
.tag-tipo {
  background: #064e3b;
  color: #f9fafb;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.tag-desc {
  background: var(--laranja);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}
.badge-off {
  background: var(--laranja);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}

/* --------------------------------------------------------------------------
   5) CORAÇÃO DE FAVORITAR NO CARD — vermelho só aqui, com fundo branco
   Mantém o padrão do site antigo: botão redondo branco, coração vermelho,
   bom contraste sobre a foto do imóvel em qualquer tema.
   -------------------------------------------------------------------------- */
.btn-card-action.btn-fav,
.btn-card-action {
  background: rgba(255, 255, 255, .95);
  color: #e11d48;
}
.btn-card-action:hover { background: #fff; transform: scale(1.1); }

/* --------------------------------------------------------------------------
   6) BLOCO DA ASSESSORIA PARCEIRA — aproveita o espaço, frase mais elegante
   O badge do CRECI e a UF ganham linha própria abaixo do texto, alinhados,
   em vez de correrem soltos numa frase única com "atendimento apenas em SP".
   -------------------------------------------------------------------------- */
.assessoria-card b { font-size: 16.5px; }
.assessoria-card .ac-txt span { line-height: 1.5; }
/* badge e UF numa linha própria, compactos, lado a lado (quebram no mobile) */
.ac-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.creci-badge {
  display: inline-flex;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.ac-uf {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7) CAMPOS DE PREÇO (mín/máx) — "R$ 10.000.000" cortava na borda direita
   Os dois campos dividem a largura do sidebar (1fr 1fr) e o valor máximo é
   longo. Reduz padding lateral e fonte só nesses inputs, para o número caber
   inteiro em qualquer tema.
   -------------------------------------------------------------------------- */
.range-row .fgroup input[type="text"],
.range-row .fgroup input[type="number"],
#preco_min,
#preco_max {
  padding-left: 10px;
  padding-right: 8px;
  font-size: 13px;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   8) DESTAQUE "25 anos" na frase da Altina — reforço positivo (UX)
   Os 25 anos de experiência são o principal sinal de confiança da parceira.
   Ganham peso e a cor laranja da marca para o olho pousar ali primeiro.
   -------------------------------------------------------------------------- */
.ac-hl {
  font-weight: 800;
  color: #ffb066;
}

/* --------------------------------------------------------------------------
   9) ABAS DO MODAL DE CONTA — "Criar conta" sumia no modo escuro
   A aba inativa usava --navy-deep (escuro) sobre --tint2 (também escuro no
   dark), então o texto ficava ilegível. Garante contraste da aba inativa
   nos dois temas; a ativa continua navy com texto branco.
   -------------------------------------------------------------------------- */
.modal-tab { color: var(--texto); }
:root[data-theme="dark"] .modal-tabs { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .modal-tab { color: #eaf2fc; }
:root[data-theme="dark"] .modal-tab.active { background: var(--laranja); color: #fff; }

/* --------------------------------------------------------------------------
   10) TEXTOS E LINKS "NAVY" ILEGÍVEIS NO MODO ESCURO
   Vários textos e links usam color:var(--navy) inline. Como --navy é a mesma
   cor de fundo de botões, não dá para clarear a variável (quebraria os
   fundos). Aqui clareamos apenas onde navy é COR DE TEXTO sobre fundo escuro.

   A regra usa o próprio inline style como âncora: elementos com
   style="...color:var(--navy)..." dentro de cartões/painéis escuros recebem
   um azul claro legível. Feito por seletor de atributo para não depender de
   editar cada trecho inline em 20 páginas.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] a[style*="color:var(--navy)"],
:root[data-theme="dark"] a[style*="color: var(--navy)"],
:root[data-theme="dark"] [style*="color:var(--navy)"],
:root[data-theme="dark"] [style*="color: var(--navy)"] {
  color: #7fb3ff !important;
}
/* links de âncora e "ver mais" que herdam navy via classe */
:root[data-theme="dark"] .crumb a,
:root[data-theme="dark"] .link-navy,
:root[data-theme="dark"] a.navy { color: #7fb3ff !important; }

/* campos de formulário no dark: placeholder e borda com contraste */
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: rgba(234,242,252,.5); }

/* --------------------------------------------------------------------------
   11) VEREDITO "DENTRO DO ALVO" — verde mais vivo no modo escuro
   No dark o fundo (--verde-bg #12311f) e o texto (--verde #12a06b) ficavam
   apagados. Aqui o bloco ganha um verde vibrante com bom brilho, mantendo a
   leitura clara. Vale para o veredito da viabilidade e os selos verdes.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .vr-verdict.ok {
  background: rgba(34, 197, 94, .18);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .35);
}
:root[data-theme="dark"] .verd.ok {
  background: rgba(34, 197, 94, .18);
  color: #4ade80;
}
/* selos "Grátis" dos guias acompanham o tom vivo no dark */
:root[data-theme="dark"] .tagfree {
  background: rgba(34, 197, 94, .2);
  color: #4ade80;
}

/* --------------------------------------------------------------------------
   12) OPÇÕES DO DROPDOWN (select) ILEGÍVEIS
   O select do hero usa texto branco (bom para o campo fechado sobre o fundo
   navy), mas as <option> herdavam o branco e, quando o navegador abre a lista
   com fundo branco, o texto sumia. Aqui as opções têm fundo e texto próprios,
   com contraste garantido nos dois temas.
   -------------------------------------------------------------------------- */
select option {
  color: #0f1e33;
  background: #fff;
}
:root[data-theme="dark"] select option {
  color: #eaf2fc;
  background: #17325c;
}
/* a opção selecionada/em foco continua legível */
select option:checked {
  background: #004A99;
  color: #fff;
}

/* --------------------------------------------------------------------------
   13) CARD DA ASSESSORIA — um pouco mais de vida, mantendo elegância
   Gradiente sutil com toque de laranja da marca, borda um pouco mais viva e
   um brilho suave. Nada gritante: reforça a presença do bloco sem competir
   com o hero. O "25 anos" (.ac-hl) ganhou o laranja claro vivo.
   -------------------------------------------------------------------------- */
.assessoria-card {
  background: linear-gradient(125deg, rgba(249,115,22,.20), rgba(249,115,22,.06) 55%, rgba(10,91,176,.14));
  border: 1.5px solid rgba(249,115,22,.42);
  box-shadow: 0 14px 36px rgba(0,20,45,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.assessoria-card:hover {
  border-color: rgba(249,115,22,.6);
  box-shadow: 0 18px 44px rgba(249,115,22,.18), inset 0 1px 0 rgba(255,255,255,.1);
  transition: border-color .25s, box-shadow .25s;
}
/* o ícone ganha um brilho laranja um pouco mais presente */
.ac-ic {
  box-shadow: 0 8px 22px rgba(249,115,22,.42);
}

/* --------------------------------------------------------------------------
   14) CTA "Encontrou um imóvel em SP?" — mesmo padrão do card da home
   A faixa de crédito da assessoria agora nomeia a Altina, com o badge CRECI e
   o selo de UF elegantes, na mesma linguagem visual do card do hero.
   -------------------------------------------------------------------------- */
.cta-creci {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 22px;
  padding: 12px 20px;
  background: linear-gradient(120deg, rgba(249,115,22,.16), rgba(255,255,255,.06));
  border: 1px solid rgba(249,115,22,.34);
  border-radius: 999px;
  font-size: 13.5px;
  color: rgba(255,255,255,.92);
}
/* O botão "Falar no WhatsApp" vinha colado ao cartão de credencial acima
   (gap de 0px medido no mobile, 05/08/2026) — o margin-bottom do cartão
   resolve nas telas largas, mas .cta-creci é inline-flex e quebra para
   várias linhas no celular; o respiro extra abaixo evita que ele grude
   de novo quando o cartão cresce em altura. */
.cta .btn-laranja { margin-top: 4px; }
.cta-creci svg { color: var(--laranja); width: 18px; height: 18px; }
.cta-creci b { font-family: var(--display); font-weight: 800; color: #fff; }
/* dentro da CTA o badge e o selo usam o mesmo estilo do card da home */
.cta-creci .creci-badge { display: inline-flex; align-items: center; }
.cta-creci .ac-uf {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 560px) {
  .cta-creci { flex-direction: column; border-radius: 18px; }
  /* 08/08/2026, a pedido do César: o gap entre o texto ("...assinatura do
     contrato.") e o cartão do CRECI somava 46px (26 do <p> + 20 do
     margin-top daqui) — no mobile, com o cartão em coluna (mais alto),
     ficava exagerado. Reduz só aqui, sem mexer no desktop. */
  .cta-creci { margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   15) SELECT "ORDENAR POR" ilegível
   O select de ordenação fica sobre a barra navy dos resultados. Tinha fundo
   branco com texto var(--texto), que em certos contextos herdava tom claro e
   sumia. Aqui fixa fundo branco + texto escuro sempre; no dark, fundo do
   próprio tema. O label "Ordenar por" ganha contraste sobre o navy.
   -------------------------------------------------------------------------- */
#sort-container select {
  background: #fff !important;
  color: #0f1e33 !important;
  font-weight: 600;
}
#sort-container label {
  color: rgba(255,255,255,.85) !important;
}
:root[data-theme="dark"] #sort-container select {
  background: #17325c !important;
  color: #eaf2fc !important;
  border-color: rgba(255,255,255,.2);
}

/* --------------------------------------------------------------------------
   16) BOTÕES "APLICAR FILTROS" / "LIMPAR" — menores e alinhados
   O "Aplicar filtros" quebrava em 2 linhas na coluna estreita. Reduz padding
   e fonte, e mantém o laranja OFICIAL (#F97316 via --laranja). O "Limpar"
   ganha texto legível nos dois temas (antes ficava roxo/apagado no dark).
   -------------------------------------------------------------------------- */
.btn-aplicar {
  padding: 11px 12px !important;
  font-size: 13px !important;
  line-height: 1.15;
  background: var(--laranja) !important;
}
.btn-aplicar:hover { background: var(--laranja-deep) !important; }
.btn-limpar {
  padding: 11px 12px !important;
  font-size: 13px !important;
  color: var(--navy-deep);
}
:root[data-theme="dark"] .btn-limpar {
  color: #eaf2fc;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

/* --------------------------------------------------------------------------
   17) PADRONIZAÇÃO DO LARANJA — sempre o oficial #F97316
   Garante que qualquer elemento de marca use o laranja da paleta, não tons
   aproximados. --laranja já é #F97316 em todas as páginas; aqui reforçamos
   nos selos/etiquetas que porventura tenham laranja hardcoded diferente.
   -------------------------------------------------------------------------- */
.tag-desc,
.badge-off,
.tagfree.laranja { background-color: #F97316; }

/* --------------------------------------------------------------------------
   20) SELO "GRATUITO, COM CADASTRO RÁPIDO" — dentro da paleta da marca
   Estava com verde fora da identidade (verde-limão no claro, verde-água no
   escuro). Realinhado ao laranja da marca: fundo laranja suave, texto e borda
   no laranja oficial, coerente nos dois temas.
   -------------------------------------------------------------------------- */
.free-ribbon {
  background: rgba(249,115,22, .12) !important;
  color: var(--laranja, #F97316) !important;
  border: 1px solid rgba(249,115,22, .4) !important;
}
:root[data-theme="dark"] .free-ribbon {
  background: rgba(249,115,22, .18) !important;
  color: #ffb066 !important;
  border-color: rgba(249,115,22, .45) !important;
}

/* --------------------------------------------------------------------------
   21) SELO "GRÁTIS" DOS GUIAS NO TEMA ESCURO
   A cor base (laranja da marca, no lugar do verde de e-commerce que estava
   fora da paleta) fica no <style> do index.html, junto da regra original —
   aquele bloco vem DEPOIS deste arquivo no <head>, então sobrescreveria
   qualquer coisa daqui sem !important. Aqui só o que o tema escuro precisa.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .guia .tagfree {
  background: #F97316;
  color: #fff;
}

/* --------------------------------------------------------------------------
   18) CSS DO MODAL DE CONTA — para TODAS as páginas
   O conta.js injeta o HTML do modal/painel em qualquer página, mas o CSS
   dele só existia em index.html e imovel.html. Nas outras 18 o modal
   aparecia "cru", empilhado sem estilo (bug visto em favoritos.html).
   Colocando o CSS aqui, no ajustes.css que está em todas as páginas, o
   modal fica estilizado em qualquer lugar.
   -------------------------------------------------------------------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,20,45,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:400;padding:20px}
.modal-overlay.open{display:flex}
.modal-conta{background:var(--card);border-radius:20px;padding:30px 28px;max-width:420px;width:100%;max-height:86vh;overflow:auto;position:relative;box-shadow:0 30px 80px rgba(0,20,45,.4)}
.modal-close{position:absolute;top:14px;right:16px;background:var(--tint2);border:none;width:32px;height:32px;border-radius:50%;font-size:18px;color:var(--navy);cursor:pointer;line-height:1}
.modal-tabs{display:flex;gap:6px;background:var(--tint2);border-radius:999px;padding:4px;margin-bottom:20px}
.modal-tab{flex:1;border:none;background:transparent;font-family:var(--display,inherit);font-weight:700;font-size:13.5px;color:var(--texto);padding:9px 10px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.2s}
.modal-tab.active{background:var(--navy);color:#fff}
.modal-body h3{font-family:var(--display,inherit);font-size:20px;color:var(--texto);margin-bottom:6px}
.modal-body>p{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.mform{margin-bottom:12px}
.mform label{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.mform input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;background:var(--tint);color:var(--texto)}
.mform input:focus{outline:none;border-color:var(--navy)}
.modal-msg{font-size:13px;font-weight:700;margin:8px 0;min-height:18px}
.modal-msg.erro{color:#c0392b}
.modal-msg.ok{color:var(--verde)}
.modal-painel .painel-lista{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.painel-vazio{color:var(--muted);font-size:13.5px;text-align:center;padding:20px 0}
.painel-card{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--tint)}
.painel-card img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex-shrink:0}
.painel-card .pc-body{flex:1;min-width:0}
.painel-card .pc-body b{display:block;font-size:13.5px;color:var(--texto)}
.painel-card .pc-body span{font-size:12px;color:var(--muted)}
.painel-card button{border:none;background:transparent;color:#c0392b;cursor:pointer;font-size:12px;font-weight:700;flex-shrink:0}
.anot-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--tint)}
.anot-card p{font-size:13.5px;color:var(--texto);white-space:pre-wrap}
.anot-card small{color:var(--muted);font-size:11.5px;display:block;margin-top:6px}
.modal-conta textarea{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;background:var(--tint);color:var(--texto);min-height:90px;resize:vertical}
.q{width:15px;height:15px;border-radius:50%;background:var(--tint2);color:var(--navy);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:help;flex:none}

/* --------------------------------------------------------------------------
   19) PÁGINA FAQ (perguntas-frequentes) — CSS que faltava
   A página não tinha <style> próprio e o styles.css não cobria tudo. Aqui
   garantimos header navy, tipografia da marca, hero e o accordion do FAQ,
   incluindo a categoria (.faq-cat) que aparecia colada na pergunta.
   -------------------------------------------------------------------------- */
/* header navy (o FAQ estava com header transparente) */
body > header {
  background: linear-gradient(100deg, var(--navy-deep, #001F44), var(--navy, #004A99));
}
/* categoria da pergunta: vira um rótulo em cima, não cola no texto */
.faq-cat {
  display: block;
  font-family: var(--display, 'Montserrat', sans-serif);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--laranja, #F97316);
  margin-bottom: 4px;
}
/* accordion do FAQ com cara de card */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dce4ef);
  border-radius: 14px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 18px 22px;
  font-family: var(--display, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--navy-deep, #001F44);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
:root[data-theme="dark"] .faq-q { color: var(--texto, #eaf2fc); }
.faq-q .chev { flex-shrink: 0; transition: transform .25s; color: var(--laranja, #F97316); font-size: 20px; line-height: 1; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 22px;
  color: var(--muted, #5b6b82);
  font-size: 14.5px;
  line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 600px; padding: 0 22px 20px; }
/* hero do FAQ com tipografia da marca e FUNDO NAVY.
   O FAQ não trazia o CSS do .page-hero (só carrega styles.css + ajustes.css),
   então os títulos ficavam pretos sobre branco. Aqui garantimos o fundo navy
   com texto branco, igual às páginas que definem isso inline (favoritos, blog).
   Páginas que já têm o próprio .page-hero inline continuam com o delas. */
.page-hero {
  background: linear-gradient(165deg, var(--navy-deep, #001F44) 0%, var(--navy, #004A99) 60%, #0a5bb0 100%);
  color: #fff;
  padding: 150px 0 40px;
}
.page-hero h1 { font-family: var(--display, 'Montserrat', sans-serif); font-weight: 900; color: #fff; }
.page-hero p { color: #cfe0f5; }
.eyebrow {
  display: inline-block;
  font-family: var(--display, 'Montserrat', sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--laranja, #F97316);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   21) GRIFO (.grife) — não quebrar nome e "25 anos" no meio, e cor da logo
   O marca-texto laranja cortava feio quando "Altina M Machado Imóveis" ou
   "mais de 25 anos de experiência" quebravam entre linhas. Mantém cada grifo
   íntegro (não parte no meio) e usa o laranja da logo (#F97316).
   -------------------------------------------------------------------------- */
.grife {
  background: linear-gradient(transparent 58%, rgba(249,115,22, .45) 58%) !important;
  /* impede que o grifo seja partido no meio de uma quebra de linha */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* nome da imobiliária e "25 anos" nunca quebram no meio */
.cta .grife,
.assessoria-card .ac-hl {
  white-space: nowrap;
}
/* no mobile estreito, libera a quebra para não estourar a tela */
@media (max-width: 480px) {
  .cta .grife { white-space: normal; }
}

/* --------------------------------------------------------------------------
   22) MOBILE: BUSCA ANTES DA IMOBILIÁRIA + corrige o corte no celular
   No mobile o hero vira 1 coluna. Antes a busca (o carro-chefe) ficava lá
   embaixo, depois do card da Altina, e no celular do César aparecia cortada.
   Aqui, no mobile, a coluna da busca (#buscar) sobe para logo depois do
   título/subtítulo, e o card da Altina + botões + stats vão para baixo dela.
   Feito com flex + order, sem mexer na ordem do HTML (desktop fica igual).
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero-grid {
    display: flex !important;
    flex-direction: column;
    gap: 24px !important;
  }
  /* a busca (2ª coluna do HTML) sobe */
  .hero-grid > #buscar { order: 1; }
  /* a coluna de texto vira container flex para reordenar seus filhos */
  .hero-grid > div:first-child {
    order: 2;
    display: flex;
    flex-direction: column;
  }
  /* dentro da coluna de texto: título e subtítulo primeiro (já vêm antes),
     depois botões, stats, e a Altina por último */
  .hero-grid > div:first-child > h1 { order: 1; }
  .hero-grid > div:first-child > .sub { order: 2; }
  .hero-cta { order: 3; margin-top: 4px !important; }
  .hero-grid > div:first-child > .hero-stats { order: 4; }
  .hero-grid > div:first-child > .assessoria-card { order: 5; margin-top: 20px !important; }
}

/* ==========================================================================
   23) VERDES: separar FUNCIONAL (semáforo) de DECORATIVO
   Decisão do César: verde de "aprovação/positivo/medição" (semáforo) fica,
   mas com tom legível no dark. Verde decorativo (que só destoa da paleta
   navy+laranja) vira cor da marca.
   ========================================================================== */

/* --- VERDE FUNCIONAL: pílulas de condição (Aceita FGTS, Financiável) --- */
/* No claro: verde sólido legível. No dark: verde vivo translúcido. */
.pill-verde {
  background: #e7f7ef;
  color: #0f7a4d;
}
:root[data-theme="dark"] .pill-verde {
  background: rgba(34, 197, 94, .2);
  color: #4ade80;
}

/* --- VERDE FUNCIONAL: veredito "DENTRO DO ALVO" e medidor --- */
.vr-verdict.ok, .verd.ok { color: #0f7a4d; }
:root[data-theme="dark"] .vr-verdict.ok,
:root[data-theme="dark"] .verd.ok {
  background: rgba(34, 197, 94, .18);
  color: #4ade80;
}
:root[data-theme="dark"] .gauge b { color: #4ade80; }

/* --- ETIQUETAS DE MODALIDADE (pill): tons do site antigo, legíveis no dark ---
   Leilão=navy, Licitação=roxo, Venda online=verde, Direta=azul-petróleo.
   O JS (corMod) define o bg inline; aqui garantimos contraste do texto e um
   leve ajuste de brilho no dark para não "chapar" sobre o fundo escuro. */
:root[data-theme="dark"] .pill-navy,
:root[data-theme="dark"] .tag-desc { filter: saturate(1.15) brightness(1.12); }
.pill { color: #fff; font-weight: 800; }

/* --- VERDE DECORATIVO -> PALETA (navy) ---
   Gradientes de capa que eram verdes e destoavam. Viram navy da marca. */
.card .ph.p2:before { background: linear-gradient(135deg, #003a7a, #0a5bb0) !important; }
.guia .cover.b { background: linear-gradient(150deg, #001F44, #004A99) !important; }

/* --- BADGE DE DESCONTO: laranja da marca (é destaque de oferta, não semáforo) --- */
.badge-off, .imovel-desc-badge {
  background: var(--laranja) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   24) SCROLLYTELLING "Como o Arremate trabalha com você"
   Ajustes pedidos pelo César:
   a) alinhar o texto (tópico) com o MEIO do bloco lateral fixo
   b) dar mais "fôlego" de scroll ao tópico 4 (não ser atropelado)
   c) textos das legendas (.s-cap b) sumiam no dark (eram navy sobre escuro)
   -------------------------------------------------------------------------- */

/* a) O bloco fixo tem top:118px e altura 74vh — seu centro fica mais baixo que
   o centro do texto. Igualamos: cada passo de texto ocupa ~74vh e centraliza,
   ficando no mesmo eixo vertical do meio do bloco lateral. */
@media (min-width: 861px) {
  .story-step {
    min-height: 74vh;                 /* mesma altura útil do bloco fixo */
    justify-content: center;          /* centro do texto = centro do bloco */
  }
  /* o primeiro passo começa alinhado com o topo do bloco sticky */
  .story-steps { padding-top: 0; }
  /* b) mais espaço após o último passo, para o tópico 4 ter tempo de tela
     antes da seção liberar o sticky e sair */
  .story-steps { padding-bottom: 30vh; }
}

/* c) legendas do bloco visível legíveis no dark (30.000+, mais clareza,
   antes de decidir) — eram navy-deep sobre fundo escuro */
:root[data-theme="dark"] .s-cap { color: #a6b9d4; }
:root[data-theme="dark"] .s-cap b { color: #eaf2fc; }

/* --------------------------------------------------------------------------
   25) HEADER DESKTOP CORTANDO o botão "Buscar"
   Entre ~1280px e ~1500px, o header (logo + slogan + 4 links + 4 sociais +
   tema + Favoritos + Entrar + Buscar) não cabia e o "Buscar" saía da tela.
   Aperta os espaçamentos e, em telas médias, esconde os ícones sociais do
   header (eles continuam no rodapé) para tudo caber.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) and (max-width: 1600px) {
  .nav { gap: 20px; }
  .menu { gap: 12px; }
  .brand { margin-right: 0; }
  .brand img { width: 50px; height: 50px; }
  .menu a.lnk { font-size: 14px; }
  .btn-sm { padding: 8px 13px; font-size: 13px; }
}
/* ícones sociais saem do header já a partir de 1400px (ficam no rodapé) */
@media (max-width: 1600px) {
  header .socials, .menu .socials { display: none !important; }
}

/* Faixa 1024–1100px: o menu completo ainda não cabe. Antecipa o hambúrguer
   para essa faixa também, escondendo links e mostrando o toggle. */
@media (max-width: 1100px) {
  header .menu a.lnk,
  .nav .menu a.lnk { display: none !important; }
  header .menu-toggle,
  .nav .menu-toggle { display: block !important; }
}

/* --------------------------------------------------------------------------
   26) CARD DE BUSCA MAIS COMPACTO NO MOBILE
   O card tem 5 campos e ficava bem mais alto que a tela do celular, obrigando
   a rolar bastante. Aqui, no mobile, aperta padding e espaçamento entre campos
   e reduz um pouco a altura dos selects — cabe mais na primeira tela, sem
   prejudicar o toque (campos continuam com boa área clicável).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .search-card { padding: 18px 16px; border-radius: 18px; }
  .search-card h4 { margin-bottom: 14px; font-size: 16px; }
  .search-card .sfield,
  .search-card .fgroup { margin-bottom: 11px; }
  .search-card label { margin-bottom: 3px; font-size: 11.5px; }
  .search-card select,
  .search-card input { padding: 10px 12px; font-size: 14px; }
  /* o "Atualizado hoje" acima do card fica mais discreto */
  #buscar .tag { margin-bottom: 12px; font-size: 12px; padding: 6px 12px; }
}

/* --------------------------------------------------------------------------
   27) BLOCO DE BUSCA DA HOME — layout do site antigo (2 colunas + 3 botões)
   com a identidade 2.0 (navy + laranja #F97316). Feito para caber na 1ª tela
   do desktop: campos lado a lado deixam o bloco mais baixo.
   -------------------------------------------------------------------------- */
/* grade de 2 colunas para os 6 campos */
.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-bottom: 18px;
}
.search-card .hs-grid .field { margin: 0; }
.search-card .field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-deep, #001F44);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 5px;
}
.search-card .hs-grid select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border, #dce4ef);
  border-radius: 11px;
  font-size: 14px;
  font-family: inherit;
  background: var(--off, #EEF2F7);
  color: var(--texto, #0f1e33);
  cursor: pointer;
}
/* Cor do campo selecionado (focus), invertida por tema a pedido do César:
   claro = navy (azul); escuro = laranja. */
.search-card .hs-grid select:focus {
  outline: none;
  border-color: var(--navy, #004A99);
  box-shadow: 0 0 0 3px rgba(0, 74, 153, .15);
}
:root[data-theme="dark"] .search-card .hs-grid select:focus {
  border-color: var(--laranja, #F97316);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .2);
}
.search-card .hs-grid select:disabled { opacity: .6; cursor: not-allowed; }

/* linha dos 3 botões */
.hs-actions {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
}
/* Buscar = destaque, ocupa mais; Mais filtros e Limpar compactos, lado a lado.
   Num card estreito os 3 cabem em uma linha reduzindo padding e texto. */
.hs-actions .btn { white-space: nowrap; padding: 12px 14px; font-size: 13.5px; align-items: center; }
.hs-actions { align-items: stretch; }
.hs-actions .btn-laranja { flex: 1 1 auto; }
.hs-actions .btn-navy { flex: 1 1 auto; }
.hs-actions .btn-limpar-hero { flex: 0 0 auto; padding: 12px 14px; }
/* botão "Limpar" claro, estilo do print antigo mas na paleta 2.0 */
.btn-limpar-hero {
  background: #e7edf6;
  color: var(--navy-deep, #001F44);
  border: 1px solid var(--border, #dce4ef);
  font-family: var(--display, inherit);
  font-weight: 700;
}
.btn-limpar-hero:hover { background: #dbe5f2; }

/* no mobile os campos voltam a 1 coluna (cabe melhor no celular) */
@media (max-width: 560px) {
  .hs-grid { grid-template-columns: 1fr; gap: 11px; }
  .hs-actions .btn-laranja { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   28) BUSCA DA HOME NO DARK + botões no tamanho do site antigo
   No modo escuro os labels (navy-deep) sumiam sobre o card escuro. E os botões
   ficaram maiores que o site antigo. Corrige ambos.
   -------------------------------------------------------------------------- */
/* labels e campos legíveis no dark */
:root[data-theme="dark"] .search-card .field label { color: #cdddf2; }
:root[data-theme="dark"] .search-card .hs-grid select {
  background: #0e2140;
  color: #eaf2fc;
  border-color: #2a4a75;
}
:root[data-theme="dark"] .search-card .hs-grid select { border-color: #2a4a75; }
:root[data-theme="dark"] .search-card h4 { color: #eaf2fc; }

/* BOTÕES no tamanho do site antigo: menores, mais discretos */
.search-card .hs-actions .btn,
.search-card .hs-actions .btn-limpar-hero {
  padding: 10px 20px !important;
  font-size: 13.5px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
}
.search-card .hs-actions .btn-navy { flex: 1 1 auto; }
.search-card .hs-actions .btn-laranja { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   29) BOTÕES DA BUSCA menores de verdade (o .btn base resistia)
   Força o tamanho compacto do site antigo com seletor mais específico.
   -------------------------------------------------------------------------- */
.search-card .hs-actions .btn,
.search-card .hs-actions a.btn,
.search-card .hs-actions button.btn,
.search-card .hs-actions .btn-limpar-hero {
  padding: 9px 18px !important;
  font-size: 13px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.15 !important;
}
.search-card .hs-actions .btn .ic-svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   30) NOTA DO BLOCO DE BUSCA em no máximo 2 linhas
   "de encerramento." ficava sozinho numa 3ª linha. Com a coluna um pouco mais
   larga (ajuste no hero-grid) e a nota usando toda a largura do card, cabe
   em 2 linhas.
   -------------------------------------------------------------------------- */
.search-card .search-note {
  max-width: none;
  width: 100%;
  text-align: left;
  line-height: 1.55;
  margin-top: 12px;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   31) HERO REMANEJADO — tudo cabe na primeira tela (pedido do César)
   Esquerda: título menor + subtítulo + botões + stats.
   Direita: busca compacta + card da Altina embaixo dela.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  /* título menor para não ocupar 6 linhas (reduzido mais a pedido do César) */
  .hero h1 { font-size: clamp(26px, 2.9vw, 40px) !important; line-height: 1.1; }
  .hero .sub { font-size: 15px !important; margin-top: 14px; margin-bottom: 22px !important; line-height: 1.55; }
  /* stats um pouco mais compactos */
  .hero-stats { margin-top: 22px; gap: 20px; }

  /* "Atualizado hoje" menor e mais discreto */
  #buscar .tag { font-size: 11.5px; padding: 6px 13px; margin-bottom: 12px; }

  /* bloco de busca compacto para sobrar espaço à Altina abaixo */
  .search-card { padding: 20px !important; }
  .search-card h4 { font-size: 15.5px; margin-bottom: 14px; }
  .hs-grid { gap: 11px 16px !important; margin-bottom: 14px !important; }
  .search-card .hs-grid select { padding: 9px 12px; font-size: 13.5px; }
  .search-card .field label { margin-bottom: 4px; }

  /* card da Altina embaixo da busca: versão compacta e horizontal */
  .ac-compact {
    margin-top: 16px !important;
    padding: 14px 16px !important;
  }
  .ac-compact b { font-size: 15px; }
  .ac-compact .ac-txt span { font-size: 12px; line-height: 1.4; }
  .ac-compact .ac-ic { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   32) "Atualizado hoje" movido para DENTRO do card, ao lado do título
   Antes ficava acima do card ocupando espaço. Agora é um selo discreto de
   status na mesma linha do "Busque imóveis em todo o Brasil".
   -------------------------------------------------------------------------- */
.sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sc-head h4 { margin-bottom: 0 !important; }
.sc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, #5b6b82);
  white-space: nowrap;
}
.sc-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}
:root[data-theme="dark"] .sc-status { color: #a6b9d4; }
/* em telas estreitas o status some para o título não apertar */
@media (max-width: 560px) { .sc-status { display: none; } }

/* --------------------------------------------------------------------------
   33) TÍTULO DO HERO com quebra controlada (Opção 1, aprovada por César)
   Linha 1: "Sua plataforma inteligente para encontrar"
   Linha 2: "imóveis da CAIXA em todo o Brasil."
   O título é a marca, então mantém o texto; só organiza a quebra para ficar
   equilibrado e a palavra-chave (imóveis da CAIXA) abrir a 2ª linha em destaque.
   -------------------------------------------------------------------------- */
.hero h1 .h1-l1 { display: inline; }
/* Quebra equilibrada: o navegador distribui as palavras igualmente entre as
   linhas (o que Stripe/Airbnb usam), evitando linhas órfãs. Mantém a fonte de
   impacto. "imóveis da CAIXA" fica em destaque onde cair. */
.hero h1 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   34) ENTRADA DO HERO — fade + subida suave (estilo Stripe/Linear/Vercel)
   Título, subtítulo, botões e stats surgem subindo levemente com fade, em
   sequência. Dá autoridade e sofisticação sem depender da quebra de linha.
   Respeita prefers-reduced-motion (quem pede menos animação vê tudo estático).
   -------------------------------------------------------------------------- */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .sub,
  .hero-cta,
  .hero-stats {
    opacity: 0;
    animation: heroRise .7s cubic-bezier(.22,.7,.2,1) forwards;
  }
  /* sequência: título → subtítulo → botões → números */
  .hero h1        { animation-delay: .05s; }
  .hero .sub      { animation-delay: .22s; }
  .hero-cta { animation-delay: .38s; }
  .hero-stats     { animation-delay: .52s; }

  /* o card de busca e a Altina entram junto, um respiro depois */
  #buscar {
    opacity: 0;
    animation: heroRise .7s cubic-bezier(.22,.7,.2,1) .30s forwards;
  }
}

/* --------------------------------------------------------------------------
   35) BOTÕES DO HERO — frases inteiras, menores, arranjo que respeita o texto
   As frases são longas (segmentam o público), então não cabem 3 espremidos.
   Arranjo: 'Conquiste seu lar' (laranja, principal) ocupa a 1ª linha inteira;
   'Invista seu capital' + 'Como funciona' dividem a 2ª linha. Fonte 12px.
   -------------------------------------------------------------------------- */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  max-width: 500px;
}
.hero-cta .btn {
  justify-content: center;
  text-align: center;
  gap: 7px;
  line-height: 1.2;
  font-size: 12px !important;
  padding: 11px 16px !important;
}
.hero-cta .btn .ic-svg { width: 15px; height: 15px; flex-shrink: 0; }
/* laranja: linha inteira (chamada principal) */
.hero-cta-main.btn-laranja { flex: 1 1 100%; }
/* navy + como funciona: dividem a 2ª linha */
.hero-cta-main.btn-navy { flex: 1 1 auto; }
.hero-cta-sec { flex: 0 1 auto; }
@media (max-width: 560px) {
  .hero-cta .btn { flex: 1 1 100% !important; }
}

/* --------------------------------------------------------------------------
   36) LANDING PAGES morar.html e investir.html (jornadas segmentadas)
   Estilo dos blocos de conteúdo dessas páginas: intro, cards, passos, CTA e
   a menção à parceira. Herdam header/footer/tema das outras páginas.
   -------------------------------------------------------------------------- */
.lp-sec { padding: 56px 0 80px; }
.lp-intro { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.lp-intro h2 { font-family: var(--display); font-size: clamp(22px,2.6vw,30px); color: var(--navy-deep); margin-bottom: 14px; }
:root[data-theme="dark"] .lp-intro h2 { color: #eaf2fc; }
.lp-intro p { font-size: 16px; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }

.lp-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 56px; }
@media (max-width: 820px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); }
.lp-ic { width: 52px; height: 52px; border-radius: 13px; background: linear-gradient(135deg,var(--laranja),#ffa04d); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lp-ic .ic-svg { width: 26px; height: 26px; }
.lp-card h3 { font-family: var(--display); font-size: 18px; color: var(--navy-deep); margin-bottom: 8px; }
:root[data-theme="dark"] .lp-card h3 { color: #eaf2fc; }
.lp-card p { font-size: 14.5px; color: var(--muted); line-height: 1.65; }

.lp-steps { max-width: 820px; margin: 0 auto 56px; }
.lp-steps h2 { font-family: var(--display); font-size: clamp(22px,2.6vw,30px); color: var(--navy-deep); margin-bottom: 22px; text-align: center; }
:root[data-theme="dark"] .lp-steps h2 { color: #eaf2fc; }
.lp-steps ol { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.lp-steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 64px; background: var(--tint); border: 1px solid var(--border); border-radius: 14px; font-size: 15px; color: var(--texto); line-height: 1.6; }
.lp-steps li::before { content: counter(step); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--laranja); color: #fff; font-family: var(--display); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lp-steps li b { color: var(--navy-deep); }
:root[data-theme="dark"] .lp-steps li b { color: #eaf2fc; }

.lp-cta { text-align: center; background: linear-gradient(135deg,var(--navy-deep),var(--navy)); border-radius: 20px; padding: 44px 30px; margin-bottom: 40px; }
.lp-cta h2 { font-family: var(--display); font-size: clamp(22px,2.6vw,30px); color: #fff; margin-bottom: 10px; }
.lp-cta p { font-size: 16px; color: #cfe0f5; margin-bottom: 22px; }

.lp-parceira { display: flex; align-items: flex-start; gap: 16px; background: linear-gradient(120deg,rgba(249,115,22,.14),rgba(249,115,22,.05)); border: 1.5px solid rgba(249,115,22,.35); border-radius: 16px; padding: 22px 24px; }
.lp-parceira > .ic-svg { width: 34px; height: 34px; color: var(--laranja); flex-shrink: 0; }
.lp-parceira b { display: block; font-family: var(--display); font-size: 16px; color: var(--navy-deep); margin-bottom: 4px; }
:root[data-theme="dark"] .lp-parceira b { color: #eaf2fc; }
.lp-parceira span { font-size: 14px; color: var(--muted); line-height: 1.6; }
.lp-parceira strong { color: var(--laranja); }

/* --------------------------------------------------------------------------
   37) CARD DA ALTINA REFINADO — acabamento premium com selo de verificação
   Formato de card (embaixo da busca), mas com um selo "Parceira credenciada"
   no topo (estilo Airbnb/Booking mostram parceiros verificados) e hierarquia
   mais limpa. Mantém nome, 25 anos, CRECI e UF.
   -------------------------------------------------------------------------- */
.ac-refined {
  position: relative;
  margin-top: 16px !important;
  padding: 16px 18px 15px !important;
  background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(249,115,22,.05) 60%, rgba(10,91,176,.12)) !important;
  border: 1.5px solid rgba(249,115,22,.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,20,45,.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
  display: block !important;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.ac-refined:hover {
  border-color: rgba(249,115,22,.6) !important;
  box-shadow: 0 16px 40px rgba(249,115,22,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: translateY(-2px);
}
/* selo de verificação no topo */
.ac-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--display, inherit);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: var(--laranja, #F97316);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 3px 8px rgba(249,115,22,.35);
}
.ac-selo .ic-svg { width: 13px; height: 13px; }
/* corpo: ícone + texto */
.ac-refined .ac-body { display: flex; align-items: center; gap: 14px; }
.ac-refined .ac-ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--laranja, #F97316);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(249,115,22,.4);
}
.ac-refined .ac-ic svg { width: 24px; height: 24px; fill: #fff; }
.ac-refined b { display: block; font-family: var(--display, inherit); font-size: 15.5px; font-weight: 800; color: #fff; line-height: 1.25; }
.ac-refined .ac-txt > span { display: block; font-size: 12px; color: rgba(255,255,255,.85); line-height: 1.45; margin-top: 3px; }
.ac-refined .ac-hl { color: #ffb066; font-weight: 800; }
.ac-refined .ac-tags { margin-top: 9px; }

/* --------------------------------------------------------------------------
   38) HERO REESTRUTURADO (2ª versão, pedido do César)
   Esquerda: título + subtítulo + 4 números (2x2) + Altina embaixo.
   Direita: busca aumentada. Botões saíram (vão para a faixa abaixo do hero).
   -------------------------------------------------------------------------- */
/* 4 stats em 2 colunas (imóveis/estados em cima, financiamento/FGTS embaixo) */
.hero-stats-4 {
  display: grid !important;
  grid-template-columns: repeat(4, auto);
  gap: 22px !important;
  margin-top: 20px !important;
  max-width: none;
  justify-content: start;
}
.hero-stats-4 .hs b { font-size: clamp(22px, 2.4vw, 30px); }
.hero-stats-4 .hs span { font-size: 11.5px; }

/* busca aumentada: coluna direita ganha mais peso, campos e título maiores */
@media (min-width: 861px) {
  .hero-grid { grid-template-columns: 1.25fr .9fr !important; gap: 40px !important; }
  .search-card { padding: 24px !important; }
  .search-card h4 { font-size: 17px; }
  .search-card .hs-grid select { padding: 11px 13px; font-size: 14px; }
  .search-card .hs-grid { gap: 13px 18px !important; }
}

/* --------------------------------------------------------------------------
   40) "Atualizado hoje" de volta ACIMA do bloco de busca (pedido do César)
   Badge separado no topo da coluna direita, alinhado com o topo da coluna
   esquerda (título). O .sc-head volta a ter só o título.
   -------------------------------------------------------------------------- */
.tag-atualizado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tag-atualizado .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}
/* o status dentro do card sai (voltou pra cima); título ocupa a linha toda */
.sc-head { justify-content: flex-start; }
.sc-head .sc-status { display: none; }

/* stats: 4 na linha no desktop, 2x2 no mobile (não espremer no celular) */
@media (max-width: 640px) {
  .hero-stats-4 { grid-template-columns: 1fr 1fr !important; gap: 16px 20px !important; }
}

/* --------------------------------------------------------------------------
   41) CARD DA ALTINA — retoque premium + largura mais fina (César)
   Acabamento mais sofisticado no card compacto: gradiente refinado, borda
   com brilho sutil, sombra em camadas, e largura limitada (alinhado à largura
   confortável de leitura, não a coluna inteira).
   -------------------------------------------------------------------------- */
.ac-compact {
  max-width: 500px;
  background:
    linear-gradient(135deg, rgba(249,115,22,.18), rgba(249,115,22,.04) 55%, rgba(10,91,176,.12)) !important;
  border: 1px solid rgba(249,115,22,.35) !important;
  border-radius: 18px !important;
  box-shadow:
    0 16px 40px rgba(0,20,45,.28),
    0 2px 6px rgba(0,20,45,.15),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  padding: 16px 18px !important;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
/* brilho sutil no canto (toque premium) */
.ac-compact::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(249,115,22,.22), transparent 70%);
  pointer-events: none;
}
.ac-compact:hover {
  transform: translateY(-3px);
  border-color: rgba(249,115,22,.55) !important;
  box-shadow:
    0 22px 50px rgba(249,115,22,.16),
    0 2px 6px rgba(0,20,45,.15),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.ac-compact .ac-ic {
  box-shadow: 0 10px 24px rgba(249,115,22,.45);
}
.ac-compact b { letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   42) ANIMAÇÃO DE ENTRADA nos elementos novos do hero (César)
   A reestruturação criou elementos novos (4 stats, card Altina) que a
   animação antiga não pegava. Aqui todos entram com fade+subida em cascata.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-stats-4,
  .hero-grid > div:first-child > .assessoria-card {
    opacity: 0;
    animation: heroRise .7s cubic-bezier(.22,.7,.2,1) forwards;
  }
  .hero-stats-4 { animation-delay: .40s; }
  .hero-grid > div:first-child > .assessoria-card { animation-delay: .55s; }
}

/* --------------------------------------------------------------------------
   43) ALINHAMENTO DAS COLUNAS DO HERO + botões da busca refinados (César)
   - As duas colunas terminam juntas embaixo (busca alinha com a Altina).
   - "Atualizado hoje" no topo alinhado com o título.
   - Botões Buscar/Mais filtros/Limpar: menores de largura, mesma altura.
   - Ícone de filtro no "Mais filtros".
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  /* as duas colunas esticam para a mesma altura e alinham no rodapé */
  .hero-grid { align-items: stretch !important; }
  .hero-grid > div:first-child,
  .hero-grid > #buscar {
    display: flex;
    flex-direction: column;
  }
  /* empurra o card da Altina para o fim da coluna esquerda */
  .hero-grid > div:first-child > .assessoria-card { margin-top: auto !important; }
}

/* botões da busca: menores de largura, altura uniforme */
.search-card .hs-actions {
  align-items: stretch;
}
.search-card .hs-actions .btn,
.search-card .hs-actions .btn-limpar-hero {
  padding: 0 16px !important;
  height: 42px !important;
  min-height: 42px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  box-sizing: border-box;
}
.search-card .hs-actions .btn-laranja { flex: 0 0 auto; }
.search-card .hs-actions .btn-navy { flex: 1 1 auto; }
.search-card .hs-actions .btn-limpar-hero { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   44) BOTÕES DA BUSCA — menores, elegantes, mesma altura (César, final)
   Esta regra vem por último e é a mais específica, então vence os conflitos
   anteriores. Altura uniforme (o <a> "Mais filtros" tinha 35px, os <button>
   43px). Menores e refinados.
   -------------------------------------------------------------------------- */
#searchCard .hs-actions .btn,
#searchCard .hs-actions a.btn,
#searchCard .hs-actions button.btn,
#searchCard .hs-actions .btn-limpar-hero {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
#searchCard .hs-actions .btn .ic-svg { width: 14px; height: 14px; }
/* larguras: Buscar compacto, Mais filtros cresce, Limpar compacto */
#searchCard .hs-actions .btn-laranja { flex: 0 0 auto !important; }
#searchCard .hs-actions .btn-navy { flex: 1 1 auto !important; }
#searchCard .hs-actions .btn-limpar-hero { flex: 0 0 auto !important; }

/* --------------------------------------------------------------------------
   45) SLOGAN DA MARCA mais próximo do nome (pedido do César)
   O espaço entre "Arremate Imóveis Online" e o slogan vinha do line-height
   alto do nome. Aproxima o slogan e ajusta o alinhamento vertical da marca.
   -------------------------------------------------------------------------- */
.brand b {
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
}
.brand .slogan {
  margin-top: 0 !important;
  line-height: 1.15 !important;
  /* o slogan começa e termina na mesma reta do nome acima:
     justify estica as palavras até as duas bordas coincidirem */
  text-align: justify;
  text-align-last: justify;
  width: 100%;
}
/* a coluna do texto tem exatamente a largura do nome, para o justify referenciar */
.brand > span { justify-content: center; align-items: stretch; }
.brand b { width: max-content; }

/* ── Simulador: composição da parcela e avisos de limite (25/07/2026) ──
   O simulador passou a usar as taxas reais da CAIXA (MIP, DFI, tarifa),
   extraídas do simulador oficial. Estes dois blocos são novos: o
   detalhamento do que compõe a parcela e os avisos de cota/prazo. */
.sim-breakdown {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.07);
}
.sim-breakdown h5 {
  margin: 0 0 8px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}
/* as linhas internas são menores: detalhe, não resultado principal */
.sim-breakdown .sim-line { font-size: 13.5px; padding: 4px 0; }

.sim-avisos {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--laranja, #f97316);
  background: rgba(249,115,22,.08);
  font-size: 13px;
  line-height: 1.5;
}
.sim-avisos p { margin: 0 0 6px; }
.sim-avisos p:last-child { margin-bottom: 0; }

html[data-theme="dark"] .sim-breakdown {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .sim-avisos { background: rgba(249,115,22,.14); }

/* ── Simulador de custo total: linhas com checkbox (25/07/2026) ────────
   Página nova, portada do simulador-de-imovel-caixa.php do site 1.0.
   Cada custo opcional é um checkbox com um campo dependente ao lado. */
.chk-line {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 7px;
}
.chk-line input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--laranja, #f97316);
  cursor: pointer;
  flex-shrink: 0;
}
.chk-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 26px;   /* alinha sob o texto, não sob a caixa */
}
.chk-sub input[type="text"],
.chk-sub input[type="number"] { max-width: 150px; }
.chk-sub-col { flex-direction: column; align-items: stretch; gap: 0; }
.chk-sub-col .srow { width: 100%; }
.chk-unit { font-size: 12.5px; color: var(--muted, #5b6b82); }

/* checkbox desmarcado deixa o campo dependente apagado, sem escondê-lo:
   o usuário vê o que vai preencher antes de marcar */
.chk-line:has(input:not(:checked)) + .chk-sub { opacity: .45; }

/* referência cruzada entre os dois simuladores: cada um resolve metade
   da pergunta "quanto vou pagar", e quem chega num precisa saber do outro */
.sim-cross {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--tint, #eef3fa);
  border: 1px solid var(--border, #dce4ef);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, #5b6b82);
}
.sim-cross a { color: var(--navy, #004A99); font-weight: 700; text-decoration: underline; }
html[data-theme="dark"] .sim-cross {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .sim-cross a { color: #7fb3ff; }

/* ── Banner de consentimento (assets/consent.js) ──────────────────────
   Só aparece quando há GA4 ou Pixel configurado em TRACK. Fixed no
   rodapé para não empurrar o conteúdo (evita CLS). */
#arr-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--navy-deep,#001F44); color:#e8eefb;
  box-shadow:0 -6px 24px rgba(0,0,0,.32);
  padding:14px 20px; font-size:13.5px; line-height:1.5;
}
.arr-consent-in{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.arr-consent-in p{margin:0; flex:1; min-width:240px}
#arr-consent a{color:#9dc4ff; text-decoration:underline}
.arr-consent-btns{display:flex; gap:9px; flex-shrink:0}
#arr-consent button{
  border-radius:999px; padding:9px 20px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:800; white-space:nowrap;
}
.arr-c-yes{background:var(--laranja,#F97316); color:#fff; border:none}
.arr-c-yes:hover{background:var(--laranja-deep,#c85f0e)}
/* recusar tem o mesmo peso visual que aceitar: a LGPD pede simetria,
   botão de recusa escondido ou apagado descaracteriza o consentimento */
.arr-c-no{background:transparent; color:#e8eefb; border:1px solid #5c7aa8}
.arr-c-no:hover{background:rgba(255,255,255,.08)}
@media(max-width:640px){
  .arr-consent-in{gap:12px}
  .arr-consent-btns{width:100%}
  #arr-consent button{flex:1}
}

/* ── Alinhamento dos 3 botões da busca da home (25/07/2026) ───────────
   "Mais filtros" é <a> e os outros dois são <button>. O <a> não recebe
   o baseline dos botões e descia 8px em relação a eles.
   align-self:center tira os três do baseline e alinha pelo centro. */
#searchCard .hs-actions,
.search-card .hs-actions,
.hs-actions {
  align-items: center;
}
#searchCard .hs-actions > *,
.search-card .hs-actions > *,
.hs-actions > * {
  align-self: center;
  height: 40px;
  box-sizing: border-box;
  /* o <a class="btn"> herdava margin-top:8px de uma regra genérica de
     .btn, o que o empurrava para baixo dos dois <button> irmãos */
  margin-top: 0;
  margin-bottom: 0;
}

/* destaque momentâneo da sidebar quando se chega por "Mais filtros",
   para o olho encontrar onde o refinamento acontece */
.sidebar.destaque-filtros {
  animation: arr-pulso-filtros 2.2s ease-out;
}
@keyframes arr-pulso-filtros {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
  15%, 60% { box-shadow: 0 0 0 3px rgba(249,115,22,.45); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.destaque-filtros { animation: none; outline: 2px solid rgba(249,115,22,.5); }
}

/* ── Conta no cabeçalho: chip de usuário logado (25/07/2026) ──────────
   Deslogado: ícone + "Entrar", discreto.
   Logado: disco laranja com a inicial + primeiro nome + ponto verde de
   presença. A pessoa se reconhece no cabeçalho e vê que a conta está
   ativa — antes só trocava a palavra do botão e passava despercebido. */
#contaBtn .conta-avatar {
  width: 21px; height: 21px;
  flex: 0 0 21px;
  border-radius: 50%;
  background: var(--laranja, #F97316);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  letter-spacing: 0;
}
/* Segue o mesmo padrão do selo "Atualizado hoje" do hero: fundo branco
   translúcido, formato pílula e o mesmo verde pulsante (#3ee08a). São os
   dois indicadores de "está vivo" do site, então falam a mesma língua —
   antes o chip tinha fundo verde e cantos quadrados, destoando. */
/* !important porque o index.html define #contaBtn.logado inline com fundo
   verde, e um <style> no head vence um arquivo externo em empate de
   especificidade */
#hdr #contaBtn.logado,
#contaBtn.logado {
  position: relative;
  padding-left: 6px;
  padding-right: 22px;
  font-weight: 700;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  /* 11px é o raio dos outros botões do cabeçalho (Favoritos, Buscar).
     A pílula do selo do hero, aqui, destoava dos vizinhos. */
  border-radius: 11px;
  color: #eaf3ff;
}
#hdr #contaBtn.logado:hover,
#contaBtn.logado:hover {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.4) !important;
}
#contaBtn.logado::after {
  content: "";
  position: absolute;
  right: 9px; top: 50%;
  margin-top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3ee08a;
  animation: pulse 2s infinite;   /* mesma animação do selo do hero */
}
@media (prefers-reduced-motion: reduce) {
  #contaBtn.logado::after { animation: none; }
}

/* "Favoritos" tem ícone + palavra + contador; o número fica num selo
   pequeno para não competir em peso visual com o rótulo. */
.btn-fav #favN {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}
/* 2026-09-12 (pedido do César): o contador ficava escondido com 0 favoritos
   (".sem-favoritos #favN{display:none}"), e como o rótulo também estava
   escondido por outra regra (ver bloco "FAVORITOS SÓ COM ÍCONE" mais abaixo),
   o botão sobrava só com o coração, sem nenhuma informação. Agora o número
   aparece sempre (0, 1, 12...) junto com "Favoritos": além de restaurar a
   informação, evita que a largura do botão mude entre "sem contador" e
   "com contador" — o motivo original (18/08) de esconder o rótulo. */

/* ── Altura igual entre os botões do cabeçalho (25/07/2026) ───────────
   "Entrar" é o único <button> da barra (os outros são <a>) e ficava
   5,6px mais baixo: <button> usa line-height:normal e o <a> herda o
   21,6px do tema. Fixa a mesma linha para todos. */
#hdr .nav .btn,
#hdr .menu .btn {
  line-height: 21.6px;
  box-sizing: border-box;
}
#hdr .nav .btn-sm,
#hdr .menu .btn-sm {
  height: 41.6px;
  padding-top: 9px;
  padding-bottom: 9px;
  align-items: center;
}
/* o toggle de tema é redondo e segue a própria medida */
#hdr .theme-toggle { align-self: center; }

/* ── Sol e lua com a cor do astro (25/07/2026) ────────────────────────
   O ícone era branco nos dois estados. Agora o sol puxa o laranja da
   marca e a lua fica num amarelo-claro lunar. Cores diferentes de
   propósito: é o contraste entre as duas que faz perceber que o botão
   alterna algo — lua laranja não existe no imaginário e anularia isso. */
#themeBtn .ic-svg { transition: color .2s ease, transform .3s ease; }

/* tema claro mostra a LUA (para ir ao escuro) */
html[data-theme="light"] #themeBtn .ic-svg { color: #ffd76e; }
html[data-theme="light"] #themeBtn:hover .ic-svg { color: #ffe49a; }

/* tema escuro mostra o SOL (para voltar ao claro) */
html[data-theme="dark"] #themeBtn .ic-svg { color: var(--laranja, #F97316); }
html[data-theme="dark"] #themeBtn:hover .ic-svg { color: #ffa04d; }

/* leve brilho no fundo do botão, conforme o astro em cena */
html[data-theme="dark"] #themeBtn { background: rgba(249,115,22,.16); }
html[data-theme="dark"] #themeBtn:hover { background: rgba(249,115,22,.28); }
html[data-theme="light"] #themeBtn { background: rgba(255,215,110,.20); }
html[data-theme="light"] #themeBtn:hover { background: rgba(255,215,110,.34); }

/* --------------------------------------------------------------------------
   22) CABEÇALHO: "Entrar" cortado da tela em notebook (05/08/2026)
   Nas páginas com "Buscar imóveis" no header (todas exceto a home, que já
   tem esse CTA logo abaixo e por isso não repete — ver comentário no
   <nav class="menu"> do index.html), o menu não cabia numa linha entre
   980px e ~1500px de largura: o botão "Entrar" saía da tela por completo,
   "Favoritos" cortava pela metade. Medido com Playwright em viabilidade.html:
   overflow de 34px a 1500px, chegando a 234px a 1150px. Não havia nenhum
   breakpoint entre o desktop cheio e o menu-hambúrguer de 980px.

   Duas frentes, porque nenhuma sozinha resolvia a faixa toda:
   (a) os 3 botões de ação (Buscar imóveis, Favoritos, Entrar) ganham
       padding horizontal menor — o pedido do César de "diminuir um pouco
       os botões" cabe bem aqui, e sozinho já cobre o overflow leve
       (até ~40px) das telas mais largas dessa faixa;
   (b) breakpoint novo em 1500px reduz também o espaçamento entre os
       itens do menu e o tamanho da fonte dos links de texto — o overflow
       mais severo (~200px+) vem do texto ("Analisador de Matrícula" sozinho
       tem 166px), não dos botões.
   -------------------------------------------------------------------------- */
#hdr .nav .btn-sm,
#hdr .menu .btn-sm {
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 1500px) and (min-width: 981px) {
  #hdr .menu { gap: 10px; }
  #hdr .menu .lnk, #hdr .menu .lnk-sub { font-size: 14px; }
  #hdr .nav .btn-sm, #hdr .menu .btn-sm { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  /* "Favoritos" some com 0 salvos já a partir de 901px (regra mais abaixo,
     :not(.sem-favoritos)); aqui cabe reduzir por igual o caso com contador,
     que ali só encolhe padding/gap sem mexer na fonte. */
}

/* Abaixo de 1345px o ajuste acima ainda não bastava: sobravam até 123px de
   overflow nas páginas com mais itens no menu (viabilidade.html soma um link
   a mais que as outras, e os simuladores citam a página irmã no submenu).
   Teto em 1345px, não 1300px: sobrava overflow residual de até 17px nessa
   faixa nos simuladores. */
@media (max-width: 1345px) and (min-width: 1201px) {
  #hdr .menu { gap: 6px; }
  #hdr .menu .lnk, #hdr .menu .lnk-sub { font-size: 13px; }
  #hdr .nav .btn-sm, #hdr .menu .btn-sm { padding-left: 8px; padding-right: 8px; }
}

/* Entre 1201px e o hambúrguer de 980px (regra logo abaixo), mesmo com os
   ajustes acima ainda sobrava overflow real. Medido item a item com
   Playwright: a faixa exata que resistia era 1160–1190px, até 46px de
   corte nas páginas com mais itens no menu (simuladores, imóvel). Espremer
   mais essa faixa com fonte/padding menores deixava o menu ilegível antes
   de resolver — a saída correta é antecipar o hambúrguer, não meia-medida
   com texto minúsculo. O bloco de 980px mexe em grids/hero também, então
   este fica isolado só para os itens do menu, sem repetir o resto daquele.
   Teto em 1200px (não só até a faixa medida) para não deixar zona cinzenta
   se o conteúdo do menu crescer de novo no futuro. */
@media (max-width: 1200px) and (min-width: 981px) {
  #hdr .menu .lnk, #hdr .menu .socials, #hdr .menu .has-sub { display: none; }
  #hdr .menu-toggle { display: block; }
}

/* giro curto ao trocar, para o olho acompanhar a mudança */
#themeBtn:active .ic-svg { transform: rotate(35deg); }
@media (prefers-reduced-motion: reduce) {
  #themeBtn .ic-svg, #themeBtn:active .ic-svg { transition: none; transform: none; }
}


/* ── Respiro dos números do hero (25/07/2026) ─────────────────────────
   O bloco de stats tinha 42px acima (do subtítulo) e 0 abaixo: encostava
   no card da Altina. Espaços iguais nos dois lados deixam a faixa de
   números centrada entre o subtítulo e o card, como um bloco próprio. */
/* O subtítulo (.sub) já contribui com 22px de margin-bottom, então o
   espaço de cima precisa de só 8px para fechar os mesmos 30px de baixo.
   Precisa repetir dentro do @media (min-width:861px) porque existe outra
   regra de .hero-stats lá, que vence em telas grandes. */
.hero-stats,
#hero .hero-stats,
.hero .hero-stats {
  margin-top: 8px !important;
  /* Este valor é um piso, não a distância final: o card da Altina usa
     margin-top:auto para fechar a coluna junto com o card de busca, e
     absorve a folga que sobra (a coluna esquerda é mais baixa que a
     direita). Aumentar aqui não aproxima o card — só reduz a folga que
     o auto distribui. */
  margin-bottom: 18px !important;
}
@media (max-width: 860px) {
  .hero-stats,
  #hero .hero-stats,
  .hero .hero-stats {
    margin-top: 4px !important;
    margin-bottom: 22px !important;
  }
}

/* Número e rótulo formam uma unidade: 7px entre eles soltava a legenda
   do próprio número. Encostando os dois, cada estatística vira um bloco
   só e a faixa inteira fica mais legível. */
.hero-stats .hs b { display: block; line-height: 1.05; }
.hero-stats .hs span { display: block; margin-top: 1px; }

/* ── Colunas do hero terminam na MESMA linha (25/07/2026) ─────────────
   As duas colunas são flex e cada card parava onde o conteúdo acabava:
   ficavam a 1,5px de diferença por acaso, não por alinhamento.
   Esticando as colunas até a altura da linha do grid e empurrando o
   último item de cada uma para o fim, os dois cards passam a fechar
   exatamente no mesmo ponto, em qualquer largura. */
@media (min-width: 861px) {
  .hero-grid { align-items: stretch; }
  .hero-grid > * { display: flex; flex-direction: column; }

  /* A coluna esquerda tem menos conteúdo que a direita, então sobra
     folga. Antes ela ia toda para o margin-top:auto do card da Altina,
     que empurrava o card para baixo e abria um vão de 42px depois dos
     números — enquanto acima deles havia 30px.

     Agora a folga é distribuída igualmente ENTRE os blocos da coluna
     (justify-content:space-between), então os espaços ficam parelhos e
     as duas colunas continuam terminando na mesma linha. */
  /* A coluna esquerda tem menos conteúdo que a direita e sobra folga.
     Nem space-between nem gap fixo resolvem: o primeiro empilha tudo no
     último vão (50px antes da Altina contra 22px nos outros), o segundo
     deixa a sobra no fim da coluna.

     A solução são espaçadores flexíveis IGUAIS entre os blocos: cada vão
     recebe a mesma fração da folga, então os quatro respiros ficam
     idênticos e a coluna continua fechando junto com a busca. */
  .hero-grid > *:first-child { justify-content: flex-start; gap: 22px; }
  .hero-grid > *:first-child > .sub,
  .hero-grid > *:first-child > .hero-stats,
  .hero-grid > *:first-child > .assessoria-card { margin-top: 0 !important; }

  /* Espaços fixos e iguais entre os blocos da coluna esquerda. Antes a
     folga ia toda para o margin-top:auto do card da Altina, abrindo 42px
     abaixo dos números contra 30px acima. Com gap declarado aqui e as
     margens dos filhos zeradas, os quatro blocos ficam com respiro
     previsível e o card da Altina encosta onde deve. */
  .hero-grid > *:first-child > h1 { margin-bottom: 0 !important; }
  .hero-grid > *:first-child > .sub { margin-top: 0 !important; margin-bottom: 0 !important; }
  .hero-grid > *:first-child > .hero-stats {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* O card da Altina ESTICA para ocupar a folga em vez de ser empurrado
     por ela: assim o espaço acima dele fica igual aos outros (22px) e a
     coluna continua fechando na mesma linha da busca. O conteúdo interno
     fica centrado para o card não parecer oco. */
  /* Cresce só o necessário para a coluna fechar junto com a busca, mas
     com teto: sem o max-height o card esticava demais e ficava oco.
     A folga que sobrar volta para o espaço acima dele. */
  /* O card ESTICA para absorver a folga da coluna, em vez de ser
     empurrado por ela. Assim o vão acima dele fica igual aos outros
     (22px) e a coluna continua fechando junto com a busca. O conteúdo
     interno centraliza para o card não parecer oco. */
  .hero-grid .assessoria-card {
    margin-top: 0 !important;
    flex: 1 1 auto;
    align-items: center;
  }

  /* o card de busca continua sendo o último item da coluna direita */
  .hero-grid #searchCard,
  .hero-grid .search-card { margin-top: auto; }
}

/* ── Card de busca mais largo (25/07/2026) ────────────────────────────
   O grid estava 1.25fr / .9fr: a coluna da busca ficava com 465px contra
   646px do texto, sendo que é ali que está a ação principal do site. Com
   1.05fr / 1.1fr a busca passa a ter um pouco mais de espaço que o texto.
   O selo "Atualizado hoje" acompanha a largura do card e cresce junto. */
@media (min-width: 861px) {
  /* Título e card disputam a mesma linha: quanto maior o h1, menor o card.
     Testadas as combinações, 46px + 1.25fr/.9fr é o melhor par que ainda
     mantém o título em 3 linhas — o h1 ganha 15% de presença (era 40px) e
     o card fica em 467px. Acima de 46px o título quebra para 4 linhas. */
  .hero-grid {
    grid-template-columns: 1.25fr .9fr !important;
    gap: 36px !important;
  }
  /* clamp em vez de tamanho fixo: com 46px fixo o título quebrava para 4
     linhas em 1100px e 5 em 960px, porque a coluna encolhe junto com a
     tela. Assim ele acompanha a largura e fica em 3 linhas em todas. */
  .hero-inner h1, .hero h1 {
    /* 46px é o teto real: testado até 1920px, 48px já quebra o título
       para 4 linhas. A coluna cresce em proporção (1.25fr), então tela
       maior não dá mais espaço ao h1. O vw mantém as 3 linhas conforme a
       coluna encolhe. Só vale de 861px para cima — no tablet e no celular
       a coluna vira largura total e usa o tamanho do CSS original. */
    font-size: clamp(34px, 3.07vw, 46px) !important;
    line-height: 1.1 !important;
    /* com o h1 maior, os 32px que havia entre ele e o subtítulo passaram
       a parecer um vão. 22px no total (8 aqui + 14 do .sub) mantém os
       dois como um bloco só, sem colar. */
    margin-bottom: 8px !important;
  }
}

/* O <select> de cidade cortava "Escolha o estado primeiro": a instrução
   que explica por que o campo está desabilitado era justamente a que não
   cabia. Fonte um pouco menor só neste campo resolve sem mexer nos
   outros, que têm textos curtos. */
#hf_cidade { font-size: 13px; padding-left: 10px; padding-right: 26px; }
/* abaixo de 1200px a coluna aperta e o texto voltava a cortar */
@media (min-width: 861px) and (max-width: 1200px) {
  #hf_cidade { font-size: 11.5px; padding-left: 7px; padding-right: 20px; }
}

/* ── Celular estreito: título não pode estourar a tela (25/07/2026) ───
   Em 360px o h1 ultrapassava a largura do viewport e criava rolagem
   horizontal. "plataforma" e "inteligente" são palavras longas e não
   cabiam inteiras. */
@media (max-width: 430px) {
  .hero-inner h1, .hero h1 {
    font-size: clamp(24px, 7.2vw, 29px);
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
    /* o h1 ficava com largura maior que a do viewport (361px em 360px) e
       gerava rolagem horizontal; max-width prende ele à coluna */
    max-width: 100%;
    box-sizing: border-box;
  }
  /* nenhum filho do hero pode ultrapassar a tela */
  .hero, .hero-inner, .hero-grid, .hero-grid > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Sombras iguais nos dois cards do hero (25/07/2026) ───────────────
   As bases dos cards coincidem no mesmo pixel (724,16px), mas as sombras
   eram bem diferentes: 40px de desfoque na Altina contra 84px na busca.
   O olho lê a sombra como parte do card, então o de busca parecia descer
   mais que o da Altina mesmo estando alinhado.
   Mesma sombra nos dois faz a percepção acompanhar a medida. */
@media (min-width: 861px) {
  .hero-grid #searchCard,
  .hero-grid .search-card {
    box-shadow: 0 20px 52px rgba(0, 20, 45, .34) !important;
  }
  /* A sombra externa é a mesma do card de busca, mas o inset branco no
     topo continua: é ele que dá o acabamento de vidro do card da Altina.
     Igualar as sombras não pode custar o efeito da peça. */
  .hero-grid .assessoria-card {
    box-shadow: 0 20px 52px rgba(0, 20, 45, .34),
                inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    transition: border-color .3s, box-shadow .3s, scale .4s ease;
  }
  /* Mesmo efeito do bloco "Vídeos em alta" (.vscreen:hover): o card
     cresce de leve em vez de saltar. Mais sutil e já é a linguagem de
     interação do site.

     Usa scale (propriedade independente) em vez de transform: o card roda
     a animação de entrada heroRise, e animação CSS tem precedência sobre
     regra normal — um transform aqui seria simplesmente ignorado. */
  .hero-grid .assessoria-card:hover {
    scale: 1.025;
    box-shadow: 0 30px 70px rgba(249, 115, 22, .32),
                inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    border-color: rgba(249, 115, 22, .55);
  }
  /* quem prefere menos movimento mantém só a mudança de sombra */
  @media (prefers-reduced-motion: reduce) {
    .hero-grid .assessoria-card { transition: box-shadow .25s, border-color .25s; }
    .hero-grid .assessoria-card:hover { scale: none; }
  }
}

/* ── Botões da busca: hover uniforme (25/07/2026) ─────────────────────
   Os três seguem levemente o mouse (efeito magnético do script no
   index.html). O "Limpar" era o único de fora, por não ter as classes
   .btn-laranja/.btn-navy que o script procura. */
.hs-actions .btn-laranja,
.hs-actions .btn-navy,
.hs-actions .btn-limpar-hero {
  transition: background-color .2s, box-shadow .2s, border-color .2s, transform .3s cubic-bezier(.2,.7,.3,1);
}

/* "Limpar" em cinza claro neutro (tom da lixeira do Windows), não no
   azulado do card: é uma ação secundária e de descarte, então não
   compete com Buscar e Mais filtros. No hover escurece de leve e ganha
   a mesma sombra dos vizinhos. */
/* Tema claro: cinza médio, para o botão ter presença sobre o card
   branco sem competir com Buscar e Mais filtros. */
.hs-actions .btn-limpar-hero {
  background: #cbcbd3;
  border-color: #b2b2bc;
  color: #33333a;
}
.hs-actions .btn-limpar-hero:hover {
  background: #bcbcc6;
  border-color: #a0a0ac;
  box-shadow: 0 12px 26px rgba(60, 60, 70, .28);
}

/* Tema escuro: cinza bem claro, que é o que se destaca sobre o fundo
   navy — o mesmo tom médio do tema claro sumiria ali. */
html[data-theme="dark"] .hs-actions .btn-limpar-hero {
  background: #d2d2d6;
  border-color: #bcbcc3;
  color: #27272a;
}
html[data-theme="dark"] .hs-actions .btn-limpar-hero:hover {
  background: #e0e0e4;
  border-color: #cacad1;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .42);
}

/* ── Bloco "Encontrou um imóvel em São Paulo?" premium (25/07/2026) ───
   Mesmo acabamento do card da Altina no hero: véu laranja sobre o navy,
   borda na cor da marca, brilho interno no topo e reação ao mouse.
   O tamanho e o espaçamento não mudam — só o acabamento. */
.cta {
  background:
    linear-gradient(125deg, rgba(249,115,22,.14), rgba(249,115,22,.04) 48%, rgba(10,91,176,.10)),
    linear-gradient(135deg, var(--navy), var(--navy-deep)) !important;
  border: 1.5px solid rgba(249,115,22,.34);
  box-shadow: 0 22px 56px rgba(0,20,45,.34),
              inset 0 1px 0 rgba(255,255,255,.09);
  transition: border-color .3s, box-shadow .3s, scale .4s ease;
}
/* Cresce de leve ao passar o mouse, como o card da Altina no hero e o
   bloco de vídeos. Escala menor (1.008) porque o bloco é largo: em peça
   grande, 1.025 vira um salto exagerado.
   Usa scale (propriedade independente) em vez de transform, porque o
   bloco tem a classe .reveal e sua animação de entrada usa transform —
   animação CSS tem precedência e anularia a regra. */
.cta:hover {
  scale: 1.008;
  border-color: rgba(249,115,22,.5);
  box-shadow: 0 28px 66px rgba(249,115,22,.2),
              inset 0 1px 0 rgba(255,255,255,.12);
}
@media (prefers-reduced-motion: reduce) {
  .cta:hover { scale: none; }
}

/* O bloco já tinha um círculo decorativo próprio no canto (herdado do
   .cta original) que, com o novo fundo, virava uma mancha acinzentada.
   Anulado — o brilho agora vem do gradiente do fundo, que se dissolve
   sem formar borda visível. */
.cta::before { display: none !important; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 88% -10%,
              rgba(249,115,22,.16) 0%,
              rgba(249,115,22,.05) 34%,
              transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.cta > * { position: relative; z-index: 1; }

/* Texto mais respirável: centralizado em 5 linhas cansa. Com a largura
   limitada e o texto quebrado em dois parágrafos, cada bloco fecha em
   2 linhas e o olho acha a linha seguinte sem esforço. */
.cta p {
  max-width: 700px;
  line-height: 1.65;
  font-size: 15.5px;
  margin-bottom: 13px;
}
/* o último mantém o respiro maior antes do botão */
.cta p:last-of-type { margin-bottom: 26px; }
/* a ressalva sobre onde a proposta é feita é informação de rodapé:
   um tom abaixo, para não competir com a apresentação da parceira.
   Usa a classe .cta-disclaimer (não :last-of-type) porque esta regra e a
   do <style> inline do index.html tinham a MESMA especificidade e vinham
   se sobrepondo pela metade — o ajuste "não aparecia" mesmo publicado.
   Esta é agora a ÚNICA fonte de verdade para esse texto; não duplicar
   no <style> inline (ver aviso da linha ~98 sobre a ordem de carga).

   Em 05/08/2026 o bloco também mudou de ORDEM: a credencial (.cta-creci,
   nome + CRECI) passou a vir ANTES do botão, não depois — quem visita
   precisa ver a prova de que é uma corretora registrada antes de decidir
   clicar. Por isso o disclaimer, que agora vem logo após o cartão da
   credencial (elemento com fundo/borda própria), ganhou margem positiva
   em vez do -8px que fazia sentido só quando ele saía direto de um <p>
   de texto corrido. */
.cta .cta-disclaimer {
  font-size: 13px;
  color: #a9c3e4;
  max-width: 560px;
  margin-top: 18px;
  margin-bottom: 22px;
}

/* O grifo laranja sob os nomes ficava opaco demais sobre o novo fundo */
.cta .grife {
  background: linear-gradient(transparent 62%, rgba(249,115,22,.42) 62%);
}

/* a tarja do CRECI acompanha o acabamento */
.cta-creci {
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: border-color .3s, box-shadow .3s; }
}

/* ── Coração de favorito: preenchido quando ativo (25/07/2026) ────────
   Convenção universal — contorno vazio = não salvo, preenchido = salvo.
   A cor é um laranja-avermelhado (#f0432b) em vez do vermelho puro: lê
   como favorito do mesmo jeito e conversa com o laranja da marca.
   O preenchimento do SVG é trocado no conta.js; aqui vem o resto do
   estado (fundo, borda, escala) para as três telas onde o botão aparece:
   card de resultado, página do imóvel e lista de favoritos. */
.btn-fav.ativo,
.btn-fav.on,
.btn-card-action.btn-fav.ativo,
.fav.on {
  color: #f0432b !important;
  border-color: rgba(240, 67, 43, .38) !important;
}
/* fundo levemente tingido reforça o estado sem gritar */
.btn-fav.ativo,
.btn-fav.on {
  background: rgba(240, 67, 43, .1) !important;
}
.btn-fav.ativo:hover,
.btn-fav.on:hover {
  background: rgba(240, 67, 43, .18) !important;
  border-color: rgba(240, 67, 43, .55) !important;
}

/* pulso curto ao favoritar: confirma a ação sem precisar de mensagem */
@keyframes favPulso {
  0%   { scale: 1; }
  45%  { scale: 1.22; }
  100% { scale: 1; }
}
.btn-fav.ativo .ic-svg,
.fav.on .ic-svg { animation: favPulso .32s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .btn-fav.ativo .ic-svg,
  .fav.on .ic-svg { animation: none; }
}

/* Trava de clique duplo nos botões de favorito (2026-09-13): sem isso,
   dois cliques rápidos disparavam duas requisições ao Supabase (a segunda
   batia no unique(user_id,imovel_id) e só gerava um toast de erro à toa).
   Fica travado só na janela entre o clique e a resposta do servidor —
   ver _favProcessando() em conta.js. Genérica, serve pros três padrões
   de botão (index/resultados/op-cards, imovel.html, favoritos.html). */
.processando { pointer-events: none !important; opacity: .6; }

/* mesmo pulso de favPulso, mas para os botões #btnFav/#btnFav2 da página
   do imóvel: não usam data-fid nem .ic-svg (svg cru, cor embutida no
   próprio markup), então o seletor acima não os alcança. */
.btn-icon-round.is-fav svg,
.btn-outline-navy.is-fav svg { animation: favPulso .32s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .btn-icon-round.is-fav svg,
  .btn-outline-navy.is-fav svg { animation: none; }
}

/* o coração do cabeçalho não usa esse tratamento: lá ele é ícone de
   navegação para /favoritos.html, não indicador de estado */
header .btn-fav.ativo,
.nav .btn-fav.ativo {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* ── Posts do blog: largura alinhada ao resto do site (25/07/2026) ────
   Os posts usavam .post-wrap com 760px enquanto cabeçalho, rodapé e
   demais páginas usam 1200px. O texto ficava espremido no meio, sem
   relação com a largura do menu acima dele.

   920px é o meio-termo: acompanha o site sem estourar o limite de
   leitura confortável (75 caracteres por linha). Acima disso o olho
   perde o começo da linha seguinte. */
.post-wrap {
  max-width: 920px !important;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 980px) {
  .post-wrap { max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MODO ESCURO — padrão único para o site inteiro (25/07/2026)

   As variáveis (--card, --texto, --border...) já eram iguais em todas as
   páginas, mas vários componentes ficaram sem tratamento no escuro e
   apareciam com fundo claro ou texto ilegível — principalmente as caixas
   de destaque dos posts e os blocos dos simuladores.

   Este bloco cobre o que faltava, na mesma paleta da home.
   ══════════════════════════════════════════════════════════════════════ */

/* ── caixas de destaque dos posts ─────────────────────────────────── */
html[data-theme="dark"] .warn-box {
  background: rgba(217,119,6,.14);
  border-color: rgba(245,200,119,.34);
  color: #f5d9a8;
}
html[data-theme="dark"] .info-box {
  background: rgba(0,74,153,.24);
  border-color: rgba(125,170,230,.3);
  color: #d3e2f6;
}
html[data-theme="dark"] .tip-box {
  background: rgba(18,160,107,.15);
  border-color: rgba(35,205,145,.32);
  color: #9fe6c4;
}
html[data-theme="dark"] .warn-box strong,
html[data-theme="dark"] .info-box strong,
html[data-theme="dark"] .tip-box strong { color: #fff; }

/* ── corpo do post ────────────────────────────────────────────────── */
html[data-theme="dark"] .post-body { color: var(--texto); }
html[data-theme="dark"] .post-body h2,
html[data-theme="dark"] .post-body h3 { color: #eaf2fc; }
/* 2026-07-27: esta regra pintava de azul TODO link do artigo, inclusive o
   botão laranja do .post-cta, que não tem classe própria para se defender.
   Texto azul claro sobre laranja dá 1,31 de contraste — ilegível. Os
   links de texto seguem azuis; botões ficam de fora. */
html[data-theme="dark"] .post-body a:not(.btn):not(.post-cta a) { color: #7fb3ff; }
/* corrigido em 27/07 (bloco 42): o v1 usa marrom escuro nos botões
   laranja, não branco — branco dava 2,80 de contraste. */
html[data-theme="dark"] .post-cta a,
html[data-theme="dark"] .post-body .post-cta a { color: #3b1f00 !important; }
html[data-theme="dark"] .post-meta { color: var(--muted); }
html[data-theme="dark"] .post-body table { border-color: var(--border); }
html[data-theme="dark"] .post-body th {
  background: var(--tint2);
  color: var(--texto);
}
html[data-theme="dark"] .post-body td { border-color: var(--border); }
html[data-theme="dark"] .post-body blockquote {
  background: var(--tint);
  border-left-color: var(--laranja);
  color: var(--texto);
}
html[data-theme="dark"] .post-body code {
  background: var(--tint2);
  color: #ffcf9e;
}

/* ── blocos dos simuladores ───────────────────────────────────────── */
html[data-theme="dark"] .sim-panel,
html[data-theme="dark"] .sim-out,
html[data-theme="dark"] .empty-state { background: var(--card); color: var(--texto); }
html[data-theme="dark"] .sim-line { border-color: var(--border); }
html[data-theme="dark"] .disclaimer-box {
  background: var(--tint);
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="dark"] .renda-box { background: var(--tint); }

/* ── formulários: o padrão do navegador vaza branco no escuro ─────── */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--tint2);
  color: var(--texto);
  border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7f97ba; }

/* ── página do imóvel e cards de resultado ────────────────────────── */
html[data-theme="dark"] .card-imovel,
html[data-theme="dark"] .imovel-box,
html[data-theme="dark"] .sidebar { background: var(--card); }
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a { color: var(--muted); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] .faq-q { color: var(--texto); }
html[data-theme="dark"] .faq-a { color: var(--muted); }
html[data-theme="dark"] .faq-cat { background: var(--tint2); color: #d3e2f6; }

/* ── Ações do card na linha da cidade, fora da foto (25/07/2026) ──────
   Antes ficavam sobrepostos à imagem: tapavam parte do imóvel e mudavam
   de legibilidade conforme a foto (claro sobre céu, escuro sobre asfalto).
   Agora ficam na linha da cidade, no lado oposto — como no site 1.0. */
.imovel-linha-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.imovel-linha-topo .imovel-local { margin: 0; }
.imovel-linha-topo .card-actions {
  position: static !important;   /* sai do absolute sobre a imagem */
  flex-shrink: 0;
}
/* fora da foto o botão não precisa de fundo branco nem sombra */
.imovel-linha-topo .btn-card-action {
  width: 30px;
  height: 30px;
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  color: var(--muted);
}
.imovel-linha-topo .btn-card-action:hover {
  background: var(--tint) !important;
  border-color: var(--navy) !important;
  color: var(--navy);
}
/* favoritado mantém o laranja-avermelhado combinado */
.imovel-linha-topo .btn-card-action.btn-fav.ativo,
.imovel-linha-topo .btn-card-action.btn-fav.on {
  color: #f0432b !important;
  border-color: rgba(240,67,43,.4) !important;
  background: rgba(240,67,43,.08) !important;
}
html[data-theme="dark"] .imovel-linha-topo .btn-card-action {
  border-color: var(--border) !important;
  color: var(--muted);
}
html[data-theme="dark"] .imovel-linha-topo .btn-card-action:hover {
  background: var(--tint2) !important;
  color: #eaf2fc;
}

/* ── Card da Altina na página do imóvel (25/07/2026) ──────────────────
   Cópia fiel do card da home (mesma classe .assessoria-card.ac-compact),
   só que na largura da coluna lateral: fonte e espaçamentos um pouco
   menores, sem perder o acabamento premium.

   As regras base viviam dentro do <style> do index.html, que a página do
   imóvel não carrega — por isso o card montava sem layout. Replicadas
   aqui, no CSS compartilhado, para funcionar em qualquer página. */
.ac-imovel.assessoria-card {
  display: flex;
  align-items: center;
  background: linear-gradient(120deg, rgba(249,115,22,.28), rgba(249,115,22,.1));
  border: 1.5px solid rgba(249,115,22,.55);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(249,115,22,.14);
}
.ac-imovel .ac-ic {
  border-radius: 11px;
  background: var(--laranja, #F97316);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(249,115,22,.4);
}
.ac-imovel .ac-ic svg { fill: #fff; }
.ac-imovel .ac-txt { display: flex; flex-direction: column; }
/* Na home o card fica sobre o hero navy e o texto é branco. Aqui o fundo
   da página é claro, então o texto precisa ser escuro para ter contraste. */
.ac-imovel .ac-txt b { display: block; margin-bottom: 3px; color: var(--navy-deep, #001F44); }
.ac-imovel .ac-txt span { display: block; color: #4a3a2c; }
.ac-imovel .ac-hl { color: #b8500a; font-weight: 700; }
html[data-theme="dark"] .ac-imovel .ac-txt b { color: #fff; }
html[data-theme="dark"] .ac-imovel .ac-txt span { color: #f2e4d8; }
html[data-theme="dark"] .ac-imovel .ac-hl { color: #ffcf9e; }
.ac-imovel .ac-tags { display: flex; align-items: center; }
.ac-imovel .creci-badge {
  background: var(--laranja, #F97316);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}
.ac-imovel .ac-uf {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,31,68,.16);
  color: var(--navy-deep, #001F44);
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
}
html[data-theme="dark"] .ac-imovel .ac-uf {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: #eaf3ff;
}
.ac-imovel {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  gap: 12px;
}
.ac-imovel .ac-ic { width: 40px; height: 40px; flex: 0 0 40px; }
.ac-imovel .ac-ic svg { width: 20px; height: 20px; }
.ac-imovel .ac-txt b { font-size: 14px; }
.ac-imovel .ac-txt span { font-size: 12.5px; line-height: 1.5; }
.ac-imovel .ac-tags { margin-top: 8px; gap: 6px; flex-wrap: wrap; }
.ac-imovel .creci-badge { font-size: 11px; padding: 3px 9px; }
.ac-imovel .ac-uf { font-size: 11px; padding: 3px 9px; }

/* --------------------------------------------------------------------------
   43) CARD DA ALTINA NO CTA FINAL DA HOME (13/09/2026)
   César pediu, com print da ficha do imóvel como referência: o mesmo visual
   claro (fundo gradiente pêssego, texto navy, selos) no lugar do pill escuro
   translúcido que existia. .ac-imovel já resolve fundo/cores/selos — aqui só
   os ajustes que esse contexto pede: centralizar dentro do .cta (que é
   flex+column+center), texto alinhado à esquerda dentro do card (herdava
   text-align:center do .cta) e sombra mais forte para se destacar do fundo
   navy — a sombra laranja suave do .ac-imovel foi pensada para página clara.
   .cta-creci (pill antigo) continua intocado: blog.html e
   perguntas-frequentes.html ainda usam essa classe. -------------------- */
.cta-creci-card {
  width: 100%;
  max-width: 560px;
  margin: 20px auto 22px;
  text-align: left;
  /* .ac-imovel usa fundo TRANSLÚCIDO (rgba de baixa opacidade), pensado para
     ficar sobre página clara — aqui o .cta é navy escuro, e o mesmo gradiente
     ficava acinzentado, derrubando o contraste do texto. Opaco, sólido. */
  background: linear-gradient(135deg, #fdf0e4, #ffffff) !important;
  box-shadow:
    0 20px 45px rgba(0,10,25,.35),
    0 3px 10px rgba(0,10,25,.2),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.cta-creci-card .ac-ic { width: 46px; height: 46px; flex: 0 0 46px; }
.cta-creci-card .ac-ic svg { width: 22px; height: 22px; }
.cta-creci-card .ac-txt b { font-size: 16px; }
.cta-creci-card .ac-txt span { font-size: 13.5px; }
@media (max-width: 560px) {
  .cta-creci-card { flex-direction: column; text-align: center; }
  .cta-creci-card .ac-tags { justify-content: center; }
}

/* O par duplicado de Favoritar/Compartilhar da página do imóvel tem
   display:flex numa regra própria, que vencia o atributo hidden. */
.fav-actions[hidden] { display: none !important; }

/* ── "Ver no portal da CAIXA" não usa laranja (25/07/2026) ────────────
   Diretriz da marca: o laranja identifica ações DA Arremate. Este botão
   leva para fora do site, para o portal da CAIXA — pintá-lo de laranja
   sugere que a ação é nossa, e ainda faz o link externo competir com os
   CTAs próprios da página.
   Navy resolve: é a cor dominante da marca, tem o peso de ação principal
   e não se confunde com o que é da Arremate. */
.cta-caixa .btn,
#linkCaixa {
  background: var(--navy, #004A99) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.cta-caixa .btn:hover,
#linkCaixa:hover {
  background: var(--navy-deep, #001F44) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 12px 26px rgba(0,31,68,.34) !important;
}
html[data-theme="dark"] .cta-caixa .btn,
html[data-theme="dark"] #linkCaixa {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.3) !important;
}
html[data-theme="dark"] .cta-caixa .btn:hover,
html[data-theme="dark"] #linkCaixa:hover {
  background: rgba(255,255,255,.22) !important;
}

/* ── Portal da CAIXA: só o botão, sem o card em volta (25/07/2026) ────
   O .cta-caixa tinha fundo navy e padding para emoldurar os dois
   parágrafos que existiam ali. Sem eles, o card virou uma moldura azul
   em volta de um botão azul — duas camadas da mesma cor, sem função. */
.cta-caixa {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* sozinho, o botão ocupa a largura da coluna como os vizinhos */
.cta-caixa .btn,
#linkCaixa {
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════
   ESPAÇO ENTRE O CABEÇALHO E O CONTEÚDO — padrão único (25/07/2026)

   Estava diferente em cada página: 37px em resultados, ~80px nos
   simuladores e páginas internas, 131px no blog, 174px na home e 189px
   nos posts. Trocar de página dava a sensação de que o site "pulava".

   O padrão passa a ser 80px, que já era o valor da maioria. O header é
   fixo com 74px de altura, então esse é o respiro real depois dele.
   ══════════════════════════════════════════════════════════════════════ */

/* O hero começa no topo da página, ATRÁS do header fixo (74px). Então o
   padding precisa ser 74 + 80 = 154px para dar 80px de respiro visível.
   Foi o erro da primeira tentativa: 80px de padding virava 10px na tela. */
.page-hero {
  padding-top: 116px !important;
}

/* resultados: o conteúdo começava logo abaixo do header, sem respiro */
.results-title,
.resultados-topo {
  margin-top: 20px;
}

/* Página do imóvel e resultados: o breadcrumb é o primeiro elemento e
   ficava colado no header (o padding do body só compensa a altura dele,
   sem deixar respiro). */
.breadcrumb,
.crumb {
  padding-top: 34px;
  margin-bottom: 18px;
}
/* no post o .crumb já recebe o padding pela regra específica adiante;
   evita somar duas vezes */
.post-hero ~ .crumb,
body > .crumb { padding-top: 34px; }

/* Nos posts o .post-hero NÃO começa no topo: há um breadcrumb acima dele,
   então ele não fica atrás do header e não precisa compensar os 74px. */
.post-hero {
  padding-top: 34px !important;
  margin-top: 0 !important;
}
/* O breadcrumb do post tinha 118px de padding-top somando com os 82px do
   body: 139px de altura para uma linha de navegação. Ele é quem recebe o
   respiro do header, mas 34px bastam. */
.crumb {
  padding-top: 34px !important;
  max-width: 920px !important;   /* acompanha a nova largura do post */
}
.post-wrap {
  padding-top: 34px !important;
}

/* no celular o respiro é menor, mas segue a mesma lógica */
@media (max-width: 860px) {
  .page-hero,
  .post-hero { padding-top: 104px !important; }
  .breadcrumb { margin-top: 22px; }
  .results-title,
  .resultados-topo { margin-top: 30px; }
  .post-wrap { padding-top: 26px !important; }
}

/* blog.html tem uma segunda regra de .page-hero com 130px que vencia a
   anterior por vir depois no arquivo */
.page-hero { padding-bottom: 44px; }
body .page-hero { padding-top: 116px !important; }

/* ── Cabeçalho idêntico em todas as páginas (26/07/2026) ──────────────
   viabilidade.html e matricula.html herdaram o CSS da home, que define
   a logo em 58px — mas as demais páginas usam 50px, com header de 74px.
   Resultado: a logo pulava de tamanho e posição ao trocar de página.
   Este bloco fixa a medida das outras páginas como padrão único. */
header .brand img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
}

/* ── Modo escuro: títulos e detalhes que ficavam ilegíveis (26/07/2026) ─
   Varredura visual em 14 páginas nos dois temas. O padrão que apareceu:
   elementos com navy fixo no CSS (#001F44, #004A99) continuavam escuros
   no tema escuro e sumiam contra o fundo. */

/* títulos de seção: navy escuro sobre fundo escuro = invisível */
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .sec-head h2,
html[data-theme="dark"] .post-body h2,
html[data-theme="dark"] .faq-item h3 { color: #eaf2fc; }

/* o "i" de ajuda ficava navy sobre navy */
html[data-theme="dark"] .q,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .info-i {
  background: rgba(255,255,255,.16);
  color: #eaf2fc;
  border-color: rgba(255,255,255,.28);
}

/* botão de alternância (PRICE/SAC) e botões de ferramenta */
html[data-theme="dark"] .sis-btn,
html[data-theme="dark"] .tool-btn {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #cfe0f5;
}
html[data-theme="dark"] .sis-btn.active {
  background: var(--laranja, #F97316);
  border-color: var(--laranja, #F97316);
  color: #fff;
}

/* selo "Gratuito, com cadastro rápido": laranja claro sobre laranja
   translúcido dava contraste de 1.56 */
html[data-theme="dark"] .free-ribbon {
  background: rgba(249,115,22,.26);
  color: #ffd9b3;
  border-color: rgba(249,115,22,.5);
}

/* links dentro de blocos translúcidos */
html[data-theme="dark"] .sim-cross a,
html[data-theme="dark"] .disclaimer-box a { color: #9dc4ff; }

/* pílula de FGTS e afins: verde sobre verde translúcido */
html[data-theme="dark"] .pill-verde {
  background: rgba(35,205,145,.24);
  color: #7fe8b8;
}

/* data de encerramento nos cards ficava navy sobre o card escuro */
html[data-theme="dark"] .card-data,
html[data-theme="dark"] .imovel-data { color: #a6b9d4; }

/* cards com #fff fixo no CSS, que ignoravam a variável --card e ficavam
   brancos no tema escuro */
html[data-theme="dark"] .via-form,
html[data-theme="dark"] .mat-box,
html[data-theme="dark"] .via-card,
html[data-theme="dark"] .tool-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
/* rótulos e legendas dentro desses cards */
html[data-theme="dark"] .via-form label,
html[data-theme="dark"] .via-form .lbl,
html[data-theme="dark"] .mat-box label { color: var(--muted); }
html[data-theme="dark"] .via-form h4,
html[data-theme="dark"] .via-form .grp-t,
html[data-theme="dark"] .mat-box h4 { color: var(--texto); }

/* Títulos com a cor navy declarada direto no atributo style ou em regra
   mais específica: precisam de !important para clarear no tema escuro. */
html[data-theme="dark"] h2[style*="navy"],
html[data-theme="dark"] h3[style*="navy"],
html[data-theme="dark"] .sec-head h2,
html[data-theme="dark"] section h2 { color: #eaf2fc !important; }

/* Últimos ajustes da varredura: elementos pequenos que ainda ficavam
   apagados no tema escuro. */
html[data-theme="dark"] .btn-limpar {
  background: rgba(255,255,255,.16) !important;
  color: #eaf2fc !important;
  border-color: rgba(255,255,255,.3) !important;
}
html[data-theme="dark"] .ac-uf {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.36);
}
html[data-theme="dark"] .tool-btn,
html[data-theme="dark"] .sis-btn {
  background: rgba(255,255,255,.16) !important;
  color: #eaf2fc !important;
  border-color: rgba(255,255,255,.3) !important;
}
html[data-theme="dark"] .sis-btn.active {
  background: var(--laranja,#F97316) !important;
  color: #fff !important;
}
html[data-theme="dark"] .q {
  background: rgba(255,255,255,.26) !important;
  color: #fff !important;
}
html[data-theme="dark"] .drop b,
html[data-theme="dark"] .dropzone b { color: #eaf2fc; }

/* ── Bloco de São Paulo no tema escuro (26/07/2026) ───────────────────
   O véu laranja e a borda são os mesmos nos dois temas, mas o navy do
   card é mais claro no escuro e engolia o acento: o bloco ficava azul
   chapado, sem o acabamento premium que tem no tema claro.
   Aqui o laranja é reforçado para manter a mesma leitura. */
html[data-theme="dark"] .cta {
  background:
    linear-gradient(125deg, rgba(249,115,22,.22), rgba(249,115,22,.07) 48%, rgba(10,91,176,.12)),
    linear-gradient(135deg, #0a2a52, #061a35) !important;
  border-color: rgba(249,115,22,.5);
  box-shadow: 0 22px 56px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-theme="dark"] .cta:hover {
  border-color: rgba(249,115,22,.7);
  box-shadow: 0 28px 66px rgba(249,115,22,.24),
              inset 0 1px 0 rgba(255,255,255,.14);
}
/* o brilho do canto também precisa de mais presença sobre fundo escuro */
html[data-theme="dark"] .cta::after {
  background: radial-gradient(120% 90% at 88% -10%,
              rgba(249,115,22,.24) 0%,
              rgba(249,115,22,.08) 34%,
              transparent 62%);
}


/* ritmo-e-cor-blog (padrao dos artigos)
   Vive aqui para valer tambem nos artigos que nao tem bloco <style> proprio.
   Mesmo padrao aplicado nos demais: hierarquia de espaco entre blocos de
   natureza diferente, e titulos com a cor da marca no tema escuro em vez de
   branco chapado. */
.post-body>h2{margin-top:52px;margin-bottom:14px}
.post-body>h2:first-of-type{margin-top:30px}
.post-body>h3{margin-top:34px}
.post-body>p+h2,.post-body>ul+h2,.post-body>ol+h2,.post-body>div+h2{margin-top:58px}
.info-box,.tip-box,.warn-box{margin:30px 0}
.post-cta{position:relative;margin-top:72px;margin-bottom:16px}
.post-cta:before{content:"";display:block;position:absolute;left:50%;
  transform:translateX(-50%);top:-40px;width:56px;height:2px;
  background:var(--laranja);border-radius:2px;opacity:.65}
.post-wrap>h2{margin-top:68px}
.faq-item{margin-bottom:14px}
.related{margin-top:76px;padding-top:44px;border-top:1px solid var(--border)}
.related h3,.related h2{margin-bottom:20px}
.post-body p{line-height:1.78;margin-bottom:18px}
.post-body ul,.post-body ol{margin:16px 0 24px;line-height:1.72}
.post-body li+li{margin-top:9px}
[data-theme="dark"] .post-body h2{color:#8fc0f7;border-bottom-color:rgba(143,192,247,.28)}
[data-theme="dark"] .post-body h3,[data-theme="dark"] .post-body h4{color:#cfe2fb}
[data-theme="dark"] .faq-item h3{color:#8fc0f7}
[data-theme="dark"] .related h3,[data-theme="dark"] .related h2{color:#8fc0f7}
[data-theme="dark"] .related-card h4{color:var(--texto)}
[data-theme="dark"] .post-body p,[data-theme="dark"] .post-body li{color:#dce7f5}
[data-theme="dark"] .post-body strong{color:#fff}
@media(max-width:640px){
  .post-body>h2{margin-top:42px}
  .post-cta{margin-top:56px}
  .post-cta:before{top:-30px}
  .related{margin-top:56px;padding-top:36px}
}

/* ==========================================================================
   27) MENU MOBILE DE VERDADE
   2026-07-27. O hambúrguer existia mas era um "☰" de texto sem fundo (23px,
   quase invisível no navy) e o onclick só fazia .menu virar flex — como os
   .lnk estão com display:none !important nessa largura, o menu abria VAZIO
   e sem como fechar. Aqui ele vira um painel próprio, com os destinos todos.
   -------------------------------------------------------------------------- */
.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 11px;
  color: #fff; cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.menu-toggle:hover { background: rgba(255,255,255,.2); }
.menu-toggle .ic-svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
@media (max-width: 1100px) {
  header .menu-toggle, .nav .menu-toggle { display: inline-flex !important; }
}

.mmenu-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,10,26,.55);
  z-index: 998;
  opacity: 0; transition: opacity .25s;
}
.mmenu-backdrop.open { opacity: 1; }

.mmenu {
  position: fixed; top: 0; right: 0;
  width: min(300px, 86vw); height: 100%;
  background: var(--navy-deep, #001F44);
  z-index: 999;
  padding: 16px 14px 28px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.7,.2,1);
  box-shadow: -12px 0 40px rgba(0,0,0,.34);
}
.mmenu.open { transform: translateX(0); }
.mmenu-head {
  display: flex; align-items: center; justify-content: space-between;
  color: #8fb3dd; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 4px 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 8px;
}
.mmenu-close {
  background: none; border: none; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.mmenu a {
  color: #fff; text-decoration: none;
  font-family: var(--display, 'Montserrat', sans-serif);
  font-weight: 700; font-size: 15.5px;
  padding: 13px 10px; border-radius: 10px;
  transition: background .18s;
}
.mmenu a:hover, .mmenu a:focus-visible { background: rgba(255,255,255,.1); }
/* o painel é só para telas sem o menu completo */
@media (min-width: 1101px) {
  .mmenu, .mmenu-backdrop { display: none !important; }
}

/* ==========================================================================
   28) CABEÇALHO E HERO NO MOBILE — igual ao v1
   2026-07-27. Três problemas reais no celular:
   a) a marca (logo 58px + nome 21px nowrap) media 335px de 412, empurrando
      o hambúrguer para x=745 — fora da tela, impossível de tocar;
   b) o slogan sumia (display:none abaixo de 1040px), enquanto o v1 o mantém
      ao lado do nome, que é a assinatura da marca;
   c) o título aparecia DEPOIS do card de busca (y=863 vs y=182). No v1 o
      título vem primeiro, apresenta o site e só então vem a busca.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* a) marca menor: sobra espaço para o hambúrguer.
     Precisa de "header .brand" porque o bloco do cabeçalho único (linha
     ~2316) usa "header .brand img" com !important — um ".brand img"
     simples, mesmo com !important, perde por especificidade.

     07/08/2026: aumentada a pedido do César (nome, logo e slogan juntos,
     mantendo a proporção). Overflow do header não era o limite — o
     hambúrguer aguenta até 19-20px sem sair da tela. O limite real é
     "Arremate Imóveis Online" quebrar em 2 linhas: em 320-360px (o pior
     caso, testado com Playwright) o texto já quebra a partir de 16.5px.
     18px chegou a passar despercebido no teste de overflow porque o
     header cresce (2 linhas) sem vazar — só fica feio, com "Online"
     sozinho embaixo e o slogan cortado por falta de espaço vertical. */
  header .brand img {
    width: 42px !important; height: 42px !important; border-radius: 12px !important;
  }
  header .brand { gap: 9px !important; margin-right: 0 !important; min-width: 0; }
  header .brand > span { min-width: 0; }
  header .brand b {
    font-size: 16px !important; white-space: normal !important;
    width: auto !important; line-height: 1.15;
  }
  header .nav { gap: 10px !important; flex-wrap: nowrap !important; }

  /* O .menu ainda media 294px no celular (tema + Favoritos + Entrar) e era
     ele, não a marca, que empurrava o hambúrguer para fora da tela. No v1
     esses botões não ficam no cabeçalho do mobile. Aqui eles saem do header
     e reaparecem dentro do painel do menu (.mmenu-acoes). */
  header .menu { display: none !important; }

  /* b) o slogan volta, como no v1.
     font-size e white-space SEM !important desde 07/08/2026: essa era a
     terceira regra (não vista nas duas primeiras rodadas de correção)
     ainda travando o slogan em 10.5px e impedindo o menu.js de encolher
     a fonte até bater na largura do nome. white-space:normal também saiu
     — o bloco de max-width:1100px logo abaixo no arquivo já define
     nowrap!important, que é o que o alinhamento pelas duas pontas exige. */
  header .brand .slogan {
    display: block !important;
    line-height: 1.25;
    color: rgba(255,255,255,.82);
  }
}
@media (max-width: 380px) {
  /* mesmo aumento de 07/08/2026 (era 14px) — sem isso a marca encolheria
     de novo nas telas mais estreitas, ao contrário do pedido. */
  header .brand b { font-size: 16px !important; }
  /* sem !important: assets/menu.js mede o texto do nome (que muda de
     tamanho com a regra acima) e refina a fonte do slogan para bater
     exatamente na mesma largura — um valor fixo aqui voltaria a
     descasar as duas pontas, como antes de 05/08/2026. */
  header .brand .slogan { font-size: 9.6px; }
  header .brand img { width: 36px !important; height: 36px !important; }
}

/* c) título antes da busca, como no v1.
   A regra 22) subia #buscar (order:1) e mandava o texto para baixo (order:2).
   Aqui a coluna de texto volta para cima; dentro dela só o título e o
   subtítulo ficam acima da busca — botões, stats e a Altina seguem embaixo. */
@media (max-width: 860px) {
  .hero-grid > div:first-child { order: 0 !important; }
  .hero-grid > #buscar { order: 1 !important; }
  /* dentro da coluna de texto: só título e subtítulo ficam acima da busca.
     Botões, números e o card da Altina continuam existindo, mas descem para
     depois dela — a regra 22) já lhes deu order 3/4/5; o que muda aqui é que
     a coluna de texto inteira sobe, então eles precisam voltar para baixo. */
  .hero-grid > div:first-child {
    display: contents !important;
  }
  .hero-grid > div:first-child > h1  { order: 0 !important; }
  .hero-grid > div:first-child > .sub { order: 0 !important; }
  .hero-grid > .hero-cta,
  .hero-grid > div:first-child > .hero-cta { order: 2 !important; }
  .hero-grid > div:first-child > .hero-stats { order: 3 !important; }
  .hero-grid > div:first-child > .assessoria-card { order: 4 !important; }
}

/* ações do cabeçalho que saíram no mobile, agora no rodapé do painel */
.mmenu-acoes {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: 8px;
}
.mmenu-acoes button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer;
  font-family: var(--display, 'Montserrat', sans-serif);
  font-weight: 700; font-size: 14.5px;
  padding: 12px 14px; border-radius: 10px;
  transition: background .18s;
}
.mmenu-acoes button:hover { background: rgba(255,255,255,.18); }
.mmenu-acoes .ic-svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================================
   29) AJUSTES DO CELULAR — Samsung M35 (2026-07-27)
   Medido em 385px de largura CSS (M35) e conferido em 360px:
   os 3 botões do card somavam 331px (98+125+90 + gaps) para uma área útil
   de 290px, e o "Limpar" vazava ~41px para fora do bloco branco.
   Pedido do César: reduzir ligeiramente os botões, ocultar o subtítulo e
   cortar pela metade o respiro entre o cabeçalho e o título.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* a) botões um pouco menores e divididos pela largura: os três cabem
     sempre, proporcionalmente, em vez de medirem pelo texto. */
  /* Precisa de ".search-card .hs-actions" — as regras 29) e a de 1254 usam
     essa especificidade com !important e venciam um ".hs-actions" simples. */
  #searchCard .hs-actions,
  .search-card .hs-actions {
    display: flex !important;
    gap: 6px !important;
    width: 100%;
  }
  #searchCard .hs-actions .btn,
  #searchCard .hs-actions button.btn,
  #searchCard .hs-actions .btn-limpar-hero,
  .search-card .hs-actions .btn,
  .search-card .hs-actions button.btn,
  .search-card .hs-actions .btn-limpar-hero {
    min-width: 0 !important;
    padding: 0 7px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 12px !important;
    gap: 5px !important;
    white-space: nowrap;
    justify-content: center !important;
  }
  /* os dois de ação dividem a sobra; "Limpar", secundário, leva o mínimo.
     Precisa de #searchCard: as regras 1297-1299 usam ID + !important. */
  #searchCard .hs-actions .btn-laranja,
  .search-card .hs-actions .btn-laranja,
  #searchCard .hs-actions .btn-navy,
  .search-card .hs-actions .btn-navy { flex: 1 1 0 !important; }
  #searchCard .hs-actions .btn-limpar-hero,
  .search-card .hs-actions .btn-limpar-hero { flex: 0 1 auto !important; padding: 0 9px !important; }
  #searchCard .hs-actions .btn .ic-svg,
  .search-card .hs-actions .btn .ic-svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* b) 08/08/2026: decisão revertida. Em 01/08 o César pediu o subtítulo
     de volta no celular ("conteúdo deve ser o mesmo nas três larguras");
     agora pediu para tirá-lo de novo ("não precisa, deixa sem"). Escondido
     — o h1 já entrega a ideia sozinho. Mantido !important porque essa
     regra é quem historicamente vencia a cascata aqui; sem ele o subtítulo
     voltaria a aparecer. */
  .hero .sub { display: none !important; }

  /* c) metade do respiro entre o cabeçalho e o título.
     Cuidado: o .hero tem padding-top:118px MAS também margin-top:-74px
     (--header-h) para compensar o header fixo. O respiro que se enxerga é
     118-74 = 44px, não 118. Metade disso é 22px, ou seja padding 96px.
     Usar 59px colaria o título no cabeçalho (sobrariam 15px). */
  .hero { padding-top: 96px !important; }
}
@media (max-width: 380px) {
  #searchCard .hs-actions, .search-card .hs-actions { gap: 5px !important; }
  #searchCard .hs-actions .btn,
  #searchCard .hs-actions button.btn,
  #searchCard .hs-actions .btn-limpar-hero,
  .search-card .hs-actions .btn,
  .search-card .hs-actions button.btn,
  .search-card .hs-actions .btn-limpar-hero {
    font-size: 11.2px !important; padding: 0 5px !important;
  }
  #searchCard .hs-actions .btn .ic-svg,
  .search-card .hs-actions .btn .ic-svg { width: 13px; height: 13px; }
}

/* ==========================================================================
   30) REFINO DO MOBILE — 2026-07-27 (medido em 385px, Samsung M35)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* a) respiro cabeçalho→título −40%.
     Lembrete: o .hero tem margin-top:-74px (--header-h), então o respiro
     VISÍVEL é padding-96 − 74 = 22px. −40% => 13px => padding 87px. */
  /* 2026-07-27: 87px de padding menos os 74px de margin-top negativa (que
     compensa o cabeçalho fixo) deixavam só 21px entre o cabeçalho e o
     título — colado demais. 114px dá 40px de respiro real. */
  .hero { padding-top: 114px !important; }

  /* b) gap do badge "Atualizado hoje" para o título −50% */
  .hero .tag-atualizado { margin-bottom: 9px !important; }
  .hero h1 { margin-top: 0 !important; }

  /* c) os três botões com a MESMA largura. O "Limpar" ficava 72 contra 103
     — desigual e com alvo de toque menor que o mínimo confortável. Agora
     os três dividem a linha igualmente (UX: alvos consistentes, ≥40px). */
  #searchCard .hs-actions .btn-laranja,
  #searchCard .hs-actions .btn-navy,
  #searchCard .hs-actions .btn-limpar-hero,
  .search-card .hs-actions .btn-laranja,
  .search-card .hs-actions .btn-navy,
  .search-card .hs-actions .btn-limpar-hero {
    flex: 1 1 0 !important;
    padding: 0 6px !important;
  }

  /* d) a nota "Mais de 27.000 imóveis…" volta no celular (01/08/2026,
     pedido do César: mesmo conteúdo nas três larguras). O número
     também aparece nos indicadores abaixo, então aqui ela entra
     discreta — menor e com pouca margem. */
  #searchCard .search-note, .search-card .search-note {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 6px 0 0 !important;
    opacity: .85;
  }

  /* e) indicadores: "27 estados" sai (o menos informativo dos quatro) e os
     três restantes cabem em uma linha só, com fonte menor. */
  .hero-stats .hs:nth-child(2) { display: none !important; }
  .hero-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .hero-stats .hs { flex: 1 1 0; min-width: 0; text-align: center; }
  .hero-stats .hs b { font-size: 20px !important; line-height: 1.1; }
  .hero-stats .hs span { font-size: 10.5px !important; line-height: 1.25; display: block; }

  /* f) card da Altina encostava na borda (x=24, r=385 em tela de 385) */
  .assessoria-card {
    margin-left: 0 !important; margin-right: 0 !important;
    max-width: 100% !important;
    padding: 15px 16px !important;
    gap: 12px !important;
    flex-wrap: wrap;
  }
  .assessoria-card > * { min-width: 0; }
  .assessoria-card .btn { width: 100%; justify-content: center; }

  /* g) ritmo entre blocos: 76px era desenho de desktop e no celular deixava
     buracos. 44px mantém a separação sem esticar a página. */
  section { padding: 44px 0 !important; }
  .sec-head { margin-bottom: 24px !important; }
  .sec-head h2 { font-size: clamp(22px, 5.6vw, 28px) !important; }
}
@media (max-width: 380px) {
  .hero-stats .hs b { font-size: 18px !important; }
  .hero-stats .hs span { font-size: 9.8px !important; }
}

/* ==========================================================================
   31) "COMO O ARREMATE TRABALHA" NO MOBILE — 2026-07-27
   No desktop a ilustração é sticky e acompanha os 4 passos. No mobile ela
   virava static, encalhava no topo e os passos desciam 1.240px sozinhos.
   TENTATIVA DESCARTADA: deixá-la sticky no celular. Com height:auto a cena
   colapsava para ~22px e virava uma tarja que ainda cobria o texto do
   passo 1 — pior que o problema original.
   O que fica: a ilustração continua no fluxo, mas com altura garantida, e
   os passos ficam bem mais compactos (eram 296px cada, quase uma tela por
   passo) — o bloco inteiro cai de 1.240px para ~1.060px e a leitura anda.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  /* A ilustração é um mock de navegador desenhado para a altura do sticky
     do desktop (74vh). No celular o .mock fica com 2px de altura e
     overflow:hidden — ou seja, um retângulo vazio de 260px que só empurra
     os passos para baixo. Some no mobile; os 4 passos já contam a história,
     e é o que os grandes players fazem quando a peça visual não sobrevive
     à redução: mostrar o conteúdo, não a moldura vazia. */
  #story .story-sticky { display: none !important; }

  /* passos mais compactos: eram 296px cada */
  #story .story-step { min-height: 0 !important; padding: 16px 0 !important; }
  #story .story-step h3 { font-size: clamp(19px, 4.8vw, 23px) !important; margin-bottom: 8px !important; }
  #story .story-step p { font-size: 14.5px !important; }
  #story .story-step .n { width: 34px; height: 34px; font-size: 15px; margin-bottom: 10px; }
  #story .story-steps { padding-bottom: 0 !important; }
}

/* composição da parcela e aviso de cota no simulador da página do imóvel */
.sim-comp { font-size: 11.5px; color: var(--muted, #5b6b82); line-height: 1.5; display: inline-block; margin-top: 3px; }
[data-theme="dark"] .sim-comp { color: #a9c3e4; }
.sim-aviso-cota {
  font-size: 11.8px; line-height: 1.45; margin-bottom: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.35);
  color: var(--laranja-deep, #c85f0e);
}
[data-theme="dark"] .sim-aviso-cota { color: #ffb066; }

/* ==========================================================================
   32) RITMO E PROPORÇÕES DO HERO NO MOBILE — 2026-07-27
   Medido em 385px. Os espaçamentos estavam desiguais: header→título 21px,
   título→badge 42px (o dobro), stats→Altina 66px (o triplo) e 44px sobrando
   no fim. Aqui tudo passa a usar o mesmo intervalo de 21px do topo.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* a) o .hero-grid é flex com gap:24px, que SOMAVA às margens (21+24=45).
     Zera o gap do container e deixa as margens comandarem o ritmo. */
  .hero .hero-grid { gap: 0 !important; }

  /* o respiro cabeçalho→título é o MESMO do título→pílula "Atualizado hoje".
     COMO MEDIR (errei quatro vezes aqui, então fica registrado):

     1. O ponto de partida é o fim da FAIXA do cabeçalho, em y=66 — a
        mudança de cor do navy (0,31,69) para o azul do hero (5,43,88),
        detectável na coluna x=8. NÃO é o fim do texto do slogan (y=44):
        a faixa continua abaixo dele e é ela que se enxerga.
     2. A base do título é a última linha de PIXEL com texto claro, não o
        getClientRects — a caixa de linha corta o "CAIXA" no meio, porque
        as letras descem abaixo dela.

     2026-07-28, valor pedido pelo César: **25px** de vão. Com 91px o vão dava
     27px, então 91 − 2 = 89px. (O vão título→pílula segue em ~27px; a partir
     daqui o número do topo é escolha dele, não mais um espelho do de baixo.)
     Histórico: 114 → 87 → 78 → 87 → 76 → 70 → 91 → 89. */
  .hero { padding-top: 89px !important; }

  /* badge "Atualizado hoje" com o MESMO gap que o título tem do cabeçalho */
  .hero h1 { margin-bottom: 21px !important; }
  .hero #buscar { margin-top: 0 !important; }
  .hero .tag-atualizado { margin-bottom: 10px !important; }

  /* b) stats e Altina no mesmo ritmo, e sem sobra grande no fim do bloco */
  .hero .hero-stats { margin-top: 21px !important; margin-bottom: 0 !important; }
  .hero .assessoria-card { margin-top: 21px !important; }
  .hero { padding-bottom: 24px !important; }

  /* c) "Limpar" é ação secundária: volta a ser o menor dos três, e os dois
     principais crescem. A borda grossa dele e do "Mais filtros" competia
     visualmente com o "Buscar" — fica fina e discreta. */
  #searchCard .hs-actions .btn-laranja,
  .search-card .hs-actions .btn-laranja,
  #searchCard .hs-actions .btn-navy,
  .search-card .hs-actions .btn-navy { flex: 1 1 0 !important; }
  #searchCard .hs-actions .btn-limpar-hero,
  .search-card .hs-actions .btn-limpar-hero {
    flex: 0 0 auto !important;
    padding: 0 11px !important;
    border-width: 1px !important;
  }
  #searchCard .hs-actions .btn-navy,
  .search-card .hs-actions .btn-navy { border-width: 1px !important; }

  /* d) os 4 indicadores voltam (o "27 estados" tinha saído), todos na mesma
     linha, com fonte menor para caberem. */
  .hero-stats .hs:nth-child(2) { display: block !important; }
  .hero-stats { gap: 6px !important; }
  .hero-stats .hs b { font-size: 16px !important; }
  .hero-stats .hs span { font-size: 9px !important; }
}
@media (max-width: 380px) {
  .hero-stats { gap: 4px !important; }
  .hero-stats .hs b { font-size: 14.5px !important; }
  .hero-stats .hs span { font-size: 8.4px !important; }
}

/* ==========================================================================
   33) ALINHAMENTO, RODAPÉ E CORES — 2026-07-27 (medido em 385px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* a) indicadores alinhados com o card de busca e o card da Altina.
     Eles terminavam em 322 enquanto os cards vão até 346 — 24px a menos,
     porque os cards têm padding lateral de 16px e os indicadores não. */
  .hero .hero-stats { padding: 0 16px !important; }
  /* com a largura certa, dá para crescer a fonte sem estourar */
  .hero-stats .hs b { font-size: 17.5px !important; }
  .hero-stats .hs span { font-size: 9.6px !important; }

  /* b) menos sobra entre o card da Altina e o fim do hero */
  .hero { padding-bottom: 14px !important; }

  /* c) rodapé: 64px do topo até a marca, contra os 21px do resto. */
  footer { padding-top: 24px !important; }

  /* d) o hero das páginas internas usa padding:150px, herdado do desktop.
     No celular isso empurra o título para bem longe do cabeçalho — o hero
     da home usa 87px. Iguala ao mesmo ritmo. */
  /* precisa de "body .page-hero": a regra da linha ~2309 usa essa
     especificidade com !important e vencia um ".page-hero" simples */
  /* padding-top não pode ir abaixo da altura do header (68px no mobile,
     medido): o hero fica por baixo dele (margin-top negativo na linha
     ~33) e um valor menor cortaria o eyebrow atrás do cabeçalho. 76px dá
     8px de folga — o suficiente para não colar, sem repetir os 19px
     "de sobra" do valor antigo (87px). */
  body .page-hero { padding-top: 76px !important; padding-bottom: 18px !important; }

  /* e) mesmo com o padding já reduzido, o texto de apresentação (eyebrow +
     h1 + p) sozinho empurrava o formulário para fora da primeira tela —
     matricula.html chegava a 403px de altura, 48% de uma tela de 844px.
     O usuário abria a página e via só a explicação, sem sinal de que
     havia algo para preencher logo abaixo. Reduz fonte e respiro do
     texto (não corta conteúdo, só o tamanho visual) nas 10 páginas que
     usam essa estrutura, junto do padding acima. */
  .page-hero .eyebrow { font-size: 11px !important; margin-bottom: 4px !important; }
  .page-hero h1 { font-size: clamp(20px, 6.5vw, 26px) !important; margin-bottom: 6px !important; line-height: 1.15 !important; }
  .page-hero p { font-size: 13px !important; line-height: 1.42 !important; margin-top: 4px !important; }

  /* f) em 412px o #searchCard ficava 14px mais estreito que os outros dois
     blocos, quebrando o alinhamento. Os três passam a ocupar a mesma caixa. */
  .hero #buscar, .hero #searchCard, .hero .hero-stats, .hero .assessoria-card {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
}

/* e) ícone de tema no painel mobile nas MESMAS cores do cabeçalho.
   Correção de 27/07: eu tinha posto laranja nos dois estados, mas o
   cabeçalho usa dourado #ffd76e para a LUA e laranja para o SOL — há
   até um comentário na regra do #themeBtn dizendo que "lua laranja não
   existe no imaginário". Aqui a mesma lógica, por tema. */
html[data-theme="light"] .mmenu-acoes #mmenuTemaBtn .ic-svg { stroke: #ffd76e !important; }
html[data-theme="dark"]  .mmenu-acoes #mmenuTemaBtn .ic-svg { stroke: var(--laranja, #F97316) !important; }

/* ==========================================================================
   34) CARD DA PARCEIRA: ÍCONE NA LINHA DO NOME (mobile) — 2026-07-27
   O flex-wrap do mobile empurrava o ícone de 48px para uma linha só dele:
   48px + 12px de gap = 60px gastos antes de o texto começar, e o ícone
   ficava solto, lido como decoração em vez de identificar a imobiliária.

   Ícone + nome na mesma linha é o padrão de card de entidade (avatar à
   esquerda, nome ao lado, detalhes abaixo) e respeita a proximidade: os
   dois elementos que nomeiam a mesma coisa ficam juntos.

   Feito com grid para não mexer no HTML: o ícone ocupa a 1ª coluna da 1ª
   linha e o texto flui na 2ª coluna, com a descrição atravessando as duas.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .assessoria-card {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 11px !important;
    row-gap: 9px !important;
  }
  /* 48px destoava ao lado de um texto de 16px */
  .assessoria-card .ac-ic {
    width: 34px !important; height: 34px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 12px rgba(249,115,22,.34) !important;
  }
  .assessoria-card .ac-ic svg { width: 19px; height: 19px; }

  /* o bloco de texto vira "contents" para que nome, descrição e tags
     participem do mesmo grid do card */
  .assessoria-card .ac-txt { display: contents !important; }
  .assessoria-card .ac-txt b { grid-column: 2; align-self: center; }
  .assessoria-card .ac-txt span,
  .assessoria-card .ac-tags { grid-column: 1 / -1; }
}

/* ==========================================================================
   35) RESPIROS FINAIS DO CARD DA PARCEIRA — 2026-07-27
   Medido em 385px: sobravam 16px entre a última tag ("Atende em todo o
   estado de São Paulo") e o fim da caixa, e mais 14px entre a caixa e o
   fim do hero. Somados, 30px de vazio no fecho da seção.
   Aperta os dois para o mesmo ritmo já usado nos outros blocos.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .assessoria-card { padding: 15px 16px 11px !important; }
  /* o card da Altina terminava 12px ABAIXO do fim do hero (padding de 10px
     não cobria a sombra/borda do card), e esse transbordo aparecia como
     faixa clara antes do bloco seguinte. 26px fecha o bloco de verdade. */
  .hero { padding-bottom: 26px !important; }
}


/* ==========================================================================
   36) TRANSIÇÃO DO HERO PARA O BLOCO SEGUINTE — 2026-07-27
   Eu vinha cortando só o padding-bottom do hero (10px), mas o vazio que
   se enxerga é a SOMA: 10px do hero + 44px de padding-top da seção
   seguinte + 24px de margem do .sec-head = 98px entre o card da parceira
   e o primeiro conteúdo do bloco de oportunidades.
   A primeira seção depois do hero passa a abrir com o mesmo respiro dos
   demais intervalos (21px).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero + section { padding-top: 21px !important; }
  .hero + section .sec-head { margin-bottom: 16px !important; }
}

/* ==========================================================================
   37) TÍTULO DO HERO SEM CORTAR PALAVRA — 2026-07-27
   Em 385px "inteligente" quebrava no meio. O h1 usa clamp(26px, 2.9vw, 40px):
   como 2.9vw dá ~11px no celular, o clamp trava no mínimo de 26px, grande
   demais para a palavra caber. Reduz o mínimo no mobile e impede a quebra
   dentro de qualquer palavra.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 2026-07-28: o título tem que ser o MAIOR possível que ainda caiba em 3
     linhas. A versão de 27/07 (clamp 20/5.85vw/23) também dava 3 linhas, mas
     exigia "inteligente" na 1ª linha, e essa exigência a mais espremia a
     fonte sem necessidade. Sem ela, medindo o teto de 3 linhas largura a
     largura: 22px em 360, 23px em 375, 24px em 385, 26px em 412 e 27px em
     430 — ou seja 6.25vw, com piso 22 e teto 27. A quebra cai onde o texto
     pedir. */
  .hero h1 {
    font-size: clamp(22px, 6.25vw, 27px) !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }
}
@media (max-width: 380px) {
  /* abaixo de 380px o teto de 3 linhas é 22px (medido em 360px) */
  .hero h1 { font-size: clamp(20px, 6.25vw, 22px) !important; }
}

/* ==========================================================================
   38) MESMO RITMO DE BLOCOS EM TODAS AS PÁGINAS — 2026-07-27
   A home recebeu o ajuste de espaçamento (21px na 1ª seção depois do hero,
   16px no sec-head), mas as internas ficaram com os 44px/24px antigos —
   a régua mudava de página para página. Aqui o mesmo ritmo vale para todas.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* primeira seção logo depois do hero, em qualquer página */
  .page-hero + section,
  .hero + section { padding-top: 21px !important; }
  .page-hero + section > .wrap > .sec-head:first-child,
  .hero + section > .wrap > .sec-head:first-child { margin-bottom: 16px !important; }

  /* demais seções e cabeçalhos de seção */
  .sec-head { margin-bottom: 16px !important; }

  /* botões de largura cheia não podem estourar a caixa: investir.html tinha
     "Ver oportunidades de imóveis" com 337px empurrando o scroll para 391px
     numa tela de 385. */
  .lp-sec .btn, .lp-cta .btn, section .btn.btn-laranja, section .btn.btn-navy {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}

/* ==========================================================================
   39) MENSAGENS DO MODAL DE CONTA NO FUNDO ESCURO — 2026-07-27
   O modal tem fundo navy, mas .modal-msg.erro usava #c0392b e .ok usava
   #12a06b, ambos escolhidos para fundo claro. Medido contra o navy do
   modal: 2,11 e 3,42 de contraste, abaixo do mínimo acessível de 4,5.
   O vermelho escuro sobre azul escuro é a pior combinação possível: as
   duas cores têm luminosidade parecida e o olho não separa bem.

   Trocado por tons claros da mesma família, que já aparecem no tema
   escuro do site: coral (6,36) para erro e verde claro (6,58) para
   sucesso. Ambos passam em AA com folga.
   -------------------------------------------------------------------------- */
/* mesma lógica do sucesso: o coral claro vale no navy (5,74) mas some no
   branco (2,00). No tema claro volta o vermelho fechado, que lá dá 5,44. */
html[data-theme="dark"] .modal-conta .modal-msg.erro,
html[data-theme="dark"] #modalConta .modal-msg.erro { color: #ff9e8a !important; }
html[data-theme="light"] .modal-conta .modal-msg.erro,
html[data-theme="light"] #modalConta .modal-msg.erro { color: #c0392b !important; }
.modal-conta .modal-msg.erro,
#modalConta .modal-msg.erro { color: #c0392b; }
/* 2026-07-27: a cor de sucesso precisa mudar COM o tema. O menta claro
   #8fdcb0 funciona sobre o navy (7,11) mas some sobre o branco do tema
   claro (1,61). Cada tema recebe o tom que enxerga:
     escuro -> menta claro, 52% de saturação, sem "vibrar"
     claro  -> verde fechado #0a7a4f, 5,37 de contraste  */
html[data-theme="dark"] .modal-conta .modal-msg.ok,
html[data-theme="dark"] #modalConta .modal-msg.ok { color: #8fdcb0 !important; }
html[data-theme="light"] .modal-conta .modal-msg.ok,
html[data-theme="light"] #modalConta .modal-msg.ok { color: #0a7a4f !important; }
/* fallback quando nenhum data-theme está definido */
.modal-conta .modal-msg.ok,
#modalConta .modal-msg.ok { color: #0a7a4f; }

/* o link de recuperação precisa se destacar do texto de apoio */
#modalConta a[onclick*="onEsqueciSenha"] { color: #9ec5f0 !important; }
#modalConta a[onclick*="onEsqueciSenha"]:hover { color: #cfe2fb !important; }

/* ==========================================================================
   40) MOSTRAR/OCULTAR SENHA — 2026-07-27
   -------------------------------------------------------------------------- */
.mform.mform-senha { position: relative; }
/* espaço à direita para o botão não cobrir o texto digitado */
.mform.mform-senha input { padding-right: 44px !important; }

.olho-senha {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: var(--muted, #5b6b82);
  cursor: pointer; border-radius: 8px;
  transition: color .18s, background .18s;
}
/* O fundo do campo muda com o tema (claro #eef2f7, escuro #22467a), então
   o ícone precisa de cor própria em cada um. Antes o hover clareava e o
   ícone sumia; agora ele ESCURECE no claro e CLAREIA no escuro, sempre
   ganhando contraste ao passar o mouse. */
/* fallback (sem data-theme) primeiro, senão vence as regras por tema */
.olho-senha { color: #5b6b82; }
.olho-senha:hover { color: #00264f; background: rgba(0,74,153,.14); }
.olho-senha:focus-visible { outline: 2px solid var(--navy, #004A99); outline-offset: 1px; }
html[data-theme="light"] .olho-senha { color: #5b6b82 !important; }
html[data-theme="light"] .olho-senha:hover { color: #00264f !important; background: rgba(0,74,153,.14) !important; }
html[data-theme="dark"] .olho-senha { color: #cfe0f5 !important; }
html[data-theme="dark"] .olho-senha:hover { color: #ffffff !important; background: rgba(255,255,255,.18) !important; }

/* ==========================================================================
   41) HERO OCUPA A TELA SEM DEIXAR FAIXA VAZIA — 2026-07-27
   Medido em 1877x900 (o print do César): o hero é forçado a min-height de
   100vh, mas o conteúdo terminava em y=724 — sobravam 176px de azul vazio.
   Logo abaixo vinham mais 120px de padding da seção seguinte, somando
   quase 300px de vão entre o card da Altina e o próximo conteúdo.

   Decisão do César: o azul continua ocupando a tela inteira, mas o
   conteúdo se distribui dentro dele (o vazio vira respiro em volta, não
   um buraco embaixo) e a seção seguinte encosta no fim do azul.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero > .wrap.hero-inner { width: 100%; }

  /* O .hero já centraliza (align-items:center), mas o padding-top de 118px
     — que existe para compensar o cabeçalho fixo — empurrava tudo para
     baixo: sobravam 271px em cima contra 153px embaixo. Igualando os dois
     paddings, o centro do flex passa a cair no centro real do bloco. */
  .hero { padding-top: 74px !important; padding-bottom: 74px !important; }

  /* a seção seguinte encosta no azul em vez de abrir 120px de faixa */
  .hero + section { padding-top: 34px !important; }
}

/* ==========================================================================
   42) TEXTO DOS BOTÕES LARANJA COMO NO V1 — 2026-07-27
   Pedido do César: usar as cores do site v1. Fui conferir e o v1 usa
   color:#3b1f00 (marrom bem escuro) sobre o laranja da marca, não branco:
       .btn-aplicar { background: var(--laranja); color:#3b1f00 }
       .btn-nav-cta { background: var(--laranja)!important; color:#3b1f00!important }

   O v2 usava branco, que sobre #F97316 dá 2,80 de contraste — abaixo do
   mínimo AA de 4,5 e difícil de ler no claro. O marrom do v1 dá 5,42 e
   preserva o laranja exato da marca, sem escurecer o botão.

   Vale para todos os botões laranja de todas as páginas, inclusive os dos
   cards de imóvel.
   -------------------------------------------------------------------------- */
.btn-laranja,
a.btn-laranja,
button.btn-laranja,
.btn.btn-laranja,
.post-cta a,
.imovel-card .btn-laranja,
#searchCard .hs-actions .btn-laranja,
.search-card .hs-actions .btn-laranja {
  color: #3b1f00 !important;
}
/* ícone dentro do botão acompanha o texto */
.btn-laranja .ic-svg,
.btn.btn-laranja .ic-svg,
.post-cta a .ic-svg { stroke: #3b1f00 !important; color: #3b1f00 !important; }

/* no tema escuro o botão continua legível com o mesmo marrom: o fundo é o
   mesmo laranja, então o contraste não muda com o tema */
html[data-theme="dark"] .btn-laranja,
html[data-theme="dark"] .btn.btn-laranja,
html[data-theme="dark"] .post-cta a { color: #3b1f00 !important; }

/* ==========================================================================
   43) CAMPOS DO SIMULADOR NO FOCO — 2026-07-27
   .sfield input:focus forçava background:#fff mas mantinha color:var(--texto),
   que no tema escuro é claro: o número digitado sumia sobre o branco.
   Fixa o texto escuro sempre que o fundo do foco é branco.
   -------------------------------------------------------------------------- */
.sfield input:focus,
.sim-panel-det .sfield input:focus,
.sim-panel-det .sfield select:focus,
html[data-theme="dark"] .sfield input:focus,
html[data-theme="dark"] .sim-panel-det .sfield input:focus,
html[data-theme="dark"] .sim-panel-det .sfield select:focus {
  background: #fff !important;
  color: #0f1e33 !important;
  -webkit-text-fill-color: #0f1e33;
}
/* o placeholder também precisa aparecer sobre o branco */
.sfield input:focus::placeholder,
html[data-theme="dark"] .sfield input:focus::placeholder { color: #7c8ba1 !important; }

/* ==========================================================================
   TAMANHO DO ÍCONE .bi — CENTRALIZADO AQUI (Enzo, 2026-09-12)
   Causa raiz do botão "Favoritos" vazio em viabilidade.html (e, sem essa
   regra, também em morar.html, investir.html, privacidade.html,
   simulador-de-financiamento.html, simulador-de-custo-total.html e
   perguntas-frequentes.html): a regra que dá tamanho ao <svg class="bi ...">
   só existia copiada à mão dentro do <style> interno de algumas páginas
   (resultados.html, index.html e os posts de blog). Sem ela o svg mede
   0x0 — e como o texto do botão já é display:none em telas >=901px
   (ver bloco "FAVORITOS SO COM ICONE NO DESKTOP" abaixo), não sobrava nada
   visível: só a pílula vazia. Este arquivo é carregado por TODAS as
   páginas, então a regra mora aqui uma vez só; as cópias inline em
   resultados.html e index.html foram removidas.
   -------------------------------------------------------------------------- */
.bi { width: 16px; height: 16px; fill: currentColor; margin-right: -2px; }

/* ==========================================================================
   44) CORAÇÃO DOS FAVORITOS NO LARANJA DA MARCA — 2026-07-27
   Pedido do César: o coração era vermelho (#e11d48 / #ff8a99 / fundo
   #fee2e2), cor que não é da marca e ainda se confunde com erro/alerta.
   Passa a usar o laranja #F97316, e quando o imóvel está favoritado o
   ícone fica PREENCHIDO — o estado se lê pelo preenchimento, não pela cor.
   -------------------------------------------------------------------------- */

/* --- coração dos cards e do cabeçalho --- */
.bi-fav,
.btn-fav .bi-fav,
.nav .btn-fav .bi-fav { fill: var(--laranja, #F97316) !important; }

.btn-fav { color: var(--laranja, #F97316) !important; }

/* ativo: preenchido, com o fundo em laranja translúcido no lugar do rosa */
.btn-fav.ativo,
.btn-fav[aria-pressed="true"] {
  background: rgba(249,115,22,.16) !important;
  color: var(--laranja, #F97316) !important;
}
.btn-fav.ativo .bi-fav,
.btn-fav[aria-pressed="true"] .bi-fav { fill: var(--laranja, #F97316) !important; }

/* --- botão redondo da página do imóvel --- */
.btn-icon-round.is-fav {
  color: var(--laranja, #F97316) !important;
  background: rgba(249,115,22,.16) !important;
  border-color: rgba(249,115,22,.45) !important;
}
.btn-icon-round.is-fav svg { fill: var(--laranja, #F97316) !important; stroke: var(--laranja, #F97316) !important; }

/* --- botão de remover da página de favoritos --- */
.btn-unfav { color: var(--laranja, #F97316) !important; }
.btn-unfav svg { fill: currentColor; stroke: currentColor; }

/* ==========================================================================
   45) CARD DE BUSCA NA PRIMEIRA TELA DO CELULAR — 2026-07-28
   No Samsung M35 (385x733 úteis) o card terminava em 841px e cortava no meio
   do "PREÇO DE VENDA". Alvo do César: caber inteiro no M35 e no iPhone 11
   Pro Max (414x719) SEM prejudicar o uso.

   A primeira tentativa apertou tudo (campo de 29px, rótulo 10px, select
   12,5px) e ele reclamou com razão: 29px é alvo de toque pequeno demais
   (Apple pede 44, Google 48) e select abaixo de 16px faz o Safari do iPhone
   dar zoom sozinho a cada toque. Coube, mas ficou pior de usar.

   Solução de verdade: o campo "Preço de venda" saiu do card (está em "Mais
   filtros", onde é min+max livre em vez de 5 faixas fixas). Um campo a menos
   libera ~67px, e o resto do ajuste fica leve — os campos ficam MAIORES do
   que eram no layout antigo, não menores:
     select     16px de fonte (não dá zoom no iOS), altura ~44px
     rótulo     11px (mínimo legível confortável)
     gap grid   11 -> 9px
     padding    18 -> 15px
   Só abaixo de 800px de ALTURA: em tela alta o layout folgado continua.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 800px) {
  /* Os ~45px que ainda faltavam saem daqui — de ESPAÇO e TEXTO, nunca dos
     alvos de toque. O respiro do topo cai para 14px (contra 25 na tela alta),
     ainda longe de "colado", e o título perde 1px de fonte. */
  .hero { padding-top: 73px !important; }

  .hero h1 {
    font-size: clamp(19px, 5.5vw, 22px) !important;
    margin-bottom: 13px !important;
  }
  .hero .tag-atualizado {
    margin-bottom: 8px !important;
    padding: 7px 13px !important;
    font-size: 12px !important;
  }
  /* a seção seguinte não precisa de respiro grande, o card já termina o bloco */
  .hero { padding-bottom: 14px !important; }

  /* rótulo compacto mas ainda legível */
  #searchCard .field label,
  .search-card .field label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }
  /* 16px é o limite abaixo do qual o Safari do iPhone dá zoom ao focar.
     Não reduzir. A altura fica em ~44px, o mínimo da Apple para toque. */
  #searchCard .hs-grid select,
  .search-card .hs-grid select {
    padding: 11px 12px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  #searchCard .hs-grid,
  .search-card .hs-grid {
    gap: 7px !important;
    margin-bottom: 9px !important;
  }

  #searchCard, .search-card { padding: 13px 13px !important; }

  #searchCard .sc-head, .search-card .sc-head { margin-bottom: 8px !important; }
  #searchCard .sc-head h4, .search-card .sc-head h4 { font-size: 15px !important; }

  /* 44px é o mínimo recomendado para alvo de toque (Apple HIG). A altura
     vinha de outra regra com mais especificidade, daí o seletor repetido
     com .hs-actions no meio. */
  #searchCard .hs-actions .btn,
  #searchCard .hs-actions button.btn,
  #searchCard .hs-actions .btn-laranja,
  #searchCard .hs-actions .btn-navy,
  #searchCard .hs-actions .btn-limpar-hero,
  .search-card .hs-actions .btn,
  .search-card .hs-actions button.btn,
  .search-card .hs-actions .btn-laranja,
  .search-card .hs-actions .btn-navy,
  .search-card .hs-actions .btn-limpar-hero {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }

  /* A linha de botões estava colada no último campo (9px em cima) e solta
     embaixo (27px): parecia pertencer ao campo de cima em vez de fechar o
     card. Mesma lógica do respiro do título — igualar os dois lados, aqui
     em 18px, que é a média e não muda a altura total do card.
     Os 27px de baixo eram 13px de padding + 14px de margem da nota
     "Mais de 28.000 imóveis", que está oculta no mobile mas continuava
     ocupando espaço. */
  #searchCard .hs-grid,
  .search-card .hs-grid { margin-bottom: 18px !important; }

  #searchCard .hs-actions,
  .search-card .hs-actions { margin-bottom: 0 !important; }

  #searchCard .search-note,
  .search-card .search-note { margin: 0 !important; }

  #searchCard, .search-card { padding-bottom: 18px !important; }
}

/* ==========================================================================
   46) CORAÇÃO DOS CARDS: SÓ O ÍCONE PINTA — 2026-07-28
   Pedido do César: no card da página de resultados o favorito ficava com o
   BOTÃO inteiro tingido (fundo rosa #fee2e2 da regra .btn-fav.ativo do
   resultados.html, mais o fundo laranja do bloco 44). Ele quer o mesmo
   padrão do desktop: o botão continua branco e redondo como qualquer outro,
   e só o coração por dentro fica laranja preenchido.

   O estado se lê pelo PREENCHIMENTO do ícone (vazio -> contornado,
   favoritado -> sólido), que é como o resto do site já funciona.
   -------------------------------------------------------------------------- */
/* .card-actions no seletor para vencer o bloco 44, que tinge o botão inteiro
   de vermelho (fundo rgba(240,67,43,.08) e borda). Aqui o botão favoritado
   fica IGUAL ao não favoritado — quem muda é só o coração dentro. */
.card-actions .btn-card-action.btn-fav.ativo,
.card-actions .btn-card-action.btn-fav.on,
.imovel-linha-topo .btn-card-action.btn-fav.ativo,
.imovel-linha-topo .btn-card-action.btn-fav.on,
.btn-card-action.btn-fav.ativo,
.btn-card-action.btn-fav.on,
.btn-card-action.btn-fav[aria-pressed="true"] {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--laranja, #F97316) !important;
}
/* a borda também não pode denunciar o estado: fica igual à do botão vazio
   (o azul da moldura do card), senão o botão inteiro continua "marcado" */
.card-actions .btn-card-action.btn-fav.ativo,
.card-actions .btn-card-action.btn-fav.on,
.imovel-linha-topo .btn-card-action.btn-fav.ativo,
.imovel-linha-topo .btn-card-action.btn-fav.on {
  border-color: var(--border, #dce4ef) !important;
}
[data-theme="dark"] .card-actions .btn-card-action.btn-fav.ativo,
[data-theme="dark"] .card-actions .btn-card-action.btn-fav.on,
[data-theme="dark"] .imovel-linha-topo .btn-card-action.btn-fav.ativo,
[data-theme="dark"] .imovel-linha-topo .btn-card-action.btn-fav.on {
  border-color: #28446e !important;
}
/* O JS do card já troca o próprio SVG entre fill="#F97316" (favoritado) e
   fill="none" (vazio), então NÃO forçar fill aqui — só garantir a cor do
   traço, para o contorno também ser laranja e não herdar o vermelho antigo
   das regras .btn-fav{color:#e11d48}. */
.btn-card-action.btn-fav svg {
  stroke: var(--laranja, #F97316) !important;
}
.btn-card-action.btn-fav.ativo svg,
.btn-card-action.btn-fav.on svg {
  fill: var(--laranja, #F97316) !important;
}

/* ==========================================================================
   47) PAINEL "MAIS FILTROS" DA HOME — 2026-07-28
   O botão levava direto para resultados.html. Agora abre esta gaveta por
   cima da home; só "Aplicar filtros" (ou "Buscar") sai da página.
   A altura vem do JS (altura real do header + innerHeight), nunca de 100vh.
   -------------------------------------------------------------------------- */
.hf-backdrop {
  position: fixed; inset: 0; z-index: 480;
  background: rgba(0, 20, 45, .6);
  opacity: 0; transition: opacity .18s ease;
}
.hf-backdrop.aberto { opacity: 1; }

.hf-painel {
  position: fixed; left: 12px; right: 12px; z-index: 481;
  display: flex; flex-direction: column;
  background: var(--card, #fff);
  border: 1px solid var(--border, #dce4ef);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 20, 45, .4);
  overflow: hidden;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.hf-painel.aberto { opacity: 1; transform: translateY(0); }
@media (min-width: 720px) {
  .hf-painel { left: 50%; right: auto; width: 560px; transform: translate(-50%, -8px); }
  .hf-painel.aberto { transform: translate(-50%, 0); }
}

.hf-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, #dce4ef);
}
.hf-titulo {
  font-family: var(--display, 'Montserrat', sans-serif);
  font-weight: 800; font-size: 15.5px; color: var(--navy-deep, #001F44);
  display: flex; align-items: center; gap: 8px;
}
.hf-titulo .ic-svg { width: 17px; height: 17px; fill: var(--laranja, #F97316); }
/* 44px de alvo de toque */
.hf-fechar {
  flex: 0 0 auto; width: 40px; height: 40px; min-width: 40px;
  border: 1px solid var(--border, #dce4ef); background: var(--tint, #eef3fa);
  border-radius: 10px; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--navy-deep, #001F44);
  display: flex; align-items: center; justify-content: center;
}
.hf-fechar:hover { background: var(--tint2, #dbe5f2); }

.hf-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 8px;
}
.hf-sec { padding: 12px 0; border-bottom: 1px solid var(--border, #dce4ef); }
.hf-sec:last-child { border-bottom: none; }
.hf-sec-tit {
  font-family: var(--display, 'Montserrat', sans-serif);
  font-weight: 800; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted, #5b6b82); margin-bottom: 8px;
}
.hf-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hf-campo label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--muted, #5b6b82); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .02em;
}
/* 16px evita o zoom automático do Safari ao focar o campo */
.hf-campo input, .hf-campo select {
  width: 100%; padding: 11px 12px;
  border: 1.5px solid var(--border, #dce4ef); border-radius: 10px;
  font-size: 16px; font-family: inherit;
  color: var(--texto, #0f1e33); background: var(--tint, #eef3fa);
}
.hf-campo input:focus, .hf-campo select:focus {
  outline: none; border-color: var(--navy, #004A99);
  box-shadow: 0 0 0 3px rgba(0, 74, 153, .12);
}
.hf-radios { display: flex; flex-direction: column; gap: 2px; }
.hf-radio {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 4px; cursor: pointer; font-size: 14px;
  color: var(--texto, #0f1e33); min-height: 40px;
}
.hf-radio input { width: 18px; height: 18px; accent-color: var(--laranja, #F97316); }

.hf-acoes {
  flex: 0 0 auto; display: flex; gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border, #dce4ef);
  background: var(--card, #fff);
}
.hf-acoes .btn { flex: 1 1 auto; height: 46px; justify-content: center; }
.hf-acoes .btn-limpar-hero { flex: 0 0 auto; padding: 0 16px; }

[data-theme="dark"] .hf-painel { background: var(--card, #0f2138); border-color: var(--border, #2a4a75); }
[data-theme="dark"] .hf-acoes { background: var(--card, #0f2138); }
[data-theme="dark"] .hf-titulo { color: #eaf2ff; }
[data-theme="dark"] .hf-fechar { color: #eaf2ff; }

/* ==========================================================================
   48) CONTRASTE E CORES DOS RESULTADOS — 2026-07-28
   Auditoria pedida pelo César, medindo contraste WCAG no site no ar. Três
   itens estavam ILEGÍVEIS (o mínimo para texto pequeno é 4,5):
     "Ordenar por" no tema claro ....... 1,00 (branco sobre branco)
     "Em disputa" no tema escuro ....... 1,16 (branco sobre rosa claro)
     "FGTS" no tema escuro ............. 1,31 (verde sobre verde)
   -------------------------------------------------------------------------- */

/* a) "Ordenar por" herdava branco de uma regra do header. Agora usa a cor de
      texto secundário do tema, que tem contraste alto nos dois. */
#sort-container label,
.results-header #sort-container label {
  color: var(--muted, #5b6b82) !important;
}
[data-theme="dark"] #sort-container label,
[data-theme="dark"] .results-header #sort-container label {
  color: #b9cde8 !important;
}
/* o select também precisa acompanhar o tema (fundo branco fixo no escuro) */
[data-theme="dark"] #sort-container select {
  background: var(--tint, #17325c) !important;
  color: var(--texto, #eaf2ff) !important;
  border-color: var(--border, #2a4a75) !important;
}

/* b) título e "Ordenar por" na MESMA linha, com o contador subindo junto e
      mantendo a distância do título (pedido do César, imagem 1). */
.results-header .results-header-row {
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
}
.results-header .results-title { margin-bottom: 4px; }
.results-header .results-count { margin-top: 0; }
@media (max-width: 620px) {
  /* em tela estreita não cabem lado a lado sem espremer o título */
  .results-header .results-header-row { flex-wrap: wrap; }
  #sort-container { width: 100%; }
  #sort-container select { flex: 1 1 auto; }
}

/* c) ETIQUETAS DE CONDIÇÃO (FGTS / Financiamento / Em disputa)
      No claro elas quase sumiam; no escuro, "Em disputa" ficava branco sobre
      rosa claro. Agora cada uma tem fundo tingido, texto forte e um contorno
      leve que garante a leitura sobre qualquer fundo de card. */
.card .pill,
.imovel-chips .pill {
  border: 1px solid transparent;
  font-weight: 800 !important;
}
/* FGTS — verde */
.pill-verde,
.card .pill-verde {
  background: rgba(21, 138, 90, .12) !important;
  color: #0f6b45 !important;
  border-color: rgba(21, 138, 90, .35) !important;
}
[data-theme="dark"] .pill-verde,
[data-theme="dark"] .card .pill-verde,
html[data-theme="dark"] .pill-verde {
  background: rgba(52, 211, 153, .16) !important;
  color: #8ef0c4 !important;
  border-color: rgba(52, 211, 153, .42) !important;
}
/* Financiamento — navy */
.pill-navy,
.card .pill-navy {
  background: rgba(0, 74, 153, .10) !important;
  color: #00397a !important;
  border-color: rgba(0, 74, 153, .32) !important;
}
[data-theme="dark"] .pill-navy,
[data-theme="dark"] .card .pill-navy,
html[data-theme="dark"] .pill-navy {
  background: rgba(125, 170, 230, .18) !important;
  color: #cfe2fb !important;
  border-color: rgba(125, 170, 230, .45) !important;
}
/* Em disputa — vermelho de alerta, o único lugar do site que usa vermelho */
.pill-vermelho,
.card .pill-vermelho {
  background: rgba(192, 57, 43, .10) !important;
  color: #a5291b !important;
  border-color: rgba(192, 57, 43, .34) !important;
}
[data-theme="dark"] .pill-vermelho,
[data-theme="dark"] .card .pill-vermelho,
html[data-theme="dark"] .pill-vermelho {
  background: rgba(248, 113, 113, .18) !important;
  color: #ffb3ab !important;
  border-color: rgba(248, 113, 113, .45) !important;
}

/* d) "Encerra em:" e o nome da modalidade ficavam azuis sobre fundo azul no
      tema escuro. */
[data-theme="dark"] .imovel-prox,
[data-theme="dark"] .imovel-prox-label,
[data-theme="dark"] .imovel-prox b,
[data-theme="dark"] .imovel-prox span,
html[data-theme="dark"] .imovel-prox,
html[data-theme="dark"] .imovel-prox-label {
  color: #cfe2fb !important;
}
[data-theme="dark"] .badge-nacional,
html[data-theme="dark"] .badge-nacional {
  background: rgba(125, 170, 230, .16) !important;
  color: #cfe2fb !important;
  border: 1px solid rgba(125, 170, 230, .4) !important;
}

/* e) "Ver imóvel" é ação da Arremate dentro do site → laranja, como os
      demais botões de ação. (Navy fica reservado para o que sai do site.) */
.card .imovel-link,
a.imovel-link {
  background: var(--laranja, #F97316) !important;
  color: #fff !important;
}
.card .imovel-link:hover,
a.imovel-link:hover {
  background: var(--laranja-deep, #c85f0e) !important;
}

/* --------------------------------------------------------------------------
   49) SELO DA ASSESSORIA NO CARD — 2026-07-28
   Era texto corrido ("Assessoria credenciada · CRECI-SP 043342"), que se
   perdia no rodapé do card. Vira um selo curto na mesma linguagem do card da
   Altina no hero: ícone de prédio em laranja, rótulo e o número em destaque.
   Continua clicando para copiar o CRECI (o ⧉ ao lado segue funcionando).
   -------------------------------------------------------------------------- */
.imovel-creci .creci-selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 8px;
  border: 1px solid rgba(249, 115, 22, .34);
  background: rgba(249, 115, 22, .08);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  max-width: 100%;
}
.imovel-creci .creci-selo:hover {
  background: rgba(249, 115, 22, .14);
  border-color: rgba(249, 115, 22, .5);
}
.creci-selo-ic {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: var(--laranja, #F97316);
}
.creci-selo-txt {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.creci-selo-txt b {
  font-family: var(--display, 'Montserrat', sans-serif);
  font-weight: 800; font-size: 11.5px;
  color: var(--navy-deep, #001F44);
  letter-spacing: .01em;
}
.creci-selo-num {
  font-size: 11px; font-weight: 700;
  color: var(--laranja-deep, #c85f0e);
}
[data-theme="dark"] .creci-selo-txt b { color: #eaf2ff; }
[data-theme="dark"] .creci-selo-num { color: #ffb066; }
[data-theme="dark"] .imovel-creci .creci-selo {
  background: rgba(249, 115, 22, .13);
  border-color: rgba(249, 115, 22, .42);
}
/* em card estreito o rótulo sai e fica só o número, que é o que identifica */
@media (max-width: 420px) {
  .creci-selo-txt b { display: none; }
}

/* --------------------------------------------------------------------------
   50) TAXA DE JUROS ATRÁS DE UM INTERRUPTOR — 2026-07-29
   O campo aberto convidava a mexer numa taxa que quase ninguém precisa
   trocar. Agora é um checkbox desligado; marcando, o campo aparece.
   -------------------------------------------------------------------------- */
.sim-juros-bloco { margin: 10px 0 4px; }
.sim-juros-switch {
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none;
  font-size: 13.5px; font-weight: 700;
  color: var(--navy-deep, #001F44);
  min-height: 40px;              /* alvo de toque confortável */
}
.sim-juros-switch input {
  width: 18px; height: 18px; flex: 0 0 auto;
  accent-color: var(--laranja, #F97316);
  cursor: pointer;
}
.sim-juros-hint {
  font-size: 11.8px; line-height: 1.5;
  color: var(--muted, #5b6b82);
  margin: 0 0 2px 27px;          /* alinha com o texto do checkbox */
}
.sim-juros-campo { margin-top: 9px; }
.sim-juros-campo[hidden] { display: none; }
[data-theme="dark"] .sim-juros-switch { color: #eaf2ff; }
[data-theme="dark"] .sim-juros-hint { color: #a9c3e4; }

/* ==========================================================================
   51) HERO DO DESKTOP: CONTEÚDO CENTRADO E SEM FAIXA BRANCA — 2026-07-29
   Print do César em 1680x867: o título encostava no cabeçalho (191px, com o
   header terminando em 74) e o conteúdo acabava em 672 — sobravam 195px de
   azul vazio embaixo, seguidos de uma faixa branca da seção seguinte.

   Causa: o .hero tem align-items:center, mas o .hero-grid dentro dele usa
   align-items:stretch (blocos 1243 e 1643). As colunas esticavam por toda a
   altura e o conteúdo de cada uma ficava colado no topo — o "centralizar"
   do pai não tinha efeito nenhum.

   Correção: as colunas centram o próprio conteúdo. O bloco azul continua
   ocupando a tela inteira e o respiro se distribui em cima e embaixo.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero .hero-grid {
    align-items: center !important;
  }
  /* cada coluna centra o que tem dentro, em vez de empurrar para o topo */
  .hero .hero-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* padding simétrico: o de cima compensa o header fixo (74px) e o de baixo
     iguala, para o conteúdo ficar no centro óptico do bloco.
     box-sizing:border-box é o que faz o min-height:100vh INCLUIR o padding —
     sem ele o bloco fica 100vh + 192px, o conteúdo centra numa altura maior
     que a tela e sobra faixa vazia embaixo (era o buraco de 195px). */
  .hero {
    box-sizing: border-box !important;
    /* o padding de cima carrega os 74px do header fixo, que não são espaço
       visível; para o respiro parecer igual em cima e embaixo, o de baixo
       recebe a diferença: 74 + 60 em cima, 60 embaixo */
    padding-top: 134px !important;
    padding-bottom: 60px !important;
    min-height: 100vh !important;
  }
  /* a seção seguinte encosta no azul: a faixa branca some */
  .hero + section {
    padding-top: 30px !important;
    margin-top: 0 !important;
  }
}

/* campo "Preço de venda (até)" só no desktop — no celular ele é o que fazia
   o card de busca estourar a primeira tela (bloco 45) */
@media (max-width: 900px) {
  .campo-so-desktop { display: none !important; }
}

/* checkboxes do painel completo da home (tipo, modalidade, condições) */
.hf-chks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.hf-chks-1col { grid-template-columns: 1fr; }
.hf-chk {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; cursor: pointer;
  font-size: 13.5px; color: var(--texto, #0f1e33);
  min-height: 38px;              /* alvo de toque */
}
.hf-chk input {
  width: 17px; height: 17px; flex: 0 0 auto;
  accent-color: var(--laranja, #F97316); cursor: pointer;
}
[data-theme="dark"] .hf-chk { color: #eaf2ff; }
@media (max-width: 380px) { .hf-chks { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   52) COLUNAS DO HERO ALINHADAS NO DESKTOP — 2026-07-29
   Pedido do César: o topo do título casa com o topo da pílula "Atualizado
   hoje", e o fim do card da Altina com o fim do card de busca.
   Medido em 1680x867: o título começava 10px abaixo da pílula e a Altina
   terminava 14px acima do card.

   O grid centraliza cada coluna por conta própria (align-items:center do
   bloco 51), então as pontas nunca casavam. Aqui as duas colunas voltam a
   esticar (stretch) e passam a distribuir o conteúdo entre o topo e a base
   com space-between: a primeira linha de cada uma encosta em cima e a
   última em baixo, o que alinha as duas pontas de uma vez.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero .hero-grid { align-items: stretch !important; }
  .hero .hero-grid > div:first-child,
  .hero .hero-grid > #buscar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  /* com space-between as duas colunas já começam juntas; o ajuste fino
     compensa o espaço morto da entrelinha acima da primeira linha do h1,
     para o TEXTO (não a caixa) casar com o topo da pílula.

     2026-07-29: com 4px o glifo ainda caía 7,5px ABAIXO da pílula, medido
     por pixel a 1440px (topo do glifo em 256,5; topo da pílula em 249). Como
     a coluna usa space-between, aumentar esta margem afunda mais o título —
     o valor tinha de DIMINUIR: 4 − 7,5 = −3,5px. Margem negativa é o que
     puxa a primeira linha para cima até encostar na pílula. */
  .hero .hero-grid > div:first-child > h1 { margin-top: -3.5px !important; }
  /* o card de busca ocupa o resto da coluna direita, para a base dele ficar
     no fim da coluna e casar com a Altina */
  .hero .hero-grid > #buscar > .search-card,
  .hero .hero-grid > #buscar > #searchCard { margin-bottom: 0 !important; }
  .hero .hero-grid > div:first-child > .assessoria-card { margin-bottom: 0 !important; }
}

/* --------------------------------------------------------------------------
   MENU: Início, Simuladores (submenu) e conta em todas as páginas
   2026-07-29

   Três coisas que faltavam no menu do desktop:
     - "Início" só nas páginas internas (na home ele seria redundante: a
       classe .home-page no <body> o esconde);
     - "Simuladores" como submenu, porque são duas páginas (financiamento e
       custo total) e um link só deixaria uma delas fora do menu;
     - o botão de conta, que existia apenas na home e em resultados.

   As redes sociais saíram do header para o rodapé: com os itens novos o
   menu estourava entre ~1000 e 1200px, e rodapé é onde a maioria dos sites
   as coloca. O .socials do header fica escondido, o do rodapé não.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  header .nav .socials { display: none !important; }
  body.home-page .menu .lnk-inicio { display: none !important; }
}

/* Submenu "Simuladores" ----------------------------------------------------
   2026-07-29: "Simuladores" saía com outra cara — 16px/peso 400/quase
   branco, contra 14px/600/azul-claro dos vizinhos — e 1,6px mais alto.
   Motivo: as regras do menu miram "a.lnk" (com o seletor de elemento) e
   este é um <button>, então nada daquilo o alcançava; ele caía no font
   padrão do <button> do navegador. Aqui os valores do a.lnk são repetidos
   à mão, incluindo o sublinhado laranja do hover e a cor do tema escuro
   (que vem de a.lnk{color:var(--link)} e também não o pegava). */
.has-sub { position: relative; display: inline-flex; align-items: center; }
.menu .has-sub > .lnk-sub {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 22.4px;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  position: relative;
  transition: color .2s;
}
/* o mesmo sublinhado laranja que o a.lnk ganha no hover */
.menu .has-sub > .lnk-sub:after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--laranja);
  transition: width .25s;
}
.menu .has-sub:hover > .lnk-sub:after,
.menu .has-sub[data-open="1"] > .lnk-sub:after { width: 100%; }
/* tema escuro: acompanha o a.lnk, que usa var(--link) */
[data-theme="dark"] .menu .has-sub > .lnk-sub { color: var(--link); }
/* mesma faixa em que o bloco 25 encolhe o a.lnk para 14px */
@media (min-width: 1101px) and (max-width: 1600px) {
  .menu .has-sub > .lnk-sub { font-size: 14px; }
}
.has-sub > .lnk-sub .chev {
  width: 10px; height: 10px; flex: none;
  transition: transform .22s ease;
}
.has-sub[data-open="1"] > .lnk-sub .chev { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px; padding: 7px;
  background: #fff; border: 1px solid rgba(0,31,68,.1);
  border-radius: 13px; box-shadow: 0 18px 44px rgba(0,31,68,.2);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 120;
}
.has-sub[data-open="1"] > .submenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block; padding: 10px 13px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: #001F44; text-decoration: none;
  transition: background .18s, color .18s;
}
.submenu a:hover, .submenu a:focus-visible { background: #eef3fa; color: #004A99; }
.submenu a small { display: block; font-weight: 500; font-size: 11.5px; color: #5b6b82; margin-top: 1px; }
[data-theme="dark"] .submenu { background: #10263f; border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .submenu a { color: #eaf3ff; }
[data-theme="dark"] .submenu a:hover, [data-theme="dark"] .submenu a:focus-visible { background: rgba(255,255,255,.08); }
[data-theme="dark"] .submenu a small { color: #a9c3e4; }

/* Header: Favoritos vira ícone + contador ---------------------------------
   RETIRADO em 2026-09-12: esta regra escondia o rótulo "Favoritos" só
   quando havia contador com número à mostra (:has(#favN):not(.sem-favoritos)).
   Ela convivia com o bloco mais abaixo ("FAVORITOS SÓ COM ÍCONE", 16/08) que
   escondia o rótulo SEMPRE — as duas se sobrepunham e, na prática, o rótulo
   nunca aparecia. O César pediu o botão de volta com ícone + "Favoritos" +
   número sempre juntos, então nenhuma das duas faz mais sentido. Fica só o
   registro histórico; nada ativo aqui. */

/* Links do menu em branco puro (2026-07-31)
   Estavam em rgba(255,255,255,.9): sobre o navy do header os 10% de
   transparência deixavam o azul atravessar e o texto ficava apagado.
   O "Simuladores" é <button class="lnk lnk-sub"> e puxava var(--link),
   por isso entra aqui junto — o seletor cobre <a> e <button>.
   Usa !important porque duas regras vencem no cascade: o
   `.menu .has-sub > .lnk-sub` do dropdown (mais específico) e um
   `.menu a.lnk` que matricula.html declara num <style> posterior. */
header .menu .lnk,
header .menu a.lnk,
header .menu .lnk-sub,
header .menu .has-sub > .lnk-sub {
  color: #fff !important;
}
header .menu .lnk:hover,
header .menu a.lnk:hover,
header .menu .lnk-sub:hover,
header .menu .has-sub > .lnk-sub:hover {
  color: var(--laranja, #F97316) !important;
}

/* Botão de fechar sobrepondo as abas (2026-07-31)
   O X é absolute em top:14px com 32px de altura (vai até 46px), mas o
   .modal-conta só tinha padding-top:30px — as abas começavam embaixo
   dele e "Criar conta" ficava coberta. Reserva a faixa do X no topo.
   Vale para o modal de login e para o painel da conta, que usam o
   mesmo markup. !important porque algumas páginas redeclaram
   .modal-conta{padding:30px 28px} num <style> inline posterior ao
   link do ajustes.css. */
.modal-conta {
  padding-top: 56px !important;
}
.modal-conta .modal-tabs {
  margin-top: 0;
}

/* Área de clique do X dos chips de cidade (2026-07-31)
   O botão vinha com padding:0 e sem tamanho mínimo, resultando em
   9x15px: o clique errava o alvo e parecia que o filtro não fechava.
   24x24 é o mínimo recomendado para alvo de toque. */
.chip button {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin: -4px -6px -4px 0;
  transition: background .15s;
}
.chip button:hover {
  background: rgba(0, 31, 68, .12);
}

/* Cabeçalho de resultados: título e "Ordenar por" na mesma linha (2026-07-31)
   O h1 tinha display:block e line-height herdado, então o centro dele
   ficava 8px acima do centro do select. Alinha pela linha de base do
   flex e iguala a altura das duas colunas. */
.results-header-row {
  align-items: center;
}
.results-header-row .results-title {
  display: flex;
  align-items: center;
  min-height: 33px;
  line-height: 1.2;
  flex: 1 1 auto;
  /* uma regra global de h1 aplicava margin:20px 0 4px e empurrava o
     título 8px abaixo do centro do select */
  margin: 0 !important;
}
.results-header-row #sort-container {
  min-height: 33px;
}

/* Abas de oportunidades: destaque da selecionada (2026-07-31)
   A ativa só mudava de fundo; em telas menores, com as abas quebrando
   em 3 linhas, ficava difícil saber qual estava escolhida. Reforça o
   estado com anel de foco, sombra e peso — e no mobile as abas rolam
   na horizontal em vez de empilhar, mantendo a ativa à vista. */
.op-tab.active {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 74, 153, .25), 0 6px 16px rgba(0, 74, 153, .35) !important;
  transform: translateY(-2px);
}
[data-theme="dark"] .op-tab.active {
  box-shadow: 0 0 0 3px rgba(157, 196, 245, .3), 0 6px 16px rgba(0, 0, 0, .5) !important;
}
.op-tab:focus-visible {
  outline: 3px solid var(--laranja, #F97316);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  /* rola na horizontal: 3 linhas empilhadas empurravam os cards
     para fora da tela e diluíam a seleção */
  .op-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .op-tabs::-webkit-scrollbar { display: none; }
  .op-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: center;
  }
}

/* Selo CRECI: fundo laranja sólido, texto branco (2026-07-31)
   Antes era fundo tingido (rgba .08) com texto cinza e número laranja:
   1.94:1 no claro e 1.40:1 no escuro — ilegível. Pior, usava o mesmo
   padrão do "Em disputa" (fundo tingido + borda), e os dois se
   confundiam no card. Sólido resolve o contraste e separa os dois:
   o laranja é ação/identidade da marca, "Em disputa" continua vermelho
   translúcido como alerta. */
.imovel-creci .creci-selo {
  /* #b4520c e não o F97316 puro: branco sobre o laranja da marca dá
     2.8:1, abaixo do mínimo. Este tom mantém a identidade e chega a
     5.06:1. */
  background: #b4520c !important;
  /* borda mais definida (02/08/2026): 1px se perdia sobre o card
     escuro; 1.5px num tom acima dá acabamento sem pesar */
  border: 1.5px solid #e08a4a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  border-radius: 8px;
  padding: 5px 10px;
}
.imovel-creci .creci-selo,
.imovel-creci .creci-selo b,
.imovel-creci .creci-selo .creci-selo-txt,
.imovel-creci .creci-selo .creci-selo-num {
  color: #fff !important;
}
.imovel-creci .creci-selo .creci-selo-ic { fill: #fff; }
/* o número é secundário: levemente esmaecido, mas ainda >4.5:1 */
.imovel-creci .creci-selo .creci-selo-num {
  opacity: .92;
  font-weight: 600;
}
.imovel-creci .creci-selo:hover {
  background: #8f400a !important;
}
/* No escuro o laranja puro vibra demais sobre o card: um tom mais
   fechado mantém o contraste do texto branco e cansa menos a vista. */
[data-theme="dark"] .imovel-creci .creci-selo {
  background: #b4520c !important;
  border-color: #8f400a !important;
}
/* ícone de copiar acompanha o selo */
.imovel-creci .imovel-creci-copy {
  color: var(--laranja, #F97316);
}
[data-theme="dark"] .imovel-creci .imovel-creci-copy {
  color: #ffb066;
}

/* Ícones de redes sociais do rodapé (01/08/2026)
   .foot-socials só era estilizado nos <style> inline de algumas páginas.
   Onde faltava, o SVG assumia o tamanho natural — em
   blog-compra-direta chegava a 1384x1384. Regra central para valer em
   todas: 38x38 no botão, 18x18 no ícone, como nas 18 páginas corretas. */
.foot-socials {
  display: flex;
  gap: 10px;
  align-items: center;
}
.foot-socials .soc,
.foot-socials a {
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s, transform .2s;
}
.foot-socials .soc svg,
.foot-socials a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}
.foot-socials .soc:hover,
.foot-socials a:hover {
  background: var(--laranja, #F97316);
  transform: translateY(-3px);
}

/* Legibilidade no mobile (01/08/2026)
   Badges e rótulos dos cards ficavam entre 9,6px e 11,5px — abaixo do
   mínimo confortável de leitura em tela pequena. Sobem para 12px só
   no mobile; no desktop o tamanho menor continua adequado, porque a
   distância de leitura é outra. */
@media (max-width: 640px) {
  .badge-nacional,
  .status-ok,
  .status-atenc,
  .imovel-creci-text {
    font-size: 12px !important;
    line-height: 1.4;
  }
  /* .slogan saiu daqui em 07/08/2026: essa regra e a de baixo
     (header .brand .slogan / .brand .slogan / .slogan, todas
     !important) competiam com o menu.js, que precisa poder REDUZIR a
     fonte abaixo de 12px para o slogan caber na largura do nome sem
     quebrar linha — um !important sempre vencia o ajuste inline do
     script. Tamanho de partida em assets/ajustes.css:4499
     (header .brand .slogan{font-size:10px}, sem !important). */
  /* rótulos dos indicadores do hero (.hs) estavam em 9,6px */
  .hs span,
  .hs small {
    font-size: 12px !important;
  }
  /* disclaimer de taxas do simulador */
  .sim-disclaimer, .sim-disclaimer b {
    font-size: 12px !important;
  }
  /* tags e chips dos cards, KPIs da viabilidade e categorias do blog */
  .tag-tipo, .tag-desc,
  .pill, .chips-condicoes .pill,
  .vr-kpi span,
  .cat {
    font-size: 12px !important;
  }
  /* bloco duplicado (mesma intenção do de cima) também saiu em
     07/08/2026 — ver o comentário lá em cima sobre o menu.js. */
  /* rótulos dos indicadores do hero: .hero-stats .hs span tem
     !important e mais especificidade, precisa do mesmo nível */
  .hero-stats .hs span,
  .hero-stats-4 .hs span,
  .hs span, .hs small {
    font-size: 12px !important;
  }
}



/* Rodapé estourava a largura no tablet (01/08/2026)
   .foot-grid usa 4 colunas com gap:40px — a versão de 1 coluna só
   entrava abaixo de 640px, então entre 641px e ~900px o grid ficava
   mais largo que a tela e criava rolagem horizontal (896px numa
   viewport de 820px). Duas colunas nessa faixa resolvem sem espremer
   o conteúdo. */
@media (min-width: 641px) and (max-width: 980px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}
/* trava de segurança: nada deve ultrapassar a largura da tela */
@media (max-width: 980px) {
  .foot-grid, .foot-col { min-width: 0; }
  .foot-col a, .foot-col p { overflow-wrap: anywhere; }
}

/* Menu hambúrguer saindo da tela no mobile (02/08/2026)
   O .brand tem flex-shrink:0 e ocupava 321px; numa tela de 360px o
   botão de 42px era empurrado para x=355..397 — fora da tela e sem
   receber clique no Galaxy (360px). O logo passa a encolher e o botão
   fica com posição garantida. */
@media (max-width: 640px) {
  header .wrap {
    gap: 8px;
  }
  header .brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  header .brand b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Correção de 05/08/2026: esta regra apagava o slogan em TODO celular
     (o comentário antigo dizia "abaixo de 420px", mas o breakpoint real do
     bloco é max-width:640px — cobre praticamente qualquer aparelho em
     retrato, 375–428px incluídos). Testado com Playwright: mesmo com o
     slogan visível e sem quebrar linha, o botão hambúrguer nunca sai da
     tela em nenhuma largura de 320 a 640px — o problema original de
     02/08 (botão cortado no Galaxy 360px) já está coberto pelo
     flex-shrink da marca, então "esconder o slogan" não era mais
     necessário para resolvê-lo. Ele volta a aparecer, com fonte reduzida
     e sem quebra de linha (ver bloco logo abaixo). */
  header .menu-toggle,
  header #menuBtn {
    flex: 0 0 44px !important;
    width: 44px;
    height: 44px;      /* 44px é o alvo de toque recomendado */
    margin-left: auto;
  }
}

/* Imagem do artigo em destaque do blog (02/08/2026)
   O .fp-bg é absolute com inset:0, mas o <img> dentro dele não tinha
   regra: renderizava no tamanho natural (414x177 no desktop, 118x50 no
   mobile) e sobrava um vazio enorme no card. object-fit:cover faz a
   foto preencher o bloco sem distorcer. */
.fp-bg,
.fp-bg picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.fp-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Capas dos posts pequenos do blog (.mimg, 16/09/2026 — item 44 da Vera)
   As 5 fotos de capa do #blog apontavam para .jpg (arquivo inexistente,
   404): só há .png/.webp em midia/blog/. Corrigido para <picture> com
   fonte .webp + fallback .png, mesmo padrão já usado em .guia .cover
   picture e .fp-bg picture acima. .mimg tem display:flex;align-items:
   center (não stretch), então sem esta regra o <picture> (inline por
   padrão) não herdava altura/largura definidas e o object-fit do <img>
   descendente (.mimg img, já existente) não tinha o que cobrir. */
.mimg picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* o gradiente do .fp-in garante a leitura do texto sobre a foto */
.feat-post .fp-in {
  background: linear-gradient(transparent, rgba(0, 10, 30, .92)) !important;
}

/* Artigo em destaque no mobile (02/08/2026)
   O .feat-post é flex e no celular a foto e o texto ficavam lado a
   lado: a imagem tomava metade da largura e o título quebrava palavra
   por palavra. Abaixo de 640px a foto vira fundo da altura toda e o
   texto ocupa a largura inteira sobre ela. */
@media (max-width: 640px) {
  .blog-feat {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .feat-post {
    min-height: 300px !important;
    display: block !important;
    position: relative;
  }
  .feat-post .fp-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
  }
  .feat-post .fp-in {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    width: 100% !important;
    padding: 20px !important;
  }
  .feat-post h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  .feat-post .fp-in p {
    font-size: 13.5px !important;
    line-height: 1.5;
  }
}

/* Simulador de custo total no mobile (02/08/2026)
   O .chk-sub põe campo e unidade lado a lado. Numa tela de 360px não
   sobrava espaço e a unidade quebrava em duas linhas ("% sobre o /
   arremate", "R$ / (estimativa)"), desalinhando a linha. Abaixo de
   640px a unidade vai para baixo do campo, em linha única. */
@media (max-width: 640px) {
  .chk-sub {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .chk-sub input {
    flex: 1 1 100%;
    max-width: none !important;
    min-width: 0;
  }
  .chk-unit {
    flex: 1 1 100%;
    white-space: nowrap;
    font-size: 12px !important;
    margin-top: 2px;
  }
  /* a linha do checkbox precisa ocupar a largura toda: estava fixa em
     250px numa tela de 360px */
  /* a causa dos 250px: .sim-panel tem padding:30px, então numa tela de
     360px sobravam 252px de conteúdo. 16px devolvem a largura útil. */
  .sim-panel {
    padding: 20px 16px !important;
  }
  .sim-panel .sfield,
  .sfield > .chk-line,
  .chk-line {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .chk-line {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
  }
  .chk-line span {
    flex: 1 1 auto;
    min-width: 0;
  }
  .chk-line input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
  }
}

/* --------------------------------------------------------------------------
   23) SLOGAN DO CABEÇALHO: cor única e visível em todo mobile (05/08/2026)
   Duas falhas encontradas:
   (a) o slogan sumia em praticamente todo celular — a regra de
       max-width:640px escondia com !important, cancelando a de 1100px que
       tentava trazê-lo de volta. As duas tinham a mesma força, e por vir
       depois no arquivo a de 640px vencia.
   (b) a cor variava entre .85 e .82 de opacidade branca conforme a regra
       que vencia o empate, e no rodapé (.foot-brand) segue #7ea3d0 — essa
       última é intencional (o rodapé tem outros textos na mesma cor,
       formando bloco visual coerente) e NÃO foi alterada aqui; só o
       cabeçalho, onde o pedido era igualar ao branco do título ao lado.

   Bloco por último no arquivo — mas mesmo assim precisou de !important
   nos dois pontos abaixo: a regra "Legibilidade no mobile" (item 4231,
   .slogan{font-size:12px!important}) e o white-space padrão do navegador
   (normal, sem nenhuma regra explícita a sobrescrever) só cedem lugar com
   a mesma força. Confirmado com Playwright: sem !important o computed
   style continuava em font-size:12px/white-space:normal mesmo com estas
   regras carregando por último. */
header .brand .slogan {
  color: #fff;
}
@media (max-width: 1100px) {
  header .brand .slogan {
    display: block;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* width:max-content (não 100%): a caixa colapsa para o tamanho do
       próprio texto, alinhada à esquerda igual ao nome (que também usa
       max-content) — é o que faz "Onde...começa" iniciar exatamente sob
       "Arremate" e terminar sob "Online", em vez de esticar até a borda
       do container. O menu.js ajusta a fonte para a largura bater com a
       do nome; sem essa largura de caixa correta, o alinhamento à
       esquerda funcionaria mas o da direita, não. */
    width: max-content;
  }
}
@media (max-width: 640px) {
  header .brand { min-width: 0; }
  header .brand > span { min-width: 0; overflow: hidden; }
  /* fonte inicial — o menu.js (assets/menu.js) refina a partir daqui,
     medindo a largura real do texto contra o nome da marca. SEM
     !important: o script ajusta via element.style.fontSize, que só
     vence CSS de folha externa sem !important. */
  header .brand .slogan { font-size: 10px; }
}

/* 11/08/2026: ícones de rede social saíram do menu do cabeçalho em todas
   as páginas (já existem no rodapé; competiam com a navegação funcional
   e deixavam tudo colado — 8 elementos com o mesmo gap:16px dos links de
   texto). O que sobrou (tema/favoritos/conta) virou grupo próprio
   .menu-actions, com respiro maior e um divisor sutil em relação aos
   links de navegação. Regra central aqui (não em cada <style> inline)
   porque ajustes.css carrega por último em toda página e cobre também
   as que usam assets/styles.css (perguntas-frequentes.html), sem
   precisar repetir em cada arquivo. */
header .menu-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
[data-theme="dark"] header .menu-actions { border-left-color: rgba(255, 255, 255, .16); }
@media (max-width: 1100px) {
  header .menu-actions { margin-left: 8px; padding-left: 12px; gap: 8px; }
}

/* ── Hierarquia visual entre os botões do menu (11/08/2026) ───────────
   Favoritos/Buscar imóveis/Conta tinham o mesmo pill sólido cinza-navy,
   mesma altura, mesmo raio — "tudo igual e sem vida" (pedido do César).
   Só o CTA principal (Buscar imóveis) deve chamar mais atenção; Favoritos
   é ação de apoio e fica mais discreto (contorno, sem fundo); a Conta
   ganha leve destaque próprio via avatar, sem competir com o CTA. */
header .menu-actions .btn-laranja {
  box-shadow: 0 6px 16px rgba(249, 115, 22, .35);
}
header .menu-actions .btn-laranja:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, .42);
}
header .menu-actions a.btn-fav {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}
header .menu-actions a.btn-fav:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}
/* o coração fica mais quieto no estado de repouso — só acende quando
   há favoritos de verdade (classe sem-favoritos cuida disso) ou no hover */
header .menu-actions a.btn-fav .bi-fav { opacity: .85; }

/* --------------------------------------------------------------------------
   CABEÇALHO: causa raiz do menu cortado (César, 16/08/2026)

   O menu vinha sendo remendado faixa a faixa de largura (blocos 25, 1500px,
   1345px acima) e o corte voltava: em 1366px e 1280px o botão "Entrar"
   terminava FORA da viewport em 12 das 13 páginas.

   O motivo não era o tamanho dos itens, era o container: o cabeçalho usa
   .wrap, que tem max-width:1200px — a mesma medida do grid do conteúdo.
   Só que o conteúdo do cabeçalho (marca + 5 itens + 3 botões) mede até
   1420px. Preso a 1200px, ele transborda em QUALQUER tela, e onde a tela é
   menor que o transbordo o fim do menu sai de vista.

   O cabeçalho não precisa obedecer ao grid de 1200px do conteúdo: ele é uma
   barra que ocupa a largura toda. Liberando o container, o espaço que já
   existe na tela passa a ser usado e o corte some sem espremer mais nada.
   -------------------------------------------------------------------------- */
/* 16/08, 2a rodada: a 1a versao liberou o container por completo
   (max-width:none). Resolveu o corte, mas deixou marca e botoes colados nas
   bordas em telas largas -- o Cesar reprovou, com razao: o padrao dos bons
   sites e a BARRA ocupar a largura toda e o CONTEUDO dela acompanhar o
   conteudo da pagina. Volta a ser um container, so que com folga (1320px em
   vez dos 1200px do grid), e o espaco que faltava vem de enxugar a barra:
   Favoritos passa a ser icone + contador (ver bloco do .fav-txt). */
#hdr .wrap.nav,
header .wrap.nav {
  max-width: 1320px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Entre 1201px e 1500px a barra ainda fica no limite depois de liberar o
   container: aperta só o suficiente para caber, sem mudar a ordem nem
   esconder item nenhum. */
@media (min-width: 1201px) and (max-width: 1500px) {
  #hdr .wrap.nav, header .wrap.nav { padding-left: 18px; padding-right: 18px; }
  #hdr .nav, header .nav { gap: 14px; }
  #hdr .menu, header .menu { gap: 8px; }
  #hdr .menu a.lnk, #hdr .menu .lnk-sub,
  header .menu a.lnk, header .menu .lnk-sub { font-size: 13.5px; }
  #hdr .menu-actions, header .menu-actions { gap: 6px; }
  #hdr .nav .btn-sm, #hdr .menu .btn-sm,
  header .nav .btn-sm, header .menu .btn-sm {
    padding-left: 9px; padding-right: 9px; font-size: 12.5px;
  }
  #hdr .brand img, header .brand img { width: 46px; height: 46px; }
  #hdr .brand b, header .brand b { font-size: 18px; }
  #hdr .brand .slogan, header .brand .slogan { font-size: 10.5px; }
}

/* Nunca deixar a barra empurrar a página para os lados: se algum item novo
   entrar no menu no futuro, ele encolhe em vez de criar scroll horizontal. */
#hdr .nav, header .nav { max-width: 100%; }
#hdr .menu, header .menu { min-width: 0; }


/* --------------------------------------------------------------------------
   FAVORITOS: ícone + "Favoritos" + contador, sempre (revertido 12/09/2026)
   Em 16/08/2026 o César tinha escondido o rótulo "Favoritos" acima de 901px
   para liberar espaço no cabeçalho, deixando só ícone + número. Mas o
   contador (#favN) também ficava escondido com 0 favoritos (regra do bloco
   lá de cima, ".sem-favoritos #favN"), e com as duas coisas escondidas o
   botão sobrava só com o coração, sem nenhuma informação — o que o César
   pediu para corrigir agora. O pedido: ícone + "Favoritos" + número juntos,
   sempre, em qualquer largura (desktop e mobile já eram assim). Mantido só
   o ajuste de padding/gap (compatível com o rótulo visível) e o coração
   sempre com opacidade cheia, mesmo sem favorito salvo. */
@media (min-width: 901px) {
  header .btn-fav.btn-sm[aria-label="Favoritos"] {
    padding-left: 12px; padding-right: 12px; gap: 6px;
  }
  /* o coracao fica sempre visivel, mesmo sem favorito salvo */
  header .btn-fav.btn-sm[aria-label="Favoritos"] .bi-fav { opacity: 1; }
}

/* Acima de 1500px as fontes/espacos voltam ao tamanho cheio e a barra passava
   do container por 25-48px nas paginas com mais itens (posts do blog, morar,
   investir, simuladores, FAQ). Aperto leve: so os respiros, sem tocar em
   tamanho de fonte, para nao mudar a leitura na tela grande. */
@media (min-width: 1501px) {
  #hdr .nav, header .nav { gap: 22px; }
  #hdr .menu, header .menu { gap: 10px; }
  #hdr .menu-actions, header .menu-actions { gap: 7px; }
}

/* --------------------------------------------------------------------------
   BOTÃO DE TEMA (claro/escuro) — rede de segurança (César, 18/08/2026)

   Em perguntas-frequentes.html o ícone aparecia deformado: o CSS de
   `.theme-toggle` e de `.ic-svg` mora no <style> inline de cada página, e
   nessa página os dois nunca foram copiados. Sem `.ic-svg` o <svg> fica sem
   tamanho e sem `stroke`, então o desenho do sol/lua sai borrado e preto;
   sem `.theme-toggle` o botão perde o círculo e o alinhamento.

   Como o ajustes.css é o único arquivo que TODA página carrega, as duas
   regras passam a viver aqui também. Quem já tem a versão inline continua
   igual (mesmos valores); quem não tem para de quebrar. Vale para qualquer
   página nova que esqueça de copiar o bloco.
   -------------------------------------------------------------------------- */
header .theme-toggle,
#hdr .theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: .2s;
  flex-shrink: 0;
  padding: 0;
}
header .theme-toggle:hover,
#hdr .theme-toggle:hover {
  background: rgba(255, 255, 255, .24);
  transform: translateY(-2px);
}
/* o traço é o que desenha o sol e a lua: sem isto o símbolo vira mancha */
header .ic-svg,
#hdr .ic-svg,
.mmenu .ic-svg {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ==========================================================================
   53) BANNER DE CONTEXTO DO IMÓVEL — viabilidade.html (Parte B, 2026-09-14)
   Antes a ferramenta só preenchia os campos numéricos por baixo dos panos
   ao abrir com ?hdnimovel= (vindo de imovel.html) ou reabrir um projeto
   salvo (?via_id=, vindo de favoritos.html) — nada na tela confirmava QUAL
   imóvel aquela análise era. Card compacto fixo no topo do formulário,
   na mesma linguagem visual do card de favoritos/resultados (radius,
   sombra e tokens de cor do :root da própria página), com foto, local,
   preço e um link de volta pro anúncio. Markup montado em viabilidade.html
   por _renderBannerImovelVia(). Sem imóvel vinculado (uso avulso da
   ferramenta), mostra só uma nota discreta — nunca um card vazio/falso.
   ========================================================================== */
.via-banner-mount { margin-bottom: 22px; }
.via-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  box-shadow: var(--shadow);
}
.via-banner-foto {
  width: 64px; height: 64px; border-radius: 10px; object-fit: cover;
  flex: none; background: var(--tint2); border: 1px solid var(--border);
}
.via-banner-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.via-banner-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--laranja, #F97316);
}
.via-banner-local {
  font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--navy-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.via-banner-end { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.via-banner-preco { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.via-banner-link {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--navy);
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px;
  text-decoration: none; white-space: nowrap; transition: .2s;
}
.via-banner-link:hover { background: var(--tint2); }
.via-banner-avulso, .via-banner-loading {
  font-size: 12.5px; color: var(--muted); background: var(--tint);
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 11px 16px;
}
.via-banner-avulso a { color: var(--navy); font-weight: 700; }
[data-theme="dark"] .via-banner-foto { background: var(--tint2); }

/* 2026-09-14 (revisão da Vera): no escuro, var(--navy)/var(--navy-deep) NÃO
   servem pra texto aqui — viabilidade.html tem um segundo bloco
   [data-theme="dark"]{...} ("tokens-fundo-preservado", mais abaixo no mesmo
   <style>) que devolve essas duas variáveis pro azul original DE PROPÓSITO,
   porque muito componente as usa como FUNDO (não dá pra clarear a variável
   sem clarear fundo/barra/painel junto). O resultado: '.via-banner-local'
   ficava #001F44 sobre #17325c (1,29:1), '.via-banner-preco'/'.via-banner-link'
   ficavam #004A99 sobre #17325c (1,48:1) e o link de '.via-banner-avulso'
   idem (2,12:1) — todos abaixo do mínimo AA de 4,5:1.
   A correção segue o MESMO padrão que o resto da página já usa pra esse
   problema (ver bloco "texto que ficava azul-marinho sobre fundo escuro"
   mais abaixo): cor de texto própria por seletor, nunca var(--navy) cru.
   Medido: --texto (#eaf2fc) 11,29:1, #cfe2fb 9,67:1, --link (#7fb2f5) 5,82:1
   contra o fundo do card (#17325c); --link 8,33:1 contra o fundo mais escuro
   da nota avulsa (#0c1526). Os três passam de sobra o mínimo de 4,5:1. */
[data-theme="dark"] .via-banner-local { color: #cfe2fb; }
[data-theme="dark"] .via-banner-preco { color: var(--texto); }
[data-theme="dark"] .via-banner-link { color: var(--link); }
[data-theme="dark"] .via-banner-avulso a { color: var(--link); }

@media (max-width: 640px) {
  .via-banner { flex-wrap: wrap; }
  .via-banner-link { width: 100%; text-align: center; }
}