:root{
  /* --cor      a cor da imobiliaria, da configuracao dela
     --cor-esc  a mesma, 22% mais escura (hover, gradiente)
     --dest     o destaque. E a PROPRIA cor: um cliente escolhe UMA no
                console, e as oito que o console oferece foram medidas com
                branco em cima passando de 4,5:1 - logo a cor sobre branco
                passa igual, e o destaque nao precisa de um segundo tom
     --rgb      a cor em numeros, para as sombras e o anel de foco, que
                precisam dela com transparencia */
  --cor:#4A4E57;
  --cor-esc:#3A3D44;
  /* --cor-tx  a mesma cor, escurecida ate poder ser LIDA sobre fundo claro.
     Quem calcula e `cor_de_texto()` no gerador, medindo; este valor aqui e so
     exemplo, como os outros. O cinza-carvao ja passa, entao ele e igual a
     --cor - e e assim em todas as oito cores que o console oferece. O token
     existe para o dia em que a imobiliaria colar um codigo de cor clara. */
  --cor-tx:#4A4E57;
  --dest:#4A4E57;
  /* --dest-tx  o destaque escurecido ate poder ser LIDO sobre fundo claro,
     como o --cor-tx (cor_de_texto no gerador) */
  --dest-tx:#4A4E57;
  --sobre-dest:#FFFFFF;
  --sobre-cor:#FFFFFF;
  --dest-btn:#4A4E57;
  --sobre-btn:#FFFFFF;
  --dest-esc:#3A3D44;
  --rgb:74,78,87;
  --rgb-dest:74,78,87;
  --rgb-esc:58,61,68;
  /* o veu da capa e o grifo da cidade, os dois medidos contra texto branco
     pelo gerador (veu_da_capa e css_cores) */
  --rgb-veu:40,42,48;
  --grifo:#4A4E57;
  --white:#FFFFFF;
  --gray:#F4F6F8;
  --gray-2:#EAEEF2;
  --line:#DDE3E9;
  --ink:#1F2933;
  --muted:#5A6672;

  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display:clamp(2rem, 1.25rem + 2.9vw, 3.25rem);
  --fs-h2:clamp(1.5rem, 1.25rem + 1.05vw, 2.125rem);
  --fs-h3:clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --fs-lead:clamp(1rem, 0.95rem + 0.34vw, 1.1875rem);
  --fs-body:clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);
  --fs-sm:0.875rem;
  --fs-xs:0.75rem;
  --fs-xxs:0.6875rem;

  /* AS QUATRO MEDIDAS DE CANTO, e o tema manda nas quatro. Ate 08/09/2026
     eram duas, e doze regras deste arquivo cravavam a propria - entao num
     tema de canto reto o cartao saia quadrado e a etiqueta ao lado saia
     pilula. Ele viu e chamou de "mistura de coisa quadrada e arredondada". */
  --r-sm:3px;
  --r:5px;
  --r-lg:6px;
  --r-pill:100px;
  --shadow-card:0 1px 2px rgba(var(--rgb),.05);
  --shadow-hover:0 14px 32px -16px rgba(var(--rgb),.30);
  --shadow-float:0 18px 48px -20px rgba(var(--rgb),.42);
  /* elevação do card no hover: uma camada larga e difusa (a "altura") mais uma
     curta e escura junto da borda (o contato), senão a sombra fica leitosa */
  --shadow-lift:0 22px 44px -22px rgba(var(--rgb),.38), 0 4px 12px -8px rgba(var(--rgb),.22);
  --shadow-zoom:0 40px 80px -28px rgba(var(--rgb),.52), 0 8px 20px -10px rgba(var(--rgb),.28);
  --ring:0 0 0 3px rgba(var(--rgb),.16);

  --pad:clamp(18px, 4vw, 32px);
  --gap-section:clamp(44px, 5.5vw, 80px);

  --ease:cubic-bezier(.22,.7,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* a curva da lingua do projeto (vw-design): ease-out firme, sem passar do
     alvo. A busca e o mapa usam esta; as pecas antigas seguem com as suas. */
  --curva:cubic-bezier(.22,1,.28,1);
  /* mola: passa ~14% do alvo e assenta. É o que dá o "quique" do card. */
  --ease-bounce:cubic-bezier(.2,1.7,.3,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.5s;
  --header-h:68px;
  /* a barra da busca (12 + 46 + 12, e a borda): o mapa lado a lado para
     embaixo dela, da altura que sobra da janela */
  --bbar-h:71px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
  color:var(--ink);background:var(--white);overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-style:normal;letter-spacing:-.015em;line-height:1.18}
:focus-visible{outline:2px solid var(--dest);outline-offset:2px}

/* ---------- placeholders ----------
   Um degrau menor que o texto digitado (0.875em) e em cinza de rótulo: dá para
   ler, mas não se confunde com um valor já preenchido. O `em` é relativo ao
   próprio campo, então acompanha o clamp do corpo no mobile. O texto digitado
   não muda de tamanho. `opacity:1` porque o Firefox aplica 0.54 por padrão. */
input::placeholder,textarea::placeholder{
  font-size:.875em;color:var(--muted);opacity:1;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  font-size:.875em;color:var(--muted);opacity:1;
}
/* o X nativo do type=search deixava o campo da sidebar com dois pesos de cinza */
input[type=search]::-webkit-search-cancel-button{opacity:.55}

.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--pad)}
.container--wide{max-width:1360px}
/* Container que acompanha a tela: em 1920px o de 1200px deixava 360px de branco
   de cada lado. Usado só onde manda imagem (hero, destaques, listagem) — a
   página de imóvel segue em 1200px porque linha de texto longa cansa de ler. */
.container--wider{max-width:min(1780px, 94vw)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--white);color:var(--cor-tx);padding:10px 16px;font-weight:600}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r);
  padding:0 18px;height:44px;font-weight:600;font-size:var(--fs-sm);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
  white-space:nowrap;
  /* O botão nunca passa da coluna que o contém. min-width:0 desarma o
     min-content automático de item de grid/flex: sem isso o .aside__body
     (grid) dimensionava a coluna pelo rótulo sem quebra e o botão virava
     281px dentro de 222px disponíveis. */
  max-width:100%;min-width:0;
}
.btn>svg{flex:none}
.btn:active{transform:translateY(1px)}
/* O BOTAO USA UM PAR PROPRIO, e nao a cor de destaque crua.

   O destaque de uma imobiliaria pode ser claro demais para branco em cima: o
   laranja do primeiro cliente da 2,69:1, e o piso e 4,5:1. O gerador escurece
   SO O FUNDO DO BOTAO ate o branco passar, e deixa a cor viva para os icones
   e detalhes, que nao tem texto em cima. Quando nem escurecendo da, ele volta
   para a cor original com texto escuro. Ver fundo_para_branco() em gerar.py. */
.btn--primary{background:var(--dest-btn);color:var(--sobre-btn);transition:background .15s,transform .15s,box-shadow .15s}
/* NO MOUSE O BOTAO INTEIRO SOBE E CRESCE UM POUCO (caderno dele, 05/10/2026:
   "a animacao joga o icone para a direita, prefiro o botao como um todo se
   elevar, ficar maior"). O icone fica parado. */
.btn--primary:hover{background:var(--dest-btn-hover,var(--dest-btn));transform:translateY(-2px) scale(1.035);box-shadow:0 16px 28px -12px rgba(0,0,0,.34)}
.btn--primary:active{transform:translateY(0) scale(.99);box-shadow:0 6px 14px -8px rgba(0,0,0,.3)}
/* Quem pediu menos movimento perde a subida e o crescimento; a sombra
   continua, porque ela nao e movimento. */
@media (prefers-reduced-motion:reduce){
  .btn--primary:hover,.btn--primary:active{transform:none}
}
.btn--cor{background:var(--cor);color:#fff}
.btn--cor:hover{background:var(--cor-esc)}
.btn--ghost{background:transparent;color:var(--cor-tx);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--cor);background:var(--gray)}
.btn--sm{height:38px;padding:0 14px;font-size:var(--fs-xs)}
.btn--block{width:100%}
/* CTA de largura cheia com rótulo longo ("Mais Informações via WhatsApp"):
   em 320px ele não cabe em uma linha. Aqui o rótulo quebra e o botão cresce
   em ALTURA em vez de esticar a largura — era a largura que fazia o texto ser
   cortado pelo overflow:hidden do .aside (em todas as 143 fichas) e que
   empurrava a ficha sem fotos 10px para o lado. Acima de ~350px o texto cabe
   em uma linha e nada muda de aparência. */
.btn--block,.mnav__foot .btn,.empty .btn{
  white-space:normal;text-wrap:balance;line-height:1.25;
  height:auto;min-height:44px;padding-top:9px;padding-bottom:9px;
}
.btn--block.btn--sm{min-height:38px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid var(--line);
  /* regra fina na cor da imobiliaria: separa o header do conteudo mesmo sobre
     fundo branco, onde a borda cinza sozinha desaparecia */
  box-shadow:0 2px 0 0 rgba(var(--rgb-dest),.9), 0 6px 16px -10px rgba(var(--rgb),.22);
  transition:box-shadow var(--t),background var(--t);
}
.hdr.is-stuck{box-shadow:0 2px 0 0 rgba(var(--rgb-dest),.9), 0 12px 26px -12px rgba(var(--rgb),.42)}
.hdr__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:var(--header-h)}
/* A marca do cabecalho. `flex:0 1 auto` com `min-width:0` porque ela pode
   ser TEXTO e nao imagem: sem logo enviada, o nome da imobiliaria ocupa o
   lugar, e um nome comprido nao pode empurrar a linha.

   Medido em 04/09/2026 com `node _scripts/medir.mjs`: com `flex-shrink:0`
   o cabecalho estourava 332px numa tela de 320. E a armadilha 1 da LEI -
   `min-width:0` em item de flex que encolhe - com a imagem no lugar do
   texto escondendo o problema ate agora. A imagem continua sem encolher. */
.hdr__logo{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0}
.hdr__logo img{height:38px;width:auto;flex-shrink:0;transition:height var(--t)}

/* O nome escrito, quando a imobiliaria ainda nao enviou logo. Cor
   EXPLICITA nos dois lugares onde ele aparece: no cabecalho o fundo e
   branco, no rodape e a cor dela. Herdar a cor do rodape deixava o nome
   branco sobre a caixa branca da logo - 1,00:1, invisivel, medido. */
.marca-txt{font-weight:800;letter-spacing:-.02em;font-size:1.05rem;
  color:var(--cor-tx);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ft .marca-txt{color:var(--sobre-cor);font-size:1.15rem}
.hdr.is-stuck .hdr__logo img{height:32px}
.hdr__creci{
  font-size:var(--fs-xxs);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;
  padding-left:12px;border-left:1px solid var(--line);line-height:1.25;white-space:nowrap;
}
/* O corretor no topo, quando o console liga (01/10/2026): o nome e o CRECI
   numa linha, na mesma regua do cracha. Abaixo de 1100 px ele vira a faixa
   fina do alto (.faixa-cor), porque ao lado da logo nao cabe. */
.hdr__quem{display:flex;align-items:center;gap:5px;padding-left:12px;border-left:1px solid var(--line);
  line-height:1.25;white-space:nowrap;min-width:0;font-size:12.5px;color:var(--muted)}
.hdr__quem b{font-weight:700;color:var(--cor-tx)}
.faixa-cor{background:var(--cor);color:var(--sobre-cor,#fff);font-size:12.5px;text-align:center;padding:7px 16px;line-height:1.3}
.faixa-cor b{font-weight:700}
.faixa-cor.so-cel{display:none}
.hdr__nav{display:flex;gap:clamp(10px,1.6vw,26px);margin-left:auto}
.hdr__nav a{
  position:relative;font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cor-tx);padding:6px 2px;white-space:nowrap;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dest);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease);
}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{transform:scaleX(1)}
.hdr__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr__tel{display:flex;align-items:center;gap:7px;font-weight:700;font-size:var(--fs-sm);color:var(--cor-tx)}
.hdr__tel svg{color:var(--dest);flex-shrink:0}
.hdr__fav{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);color:var(--cor-tx);transition:border-color var(--t-fast),color var(--t-fast);
}
.hdr__fav:hover{border-color:var(--cor)}
.hdr__fav-n{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  display:none;align-items:center;justify-content:center;
  background:var(--dest);color:var(--sobre-dest);border-radius:9px;
  font-size:10px;font-weight:700;line-height:1;
}
.hdr__fav-n.is-on{display:flex;animation:pop .34s var(--ease-out)}
.hdr__burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);align-items:center;justify-content:center}
.hdr__burger-fecha,.hdr__burger[aria-expanded="true"] .hdr__burger-abre{display:none}
.hdr__burger[aria-expanded="true"] .hdr__burger-fecha{display:block}

/* menu mobile
   ATENÇÃO ao `visibility`: `opacity:0` + `pointer-events:none` esconde do olho e
   do mouse, mas NÃO do Tab. Os 13 links deste menu ficavam na ordem de foco em
   TODAS as larguras — inclusive acima de 980px, onde o botão que o abre está
   `display:none` e o menu é inalcançável. Quem navega por teclado saía do logo
   e caía em 13 links invisíveis antes de chegar ao conteúdo.
   `visibility:hidden` tira do foco; o `transition` de 0s com delay igual à
   duração mantém o menu visível durante a saída, senão ele desaparece seco em
   vez de esmaecer. */
.mnav{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;background:var(--white);
  padding:14px var(--pad) 32px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s linear var(--t);
}
.mnav.is-open{
  transform:none;opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s;
}
/* --muted (#5A6672) e nao #8A96A3: o cinza claro da 3,01:1 sobre branco,
   contra um piso de 4,5. E a mesma cor e o mesmo numero que o CSS_UI diz ter
   corrigido em `.aside__note` em 04/09/2026 - passou batido aqui, e so
   apareceu em 08/09 porque ninguem media o menu do celular aberto. */
.mnav__lb{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:16px 0 6px;
}
.mnav__lb:first-child{padding-top:4px}
/* ATENÇÃO: não usar `display:block` num seletor amplo aqui — ele sobrescrevia o
   `display:flex` de `.btn` e jogava o texto dos botões para a esquerda. */
.mnav__it{
  display:flex;align-items:center;gap:12px;padding:13px 2px;
  border-bottom:1px solid var(--line);font-weight:600;color:var(--cor-tx);
  transition:padding-left var(--t-fast),color var(--t-fast);
}
.mnav__it:active{padding-left:6px}
/* A pagina em que ela esta, no menu do celular: um fundo cinza no item, e nao
   uma faixa na borda esquerda, que e a proibicao mais forte da LEI. */
.mnav__it[aria-current="page"]{background:var(--gray);border-radius:var(--r);padding-inline:10px}
.mnav__it .n{
  margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* a seta encosta na borda direita mesmo em item sem contagem: quando existe
   o número, ele é quem empurra e a seta só o acompanha */
.mnav__it .ch{color:#C3CDD7;flex-shrink:0;margin-left:auto}
.mnav__it .n ~ .ch{margin-left:12px}
.mnav__it svg.ic{color:var(--dest);flex-shrink:0}
.mnav__foot{margin-top:24px;display:grid;gap:10px}
.mnav__foot .btn{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--cor);overflow:hidden}
/* Com foto ou video, o fundo por baixo da midia e a cor do veu, e nao a cor
   dela: e o que aparece enquanto a foto carrega, ou se ela nao carregar, e o
   texto branco em cima tem de continuar legivel. Com marca clara, a cor lisa
   dava 2,0:1 contra o branco (medido em 24/09/2026); o veu da 10:1. Sem midia
   (`hero--lisa`) o fundo continua a cor dela, com o texto `--sobre-cor`. */
.hero:not(.hero--lisa){background:rgb(var(--rgb-veu))}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;will-change:transform}
/* O VEU FOI DESENHADO CONTRA O PIOR QUADRO, branco puro, e nao contra a foto
   de hoje: o video muda o tempo todo, e a foto que ela trocar amanha tambem.
   Medido em 24/09/2026 no navegador, trocando o quadro por branco: o veu
   antigo (80% embaixo, 36% no meio) deixava o selo de cima a 3,8:1 no
   computador e a 1,7:1 no celular, onde o texto ocupa a largura inteira.
   `--rgb-veu` e um grafite so (veu_da_capa() no gerador, D116): ate 01/10
   era a cor dela escurecida, e a foto saia tingida da marca.

   D61, 24/09/2026: ele aprovou as duas capas e pediu o video "20% menos
   escuro". Cada opacidade daqui e 0,8 da que ele viu (.9 virou .72, .66
   virou .53, e assim por diante), e o quadro todo branco deixou de passar no
   texto pequeno; nos quadros reais do video o texto fica perto do piso (os
   numeros estao no relatorio do lote H). A sombra suave do texto, logo
   abaixo, ajuda nos quadros claros; o contraste medido nao conta com ela. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(var(--rgb-veu),.72) 0%, rgba(var(--rgb-veu),.53) 52%, rgba(var(--rgb-veu),.16) 100%),
    linear-gradient(96deg, rgba(var(--rgb-veu),.64) 0%, rgba(var(--rgb-veu),.37) 42%, rgba(var(--rgb-veu),.05) 78%, rgba(var(--rgb-veu),0) 100%);
}
@media (max-width:760px){
  /* no celular o texto vai de uma borda a outra, e o degrade lateral nao
     chega do lado direito: quem segura o contraste e o de baixo */
  .hero__media::after{
    background:linear-gradient(to top, rgba(var(--rgb-veu),.74) 0%, rgba(var(--rgb-veu),.64) 58%, rgba(var(--rgb-veu),.27) 100%);
  }
}
/* ------------------------------------------------- o video na capa ---

   A capa mostra a IMAGEM e um botao. O player so nasce no clique - por isso o
   botao e um botao de verdade, e nao um enfeite por cima de um iframe que ja
   estava la. Ver hero_video() no gerador. */
.hero__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  z-index:2;
  width:68px;height:68px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#17171A;
  cursor:pointer;
  /* O triangulo optico fica a direita do centro geometrico. Centralizado de
     verdade, ele PARECE deslocado para a esquerda. */
  padding-left:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  transition:transform 240ms cubic-bezier(.22,1,.28,1),
             background 240ms cubic-bezier(.22,1,.28,1);
}
.hero__play:hover{ transform:scale(1.07); background:#fff; }
.hero__play:active{ transform:scale(.98); }
.hero__play:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .hero__play{ transition-duration:1ms; }
}
/* Com o player no ar, o veu escuro da capa sairia por cima do video. */
.hero__media--video.tocando::after{ display:none; }
.hero__media--video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* --------------------------------------------- o video PROPRIO da capa ---

   Outro caminho, e outra classe de proposito. O link acima e um player de
   outro dominio e so nasce no clique; este e um arquivo dela, no mesmo
   endereco do site, e por isso pode tocar sozinho. Ver hero_video_arquivo().

   Os dois arranjos usam as MESMAS regras: em `cheia` o .hero__media e
   absoluto e cobre a faixa, em `dividida` ele vira a coluna - e um filho
   absoluto preenche os dois sem uma regra a mais. */
.hero__media--arquivo video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;
}
/* O VEU CONTINUA POR CIMA DO VIDEO, e nao sai como sai no caminho do link: o
   titulo e a frase sao lidos sobre a mistura, e o quadro do video muda o
   tempo todo. Medir contraste contra ele seria medir contra nada.
   `pointer-events:none` porque, com o controle na tela, o veu ficaria na
   frente do clique de pausar. */
.hero__media--arquivo::after{ pointer-events:none; }
/* O botao existe no HTML para quem pediu menos movimento. Com `display:none`
   ele tambem sai da ordem do Tab, que e o que se quer: para todo mundo mais,
   ele nao esta ali. */
.hero__media--arquivo .hero__play{ display:none; }
/* Apertou o play: o video volta, mesmo sob movimento reduzido. Duas classes
   contra uma, entao esta regra vence a de baixo sem depender da ordem. */
.hero__media--arquivo.tocando video{ display:block; }

/* MOVIMENTO REDUZIDO NAO RECEBE VIDEO TOCANDO SOZINHO.

   Isto NAO e a regra de "encurtar, nunca zerar" da LEI - aquela e sobre
   transicao de interface. Video em laco atras de um texto e exatamente o que
   esta preferencia existe para desligar.

   Escondendo o <video>, quem aparece e o <img> do cartaz que esta atras dele.
   E por isso que o cartaz sai no HTML, e nao so no atributo `poster`. */
@media (prefers-reduced-motion:reduce){
  .hero__media--arquivo video{ display:none; }
  .hero__media--arquivo .hero__play{ display:grid; }
}

.hero__in{
  position:relative;z-index:1;min-height:min(68vh,600px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(48px,8vh,88px);padding-bottom:clamp(58px,8vh,92px);
}
/* Branco cheio nos tres, sem opacidade: opacidade mistura o texto com o
   quadro de baixo, e a hierarquia ja vem do tamanho (LICOES, "Contraste e
   simetrico"). O selo era branco a 84% e a frase a 93%. */
.eyebrow{color:#fff;font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:var(--fs-display);font-weight:700;color:#fff;max-width:19ch;text-wrap:balance}
.hero__sub{margin-top:14px;max-width:56ch;font-size:var(--fs-lead);color:#fff}
/* A capa SEM midia nenhuma (dia da entrega): o fundo e a cor dela, lisa, e o
   branco so vale em cima do veu. Aqui o texto e o `--sobre-cor`, medido contra
   a cor dela. */
.hero--lisa .eyebrow,.hero--lisa h1,.hero--lisa .hero__sub,.hero--lisa .hero__desce{color:var(--sobre-cor)}
/* Sombra suave atras do texto da capa com foto ou video (D61): sem caixa,
   so um halo escuro que segura a letra branca quando o quadro clareia. Na
   capa lisa o texto pode ser escuro, e ali a sombra sujaria a letra. */
.hero:not(.hero--lisa) .hero__in>.eyebrow,.hero:not(.hero--lisa) .hero__in>h1,
.hero:not(.hero--lisa) .hero__in>.hero__sub{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35)}

/* ---------- A de hoje, melhorada (D42, tela 44) ----------
   O texto entra subindo, um depois do outro; a cidade do titulo ganha o
   grifo quando o mouse passa pela capa; a seta leva aos imoveis. Tudo so na
   capa cheia (`.hero__in`): o cinema e a dividida trazem o proprio estilo. */
@keyframes capaSobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__in>.eyebrow{animation:capaSobe .8s var(--ease-out) .1s both}
.hero__in>h1{animation:capaSobe .9s var(--ease-out) .22s both}
.hero__in>.hero__sub{animation:capaSobe .9s var(--ease-out) .4s both}
/* O grifo e um fundo do proprio trecho, e nao um pseudo-elemento: assim ele
   quebra junto com a linha quando o nome da cidade nao cabe numa so, em vez
   de empurrar a palavra inteira para fora da tela. */
.hero__in .hero__grifo{
  background-image:linear-gradient(var(--grifo),var(--grifo));background-repeat:no-repeat;
  background-position:0 88%;background-size:0% .2em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .5s var(--ease-out) .1s;
}
.hero:hover .hero__in .hero__grifo{background-size:100% .2em}
.hero__desce{
  position:absolute;right:var(--pad);bottom:clamp(58px,8vh,92px);
  width:46px;height:46px;border-radius:50%;border:1.5px solid currentColor;color:#fff;
  display:grid;place-items:center;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform .2s var(--ease-out);
}
.hero__desce:hover{background:var(--dest);border-color:var(--dest);color:var(--sobre-dest);transform:translateY(3px)}
.hero__desce:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:760px){.hero__desce{display:none}}
/* A busca sobe um fio quando o mouse chega nela. So na faixa da capa cheia. */
.searchband .search{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.searchband .search:hover{transform:translateY(-4px);box-shadow:0 34px 64px -30px rgba(var(--rgb),.5)}
@media (prefers-reduced-motion:reduce){
  .searchband .search:hover,.hero__desce:hover{transform:none}
}

/* ---------- busca ---------- */
.searchband{background:var(--gray)}
.search{
  position:relative;z-index:2;margin-top:-32px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-float);padding:16px;
}
.search__grid{display:grid;grid-template-columns:1fr 1.2fr 1.6fr auto;gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__lb{font-size:var(--fs-xxs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field select,.field input{
  height:46px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A6672' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.field select:focus,.field input:focus{border-color:var(--cor);box-shadow:var(--ring);outline:none}
.search .btn{height:46px}

/* ---------- a busca compacta (D41, e D140 em 05/10/2026) ----------
   Aparece quando a busca grande sai da tela. DESDE 05/10/2026 ela FLUTUA: uma
   capsula solta, separada do menu, com vidro e cantos grandes (a versao B de
   tres prototipos; ele: "fica estranho essa sobreposicao, e principalmente o
   efeito de transicao"). Antes era uma faixa branca colada no menu. `visibility`
   pelo mesmo motivo do .mnav: fora da tela ela nao pode ser parada do Tab. */
.buscacompacta{
  position:fixed;left:50%;top:calc(var(--header-h) + 16px);z-index:90;width:min(960px,calc(100% - 28px));
  padding:10px;border:1px solid rgba(255,255,255,.7);border-radius:26px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 30px 70px -28px rgba(var(--rgb),.6),0 0 0 1px rgba(0,0,0,.05);
  translate:-50% 0;
  opacity:0;transform:translateY(-18px) scale(.97);visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s;
}
.buscacompacta.is-on{
  opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .28s var(--ease-out),transform .34s var(--ease-out),visibility 0s;
}
.buscacompacta>.container{padding:0;max-width:none}
.buscacompacta .dd__btn{border-radius:16px;background:rgba(255,255,255,.7)}
.buscacompacta .btn{border-radius:16px}
@media (prefers-reduced-motion:reduce){.buscacompacta,.buscacompacta.is-on{transition:opacity .01s,visibility 0s;transform:none}}
.buscacompacta__f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr) auto;
  gap:8px;max-width:980px;margin-inline:auto}
/* COM O QUERO (Comprar ou Alugar) SAO CINCO PECAS, e a grade de quatro
   jogava o Buscar para uma segunda linha (Styllo, 03/10/2026, foto dele). */
.buscacompacta__f--quero{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr) auto}
.buscacompacta .dd__btn{height:40px;font-size:var(--fs-sm)}
.buscacompacta .btn{height:40px}
/* o destino da seta da capa para embaixo do menu e da compacta, e nao atras */
#imoveis{scroll-margin-top:calc(var(--header-h) + 96px)}
@media (max-width:640px){
  /* uns 75px por campo: sai o icone, fica o rotulo curto, o Buscar vira lupa */
  .buscacompacta{top:calc(var(--header-h) + 10px);width:calc(100% - 16px);padding:8px;border-radius:20px}
  .buscacompacta__f{gap:6px}
  .buscacompacta .dd__ico{display:none}
  .buscacompacta .dd__btn{padding:0 8px;gap:4px}
  .buscacompacta .btn{width:44px;padding:0}
  .buscacompacta__lb{display:none}
}

/* ---------- seções ---------- */
.sec{padding-block:var(--gap-section)}
.sec--gray{background:var(--gray)}
.sec__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,34px)}
.sec__hd h2{font-size:var(--fs-h2);font-weight:700;color:var(--cor-tx);position:relative;padding-bottom:12px}
.sec__hd h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--dest)}
.sec__more{font-size:var(--fs-sm);font-weight:600;color:var(--cor-tx);display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.sec__more span{transition:transform var(--t) var(--ease);display:inline-block}
.sec__more:hover span{transform:translateX(4px)}

/* ---------- ver os N imoveis (spec 3.1, tela 08, A + B) ----------
   A pilula na cor dela. SEM opacidade no texto nem branco translucido na
   seta: o circulo e um contorno na mesma cor do texto (`--sobre-cor`, medida
   contra `--cor`), e no mouse ele vira a cor de destaque com `--sobre-dest`.
   A foto do acervo entra POR BAIXO de um veu na cor dela, e quanto do veu
   cobre a foto e conta do gerador (veu_da_pilula), contra o pior quadro. */
.vertodos__cx{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
.vertodos{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;
  max-width:100%;min-height:58px;padding:9px 9px 9px 28px;border-radius:var(--r-pill);
  background:var(--cor);color:var(--sobre-cor);font-weight:700;font-size:var(--fs-body);line-height:1.2;
  box-shadow:0 10px 28px -14px rgba(var(--rgb),.7);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.vertodos__t b{font-size:1.45em;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-inline:2px}
.vertodos__seta{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid currentColor;
  transition:background .24s,border-color .24s,color .24s,transform .26s var(--ease-out);
}
.vertodos:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(var(--rgb),.85)}
.vertodos:hover .vertodos__seta{background:var(--dest);border-color:var(--dest);color:var(--sobre-dest)}
/* O veu fica sempre la: na cor dela, sobre a pilula da cor dela, ele nao
   muda nada ate a foto surgir por baixo. */
.vertodos::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(var(--rgb),var(--vertodos-veu,1))}
/* A FOTO E A DA CAPA E FICA SEMPRE (05/10/2026): quem passa o mouse so ve a
   pilula subir e a foto crescer um pouco. Sem capa, sem foto: so a cor dela. */
.vertodos::before{
  content:"";position:absolute;inset:0;z-index:-2;background:var(--vertodos-foto,none) center/cover;
  transition:transform .8s var(--ease-out);
}
.vertodos:hover::before{transform:scale(1.08)}
.vertodos--grande{min-height:64px;padding-left:32px;font-size:var(--fs-lead)}
@media (prefers-reduced-motion:reduce){
  .vertodos:hover,.vertodos:hover .vertodos__seta{transform:none}
}

/* ---------- grid de cards ---------- */
/* gap enxuto: cada pixel economizado aqui vira largura de foto */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.3vw,20px)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* ---------- card ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  /* --lift/--pop: a elevação do hover. `pop` está calibrado para compensar o
     `lift` na borda de baixo (≈ 1 + lift/altura do card), de modo que a aresta
     inferior praticamente não se mexe. Se ela subisse, o ponteiro parado ali
     perdia o hover, o card caía, reganhava o hover — tremor. */
  --lift:-7px;--pop:1.016;
  transform-origin:50% 0;
  transition:transform .42s var(--ease-bounce),
             box-shadow .34s var(--ease-out),
             border-color var(--t-fast) linear;
  /* o app injeta `style="transition-delay:Xms"` em cada card para escalonar a
     entrada. Esse delay valia para TODAS as transições do elemento, então o
     hover só começava a subir até 360ms depois do mouse entrar. A cascata de
     entrada virou @keyframes (ver .reveal) e aqui o delay é zerado. */
  transition-delay:0s!important;
}
.card:hover{
  box-shadow:var(--shadow-lift);border-color:var(--gray-2);
  transform:translateY(var(--lift)) scale(var(--pop));
}
/* card deitado (view lista / destaque) é bem mais baixo e mais largo: mesmo
   `pop` com `lift` proporcional à altura menor */
.cards.is-list .card{--lift:-4px}
.card--hero{--lift:-4px;--pop:1.012}
.card__media{position:relative;aspect-ratio:5/4;background:var(--gray-2);overflow:hidden}
.card__track{display:flex;height:100%;transition:transform var(--t-slow) var(--ease-out)}
.card__track img{min-width:100%;width:100%;height:100%;object-fit:cover}
.card:hover .card__track img{transform:scale(1.04)}
.card__nav{
  position:absolute;top:50%;translate:0 -50%;width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--cor-tx);
  opacity:0;transition:opacity var(--t),background var(--t-fast);
  box-shadow:0 2px 8px rgba(var(--rgb),.2);
}
.card__nav:hover{background:#fff}
.card__nav--prev{left:10px}
.card__nav--next{right:10px}
.card__media:hover .card__nav,.card__nav:focus-visible{opacity:1}
.card__dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px;pointer-events:auto}
.card__dot{
  width:6px;height:6px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.55);transition:background var(--t-fast),transform var(--t-fast);
}
.card__dot.is-on{background:#fff;transform:scale(1.35)}
.card__selos{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 60px)}
.card__nfotos{
  position:absolute;bottom:9px;right:10px;display:flex;align-items:center;gap:5px;
  /* 92%, e nao 72%. A 72% o selo "5 fotos" media 4,48:1 sobre foto
     clara - dois centesimos abaixo do piso de 4,5:1, e a conta piora
     com a cor de uma imobiliaria mais clara, porque a cor e dela e
     nao minha. A 92% a mistura e praticamente a cor solida, que e o
     que o .selo ja faz e passa. Medido em 04/09/2026. */
  background:rgba(var(--rgb-esc),.92);color:#fff;font-size:10px;font-weight:600;
  padding:4px 8px;border-radius:var(--r-sm);opacity:0;transition:opacity var(--t);
}
.card__media:hover .card__nfotos{opacity:1}
/* A cor dela CHEIA com o texto que o gerador mediu sobre ela (--sobre-cor):
   branco a 92% sobre marca clara media 1,93:1 (lote H, 24/09/2026). */
.selo{
  background:var(--cor);color:var(--sobre-cor);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);
}
.selo--dest{background:var(--dest);color:var(--sobre-dest)}
.card__fav{
  position:absolute;top:8px;right:8px;width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--cor-tx);transition:background var(--t-fast),color var(--t-fast);
}
.card__fav:hover{background:#fff}
.card__fav.is-on{color:var(--dest)}
.card__fav.is-on svg{fill:currentColor;animation:pop .34s var(--ease-out)}
.card__body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__loc{font-size:var(--fs-xxs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:5px}
.card__tit{font-size:var(--fs-h3);font-weight:600;color:var(--cor-tx)}
.card__cham{font-size:var(--fs-xs);color:var(--muted)}
.card__specs{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px;font-size:var(--fs-sm);color:var(--ink)}
.card__specs li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.card__specs svg{color:var(--muted);flex-shrink:0}
.card__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card__preco{font-size:1.2rem;font-weight:700;color:var(--cor-tx);letter-spacing:-.02em}
.card__ref{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
/* O cartao enxuto da busca (spec 3.2): sem a frase e o codigo ele fica mais
   baixo, e o preco cresce, que e o que se compara de relance numa grade. */
.card--enxuto .card__body{gap:5px;padding-bottom:14px}
.card--enxuto .card__specs{margin-top:4px}
.card--enxuto .card__foot{border-top:0;padding-top:8px}
.card--enxuto .card__preco{font-size:1.4rem;font-weight:800;letter-spacing:-.025em}

/* lista (view alternativa) */
.cards.is-list{grid-template-columns:1fr;gap:14px}
.cards.is-list .card{flex-direction:row}
.cards.is-list .card__media{width:min(38%,340px);aspect-ratio:5/4;flex-shrink:0}
.cards.is-list .card__body{padding:18px 20px}
@media (max-width:640px){
  .cards.is-list .card{flex-direction:column}
  .cards.is-list .card__media{width:100%}
}

/* ---------- card em destaque (o "prato do chef" do cardápio) ---------- */
@media (min-width:1001px){
  .card--hero{grid-column:span 2;flex-direction:row}
  .card--hero .card__media{width:52%;aspect-ratio:auto;min-height:356px;flex-shrink:0}
  .card--hero .card__body{padding:26px 28px;gap:8px}
  .card--hero .card__tit{font-size:1.4rem;line-height:1.22}
  .card--hero .card__cham{font-size:var(--fs-body)}
  .card--hero .card__preco{font-size:1.6rem}
  .card--hero .card__specs{gap:8px 16px}
  .card--hero .card__nav{width:40px;height:40px}
  .card--hero .card__snip{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
/* o corpo do card é item de flex/grid: sem min-width:0 ele não encolhe e o
   conteúdo (specs, referência) era clipado pelo overflow:hidden do card */
.card__body{min-width:0}
.card__specs li{min-width:0}
.card__foot{flex-wrap:wrap}
.card__snip{display:none;font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.card__destaque{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--dest);color:var(--sobre-dest);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-sm);
  box-shadow:0 3px 10px rgba(var(--rgb-dest),.4);
}
/* no card em destaque os selos descem para abaixo da tarja "Destaque" — no rodapé
   da foto eles colidiam com as bolinhas do carrossel */
.card--hero .card__selos{top:46px}
.card__m2{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* véu na base da foto: dá contraste aos selos e amarra foto e conteúdo */
.card__scrim{
  position:absolute;inset:auto 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--rgb-esc),.42),transparent);
  opacity:0;transition:opacity var(--t);
}
.card:hover .card__scrim{opacity:1}

/* ---------- clique no card: a grade recua, o card escolhido avança ----------
   O JS aplica .is-leaving na grade e .is-zooming no card clicado, e navega
   ~230ms depois. Estas transições ocupam essa janela: em vez de um corte seco
   para a página do imóvel, a foto do card já está crescendo quando a próxima
   tela entra (e a .gal2 continua o movimento). */
.cards.is-leaving{pointer-events:none}
.cards.is-leaving .card:not(.is-zooming){
  opacity:.3;transform:scale(.972);transform-origin:50% 50%;
  box-shadow:none;border-color:var(--line);
  transition:opacity .21s var(--ease-out),transform .21s var(--ease-out),box-shadow .21s linear;
}
.cards.is-leaving .card:not(.is-zooming) .card__nav,
.cards.is-leaving .card:not(.is-zooming) .card__dots,
.cards.is-leaving .card:not(.is-zooming) .card__nfotos{opacity:0}
.card.is-zooming{
  position:relative;z-index:5;opacity:1;
  transform:translateY(-8px) scale(1.028);transform-origin:50% 50%;
  box-shadow:var(--shadow-zoom);border-color:var(--gray-2);
  transition:transform .23s var(--ease-out),box-shadow .23s var(--ease-out);
}
/* a foto puxa mais que o card: é o que dá a sensação de entrar nela */
.card.is-zooming .card__track img{transform:scale(1.09);transition:transform .23s var(--ease-out)}
.card.is-zooming .card__scrim{opacity:1}
.card.is-zooming .card__nav,.card.is-zooming .card__nfotos,.card.is-zooming .card__dots{opacity:0;transition:opacity .14s linear}

/* imersão: o entorno (filtros, atalhos, barra de resultados, paginação) recua
   junto. Sem isso o efeito ficava preso dentro da grade e a tela toda continuava
   "acesa" enquanto o card avançava. */
.lay:has(.cards.is-leaving) .bbar__in,
.lay:has(.cards.is-leaving) .rbar,
.lay:has(.cards.is-leaving) .pag{
  opacity:.42;pointer-events:none;transition:opacity .21s var(--ease-out);
}

/* foto entra com fade em vez de aparecer seca.
   O `transform` precisa estar nesta declaração: era a última a falar de
   `transition` na foto e, sendo shorthand, apagava o `transition:transform`
   declarado acima — o zoom do hover entrava seco, sem interpolar. */
.card__track img,.pgal__stage img{opacity:0;transition:opacity .45s var(--ease-out),transform .55s var(--ease-out)}
.card__track img.is-loaded,.pgal__stage img.is-loaded{opacity:1}

/* ---------- favorito: animação em três camadas ----------
   ATENÇÃO: não declarar `position` aqui. Esta regra vem depois de
   `.card__fav{position:absolute;top:8px;right:8px}` e com a mesma especificidade,
   então um `position:relative` aqui derrubava o botão para fora da foto. */
.card__fav{overflow:visible}
.card__fav::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--dest);opacity:0;pointer-events:none;
}
.card__fav.is-burst::after{animation:anelBurst .6s var(--ease-out)}
.card__fav.is-burst svg{animation:coracao .52s var(--ease-out)}
[data-fav].is-burst svg{animation:coracao .52s var(--ease-out)}
@keyframes anelBurst{
  0%{transform:scale(.55);opacity:.95;border-width:3px}
  70%{opacity:.28}
  100%{transform:scale(2.4);opacity:0;border-width:1px}
}
@keyframes coracao{
  0%{transform:scale(1)}
  22%{transform:scale(.76)}
  52%{transform:scale(1.34)}
  76%{transform:scale(.94)}
  100%{transform:scale(1)}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:150;
  display:flex;align-items:center;gap:14px;
  width:max-content;max-width:calc(100vw - 28px);
  background:var(--cor);color:#fff;padding:13px 16px 13px 18px;border-radius:var(--r);
  box-shadow:var(--shadow-float);font-size:var(--fs-sm);
  animation:toastIn .34s var(--ease-out);
}
.toast>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* no celular ocupa a largura útil e fica acima do polegar */
@media (max-width:560px){
  .toast{
    left:14px;right:14px;bottom:14px;translate:none;width:auto;max-width:none;
    padding:12px 14px;gap:10px;
  }
}
.toast.is-out{animation:toastOut .26s var(--ease) forwards}
.toast a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.toast svg{color:var(--dest);flex-shrink:0}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* contador de resultados muda com um pulso */
.rbar__n b{display:inline-block;transition:transform var(--t) var(--ease-out)}
.rbar__n b.is-tick{animation:tick .42s var(--ease-out)}
@keyframes tick{0%{transform:translateY(-6px) scale(.9);opacity:.4}100%{transform:none;opacity:1}}

/* troca de resultado: a grade respira ao filtrar */
.cards.is-swap{animation:swap .34s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--cor-tx);
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.chip:hover{border-color:var(--cor);transform:translateY(-1px)}
.chip b{color:var(--muted);font-weight:600;font-size:var(--fs-xs)}
.chip--active{background:var(--cor);color:#fff;border-color:var(--cor);animation:spring .32s var(--ease-out)}
.chip--active b{color:rgba(255,255,255,.7)}
.chip__x{display:grid;place-items:center;width:16px;height:16px;border:0;background:transparent;color:inherit;opacity:.8}
.chip__x:hover{opacity:1}

/* ---------- CTA vender ----------

   DOIS DEFEITOS MEDIDOS EM 08/09/2026, e o segundo deixava o botao invisivel.

   Era `color:#fff` sobre `var(--cor)`. Branco cravado sobre a cor da
   imobiliaria: com marca clara a faixa inteira desaparece. `--sobre-cor` e a
   cor que `texto_sobre()` mediu contra a cor dela, e passa sempre.

   E o botao era `.btn--primary`, cujo fundo e `--dest-btn`. Com cliente de UMA
   cor, `--dest-btn` sai de `fundo_para_branco()` sobre a propria cor - e para
   o petroleo do exemplo essa funcao devolve a cor inalterada. Botao e faixa
   ficavam da MESMA cor, e o "Anuncie conosco" existia sem aparecer.

   A saida usa uma propriedade que ja estava ali: CONTRASTE E SIMETRICO. Se
   `--sobre-cor` passa 4,5:1 sobre `--cor`, entao `--cor` passa sobre
   `--sobre-cor`. O botao inverte a faixa, e isso vale para as 4.913 cores. */
.cta{background:var(--cor);color:var(--sobre-cor)}
.cta .btn--primary{background:var(--sobre-cor);color:var(--cor);
  border-color:var(--sobre-cor)}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:clamp(34px,4.5vw,54px);flex-wrap:wrap}
.cta h2{font-size:var(--fs-h2);font-weight:700}
/* Sem opacidade: ela mistura a cor com o fundo, e o contraste tem de ser
   medido sobre a MISTURA. A hierarquia vem do tamanho do h2, nao de lavar o
   paragrafo. */
.cta p{margin-top:8px;color:var(--sobre-cor);max-width:52ch}

/* ---------- footer ---------- */
/* `--sobre-cor` e nao branco cravado, pelo mesmo motivo da faixa acima: o
   rodape tem o fundo da cor dela, e com marca clara o branco sumia. Sem
   opacidade tambem - ver o comentario da `.cta p`. */
.ft{background:var(--cor);color:var(--sobre-cor);
  padding-block:clamp(40px,5vw,60px) 0;border-top:3px solid var(--dest)}
.ft__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px)}
@media (max-width:860px){.ft__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ft__grid{grid-template-columns:1fr}}
.ft h3{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sobre-cor);margin-bottom:14px}
.ft li{padding:4px 0;font-size:var(--fs-sm)}
.ft a:hover{color:var(--sobre-cor);text-decoration:underline;text-underline-offset:3px}
/* A caixa branca existe para a logo colorida nao sumir no fundo escuro.
   Com o nome escrito ela nao entra: o gerador so emite `ft__logo` quando
   ha imagem. Ver footer() em gerar.py. */
.ft__logo{background:#fff;padding:12px 14px;border-radius:var(--r);display:inline-block;margin-bottom:14px}
.ft__nome{display:inline-block;margin-bottom:14px}
.ft__logo img{height:40px;width:auto}
/* O branco a 86%, e nao a 60%.

   Com o azul-marinho do primeiro cliente, 60% dava 4,6:1 e passava. Com a
   cor de OUTRA imobiliaria nao passa: medido 3,97:1 sobre um verde
   escuro, em texto de 12px, que precisa de 4,5:1.

   86% e seguro para qualquer cor que o console ofereca, porque essas
   cores foram medidas com branco cheio em cima passando de 4,5:1. Foi o
   preco de a cor virar configuracao, e e barato. */
/* O link para o painel dela fica na barra de baixo, do lado oposto ao
   aviso de direitos. Mesmo peso: quem procura acha, quem nao procura
   nao tropeca. */
.ft__corretor{margin-left:auto;white-space:nowrap}
/* No dedo, 40px de verdade: medido em 390px pela qa-busca, 87x19. */
@media (max-width:640px){.ft__corretor{display:inline-flex;align-items:center;min-height:40px}}
.ft__bar{margin-top:clamp(28px,3.5vw,44px);border-top:1px solid rgba(255,255,255,.16);padding-block:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:rgba(255,255,255,.86)}

/* ---------- a busca, como a do Airbnb (D64, 25/09/2026) ----------
   Palavras dele vendo a primeira versao: "nao gostei da forma de filtragem"
   e, perguntado, "Quero igual ao Airbnb". Uma barra curta que gruda embaixo
   do menu (Tipo, Onde e o botao Filtros); no computador, a lista a esquerda
   e o mapa a direita, parado enquanto a lista rola; no celular, a lista e um
   botao "Mapa" flutuando embaixo. A barra ocupa a janela inteira, para o que
   rola por baixo dela nao aparecer dos lados. */
.bbar{
  position:sticky;top:calc(var(--header-h) + 1px);z-index:80;
  background:var(--white);border-bottom:1px solid var(--line);
  box-shadow:0 12px 24px -22px rgba(var(--rgb),.55);
}
.bbar__in{display:flex;align-items:center;gap:8px;padding-block:12px;min-width:0}
.bbar__campos{display:flex;gap:8px;flex:0 1 560px;min-width:0}
.bbar__campos .dd{flex:1 1 0;min-width:0}
.bbar .dd__btn{height:46px;gap:8px;padding:0 12px;border-radius:var(--r-pill)}
/* O rotulo pequeno ("TIPO") mora no lugar do icone do dropdown: a mesma
   funcao dd() serve a barra, a busca da home e a ordenacao, nos dois lados.
   --muted sobre branco da 5,9:1. */
.bbar .dd__ico{width:auto;height:auto;color:var(--muted)}
.bbar__lb{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;line-height:1}
.bbar .dd__lb{font-weight:600;color:var(--cor-tx)}
.bbar .dd[data-v=""] .dd__lb{font-weight:500;color:var(--ink)}
.bbar__filtros,.bbar__mapa{flex:0 0 auto;height:46px;padding:0 16px;font-size:var(--fs-sm);border-radius:var(--r-pill)}
.bbar__mapa{margin-left:auto}
.bbar__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--cor);color:var(--sobre-cor);
  font-size:11px;font-weight:700;line-height:1;animation:bbarN .26s var(--curva)}
@keyframes bbarN{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
/* O TOQUE RESPONDE NA HORA: 110ms de recuo em quem se aperta. */
.bbar .dd__btn:active,.bbar__filtros:active,.bbar__mapa:active{scale:.98;transition-duration:110ms}
/* No celular os dois campos dividem a linha com o Filtros e perdem o icone:
   vazio mostra o nome do campo ("Tipo", "Onde"), escolhido o valor, como a
   busca que gruda na home. Antes, vazio era so o icone, e o pente fino de
   29/09/2026 mostrou que ninguem sabia o que era cada botao. */
@media (max-width:640px){
  .bbar .dd__ico{display:none}
  /* Sem o icone, "Tipo" e "Onde" encostavam na curva da pilula; ele pediu
     "levemente mais para a direita" (29/09/2026). O espaco vem da direita e
     do vao ate a setinha, senao "Terreno" cortava em 390 px. */
  .bbar .dd__btn{padding:0 9px 0 17px;gap:5px}
  .bbar__filtros{padding:0 14px}
  /* "QUERO" (D74/D85) nunca fica vazio - comprar ou alugar, sempre um dos
     dois - entao a regra acima (so o icone quando data-v="") nunca pegava
     ele, e "Comprar" cortava no celular ("C..."), sozinho entre os outros
     tres campos em icone. Comprar (o padrao, a maioria das buscas) conta
     como o "vazio" aqui: so o icone. Alugar, a escolha que importa dizer,
     mostra a palavra - a mesma troca que os outros campos ja fazem. */
  .bbar .dd[data-dd="b-quero"][data-v="comprar"] .dd__lb{display:none}
  /* display:flex de volta: a regra generica de cima (".bbar .dd__ico
     {display:none}") ja pegou este dd - so mudar o flex-grow nao bastava, o
     icone continuava display:none. */
  .bbar .dd[data-dd="b-quero"][data-v="comprar"] .dd__ico{display:flex;flex:1 1 auto}
  /* Com Alugar escolhido, o campo fica do tamanho da palavra: dividindo a
     linha em partes iguais ele saia "A..." em 390 px (medido em 28/09). Os
     outros dois continuam so o icone e cedem o espaco. */
  .bbar .dd[data-dd="b-quero"]:not([data-v="comprar"]){flex:0 0 auto}
}
/* Em 320 px "Onde" saia com reticencias: o botao e o Filtros apertam um pouco. */
@media (max-width:360px){
  .bbar .dd__btn{padding:0 9px 0 13px;gap:4px}
  .bbar__filtros{padding:0 11px}
}
@media (max-width:1099px){.bbar__mapa{display:none}}

/* ---------- a lista e o mapa ---------- */
.lay__corpo{padding-top:18px;padding-bottom:var(--gap-section)}
.rbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rbar__n{font-size:var(--fs-sm);color:var(--muted)}
.rbar__n b{font-size:1.35rem;color:var(--cor-tx);font-weight:700;font-variant-numeric:tabular-nums}
.rbar__sp{margin-left:auto}
.rbar__ctrl{display:flex;align-items:center;gap:8px;min-width:0}
.rbar__ctrl--ord .dd{min-width:190px}
@media (max-width:480px){
  .rbar{gap:10px}
  .rbar__n{font-size:var(--fs-xs)}
  .rbar__n b{font-size:1.15rem}
  .rbar__ctrl--ord .dd{min-width:0}
  .rbar__ctrl--ord .dd__btn{height:40px;padding:0 10px;gap:6px;font-size:var(--fs-sm)}
}
/* LADO A LADO, como o Airbnb: a lista rola e o mapa fica parado embaixo da
   barra, da altura da janela. "Ocultar mapa" devolve a largura a lista. */
@media (min-width:1100px){
  .lay__corpo:not(.sem-pino){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:24px;align-items:start}
  .lay.lista-cheia .lay__corpo{display:block}
  .lay.lista-cheia .bmapa{display:none}
  .lay__corpo:not(.sem-pino) .bcol .cards{grid-template-columns:repeat(2,1fr)}
  .lay.lista-cheia .lay__corpo .bcol .cards{grid-template-columns:repeat(3,1fr)}
  .bmapa{position:sticky;top:calc(var(--header-h) + 1px + var(--bbar-h) + 14px);
    height:calc(100vh - var(--header-h) - var(--bbar-h) - 30px)}
  .bmapa .mbz{height:100%}
}
@media (min-width:1600px){
  .lay__corpo:not(.sem-pino) .bcol .cards{grid-template-columns:repeat(3,1fr)}
}
/* No celular e no tablet, uma coisa de cada vez: a lista, ou o mapa inteiro. */
@media (max-width:1099px){
  .bmapa{display:none}
  .lay.is-mapa .bmapa{display:block}
  .lay.is-mapa .bcol{display:none}
  .lay.is-mapa .lay__corpo{padding-top:14px;padding-bottom:16px}
  .bmapa .mbz{height:calc(100vh - var(--header-h) - var(--bbar-h) - 32px);min-height:340px}
  /* o credito vai para a esquerda: o botao Lista flutua no meio da borda de baixo */
  .mbz .leaflet-bottom.leaflet-right{right:auto;left:0}
}

/* ---------- o botao que flutua (Mapa | Lista), so no celular e no tablet ---------- */
.bflut{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom, 0px));translate:-50% 0;z-index:95;
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:var(--r-pill);
  background:var(--cor);color:var(--sobre-cor);font-size:var(--fs-sm);font-weight:700;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:scale .16s var(--curva)}
.bflut span{display:block}
.bflut:hover{scale:1.04}
.bflut:active{scale:.97;transition-duration:110ms}
@media (min-width:1100px){.bflut{display:none}}

/* ---------- a janela de filtros (como a do Airbnb) ----------
   Grupos com titulo, pilulas no lugar de caixinhas, "Limpar tudo" e
   "Mostrar N imoveis" contando ao vivo. No celular ela sobe da borda de
   baixo e ocupa quase a tela toda. */
.fmodal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px}
.fmodal[hidden]{display:none}
.fmodal__fundo{position:absolute;inset:0;background:rgba(var(--rgb-esc),.5);animation:janFundo .2s linear}
@keyframes janFundo{from{opacity:0}}
.fmodal__caixa{position:relative;display:flex;flex-direction:column;width:min(680px,100%);max-height:min(88vh,880px);
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-float);animation:janIn .36s var(--curva)}
@keyframes janIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.fmodal__hd{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.fmodal__hd h2{text-align:center;font-size:1rem;font-weight:700;color:var(--cor-tx)}
.fmodal__x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);
  transition:background var(--t-fast)}
.fmodal__x:hover{background:var(--gray)}
.fmodal__cp{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 24px}
.fmodal__pe{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;border-top:1px solid var(--line)}
.fmodal__limpar{min-height:44px;padding:0 4px;border:0;background:none;font-size:var(--fs-sm);font-weight:600;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fmodal__pe .btn{min-width:180px}
.fmodal .fgrp{padding:20px 0;border-bottom:1px solid var(--line)}
.fmodal .fgrp:last-child{border-bottom:0}
.fmodal .fgrp__lb{font-size:1.02rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--cor-tx);margin-bottom:12px}
.fmodal .fgrp__lb{display:flex;align-items:center;gap:9px}
.fgrp__ic{display:inline-grid;place-items:center;color:var(--dest)}
.fgrp__ic svg{width:18px;height:18px}
.bbar__lb--ic{display:inline-grid;place-items:center;color:var(--dest);letter-spacing:0}
.bbar__lb--ic svg{width:16px;height:16px}
.fpills{display:flex;flex-wrap:wrap;gap:8px}
.fpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);
  font-size:var(--fs-sm);color:var(--ink);transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.fpill:hover{border-color:var(--cor)}
.fpill:active{scale:.96;transition-duration:110ms}
.fpill__n{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.fpill.is-on{background:var(--cor);border-color:var(--cor);color:var(--sobre-cor);font-weight:600}
.fpill.is-on .fpill__n{color:var(--sobre-cor)}
.fpill:disabled{color:var(--muted);border-style:dashed;cursor:not-allowed}
.fq{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.fq:focus{border-color:var(--cor);outline:none}
.fq:focus-visible{outline:2px solid var(--dest);outline-offset:2px}
@media (max-width:640px){
  .fmodal{padding:0;place-items:end stretch}
  .fmodal__caixa{width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation-name:janSobe}
  @keyframes janSobe{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .fmodal__cp{padding:0 18px}
  .fmodal__pe{padding:12px 18px}
  .fmodal__pe .btn{min-width:0;flex:1 1 auto}
}

/* ---------- a troca lista <-> mapa no celular: a CORTINA (D33) ----------
   So opacidade e 6px na vertical, 120ms saindo e 260ms entrando. */
.lay.esta-saindo .bcol,.lay.esta-saindo .bmapa{
  opacity:0;transform:translateY(-6px);
  transition:opacity 120ms var(--curva),transform 120ms var(--curva)}
.lay.esta-entrando .bcol,.lay.esta-entrando .bmapa{animation:cortina 260ms var(--curva) backwards}
@keyframes cortina{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- o mapa ---------- */
.mbz{position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--gray-2)}
.mbz .mbz__mapa{position:absolute;inset:0}
.mbz .leaflet-container{font:inherit;background:var(--gray-2)}
/* A EMENDA CLARA ENTRE OS QUADRINHOS DO SATELITE, no celular (pente fino de
   29/09/2026). O Leaflet 1.9 poe "mix-blend-mode:plus-lighter" em todo
   quadrinho, para fechar a fresta que o Chrome deixa em tela comum; em tela
   de celular (2x e 3x) a foto e ampliada, as duas bordas vizinhas se somam
   e a soma passa do branco: uma linha clara atravessando o mapa, medida na
   coluna exata onde dois quadrinhos se encontram. Nessas telas volta o
   "normal", e a linha some; na tela comum fica o do Leaflet. Vale para a
   busca e para a ficha. Tentado antes: cada quadrinho 1 px maior, e a borda
   esticada clareou mais. */
@media (min-resolution:1.5dppx){
  .mbz .leaflet-container img.leaflet-tile,.onde__mapa.leaflet-container img.leaflet-tile{mix-blend-mode:normal}
}
.mbz.sem-mapa .mbz__mapa{visibility:hidden}
/* A NOTA DA D29 MORA NO QUADRO DO MAPA, que e onde a falta aparece: canto de
   cima, longe dos botoes de zoom. */
.mbz__nota{position:absolute;left:12px;top:12px;z-index:520;max-width:calc(100% - 80px);
  padding:7px 11px;border-radius:var(--r);background:rgba(255,255,255,.96);
  font-size:var(--fs-xs);font-weight:500;color:var(--ink);line-height:1.4;box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
/* enquanto o Leaflet chega: o retangulo respira, nunca roda-roda (vw-design) */
.mbz.is-carregando{animation:mbzRespira 1.6s ease-in-out infinite}
@keyframes mbzRespira{50%{background:var(--gray)}}
/* O estado vazio explica POR QUE esta vazio (R11, D29). */
.mbz__vazio{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:700;
  width:min(400px, calc(100% - 32px));padding:22px;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-float);
  animation:mprevEntra .32s var(--curva) backwards}
.mbz__vazio h3{font-size:var(--fs-h3);color:var(--cor-tx);margin-bottom:6px}
.mbz__vazio p{color:var(--muted);font-size:var(--fs-sm)}
.mbz__vazio .btn{min-height:40px;height:auto;margin-top:14px}

/* OS BOTOES DE ZOOM TEM 40px, e nao os 30 do Leaflet. Tres classes: o
   .leaflet-touch .leaflet-bar a dele tem duas e chega depois. */
.mbz .leaflet-control-zoom{border:0;box-shadow:0 6px 16px -8px rgba(var(--rgb),.55)}
.mbz .leaflet-bar.leaflet-control-zoom a{width:40px;height:40px;line-height:38px;font-size:20px;color:var(--cor-tx)}
.mbz .leaflet-control-attribution{font-size:11px;color:var(--ink);background:rgba(255,255,255,.92)}

/* ---------- o balao de preco ----------
   Um por imovel, e nunca um grupo nem um "+N" (D64). O MARCADOR (.mbal) so
   se desloca; quem tem o desenho e cresce e o filho (.mbal__c). O Leaflet
   posiciona o marcador com `transform`, e `scale` no marcador multiplicaria
   essa posicao: foi assim que o balao escolhido pulou para baixo da previa
   (qa-busca, 25/09/2026). `translate` soma, e pode ficar no marcador.
   DUAS CAMADAS, O PRECO E O PONTO, uma sobre a outra (D95): o preco que
   encostaria em outro esmaece e o ponto aparece no mesmo lugar, sem salto. O
   app.js decide quem e o que, a cada passo do zoom e do arrasto. Sem a ponta
   embaixo, como no prototipo aprovado: o balao liso assenta em cima do ponto. */
.mbz .mbal{display:block;translate:-50% -100%;cursor:pointer;
  transition:translate .22s var(--curva),opacity .2s var(--curva)}
.mbz .mbal__c{position:relative;display:grid;place-items:center;min-width:26px;height:26px;
  animation:mbalPousa .3s var(--curva) backwards}
/* os baloes pousam um depois do outro (cascata de 30ms, teto de 8) */
@keyframes mbalPousa{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
.mbz .mbal__preco{display:flex;align-items:center;height:26px;padding:0 9px;
  border:1px solid rgba(0,0,0,.08);border-radius:var(--r-pill);background:var(--white);color:var(--ink);
  font-size:.78rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 2px 10px -2px rgba(0,0,0,.35);
  transition:opacity .18s var(--curva),scale .2s var(--curva),background .15s linear,color .15s linear,box-shadow .2s var(--curva)}
/* o ponto e a cor dela, com o contorno branco que o separa do satelite */
.mbz .mbal__ponto{position:absolute;top:50%;left:50%;translate:-50% -50%;width:14px;height:14px;border-radius:50%;
  background:var(--cor);border:2px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .18s var(--curva),scale .18s var(--curva)}
/* 44px de alvo, no marcador, que nao encolhe quando o balao vira ponto */
.mbz .mbal::before{content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;height:100%;min-width:44px;min-height:44px}
.mbz .mbal:hover .mbal__preco{scale:1.06}
.mbz .mbal:active .mbal__preco{scale:.97;transition-duration:110ms}
/* O DO CARTAO SOB O MOUSE ACENDE: cresce e ganha o contorno na cor dela. */
.mbz .mbal.is-realce .mbal__preco{scale:1.1;box-shadow:0 0 0 2px var(--cor),0 6px 16px -6px rgba(0,0,0,.45)}
/* O ESCOLHIDO INVERTE, como no Airbnb: fundo na cor dela e texto claro,
   maior e por cima de todos. Estado so por cor e proibido, dai a forma junto. */
.mbz .mbal.is-on .mbal__preco{background:var(--cor);color:var(--sobre-cor);border-color:var(--cor);
  scale:1.1;box-shadow:0 8px 20px -8px rgba(0,0,0,.55)}
/* VIROU PONTO: o preco esmaece para fora, o ponto para dentro. Sob o mouse
   o preco volta, antes mesmo de o app.js refazer a conta. */
.mbz .mbal.is-ponto .mbal__preco{opacity:0;scale:.85;pointer-events:none}
.mbz .mbal.is-ponto .mbal__ponto{opacity:1}
.mbz .mbal.is-ponto:hover .mbal__preco{opacity:1;scale:1;pointer-events:auto}
.mbz .mbal.is-ponto:hover .mbal__ponto{opacity:0}
/* cortado pela borda, ou um ponto que cairia em cima de um preco: some, e
   nao disputa o toque com o preco que esta ali (revisao dele, 28/09/2026) */
.mbz .mbal.mbal--fora,.mbz .mbal.mbal--escondida{visibility:hidden}
/* A COLMEIA DO PREDIO (D95): o balao e o mesmo, centrado na celula dele (o
   app.js escreve o deslocamento, que cresce com o zoom). A unidade que ainda
   nao nasceu neste zoom espera apagada, e entra esmaecendo. */
.mbz .mbal--colmeia{translate:-50% -50%}
.mbz .mbal.mbal--futuro{opacity:0;pointer-events:none}

/* ---------- a previa do imovel, presa ao balao (D64) ----------
   A do Airbnb: o cartao enxuto com o carrossel (setas e pontinhos), o
   coracao, o X, e o cartao inteiro levando ao imovel. Nasce em cima do balao
   quando cabe e embaixo quando nao (o app.js escreve left, top e o lado), e
   cresce de onde o balao esta.
   POR CIMA DE TODO BALAO (D95): o Leaflet da a cada balao um z-index pela
   altura na tela, mas todos moram dentro do painel do mapa, que e uma camada
   so, de 400. O cartao, fora dele, com 600, fica por cima de qualquer um,
   inclusive da colmeia. No prototipo ela ficava fora do painel, e passava
   por cima do cartao. */
.mprev{position:absolute;left:12px;top:12px;z-index:600;width:300px;max-width:calc(100% - 16px);
  animation:mprevEntra .3s var(--curva) backwards}
@keyframes mprevEntra{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
/* a saida e ~75% da entrada: quem fecha ja decidiu */
.mprev.is-saindo{animation:mprevSai .2s var(--curva) forwards}
@keyframes mprevSai{to{opacity:0;transform:scale(.95)}}
.mprev .card{box-shadow:0 18px 40px -12px rgba(0,0,0,.5);border-color:transparent}
.mprev .card:hover{transform:none}
.mprev .card__media{aspect-ratio:16/10;cursor:pointer}
.mprev .card__nav{opacity:1}
.mprev .card__fav{right:52px}
.mprev .card__tit{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mprev__x{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--cor-tx);
  transition:background var(--t-fast),rotate .24s var(--curva)}
.mprev__x:hover{background:#fff;rotate:90deg}
.mprev__x::before{content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;height:100%;min-width:44px;min-height:44px}

/* NO CELULAR A PREVIA ENCAIXA NA BASE DO MAPA, acima do botao Lista que
   flutua ali, e o balao sobe para a faixa de cima (app.js). */
@media (max-width:640px){
  .mprev{left:10px!important;right:10px;top:auto!important;bottom:74px;width:auto;max-width:none}
  .mprev .card{flex-direction:row}
  .mprev .card__media{width:40%;aspect-ratio:auto;min-height:128px;flex-shrink:0}
  /* 44px a direita: o X mora no canto de cima do corpo, e sem a folga ele
     caia em cima do titulo (fotografado em 390px, 25/09/2026) */
  .mprev .card__body{padding:10px 44px 10px 12px;gap:4px}
  .mprev .card__specs{gap:8px;font-size:var(--fs-xs)}
  .mprev .card__foot{padding-top:6px}
  .mprev .card__fav{right:auto;left:8px;top:8px}
  .mprev .card__selos,.mprev .card__nav,.mprev .card__nfotos{display:none}
  /* no celular o lugar sai da previa: o mapa em volta ja diz onde e */
  .mprev .card__loc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mbz .mbal,.mbz .mbal__preco,.mbz .mbal__ponto,.bflut{transition-duration:1ms}
  .mbz .mbal:hover .mbal__preco,.mbz .mbal.is-on .mbal__preco,.mbz .mbal.is-realce .mbal__preco{scale:1}
}

/* paginação */
.pag{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:clamp(28px,3.5vw,44px);flex-wrap:wrap}
.pag button{
  min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);
  background:var(--white);border-radius:var(--r);font-size:var(--fs-sm);
  transition:all var(--t-fast);
}
.pag button:hover:not(:disabled){border-color:var(--cor);color:var(--cor-tx)}
.pag button.is-on{background:var(--cor);border-color:var(--cor);color:var(--sobre-cor);font-weight:600}
.pag button:disabled{opacity:.35;cursor:not-allowed}
.pag__gap{color:var(--muted);padding:0 4px}

/* vazio */
.empty{text-align:center;padding:clamp(40px,7vw,80px) 20px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--gray)}
.empty h3{font-size:var(--fs-h3);color:var(--cor-tx);margin-bottom:8px}
.empty p{color:var(--muted);max-width:44ch;margin:0 auto 18px}
/* duas saídas no estado vazio da busca: empilham no celular e ficam lado a lado
   a partir de ~430px, sempre centradas */
.empty__acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.empty__acoes .btn{min-width:0;max-width:100%}

/* A PAGINA DE ERRO e mais curta que a tela: o miolo estica e o rodape fica
   colado embaixo, sem a faixa branca de antes (pente fino de 29/09/2026). */
body[data-pagina="404"]{display:flex;flex-direction:column;min-height:100vh}
body[data-pagina="404"]>main{flex:1 0 auto}

/* "Clique" com mouse, "Toque" no celular (pente fino de 29/09/2026). */
.so-toque{display:none}
@media (hover:none){.so-mouse{display:none}.so-toque{display:inline}}

/* ---------- página de imóvel ---------- */
.pdp__crumb{font-size:var(--fs-xs);color:var(--muted);padding-block:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pdp__crumb a:hover{color:var(--cor-tx);text-decoration:underline}
/* o título ocupa a linha inteira: a referência (#430) saiu daqui porque é um id
   interno da plataforma e não diz nada a quem compra — ela vive no painel de
   contato e na mensagem do WhatsApp, onde serve para o corretor identificar */
.pdp__hd{margin-bottom:22px}
/* o titulo e o botao redondo de compartilhar (spec 7.1, D86) na mesma linha:
   o titulo estica, o botao fica preso no canto e nunca aperta */
.pdp__hd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pdp__hd-row h1{flex:1 1 auto;min-width:0}
.pdp__hd h1{
  font-size:clamp(1.5rem,1.1rem + 1.55vw,2.15rem);
  font-weight:700;color:var(--cor-tx);text-wrap:balance;
}
.pdp__cham{color:var(--muted);margin-top:7px;font-size:var(--fs-lead)}
/* galeria: palco grande + fita de miniaturas. Aguenta qualquer quantidade de
   fotos, inclusive imóvel com 2 — o layout de mosaico quebrava nesse caso e
   ficava horrível quando as fotos 2 e 3 eram planta baixa em fundo branco. */
.pgal{border-radius:var(--r-lg);overflow:hidden;background:var(--cor-esc)}
.pgal__stage{position:relative;aspect-ratio:16/9;background:var(--cor-esc);cursor:zoom-in;overflow:hidden}
@media (max-width:760px){.pgal__stage{aspect-ratio:4/3}}
.pgal__stage img{width:100%;height:100%;object-fit:cover;transition:opacity var(--t)}
.pgal__stage.is-plan img{object-fit:contain;background:#fff}
.pgal__nav{
  position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--cor-tx);
  opacity:0;transition:opacity var(--t),background var(--t-fast);
  box-shadow:0 3px 12px rgba(0,0,0,.22);
}
.pgal__stage:hover .pgal__nav,.pgal__nav:focus-visible{opacity:1}
.pgal__nav:hover{background:#fff}
.pgal__nav--prev{left:14px}
.pgal__nav--next{right:14px}
.pgal__n{
  position:absolute;bottom:14px;left:14px;background:rgba(var(--rgb-esc),.78);color:#fff;
  font-size:var(--fs-xs);font-weight:600;padding:5px 10px;border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums;
}
.pgal__zoom{
  position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:6px;
  background:rgba(var(--rgb-esc),.78);color:#fff;font-size:var(--fs-xs);font-weight:600;
  padding:5px 10px;border-radius:var(--r-sm);
}
.pgal__strip{display:flex;gap:6px;padding:6px;overflow-x:auto;background:var(--cor-esc);scrollbar-width:thin}
.pgal__t{
  flex:0 0 auto;width:92px;aspect-ratio:4/3;border:0;padding:0;border-radius:var(--r-sm);
  overflow:hidden;opacity:.5;transition:opacity var(--t-fast),outline-color var(--t-fast);
  outline:2px solid transparent;outline-offset:-2px;background:var(--gray-2);
}
.pgal__t img{width:100%;height:100%;object-fit:cover}
.pgal__t:hover{opacity:.85}
.pgal__t.is-on{opacity:1;outline-color:var(--dest)}
@media (max-width:640px){.pgal__t{width:72px}}

/* descrição estruturada (o texto cru vem como parágrafos e listas achatadas) */
.dbody h3.dh{
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cor-tx);margin:24px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.dbody h3.dh:first-child{margin-top:0}
.dbody p{margin-bottom:11px}
.dbody ul.dl{margin:0 0 14px;display:grid;gap:7px}
.dbody ul.dl li{position:relative;padding-left:20px}
.dbody ul.dl li::before{
  content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--dest);
}
.pdp__cols{display:grid;grid-template-columns:1fr 344px;gap:clamp(24px,3vw,44px);align-items:start;margin-top:clamp(26px,3vw,40px)}
@media (max-width:940px){.pdp__cols{grid-template-columns:1fr}}
.pdp__main{min-width:0}
/* O cartao de preco vem antes do texto no HTML (a ordem do celular e do
   Tab); na tela larga a grade o manda para a coluna da direita. */
@media (min-width:941px){
  .pdp__cols>.aside{grid-column:2;grid-row:1}
  .pdp__cols>.pdp__main{grid-column:1;grid-row:1}
}
/* AS MEDIDAS VIRARAM PILULAS (Plano 5, lote F, spec 3.3, tela 18 variacao 3).
   Icone de traco fino na cor de destaque sobre um disco claro, o numero em
   negrito e a palavra depois, como frase: "3 dormitorios".

   Herdam da faixa antiga (.specs, medida em 04/09/2026 contra 21 cortes de
   texto em 72 combinacoes de ficha e largura) a unica licao que vale aqui: a
   largura vem do CONTEUDO. Cada pilula e do tamanho do que diz, com nowrap
   para "1.077,17 m²" nunca se partir, e o flex-wrap decide quantas cabem
   por linha, em vez de um numero de colunas cravado. */
.medidas{display:flex;flex-wrap:wrap;gap:10px}
.medida{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 16px 5px 6px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;
  box-shadow:0 1px 2px rgba(var(--rgb),.06);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s;
}
.medida:hover{transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(var(--rgb),.5);border-color:var(--dest)}
.medida__ic{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(var(--rgb-dest),.1);color:var(--dest);
}
.medida__ic svg{width:18px;height:18px;stroke-width:1.7}
.medida b{font-weight:800;color:var(--cor-tx);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.medida:hover{transform:none}}
/* NO CELULAR AS PILULAS APERTAM UM POUCO, para as duas de area caberem na
   mesma linha em 390 px, como as outras vao em pares (pente fino de
   29/09/2026: "137 m² privativos" e "269 m² no total" iam uma por linha). */
@media (max-width:640px){
  .medidas{gap:8px}
  .medida{gap:6px;padding-right:11px}
  .medida__ic{width:30px;height:30px}
}
.pdp__desc{margin-top:clamp(26px,3vw,38px)}
.pdp__desc h2{font-size:var(--fs-h3);color:var(--cor-tx);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pdp__desc .body{white-space:pre-wrap;color:var(--ink)}
/* "O QUE O IMOVEL TEM", em pilulas (R8), depois da poda da D31: so o que o
   texto dela nao disse. Nao sao botao, entao nao ganham mouse nem sombra: a
   pilula que sobe no hover e a da medida, logo acima. */
.caracs{display:flex;flex-wrap:wrap;gap:8px}
.caracs li{
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--gray);font-size:var(--fs-sm);color:var(--ink);line-height:1.35;
}

/* ONDE FICA (D32, R7): a localizacao mora aqui quando o pino foi confirmado,
   com o botao do Google Maps pela coordenada e o mapa de satelite. Mais ar em
   cima que os outros blocos: e a unica secao da ficha que muda de meio. */
/* A secao tem a letra do titulo e a mesma largura maxima dele (78ch, de
   .pdp__desc>h2): assim o mapa e o botao terminam onde termina o filete do
   titulo, e nao 15px depois, na tela larga. Quem tem texto dentro traz o
   proprio tamanho de letra. */
.onde{margin-top:clamp(36px,4.5vw,56px);font-size:var(--fs-h3);max-width:78ch}
.onde__linha{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 18px;margin-bottom:14px;
}
.onde__linha .pdp__local{margin:0;min-width:0;align-items:flex-start}
.onde__linha .pdp__local svg{margin-top:.45em}
.onde__ir{flex-shrink:0}
.onde__ir svg{color:var(--dest)}
/* O aviso de ponto aproximado ou regiao do bairro (spec 7.2, revisao da
   D32): texto corrido, sem caixa nem borda colorida - o circulo no mapa ja
   avisa visualmente, isto e so o mesmo aviso para quem nao ve o mapa. */
.onde__aviso{margin:0 0 14px;font-size:var(--fs-sm);color:var(--muted)}
/* isolation: as camadas do Leaflet tem z-index de 400 a 1000, e sem um
   contexto proprio passariam por cima do cabecalho grudado ao rolar. O
   pan-y devolve a rolagem da pagina ao dedo que comeca em cima do mapa. */
.onde__mapa{
  position:relative;isolation:isolate;height:clamp(260px,42vw,420px);
  border-radius:var(--r-lg);overflow:hidden;touch-action:pan-y;
  background:linear-gradient(90deg,var(--gray-2),var(--gray),var(--gray-2));background-size:200% 100%;
  animation:shimmer 1.6s linear infinite;
}
.onde__mapa[hidden]{display:none}
.onde__mapa.leaflet-container{font:inherit;background:var(--gray-2);animation:none}
.onde__mapa .leaflet-control-attribution{font-size:11px;color:var(--ink)}
.onde__zoom{position:absolute;z-index:1000;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.onde__zoom button{
  width:40px;height:40px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--cor-tx);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.45);transition:border-color var(--t-fast);
}
.onde__zoom button:hover{border-color:var(--cor)}
/* O pino desce e assenta, sem passar do alvo: diz "e aqui". */
.onde__mapa .pinoMarca{animation:ondePino .4s var(--ease-out) both}
@keyframes ondePino{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .onde__mapa{animation:none}
  .onde__mapa .pinoMarca{animation:none}
}

/* O CARTAO DE PRECO (spec 3.3, tela 16 variacao 4): branco, na linguagem da
   pagina. O preco grande na cor dela, o R$/m² embaixo, o WhatsApp cheio na
   cor de destaque, a visita vazada que preenche no mouse, e o coracao no
   canto. Continua grudando ao rolar na tela larga.

   AS CORES SAO OS PARES MEDIDOS, nunca branco cravado: o WhatsApp usa o par
   do botao (--dest-btn e --sobre-btn, fundo_para_branco no gerador), a
   visita usa --cor-tx sobre branco e, no mouse, --sobre-cor sobre --cor, que
   passa pela mesma conta ao contrario (LICOES, "Contraste e simetrico"). O
   mouse NAO troca a cor do WhatsApp: cresce 2%, ganha sombra e a seta anda
   4px (regra do botao principal, spec secao 2). Escurecer o fundo no mouse
   quebraria o par medido nas marcas que ja escureceram para passar. */
.aside{
  position:sticky;top:calc(var(--header-h) + 16px);
  display:flex;flex-direction:column;gap:12px;padding:22px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 40px -28px rgba(var(--rgb),.45);
}
.aside__coracao{
  position:absolute;top:14px;right:14px;width:42px;height:42px;padding:0;
  display:grid;place-items:center;border-radius:50%;
  background:var(--white);border:1px solid var(--line);color:var(--cor-tx);
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast),transform .2s var(--ease-out);
}
.aside__coracao svg{width:20px;height:20px}
.aside__coracao:hover{border-color:var(--dest);transform:scale(1.06)}
.aside__coracao.is-on{background:var(--dest);border-color:var(--dest);color:var(--sobre-dest)}
.aside__coracao.is-on svg{fill:currentColor}
.aside__rot{
  padding-right:52px;min-height:20px;font-size:var(--fs-xxs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.5;
}
.aside__v{
  font-size:clamp(1.75rem,1.4rem + 1.1vw,2.1rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;color:var(--cor-tx);font-variant-numeric:tabular-nums;
}
/* D74: venda e aluguel podem aparecer juntos - o segundo preco (o aluguel,
   sempre depois) fica menor, para o primeiro continuar sendo o numero que
   mais chama a atencao. */
.aside__v + .aside__v{font-size:var(--fs-h3);font-weight:700;margin-top:-6px}
.aside__m2{margin-top:-6px;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.aside__bt{
  display:flex;align-items:center;gap:10px;min-height:50px;padding:0 16px;
  border:1.5px solid transparent;border-radius:var(--r);
  font-weight:700;font-size:var(--fs-body);white-space:nowrap;
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s,color .2s,border-color .2s;
}
.aside__bt>svg{flex:none}
.aside__bt>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.aside__seta{transition:transform .26s var(--ease-out)}
.aside__bt:hover{transform:scale(1.02)}
.aside__bt:hover .aside__seta{transform:translateX(4px)}
.aside__bt--zap{margin-top:4px;background:var(--dest-btn);color:var(--sobre-btn)}
.aside__bt--zap:hover{box-shadow:0 12px 24px -12px rgba(var(--rgb-dest),.85)}
.aside__bt--visita{background:var(--white);color:var(--cor-tx);border-color:var(--cor-tx)}
.aside__bt--visita:hover{background:var(--cor);border-color:var(--cor);color:var(--sobre-cor);box-shadow:0 12px 24px -12px rgba(var(--rgb),.7)}
.aside__pe{margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.aside__note{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.aside__note+.aside__note{margin-top:8px}
@media (prefers-reduced-motion:reduce){
  .aside__bt:hover,.aside__coracao:hover{transform:none}
  .aside__bt:hover .aside__seta{transform:none}
}
/* No celular o cartao fica logo depois das fotos (ele vem antes do texto
   no HTML): e o preco e o WhatsApp que a pessoa procura primeiro, e no fim
   da pagina ela teria de rolar a descricao e o mapa inteiros para chegar
   nele. Sem grudar, porque ali ele ocupa a tela inteira. */
@media (max-width:940px){
  .aside{position:relative;top:auto}
}

/* ---------- compartilhar (spec 7.1, D86) ----------
   O icone redondo ao lado do titulo, cheio na cor de destaque (mais chamativo
   que so um contorno, palavra dele) e com um aceno sutil, uma vez, quando a
   pagina assenta - ninguem fica piscando depois disso. No celular o mesmo
   botao vira largo dentro do cartao de preco (D86, so ai: na tela larga o
   redondo ja basta, e um segundo botao igual seria repeticao).

   O clique e o "Abre de dentro", escolhido por ele em 28/09/2026 entre tres
   (o pulo do icone com anel, que veio antes, ele reprovou): o menu cresce de
   dentro do botao como um circulo que vira o cartao, e o icone vira um X. */
.compart{position:relative;flex:none;z-index:60}
/* o z-index:60 fecha o botao e o menu numa camada so, abaixo do cabecalho
   preso (100): sem ele, o 121 do botao passava por cima do WhatsApp do topo
   ao rolar (print dele, 28/09/2026). Dentro dela, o botao continua sobre o
   proprio menu. */
.compart-round{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--dest);border:1px solid var(--dest);color:var(--sobre-dest);
  cursor:pointer;margin-top:2px;position:relative;z-index:121;overflow:visible;
  box-shadow:0 6px 16px -8px rgba(var(--rgb-dest),.6);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.compart-round svg{width:19px;height:19px}
.compart-round:hover{transform:scale(1.08);box-shadow:0 10px 22px -8px rgba(var(--rgb-dest),.72)}
/* os dois icones empilhados: aberto, o de compartilhar gira e some e o X entra */
.compart-ic-sh,.compart-ic-x{
  position:absolute;inset:0;display:grid;place-items:center;
  transition:transform .35s var(--ease-out),opacity .2s;
}
.compart-ic-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.compart-round[aria-expanded="true"] .compart-ic-sh{opacity:0;transform:rotate(90deg) scale(.6)}
.compart-round[aria-expanded="true"] .compart-ic-x{opacity:1;transform:none}
/* o aceno: nasce colado no botao e se abre uma unica vez, sozinho, pouco
   depois da pagina assentar (animation-fill-mode:both segura o estado final
   invisivel, em vez de o anel voltar a aparecer parado). */
.compart-round::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--dest);opacity:0;pointer-events:none;
  animation:compartAceno 1.9s var(--ease-out) .7s 1 both;
}
@keyframes compartAceno{
  0%{transform:scale(1);opacity:0}
  18%{transform:scale(1);opacity:.65}
  100%{transform:scale(1.55);opacity:0}
}
@keyframes compartPop{
  0%{transform:scale(1)}
  35%{transform:scale(.84)}
  65%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
.compart-menu{
  position:absolute;top:calc(100% + 8px);z-index:120;min-width:228px;padding:6px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-float);
  transform-origin:top right;
  animation:janIn .22s var(--ease-out);
}
/* o do botao redondo: o cartao encosta o canto dele no botao (6px de folga
   em volta) e o circulo cresce a partir do centro do botao, que fica 28px da
   direita e 30px do alto do cartao. O botao fica por cima e vira o X. */
.compart--round .compart-menu{
  top:-6px;right:-6px;min-width:252px;padding:58px 6px 6px;border-radius:18px;
  animation:compartAbre .55s var(--ease-out) both;
}
.compart--round .compart-menu.is-fechando{animation:compartFecha .3s cubic-bezier(.4,0,.2,1) both}
@keyframes compartAbre{
  from{clip-path:circle(22px at calc(100% - 28px) 30px)}
  to{clip-path:circle(170% at calc(100% - 28px) 30px)}
}
@keyframes compartFecha{
  from{clip-path:circle(170% at calc(100% - 28px) 30px)}
  to{clip-path:circle(22px at calc(100% - 28px) 30px)}
}
.compart-menu__tit{display:none}
.compart--round .compart-menu__tit{
  display:block;position:absolute;top:21px;left:18px;
  font-size:var(--fs-sm);font-weight:700;color:var(--muted);
  animation:fade .3s .18s both;
}
/* os itens entram um depois do outro, depois que o circulo ja passou por eles
   (o primeiro filho e o titulo, dai o 2 e o 3) */
.compart--round .compart-menu__it{animation:compartItem .45s var(--ease-out) both}
.compart--round .compart-menu__it:nth-child(2){animation-delay:.14s}
.compart--round .compart-menu__it:nth-child(3){animation-delay:.22s}
@keyframes compartItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.compart-menu__it{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;
  border:0;background:none;border-radius:var(--r);font-size:var(--fs-sm);font-weight:600;
  color:var(--ink);cursor:pointer;text-align:left;text-decoration:none;
  transition:background var(--t-fast);
}
.compart-menu__it:hover{background:var(--gray)}
/* os icones na cor da imobiliaria, como no prototipo que ele escolheu; o
   tom de botao porque o destaque puro pode nao dar 3:1 sobre o branco (o
   laranja do primeiro cliente da 2,8:1) */
.compart-menu__it svg,.compart-ic{flex:none;color:var(--dest-btn,var(--dest))}
/* "Copiar link" morfa o icone em check quando confirma (spec 7.1) */
.compart-ic--check{display:none}
.compart-menu__it.is-copiado{color:var(--dest-btn,var(--dest))}
.compart-menu__it.is-copiado .compart-ic--copy{display:none}
.compart-menu__it.is-copiado .compart-ic--check{
  display:inline-flex;color:var(--dest-btn,var(--dest));animation:compartPop .4s var(--ease-out);
}
/* o botao largo no cartao de preco saiu em 28/09: palavras dele, "eu nao
   sabia que o botão de compartilhar ficava aqui também, pode remover" */
@media (prefers-reduced-motion:reduce){
  .compart-round::after{display:none}
  .compart-round:hover{transform:none}
  .compart-ic-sh,.compart-ic-x{transition:none}
  .compart-menu,.compart--round .compart-menu,.compart--round .compart-menu__tit,
  .compart--round .compart-menu__it{animation:none}
  .compart-menu__it.is-copiado .compart-ic--check{animation:none}
}

/* ---------- galeria em mosaico (adaptativa à quantidade de fotos) ----------
   O mosaico fixo de 1 grande + 2 pequenas quebrava em imóvel com 2 ou 3 fotos.
   Aqui o layout muda conforme o acervo, então nada fica vazio nem esticado. */
.gal2{display:grid;gap:6px;border-radius:var(--r-lg);overflow:hidden}
.gal2__t{
  position:relative;border:0;padding:0;overflow:hidden;cursor:zoom-in;
  background:var(--gray-2);min-height:0;
}
.gal2__t img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out)}
.gal2__t:hover img{transform:scale(1.045)}
.gal2__t::after{
  content:"";position:absolute;inset:0;background:rgba(var(--rgb-esc),0);transition:background var(--t);
}
.gal2__t:hover::after{background:rgba(var(--rgb-esc),.08)}
/* "+16 fotos" sobre a última miniatura.
   O véu era `rgba(var(--rgb-esc),.6)`: sobre foto escura o branco lia bem, mas sobre
   foto clara — planta baixa em fundo branco, fachada contra o céu, coisa comum
   neste acervo — o fundo efetivo virava rgb(108,121,140) e o contraste caía a
   4,40:1, abaixo do 4,5:1 de AA para texto de 14px.
   A CONTA ACIMA ESTAVA CERTA PARA UMA COR ESCURA E ERRADA PARA O RESTO.
   Medido em 08/09/2026: 4,44:1 com o petroleo do exemplo, e 1,00:1 com uma
   marca branca. E nenhum alfa resolvia, porque o veu era feito DA COR DA
   MARCA - quanto mais clara ela, mais claro o veu, e o branco em cima morre.

   A ORDEM E O QUE RESOLVE: a tinta da marca vai embaixo (background-color) e
   um veu escuro neutro vai em cima (background-image). Assim o pior caso do
   veu e sempre "foto branca com tinta clara", e ele fecha por conta propria.
   Medido, seis cores de marca x tres fotos: alfa 0,62 da **5,23:1 no pior
   caso**, e a tinta da marca continua aparecendo onde a foto e escura. */
.gal2__more{
  position:absolute;inset:0;display:grid;place-items:center;gap:4px;
  background-color:rgba(var(--rgb-esc),.55);
  background-image:linear-gradient(rgba(20,18,17,.62),rgba(20,18,17,.62));
  color:#fff;font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.03em;transition:background-color var(--t);
}
.gal2__t:hover .gal2__more{background-color:rgba(var(--rgb-esc),.68)}

/* O VIDEO DO IMOVEL, primeiro item da galeria (D83, spec 7.3): cobre o quadro
   como as fotos, sem borda. Desde 03/10/2026 ele amplia como elas (abre a
   tela cheia no item 0), entao herda o cursor, o veu e o zoom do hover.
   O selo diz que e video: o veu escuro neutro e o mesmo do "+N fotos", que
   fecha acima de 4,5:1 com branco sobre qualquer quadro. */
.gal2__t--vid video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out)}
.gal2__t--vid:hover video{transform:scale(1.045)}
.gal2__vid{
  position:absolute;left:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 9px;border-radius:999px;background:rgba(20,18,17,.66);
  color:#fff;font-weight:700;font-size:var(--fs-sm);line-height:1;pointer-events:none;
}
/* o foco do mosaico fica DENTRO do quadro: a .gal2 recorta o que passa da
   borda, e o anel de fora sumia nas pontas */
.gal2__t:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.gal2__t:focus-visible::after{box-shadow:inset 0 0 0 6px var(--dest)}

.gal2[data-n="1"]{grid-template-columns:1fr;aspect-ratio:16/9}
.gal2[data-n="2"]{grid-template-columns:1fr 1fr;aspect-ratio:16/7}
.gal2[data-n="3"]{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/9}
.gal2[data-n="3"] .gal2__t:first-child{grid-row:1/3}
.gal2[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/10}
.gal2[data-n="5"]{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:16/8}
.gal2[data-n="5"] .gal2__t:first-child{grid-row:1/3}

.gal2__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:10px;font-size:var(--fs-sm);color:var(--muted);
}

@media (max-width:700px){
  /* no celular: a primeira foto ocupa a largura toda, o resto vira grade de 2 */
  .gal2,.gal2[data-n]{grid-template-columns:1fr 1fr;grid-template-rows:none;aspect-ratio:auto}
  .gal2 .gal2__t{aspect-ratio:4/3}
  .gal2 .gal2__t:first-child{grid-column:1/3;grid-row:auto;aspect-ratio:4/3}
  /* A PEQUENA QUE SOBRA SOZINHA ocupa a linha inteira, na mesma altura das
     outras (pente fino de 29/09/2026: com 2 fotos ficava uma grande, uma
     pequena e um buraco do lado; com 4, o mesmo na ultima linha). */
  .gal2 .gal2__t:nth-child(even):last-child{grid-column:1/3;aspect-ratio:8/3}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,16,28,.94);display:none;place-items:center}
.lb.is-open{display:grid;animation:fade .2s}
.lb__img{max-width:min(94vw,1500px);max-height:86vh;object-fit:contain;animation:zoomIn .3s var(--ease-out)}
/* o video do imovel na tela cheia (03/10/2026). Mais baixo que a foto: a
   86vh o video em pe encostava no contador, em cima da barra de play */
.lb__vid{max-width:min(94vw,1500px);max-height:80vh;background:#000;animation:zoomIn .3s var(--ease-out)}
.lb__x,.lb__nav{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;display:grid;place-items:center;transition:background var(--t-fast)}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.28)}
.lb__x{top:18px;right:18px;width:44px;height:44px}
.lb__nav{top:50%;translate:0 -50%;width:52px;height:52px}
.lb__nav--prev{left:18px}
.lb__nav--next{right:18px}
.lb__n{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

/* ---------- back to top ---------- */
.top{
  position:fixed;right:18px;bottom:18px;z-index:90;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--cor-tx);
  display:grid;place-items:center;box-shadow:var(--shadow-hover);
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s linear var(--t);
}
/* mesmo cuidado do .mnav: no topo da página este botão não faz nada e não
   aparece, mas continuava sendo uma parada do Tab */
.top.is-on{opacity:1;pointer-events:auto;visibility:visible;transform:none;
  transition:opacity var(--t),transform var(--t) var(--ease),visibility 0s}

/* ---------- animações ---------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes spring{0%{transform:scale(.86)}58%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes shimmer{100%{background-position:200% 0}}

/* entrada de página */
.page{animation:pageIn .34s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* a galeria do imóvel continua o movimento do card clicado: cresce de baixo
   para cima, um pouco depois da página (delay curto = leitura de sequência, não
   de competição). Só animação — o mosaico em si não é mexido aqui. */
.gal2{transform-origin:50% 100%;animation:gal2In .46s var(--ease-out) .05s backwards}
@keyframes gal2In{from{opacity:0;transform:translateY(12px) scale(.965)}to{opacity:1;transform:none}}

/* entrada dos cards, em cascata.
   Era feita com transition + `transition-delay` inline (injetado pelo app.js em
   cada card) — e esse delay valia para o hover também, atrasando a elevação.
   Virou @keyframes: o escalonamento agora vem do nth-child e o card fica livre
   para reagir ao mouse na hora. `backwards` mantém o card invisível durante o
   próprio delay; sem `forwards`, ao terminar a animação o transform volta às
   declarações e o hover funciona. */
.reveal{opacity:0}
.reveal.is-in{opacity:1;animation:revealIn .5s var(--ease-out) backwards}
@keyframes revealIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cards>.reveal:nth-child(2){animation-delay:.05s}
.cards>.reveal:nth-child(3){animation-delay:.1s}
.cards>.reveal:nth-child(4){animation-delay:.15s}
.cards>.reveal:nth-child(5){animation-delay:.2s}
.cards>.reveal:nth-child(6){animation-delay:.25s}
.cards>.reveal:nth-child(7){animation-delay:.3s}
.cards>.reveal:nth-child(n+8){animation-delay:.35s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       animation-delay:0s!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .reveal.is-in{animation:none}
  .gal2{animation:none}
  /* com duração ~0 as transições viram salto: aqui os deslocamentos são
     desligados de vez e sobra só a mudança de sombra/opacidade */
  .card:hover{transform:none}
  .card:hover .card__track img{transform:none}
  .cards.is-leaving .card:not(.is-zooming){transform:none}
  .card.is-zooming{transform:none}
  .card.is-zooming .card__track img{transform:none}
  .chip:hover{transform:none}
}

/* ---------- faixa de protótipo (etiqueta, não faz parte do site) ---------- */
.proto{
  background:var(--ink);color:#fff;font-size:var(--fs-xxs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;line-height:1.3;
  display:flex;align-items:center;justify-content:center;gap:8px 20px;flex-wrap:wrap;
}
.proto b{color:var(--dest);font-weight:700}
.proto__pick{display:flex;align-items:center;gap:6px;letter-spacing:.08em}
.proto__pick>span{opacity:.62}
.proto__btn{
  appearance:none;border:1px solid rgba(255,255,255,.26);background:transparent;color:#fff;
  font:inherit;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
}
.proto__btn:hover{border-color:rgba(255,255,255,.66);background:rgba(255,255,255,.1)}
.proto__btn[aria-pressed="true"]{background:var(--dest);border-color:var(--dest)}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .hdr__nav{display:none}
  .hdr__burger{display:flex}
}
/* A BARRA COM QUATRO ITENS NAO CABE ENTRE 981 E 1200px com o telefone por
   extenso e o CRECI ao lado da logo. Fotografado em 24/09/2026 em 981px,
   depois de o Inicio entrar: "Vender seu imovel" quebrava em duas linhas, o
   telefone tambem, e o nome dela virava reticencias. O telefone vira o icone
   (com 40px de toque, logo abaixo) e o CRECI sai do cabecalho, que ele ja esta
   na capa e no rodape. */
@media (max-width:1199px){
  .hdr__tel span{display:none}
}
@media (max-width:1099px){
  .hdr__creci{display:none}
  .hdr__quem{display:none}
  .faixa-cor.so-cel{display:block}
}
/* abaixo de ~430px o header não cabe com o rótulo "WhatsApp" escrito:
   o botão vira só ícone e o CRECI sai. Sem isso a página inteira ganha
   scroll horizontal em tela de 320px. */
@media (max-width:430px){
  .hdr__in{gap:10px}
  .hdr__actions{gap:7px}
  .hdr__actions .btn__label{display:none}
  .hdr__actions .btn{width:44px;padding:0}
  .hdr__creci{display:none}
  .hdr__logo img{height:32px}
  .faixa-cor{font-size:11.5px;padding:6px 12px}
}
@media (max-width:640px){
  /* o link "ver todos em ..." tem flex-shrink:0 e estourava a largura no celular */
  .sec__hd{flex-direction:column;align-items:flex-start;gap:10px}
  .sec__more{flex-shrink:1}
}
@media (max-width:760px){
  .search__grid{grid-template-columns:1fr}
  .search{margin-top:-24px}
  .hero__in{min-height:min(58vh,460px)}
  .hero__media img{object-position:58% 40%}
  .hdr__creci{display:none}
  .cta__in{flex-direction:column;align-items:flex-start}
}

/* Aviso de imovel que saiu da carteira. Fica no topo do conteudo, em ambar:
   nao e erro do site nem culpa de quem clicou, e uma informacao. Vermelho
   assustaria sem motivo.

   SEM FAIXA NA BORDA: e a proibicao mais forte de `design/LEI.md`. O fundo
   ambar e o <strong> ja dizem o estado. */
.forar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:0 0 20px;padding:14px 16px;border:1px solid #F0DCC0;
  border-radius:var(--r);background:#FFF8F0}
.forar strong{color:var(--cor-tx);font-size:1rem}
.forar span{flex:1 1 260px;min-width:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.forar .btn{flex:0 0 auto}
@media (max-width:560px){
  .forar{flex-direction:column;align-items:stretch}
  .forar .btn{width:100%;justify-content:center}
}

/* ---------- alvo de toque: 40px, sem mover um pixel ----------

   `design/LEI.md` pede 40px em 390px. O site do PRIMEIRO cliente, que esta
   no ar, nao cumpre - medido em 04/09/2026 com a mesma regua: logo 50x32,
   telefone do topo 15x15, "ver todos" 184x22, seta do carrossel 34x34,
   bolinha 8x8. Como o molde nasceu daquele desenho, herdou o mesmo defeito.

   O conserto e uma AREA INVISIVEL, e nao um elemento maior: um ::after
   absoluto, centrado, com 40px de piso. O dedo acerta; o olho nao ve
   diferenca; o layout nao se mexe um pixel. Onde crescer de verdade custava
   2px (botao de 38), cresceu de verdade - pseudo-elemento para ganhar 1px de
   cada lado seria complicar a toa.

   O que NAO entra aqui: qualquer controle cuja area de 40px passaria por
   cima do vizinho. Roubar o toque do vizinho e pior do que o alvo pequeno,
   porque erra em silencio. Os links do rodape por isso ganham espacamento de
   verdade no celular, e nao area invisivel sobreposta. */
/* O coracao e as setas do cartao NAO entram aqui: eles ja sao absolute (e
   absolute ja segura o ::after). Com `relative` por cima, desde 04/09/2026
   os dois desciam para baixo da foto e sumiam no overflow do cartao, em todo
   cartao de todo site. Medido pela qa-busca em 25/09/2026: o coracao a
   1.329px do topo, a foto terminando em 1.253. */
.hdr__logo,.sec__more,.hdr__tel{position:relative}
.hdr__logo::after,.sec__more::after,.card__nav::after,
.hdr__tel::after{
  content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;height:100%;min-width:40px;min-height:40px;
}
/* O CORACAO USA O ::before, e nao o ::after (medido no pente fino de
   29/09/2026, tocando 19px fora do centro: o dedo nao acertava). O ::after
   dele e o anel da animacao, com inset:-1px e pointer-events:none, e essas
   duas propriedades anulavam a area de 40px que esta regra dava. */
.card__fav::before{
  content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:40px;height:40px;border-radius:50%;
}

/* Crescer 2px e mais simples do que fingir que cresceu. */
.btn--sm{height:40px}
.btn--block.btn--sm{min-height:40px}
.rbar__ctrl select{height:40px}
.fpill{min-height:40px}

/* O rodape ganha espacamento DE VERDADE no celular.

   Area invisivel aqui nao serve: os links ficam a 27px de distancia um do
   outro, e uma area de 40px cobriria 13px do vizinho - o dedo acertaria o
   link de baixo achando que acertou o de cima. Espacamento real resolve sem
   ambiguidade. No desktop nada muda: la existe mouse, e o rodape continua
   compacto. */
@media (max-width:640px){
  .ft li{padding:0}
  .ft li a{display:inline-flex;align-items:center;min-height:40px}
}

/* O telefone do topo vira icone sozinho abaixo de 1200px, com 15x15. Area
   invisivel nao resolve este: os vizinhos (favoritos e WhatsApp) estao a 7px,
   vem depois no HTML e ficam por cima - o dedo acertaria o vizinho achando
   que acertou o telefone. Errar em silencio e pior do que o alvo pequeno.
   Entao ele ocupa 40px de verdade, e ninguem disputa o mesmo ponto. */
@media (max-width:1199px){
  .hdr__tel{width:40px;height:40px;justify-content:center;gap:0}
  /* A MESMA MOLDURA do coracao e do menu (pente fino de 29/09/2026): solto,
     o telefone parecia enfeite ao lado de tres botoes com borda. */
  .hdr__tel{border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
}

/* NO CELULAR A TRILHA VIRA UM LINK SO de volta ("‹ Apartamentos no bairro
   Centro"), pente fino de 29/09/2026: a trilha inteira quebrava em duas
   linhas, a segunda comecando com o separador solto. O link tem 40px de
   altura de verdade. */
.pdp__volta{display:none}
@media (max-width:640px){
  .pdp__crumb{display:none}
  .pdp__volta{display:inline-flex;align-items:center;min-height:40px;margin-block:6px;
    font-size:var(--fs-sm);font-weight:600;color:var(--cor-tx)}
}

/* A bolinha do carrossel e a UNICA excecao ao piso de 40px, e ela e
   deliberada.

   O cartao inteiro e um link para a ficha. Tudo que vira alvo dentro dele
   ROUBA toque do cartao. Cinco bolinhas com 40px de largura seriam 200px de
   um cartao de 358px em que tocar nao abre mais o imovel - e um cartao com
   dez fotos nem caberia. Trocar o alvo principal pelo secundario e piorar.

   Entao: 40px de ALTURA, que e barato, e a largura do proprio espaco entre
   elas. Quem nao acerta a bolinha tem dois caminhos com 40px de sobra - as
   setas ao lado e o arrastar do dedo - e nenhum deles depende de mirar. */
.card__dots{gap:10px}
.card__dot{position:relative}
.card__dot::after{
  content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:16px;height:40px;
}
/* No celular a bolinha deixa de ser BOTAO e vira so indicador.

   Nao ha area de 40px possivel para ela: dez bolinhas com 40px de largura
   ocupariam a largura inteira de um cartao de 358px, e tocar no cartao nao
   abriria mais o imovel. Alvo pequeno e ruim; alvo grande que rouba o alvo
   principal e pior.

   O que ela fazia continua feito, com folga: arrastar o dedo sobre a foto
   troca a foto (o swipe esta em app.js), e as setas tem 40px. No mouse ela
   continua clicavel - a regra de 40px e sobre dedo, e o mouse mira. O botao
   segue no HTML e no Tab, entao quem navega por teclado nao perde nada. */
@media (max-width:640px){
  .card__dot{pointer-events:none}
  .card__dot::after{content:none}
}

/* ---------- a proposta (D68, D88) ----------
   A barra presa embaixo da ficha, com o preco pedido e "Fazer proposta", e a
   janela que sobe por baixo com o passo a passo em tres passos. A opcao
   "barra de reserva" do prototipo v2, escolhida por ele em 28/09/2026. So em
   imovel a venda: quem decide e o marcador que o gerador e a ficha de borda
   escrevem, e quem monta tudo e o app.js. Do computador para cima (768 px),
   sem barra: o botao mora no cartao de preco e a janela abre no centro.

   TODA COR SAI DA IMOBILIARIA, nunca do laranja do prototipo (palavras dele:
   aquela e a paleta do primeiro cliente, e outras imobiliarias terao outras
   cores). A marca como texto, anel, barra ou fundo com branco em cima e
   --cor-tx, que ja passa 4,5:1 sobre o fundo claro (e o branco passa sobre
   ela pela mesma conta), e o destaque como texto e --dest-tx, medido do
   mesmo jeito; os botoes sao o par medido --dest-btn e
   --sobre-btn, o mesmo do "Falar no WhatsApp". Aviso, erro e acerto sao
   cores de estado, iguais para toda imobiliaria.

   OS CANTOS acompanham o tema: o --r-lg dele mais uma folga. No tema em que o
   prototipo foi aprovado (--r-lg de 12px) saem exatamente os do prototipo;
   num tema de canto quase reto saem menores, sem misturar redondo com
   quadrado na mesma tela. */
.pp-barra,.pp,.pp-veu{
  --pp-marca:var(--cor-tx);
  --pp-tinta:rgba(var(--rgb),.09);
  --pp-aviso:#8A4B00;--pp-aviso-bg:#FFF2DF;--pp-aviso-borda:#D98A1E;
  --pp-erro:#B3261E;--pp-erro-bg:#FDEDEB;
  --pp-ok:#137A4B;--pp-ok-bg:#E4F4EC;
  --pp-mola:var(--curva);
  --pp-sai:cubic-bezier(.4,0,1,1);
  --pp-suave:cubic-bezier(.2,.8,.2,1);
  --pp-bt:var(--dest-btn);
}
/* o degrade do botao escurece o proprio tom de botao dela; sem color-mix o
   botao fica liso, na mesma cor */
@supports (color:color-mix(in srgb,red,blue)){
  .pp-barra,.pp{--pp-bt:linear-gradient(135deg,var(--dest-btn) 0%,color-mix(in srgb,var(--dest-btn) 88%,#000) 100%)}
}
/* a mola do prototipo (amortecida, passa uns 1,5% e assenta), so em posicao */
@supports (transition-timing-function:linear(0,1)){
  .pp-barra,.pp{--pp-mola:linear(0,0.0141,0.0514,0.105,0.1696,0.2408,0.3149,0.3893,0.4619,0.5312,0.5961,0.656,0.7104,0.7593,0.8027,0.8407,0.8737,0.902,0.926,0.9461,0.9627,0.9762,0.9871,0.9956,1.0022,1.0071,1.0106,1.0129,1.0143,1.015,1.0151,1.0148,1.0142,1.0133,1.0123,1.0112,1.0101,1.009,1.0079,1.0068,1.0059,1.005,1.0042,1.0035,1)}
}

/* no computador, a capsula com o preco flutuando no meio, embaixo (D96,
   escolha dele em 28/09 entre tres: "Ele deve ficar tipo um botão
   flutuante"). A mesma barra do celular, solta da borda e mais estreita. */
.pp-barra{display:none}
@media (min-width:768px){
  .pp-barra{
    position:fixed;left:50%;bottom:22px;z-index:98;
    display:flex;align-items:center;gap:22px;padding:10px 10px 10px 24px;
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
    box-shadow:0 22px 50px -18px rgba(var(--rgb),.45);
    translate:-50% 0;animation:ppSobeCapsula .5s var(--curva) .2s both;
  }
  .pp-barra__v{font-size:20px}
  .pp-barra__bt{height:50px;padding:0 24px 0 20px}
  /* o fim da pagina nao fica atras da capsula. O espaco mora DENTRO do
     rodape, na cor dela: no body ele virava uma faixa branca embaixo do
     rodape (foto dele, 03/10/2026, Styllo e imobpage). */
  body.tem-proposta .ft__bar{padding-bottom:calc(18px + 96px)}
}
@keyframes ppSobeCapsula{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:767.98px){
  .pp-barra{
    position:fixed;left:0;right:0;bottom:0;z-index:98;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)) 20px;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid rgba(var(--rgb),.08);
    box-shadow:0 -14px 34px -20px rgba(var(--rgb),.45);
    animation:ppSobe .5s var(--curva) .2s both;
  }
  /* o fim da pagina nao fica atras da barra, e o que ja morava no canto de
     baixo (voltar ao topo, o aviso de favorito) sobe junto com ela */
  body.tem-proposta .ft__bar{padding-bottom:calc(18px + 79px + env(safe-area-inset-bottom,0px))}
  body.tem-proposta .top{bottom:calc(97px + env(safe-area-inset-bottom,0px))}
  body.tem-proposta .toast{bottom:calc(93px + env(safe-area-inset-bottom,0px))}
}
.pp-barra__preco{display:flex;flex-direction:column;gap:3px;min-width:0}
.pp-barra__v{
  font-size:19px;font-weight:750;color:var(--ink);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1;
}
.pp-barra__r{font-size:13px;color:var(--muted);line-height:1.2;white-space:nowrap}
.pp-barra__bt{
  flex:none;height:54px;padding:0 22px 0 18px;border:0;border-radius:var(--r-pill);
  background:var(--pp-bt);color:var(--sobre-btn);
  font:700 16px/1 var(--font);letter-spacing:.005em;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 12px 24px -12px rgba(var(--rgb-dest),.95),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s var(--pp-suave);
}
.pp-barra__bt:active{transform:scale(.96)}
.pp-barra__bt svg{flex:none}
.pp-barra__bt:focus-visible{outline:2px solid var(--pp-marca);outline-offset:3px}
/* 320px, ou preco de nove digitos: preco e botao com o icone nao cabem lado
   a lado. O app.js mede e liga o .is-apertada quando o preco nao cabe. */
@media (max-width:359px){
  .pp-barra{padding-left:16px;gap:10px}
  .pp-barra__v{font-size:17px}
  .pp-barra__bt{padding:0 18px}
  .pp-barra__bt svg{display:none}
}
.pp-barra.is-apertada{padding-left:16px;gap:10px}
.pp-barra.is-apertada .pp-barra__v{font-size:17px}
.pp-barra.is-apertada .pp-barra__bt{padding:0 18px}
.pp-barra.is-apertada .pp-barra__bt svg{display:none}

/* a janela */
.pp-veu{
  position:fixed;inset:0;z-index:180;background:rgba(8,17,29,.52);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.pp-veu.is-on{opacity:1;pointer-events:auto}
.pp{
  position:fixed;left:0;right:0;bottom:-48px;z-index:181;
  height:calc(min(792px,100vh - 52px) + 48px);
  height:calc(min(792px,100dvh - 52px) + 48px);padding-bottom:48px;
  display:flex;flex-direction:column;background:var(--white);color:var(--ink);
  border-radius:calc(var(--r-lg) + 16px) calc(var(--r-lg) + 16px) 0 0;
  box-shadow:0 -24px 60px -24px rgba(8,17,29,.5);
  transform:translateY(106%);visibility:hidden;outline:none;
  transition:transform .3s var(--pp-sai),visibility 0s linear .3s;
}
.pp.is-on{transform:none;visibility:visible;transition:transform .66s var(--pp-mola),visibility 0s}
/* DO COMPUTADOR PARA CIMA a mesma janela abre no centro, da largura do
   celular: sobe 12px e cresce de 0,98 ao abrir, e sai mais rapido do que
   entra (quem fecha ja decidiu). Sem a alca, que la embaixo diz "puxe". */
@media (min-width:768px){
  .pp{
    left:50%;right:auto;top:50%;bottom:auto;padding-bottom:0;
    width:min(440px,calc(100vw - 32px));
    height:min(760px,calc(100vh - 48px));
    height:min(760px,calc(100dvh - 48px));
    border-radius:calc(var(--r-lg) + 16px);overflow:hidden;
    box-shadow:0 30px 80px -24px rgba(8,17,29,.55);
    opacity:0;transform:translate(-50%,-50%) translateY(12px) scale(.98);
    transition:transform .24s var(--pp-sai),opacity .24s ease,visibility 0s linear .24s;
  }
  .pp.is-on{
    opacity:1;transform:translate(-50%,-50%);
    transition:transform .42s var(--curva),opacity .3s ease,visibility 0s;
  }
  .pp__alca{display:none}
  .pp__topo{padding-top:18px}
}
.pp :focus-visible{outline:2px solid var(--pp-marca);outline-offset:2px}
.pp__alca{width:40px;height:5px;border-radius:3px;background:#D3D9E0;margin:8px auto 0;flex:none}
.pp__topo{display:flex;align-items:center;gap:12px;padding:8px 12px 14px 20px;flex:none}
.pp__ic{width:44px;height:44px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;
  background:rgba(var(--rgb-dest),.12);color:var(--dest-tx)}
.pp__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pp__id b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.pp__id span{
  font-size:13px;color:var(--muted);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pp__x{
  width:44px;height:44px;border-radius:50%;border:0;flex:none;padding:0;
  display:grid;place-items:center;background:var(--gray);color:var(--ink);
}
.pp__prog{display:flex;gap:6px;padding:0 20px 14px;flex:none;position:relative;z-index:2;transition:box-shadow .2s}
.pp.is-rolado .pp__prog{box-shadow:0 1px 0 var(--line)}
.pp__prog i{flex:1;height:4px;border-radius:4px;background:var(--gray-2);overflow:hidden;position:relative}
.pp__prog i::after{
  content:"";position:absolute;inset:0;border-radius:4px;background:var(--pp-marca);
  transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--pp-mola);
}
.pp__prog i.is-on::after{transform:scaleX(1)}
.pp__corpo{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  position:relative;padding:0 20px;-webkit-overflow-scrolling:touch;
}
.pp.is-rolado .pp__corpo{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 22px);
}
.pp-passo{padding:12px 0 24px}
.pp-passo[hidden]{display:none}
.pp-passo[data-passo="1"]:not([hidden]),.pp-passo[data-passo="4"]:not([hidden]){display:flex;flex-direction:column;min-height:100%}
.pp-passo[data-passo="2"]{padding-bottom:44px}
.pp-eb{font-size:13px;font-weight:650;color:var(--dest-tx);margin:0 0 8px;letter-spacing:.01em}
.pp-tit{font-size:27px;line-height:1.14;font-weight:760;letter-spacing:-.022em;color:var(--ink);margin:0}
.pp-sub{font-size:15px;line-height:1.5;color:var(--muted);margin:10px 0 0}

/* passo 1: o valor grande, ja com o pedido */
.pp-oferta{
  margin-top:26px;background:var(--gray);border-radius:calc(var(--r-lg) + 14px);
  padding:22px 16px 28px;text-align:center;transition:background .25s,box-shadow .25s;cursor:text;
}
.pp-oferta:focus-within{background:var(--white);box-shadow:0 0 0 2px var(--pp-marca),0 16px 34px -20px rgba(var(--rgb),.5)}
.pp-oferta.is-erro{background:var(--pp-erro-bg);box-shadow:0 0 0 2px var(--pp-erro)}
.pp-oferta__rot{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);margin:0}
.pp-oferta__linha{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:12px}
.pp-oferta__rs{font-size:24px;font-weight:650;line-height:1.15;color:var(--muted);letter-spacing:-.01em}
.pp-oferta__in{
  font:780 46px/1.25 var(--font);color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;border:0;background:transparent;padding:0;margin:0;
  width:6ch;min-width:1ch;text-align:left;outline:none;caret-color:var(--dest);
}
.pp .pp-oferta__in:focus-visible{outline:none}
.pp-oferta__in::placeholder{font-size:1em}
.pp-oferta__medida{
  position:absolute;visibility:hidden;white-space:pre;left:-9999px;top:0;
  font:780 46px/1.15 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.pp-dif{display:flex;justify-content:center;margin-top:20px;min-height:38px}
.pp-dif:has(.pp-dif__pill[hidden]){min-height:0;margin-top:8px}
.pp-dif__pill{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 16px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:650;background:var(--pp-tinta);color:var(--pp-marca);
  font-variant-numeric:tabular-nums;
}
.pp-dif__pill[hidden]{display:none}
.pp-dif__pill.is-aviso{background:var(--pp-aviso-bg);color:var(--pp-aviso)}
.pp-dif__pill.is-muda{animation:ppMuda .35s var(--pp-suave)}
.pp-dif__pill svg{flex:none}
.pp-dif__pill em{font-style:normal;font-weight:500}
.pp-ped{font-size:13.5px;color:var(--muted);margin:12px 0 0;text-align:center;font-variant-numeric:tabular-nums}
.pp-ped b{color:var(--ink);font-weight:650}
.pp-nota{font-size:13.5px;color:var(--pp-aviso);text-align:center;margin:12px 0 0;line-height:1.45}
.pp-nota[hidden]{display:none}
.pp-calma{
  margin:auto 0 0;padding-top:28px;display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;line-height:1.5;color:var(--muted);
}
.pp-calma svg{flex:none;color:var(--pp-marca);margin-top:1px}

/* passo 2 */
.pp-seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--gray);
  border-radius:calc(var(--r-lg) + 6px);padding:4px;margin-top:22px;height:64px;
}
.pp-seg__thumb{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:calc(var(--r-lg) + 2px);
  background:var(--white);box-shadow:0 1px 2px rgba(var(--rgb),.12),0 6px 16px -6px rgba(var(--rgb),.22);
  transition:transform .5s var(--pp-mola);
}
.pp-seg[data-v="partes"] .pp-seg__thumb,.pp-seg[data-v="anual"] .pp-seg__thumb{transform:translateX(100%)}
.pp-seg button{
  position:relative;z-index:1;border:0;background:transparent;border-radius:calc(var(--r-lg) + 2px);padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);transition:color .25s;
}
.pp-seg button b{font-size:15.5px;font-weight:700;line-height:1.1}
.pp-seg button small{font-size:12.5px;font-weight:500;line-height:1.1;color:var(--muted)}
.pp-seg button[aria-checked="true"]{color:var(--ink)}
.pp-seg--p{height:52px;margin-top:14px;border-radius:calc(var(--r-lg) + 2px)}
.pp-seg--p .pp-seg__thumb{border-radius:calc(var(--r-lg) - 1px)}
.pp-seg--p button{font-size:14.5px;font-weight:650;line-height:1;border-radius:calc(var(--r-lg) - 1px)}
/* abre e fecha pela altura. O conteudo ganha 4px de folga de cada lado para
   o anel de foco nunca sair cortado pela dobra. */
.pp-dobra{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--pp-suave),opacity .3s}
.pp-dobra>div{min-height:0;overflow:hidden;padding:4px;margin:-4px}
.pp-dobra[data-aberto="true"]{grid-template-rows:1fr;opacity:1}
.pp-avista{margin-top:18px;border-radius:calc(var(--r-lg) + 8px);background:var(--gray);padding:18px}
.pp-avista__linha{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.pp-avista__linha span{font-size:14.5px;color:var(--muted)}
.pp-avista__linha b{font-size:20px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pp-avista p{font-size:14px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.pp-cartao{
  background:var(--white);border:1px solid var(--line);border-radius:calc(var(--r-lg) + 10px);padding:16px;margin-top:12px;
  box-shadow:0 1px 2px rgba(var(--rgb),.05),0 8px 20px -16px rgba(var(--rgb),.3);
}
.pp-cartao:first-child{margin-top:18px}
.pp-cartao__cab{display:flex;align-items:center;gap:12px;min-height:44px}
.pp-cartao__ic{
  width:40px;height:40px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;
  background:var(--pp-tinta);color:var(--pp-marca);
}
.pp-cartao__nome{flex:1;min-width:0;font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.2}
.pp-cartao__nome small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.pp-cartao__val{font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-cartao__val b{font-size:15.5px;font-weight:700;color:var(--ink)}
.pp-cartao__val:empty{display:none}
/* o valor do cabecalho sai quando empurraria o nome para fora (valor grande
   em tela estreita); a soma embaixo continua dizendo o total. O app.js mede. */
.pp-cartao__cab.is-sem-valor .pp-cartao__val{display:none}
.pp-cartao__nota{margin:8px 0 0 52px;font-size:14px;line-height:1.45;color:var(--muted)}
.pp-cartao__nota[hidden]{display:none}
/* o total das parcelas fica embaixo da caixa do valor, alinhado com ela */
.pp-cartao__tot{margin:10px 0 0 16px}
.pp-cartao>.pp-campo,.pp-cartao>.pp-pills,.pp-cartao>.pp-parcela{margin-top:14px}
.pp-cartao>.pp-campo+.pp-pills{margin-top:10px}
.pp-cartao .pp-dobra>div>:first-child{margin-top:12px}
.pp-cartao .pp-dobra>div>*+*{margin-top:12px}
.pp-campo{
  display:flex;align-items:center;height:56px;border-radius:calc(var(--r-lg) + 4px);background:var(--gray);
  padding:0 16px;gap:8px;transition:background .2s,box-shadow .2s;
}
.pp-campo:focus-within{background:var(--white);box-shadow:0 0 0 2px var(--pp-marca)}
.pp-campo.is-aviso{background:var(--pp-aviso-bg);box-shadow:0 0 0 1.5px var(--pp-aviso-borda)}
.pp-campo.is-pisca,.pp-parcela.is-pisca{animation:ppPisca .9s ease}
.pp-campo__pre{font-size:16px;font-weight:600;color:var(--muted);flex:none}
.pp-campo input{
  flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0;outline:none;
  font:650 18px/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums;
}
.pp .pp-campo input:focus-visible{outline:none}
.pp-campo__suf{font-size:14px;color:var(--muted);white-space:nowrap;flex:none}
.pp-pills{display:flex;gap:8px;flex-wrap:wrap}
.pp-pill{
  height:44px;min-width:58px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--white);color:var(--ink);font:650 14.5px/1 var(--font);font-variant-numeric:tabular-nums;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s var(--pp-suave);
}
.pp-pill:active{transform:scale(.95)}
.pp-pill[aria-pressed="true"]{background:var(--pp-marca);border-color:var(--pp-marca);color:#fff}
.pp-pills--cheia{gap:6px}
.pp-pills--cheia .pp-pill{flex:1;min-width:0;padding:0 6px}
.pp-parcela{border-radius:calc(var(--r-lg) + 4px);background:var(--gray);transition:background .2s,box-shadow .2s}
.pp-parcela:focus-within{background:var(--white);box-shadow:0 0 0 2px var(--pp-marca)}
.pp-parcela .pp-campo,.pp-parcela .pp-campo:focus-within{
  background:transparent;box-shadow:none;border-radius:calc(var(--r-lg) + 4px) calc(var(--r-lg) + 4px) 0 0;
}
.pp-parcela__nota{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;
  padding:0 6px 0 16px;border-top:1px solid #E1E6EC;
  border-radius:0 0 calc(var(--r-lg) + 4px) calc(var(--r-lg) + 4px);transition:background-color .25s;
}
.pp-parcela.is-auto .pp-parcela__nota{
  /* a tinta sobre o branco, e nao sobre o cinza do campo: e contra o branco
     que o --cor-tx do texto foi medido */
  background:linear-gradient(var(--pp-tinta),var(--pp-tinta)),var(--white);border-top-color:rgba(var(--rgb),.12);
}
.pp-tag{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--pp-marca);line-height:1.2}
.pp-tag svg{flex:none}
.pp-tag.is-manual{color:var(--muted)}
.pp-recalc{
  height:44px;border:0;background:transparent;padding:0 10px;color:var(--pp-marca);
  font:650 14px/1 var(--font);text-decoration:underline;text-underline-offset:3px;
}
.pp-recalc[hidden]{display:none}
.pp-chave{width:60px;height:44px;border:0;background:transparent;padding:0;flex:none;display:grid;place-items:center}
.pp-chave i{width:52px;height:32px;border-radius:var(--r-pill);background:#C7CFD8;position:relative;transition:background .25s}
.pp-chave i::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(8,17,29,.25);transition:transform .45s var(--pp-mola);
}
.pp-chave[aria-checked="true"] i{background:var(--pp-marca)}
.pp-chave[aria-checked="true"] i::after{transform:translateX(20px)}
.pp-ref-qtd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-ref-qtd>span{font-size:15px;font-weight:600;color:var(--ink)}
.pp-contador{
  display:flex;align-items:center;height:52px;border-radius:calc(var(--r-lg) + 4px);background:var(--gray);
  flex:none;padding:0 6px;gap:2px;
}
.pp-contador button{
  width:44px;height:44px;border-radius:var(--r-lg);border:0;background:var(--white);color:var(--ink);padding:0;
  display:grid;place-items:center;box-shadow:0 1px 2px rgba(var(--rgb),.12);
  transition:opacity .2s,transform .15s var(--pp-suave);
}
.pp-contador button:active{transform:scale(.92)}
.pp-contador button[aria-disabled="true"]{opacity:.4;box-shadow:none}
.pp-contador output{min-width:34px;text-align:center;font:700 18px/1.25 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.pp-contador.is-aviso{background:var(--pp-aviso-bg);box-shadow:0 0 0 1.5px var(--pp-aviso-borda)}
.pp-dica{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.45;display:flex;gap:7px;align-items:flex-start}
.pp-dica svg{flex:none;margin-top:1px}
.pp-dica.is-aviso{color:var(--pp-aviso)}

/* passo 3 */
.pp-campo-tx{
  display:flex;align-items:center;height:60px;border-radius:calc(var(--r-lg) + 6px);background:var(--gray);
  padding:0 16px 0 18px;gap:10px;margin-top:20px;transition:background .2s,box-shadow .2s;
}
.pp-campo-tx:focus-within{background:var(--white);box-shadow:0 0 0 2px var(--pp-marca)}
.pp [data-campo].is-erro .pp-campo-tx{background:var(--pp-erro-bg);box-shadow:0 0 0 2px var(--pp-erro)}
.pp-campo-tx input{
  flex:1;min-width:0;height:100%;border:0;background:transparent;padding:0;outline:none;
  font:600 18px/1 var(--font);color:var(--ink);
}
.pp .pp-campo-tx input:focus-visible{outline:none}
.pp-campo-tx__ok{
  width:26px;height:26px;border-radius:50%;background:var(--pp-ok);color:#fff;flex:none;
  display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--pp-mola);
}
.pp-campo-tx.is-ok .pp-campo-tx__ok{transform:scale(1)}
.pp .vd__e{display:flex;align-items:center;gap:8px;color:var(--pp-erro);font-size:14px;font-weight:600;margin:10px 0 0;line-height:1.35}
.pp .vd__e:empty{display:none}
.pp .vd__e::before{
  content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.2'/%3E%3Ccircle cx='12' cy='16.3' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.2'/%3E%3Ccircle cx='12' cy='16.3' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* a previa imita a conversa do WhatsApp: estas cores sao as do aplicativo,
   iguais para toda imobiliaria, porque e la que a mensagem vai chegar */
.pp-zap{margin-top:24px}
.pp-zap__rot{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--muted);margin:0 0 10px}
.pp-zap__rot svg{flex:none}
.pp-zap__tela{
  border-radius:calc(var(--r-lg) + 10px);padding:18px 14px 16px;background-color:#EFE7DC;
  background-image:radial-gradient(rgba(120,100,70,.07) 1.2px,transparent 1.3px);background-size:14px 14px;
}
.pp-zap__balao{
  position:relative;margin-left:auto;max-width:94%;width:fit-content;
  background:#D9FDD3;border-radius:14px 4px 14px 14px;padding:9px 11px 7px 12px;
  font-size:14.5px;line-height:1.45;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.14);
  white-space:pre-wrap;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.pp-zap__balao::after{
  content:"";position:absolute;top:0;right:-7px;width:8px;height:12px;background:#D9FDD3;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.pp-zap__balao b{font-weight:700}
.pp-zap__tx{display:block}
.pp-zap__hora{display:block;text-align:right;font-size:11.5px;color:#46545E;margin-top:2px}
.pp-zap__vazio{color:#46545E}

/* o fim */
.pp-fim{display:flex;flex-direction:column;align-items:center;text-align:center;margin:auto 0;padding:24px 8px 40px}
.pp-fim__ic{
  width:84px;height:84px;border-radius:50%;background:var(--pp-ok-bg);color:var(--pp-ok);
  display:grid;place-items:center;margin-bottom:24px;
}
.pp-fim .pp-tit{font-size:25px}
.pp-fim .pp-sub{max-width:300px}

/* o pe da janela: a soma das partes, o aviso e os botoes */
.pp__pe{flex:none;padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--white)}
.pp__acoes{display:flex;gap:10px}
.pp__voltar{
  width:56px;height:56px;border-radius:50%;border:0;flex:none;padding:0;display:grid;place-items:center;
  background:var(--gray);color:var(--ink);transition:transform .15s var(--pp-suave);
}
.pp__voltar:active{transform:scale(.94)}
.pp__voltar[hidden]{display:none}
.pp__ir{
  flex:1;min-width:0;height:56px;border:0;border-radius:var(--r-pill);padding:0 16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pp-bt);color:var(--sobre-btn);
  box-shadow:0 10px 22px -12px rgba(var(--rgb-dest),.9);
  font:700 16.5px/1 var(--font);letter-spacing:.005em;transition:transform .15s var(--pp-suave);
}
.pp__ir:active{transform:scale(.97)}
.pp__ir svg{flex:none}
.pp__ir span{white-space:nowrap}
.pp__ir .pp-ic-zap{display:none}
/* o de enviar e o botao de WhatsApp do site: o par do "Falar no WhatsApp",
   liso, com o icone dele */
.pp__ir.is-zap{background:var(--dest-btn)}
.pp__ir.is-zap .pp-ic-zap{display:block}
.pp__ir.is-zap .pp-ic-seta,.pp__ir.is-fim .pp-ic-seta{display:none}
.pp__nota{font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0;line-height:1.4}
.pp__nota[hidden]{display:none}
.pp-soma{
  border-radius:calc(var(--r-lg) + 6px);background:var(--gray);padding:13px 14px 14px;margin-bottom:12px;
  transition:background-color .35s;
}
.pp-soma__linha{display:flex;align-items:center;gap:11px}
.pp-soma__ic{position:relative;width:28px;height:28px;flex:none}
.pp-soma__ic svg{position:absolute;inset:0}
.pp-soma__ic .c-ok{opacity:0;transition:opacity .2s}
.pp-soma__ic .c-ok circle{fill:var(--pp-ok)}
.pp-soma__ic .c-ok path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1) .12s}
.pp-soma__ic .c-av{color:var(--dest-tx);transition:opacity .2s}
.pp-soma.is-ok .c-ok{opacity:1}
.pp-soma.is-ok .c-ok path{stroke-dashoffset:0}
.pp-soma.is-ok .c-av{opacity:0}
.pp-soma.is-erro .c-av{color:var(--pp-erro)}
.pp-soma__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pp-soma__tx b{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums}
.pp-soma__tx span{font-size:13px;color:var(--muted);line-height:1.35;font-variant-numeric:tabular-nums}
.pp-soma__pct{font-size:14px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.pp-soma__trilho{height:6px;border-radius:6px;background:var(--line);margin-top:12px;overflow:hidden}
.pp-soma__trilho i{
  display:block;height:100%;width:0;border-radius:6px;background:var(--dest);
  transition:width .7s var(--pp-mola),background-color .35s;
}
.pp-soma.is-ok{background:var(--pp-ok-bg)}
.pp-soma.is-ok .pp-soma__trilho{background:#CBE6D6}
.pp-soma.is-ok .pp-soma__trilho i{background:var(--pp-ok)}
.pp-soma.is-erro .pp-soma__trilho i{background:var(--pp-erro)}
/* a barra so faz sentido quando o problema e a soma: nos outros ela diria
   "100%" mentindo */
.pp-soma.sem-barra .pp-soma__trilho{display:none}
.pp-soma.is-pop{animation:ppPop .5s var(--pp-mola)}
.pp-soma__porque{font-size:13.5px;font-weight:650;color:var(--pp-erro);margin:10px 0 0;line-height:1.4}
.pp-soma__porque[hidden]{display:none}
.pp-fix{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pp-fix:empty{display:none}
/* o conserto em estilo claro: o unico botao forte da janela e o de avancar */
.pp-fix button{
  height:44px;padding:0 16px;border-radius:var(--r-pill);border:0;background:var(--white);color:var(--pp-marca);
  font:700 14px/1 var(--font);display:inline-flex;align-items:center;gap:7px;
  box-shadow:inset 0 0 0 1px #CFD8E2,0 1px 2px rgba(var(--rgb),.08);transition:transform .15s var(--pp-suave);
}
.pp-fix button:active{transform:scale(.96)}
.pp-aviso{margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.pp-aviso[hidden]{display:none}
.pp-aviso p{margin:0;font-size:14px;font-weight:650;color:var(--pp-erro);display:flex;gap:8px;align-items:center;line-height:1.35}
.pp-aviso p svg{flex:none}
.pp-aviso .pp-fix{margin-top:0}
.pp-treme{animation:ppTreme .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes ppSobe{from{transform:translateY(100%)}to{transform:none}}
@keyframes ppAparece{from{opacity:0}to{opacity:1}}
@keyframes ppMuda{from{transform:translateY(4px);opacity:.4}to{transform:none;opacity:1}}
@keyframes ppPisca{0%,100%{box-shadow:0 0 0 0 rgba(var(--rgb),0)}30%{box-shadow:0 0 0 3px rgba(var(--rgb),.35)}}
@keyframes ppPop{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes ppTreme{
  10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}
}
/* 320px: o que mora lado a lado no cartao aperta, e o valor do reforco (que
   ja aparece na soma embaixo) sai do cabecalho para o nome caber */
@media (max-width:359px){
  .pp-cartao{padding:14px}
  .pp-cartao__cab{gap:10px}
  .pp-cartao__nome{font-size:15.5px}
  .pp-cartao__nota{margin-left:0}
  #ppRefSub{display:none}
  .pp-pills--cheia .pp-pill{padding:0 2px;font-size:14px}
  .pp__ir{font-size:15px;gap:8px;padding:0 12px}
}
/* menos movimento: o que se desloca troca na hora, e o que esmaece continua
   esmaecendo */
@media (prefers-reduced-motion:reduce){
  .pp-barra{animation:ppAparece .3s ease both}
  .pp{transition:transform 1ms,opacity .2s ease,visibility 0s linear .2s}
  .pp.is-on{transition:transform 1ms,opacity .2s ease,visibility 0s}
  .pp-seg__thumb,.pp-chave i::after,.pp__prog i::after,.pp-soma__trilho i,.pp-campo-tx__ok,.pp-dobra{transition-duration:1ms}
  .pp-dif__pill.is-muda,.pp-soma.is-pop,.pp-treme,.pp-campo.is-pisca,.pp-parcela.is-pisca{animation:none}
  .pp-barra__bt:active,.pp__ir:active,.pp__voltar:active,.pp-pill:active,.pp-fix button:active,.pp-contador button:active{transform:none}
}

/* ======================================================================
   O SITE PREMIUM (redesenho aprovado por ele no Claude Design, 05/10/2026, D144).
   Vale para todos os sites: tudo sai de --cor, --cor-esc, --cor-tx e --rgb.
   Vidro nos cartoes, fundo claro com manchas suaves, nome do predio em
   destaque, barra de filtros fixa e gaveta de filtros. A capa e o Onde
   ficamos nao mudam. Quem prefere menos movimento recebe tudo parado. */
.oa__ir-t{white-space:nowrap}
/* o cartao do imovel, na home, na busca e nos Semelhantes */
.card{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);border-radius:26px;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 50px -30px rgba(var(--rgb),.45);padding:10px;overflow:visible;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 70px -34px rgba(var(--rgb),.55)}
.card__media{border-radius:18px;overflow:hidden}
.card__media img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:16px 10px 6px}
.card__foot{border-top:1px solid rgba(var(--rgb),.1);padding:14px 10px 6px}
.card__tit{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__nome{display:block;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--cor-tx)}
.card__sub{display:block;margin-top:3px;font-size:14px;font-weight:500;line-height:1.35;color:var(--muted)}
.sec--gray{background:transparent}
/* o fundo claro com manchas, nas tres paginas */
body[data-pagina="home"],body[data-pagina="venda"],body[data-pagina="imovel"]{background:linear-gradient(180deg,#fff 0,#F1F6F6 50%,#EDF3F3 100%)}
body[data-pagina="home"] main .sec:not(.hero){position:relative;background:transparent}
body[data-pagina="home"] .page{position:relative}
body[data-pagina="home"] .page::before{content:"";position:absolute;left:0;right:0;top:100vh;height:1400px;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 30% at 15% 20%,rgba(var(--rgb),.16),transparent 70%),radial-gradient(35% 28% at 85% 45%,rgba(176,138,78,.14),transparent 70%),radial-gradient(40% 30% at 30% 85%,rgba(var(--rgb),.12),transparent 70%);filter:blur(10px)}
body[data-pagina="venda"] .page::before,body[data-pagina="imovel"] .page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 10% 25%,rgba(var(--rgb),.14),transparent 70%),radial-gradient(35% 30% at 90% 60%,rgba(176,138,78,.12),transparent 70%)}
body[data-pagina="venda"] .page,body[data-pagina="imovel"] .page{position:relative}
body[data-pagina="home"] .sec__hd h2{font-weight:700;letter-spacing:-.025em}
body[data-pagina="home"] .sec__hd h2::after{display:none}
/* o rodape em gradiente, com painel de vidro */
.ft{background-color:var(--cor);background-image:linear-gradient(180deg,var(--cor) 0%,var(--cor-esc) 100%);position:relative;overflow:hidden}
.ft::before{content:"";position:absolute;right:-200px;top:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);pointer-events:none}
.ft__grid{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:34px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* a busca: barra fixa, contador grande, cartoes entrando em sequencia, gaveta de filtros */
@keyframes premiumEntra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
body[data-pagina="venda"] .cards>.card{animation:premiumEntra .7s cubic-bezier(.2,.8,.2,1) both}
body[data-pagina="venda"] .cards>.card:nth-child(2){animation-delay:.06s}
body[data-pagina="venda"] .cards>.card:nth-child(3){animation-delay:.12s}
body[data-pagina="venda"] .cards>.card:nth-child(4){animation-delay:.18s}
body[data-pagina="venda"] .cards>.card:nth-child(5){animation-delay:.24s}
body[data-pagina="venda"] .cards>.card:nth-child(6){animation-delay:.3s}
.bbar{position:sticky;top:70px;z-index:30;background:rgba(251,253,253,.92);border-bottom:1px solid rgba(255,255,255,.9);box-shadow:0 18px 40px -30px rgba(var(--rgb),.5)}
.bbar .dd>.dd__btn,.bbar .bbar__filtros,.bbar .bbar__mapa{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 0 #fff inset,0 8px 18px -12px rgba(var(--rgb),.45);border-radius:999px}
.rbar{padding-top:28px}
.rbar__n{display:flex;align-items:baseline;gap:8px;font-size:19px;white-space:nowrap}
.rbar__n b{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--cor-tx)}
.fmodal{place-items:stretch end;padding:12px}
.fmodal__caixa{width:min(460px,100%);max-height:none;height:100%;border-radius:26px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid #fff;box-shadow:0 40px 90px -30px rgba(var(--rgb),.6);animation:premiumGaveta .45s cubic-bezier(.2,.8,.2,1);overflow:hidden}
@keyframes premiumGaveta{from{transform:translateX(48px);opacity:0}}
.fmodal__hd{grid-template-columns:1fr 44px;padding:20px 18px 12px 26px;border:0}
.fmodal__hd h2{order:-1;text-align:left;font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--ink,#1A1F22);margin:0}
.fmodal__x{border:0;background:rgba(var(--rgb),.08);transition:transform .3s,background .2s}
.fmodal__x:hover{transform:rotate(90deg);background:rgba(var(--rgb),.14)}
.fmodal__cp{overflow-x:hidden;padding:0 26px}
.fmodal .fgrp{padding:18px 0;border-color:rgba(var(--rgb),.1)}
.fmodal .fgrp__lb{font-size:15px;color:var(--ink,#1A1F22)}
.fmodal .fgrp__ic{color:var(--cor-tx)}
.fmodal .fgrp *:has(> .fpill){display:flex;flex-wrap:wrap;gap:8px;grid-template-columns:none;overflow:visible}
.fmodal .fpill{flex:0 0 auto;width:auto;white-space:nowrap;height:42px;min-height:0;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border:1px solid rgba(var(--rgb),.16);transition:transform .2s,background .2s,border-color .2s}
.fmodal .fpill:hover{transform:translateY(-1px);border-color:rgba(var(--rgb),.4)}
.fmodal .fpill[aria-pressed=true],.fmodal .fpill.is-on{background:var(--cor);border-color:var(--cor);color:var(--sobre-cor)}
.fmodal .fpill__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:rgba(var(--rgb),.1);font-size:11.5px;font-weight:700}
.fmodal .fpill[aria-pressed=true] .fpill__n,.fmodal .fpill.is-on .fpill__n{background:rgba(255,255,255,.22);color:var(--sobre-cor)}
.fmodal__pe{padding:16px 22px 22px;border:0;box-shadow:0 -14px 30px -20px rgba(var(--rgb),.35)}
.fmodal__limpar{white-space:nowrap;text-decoration:none;color:var(--muted);padding:0 10px}
.fmodal__limpar:hover{color:var(--ink,#1A1F22)}
.fmodal__pe .btn{flex:1;height:56px;border-radius:999px;font-size:16px}
/* a ficha do imovel */
body[data-pagina="imovel"] .pdp__hd,body[data-pagina="imovel"] .gal2,body[data-pagina="imovel"] .pdp__cols>*{animation:premiumEntra .8s cubic-bezier(.2,.8,.2,1) both}
body[data-pagina="imovel"] .gal2{animation-delay:.08s}
body[data-pagina="imovel"] .pdp__cols>*{animation-delay:.16s}
.pdp__hd h1 .card__nome{font-size:clamp(34px,4vw,54px);letter-spacing:-.04em;line-height:1}
.pdp__hd h1 .card__sub{margin-top:10px;font-size:17px;letter-spacing:0;line-height:1.4}
.gal2{border-radius:28px;overflow:hidden;gap:8px}
.gal2__t{border-radius:0}
.gal2__t img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.gal2__t:hover img{transform:scale(1.05)}
.pdp__cols{gap:28px;align-items:start}
.pdp__main{min-width:0}
.pdp__hd{position:relative;z-index:20}
.compart,.compart-menu{z-index:30}
.compart-menu{position:absolute;min-width:220px}
.compart-menu__it,.compart-menu__it span{white-space:nowrap}
.pdp__crumb a,.gal2__bar span{white-space:nowrap}
.sec__hd a,.sec__hd .btn{white-space:nowrap}
.pdp__local{white-space:nowrap}
.aside{position:sticky;top:96px;padding:28px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-radius:26px;
  box-shadow:0 1px 0 #fff inset,0 2px 6px rgba(var(--rgb),.06),0 24px 48px -18px rgba(var(--rgb),.35),0 60px 110px -40px rgba(var(--rgb),.55);transform:translateY(-6px);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.aside:hover{transform:translateY(-10px);box-shadow:0 1px 0 #fff inset,0 2px 6px rgba(var(--rgb),.06),0 30px 60px -18px rgba(var(--rgb),.42),0 80px 130px -40px rgba(var(--rgb),.62)}
.aside__v{font-size:clamp(32px,3vw,40px);font-weight:800;letter-spacing:-.035em}
.aside__bt{height:56px;font-size:16px;border-radius:14px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.aside__bt:hover{transform:translateY(-2px)}
.onde__mapa{border-radius:20px;overflow:hidden}
.cta__in{position:relative;padding-bottom:56px}
.cta__in::after{content:"";position:absolute;left:var(--gutter,24px);right:var(--gutter,24px);bottom:0;height:1px;background:rgba(255,255,255,.18)}
/* o divisor entre os imoveis em destaque e o Onde ficamos: uma linha fina que some nas pontas */
body[data-pagina="home"] .oa{padding-top:0}
body[data-pagina="home"] .oa .container::before{content:"";display:block;height:1px;margin-bottom:clamp(28px,3.4vw,44px);background:linear-gradient(90deg,transparent,rgba(var(--rgb),.28) 18%,rgba(var(--rgb),.28) 82%,transparent)}
/* o cartao pequeno que abre no mapa: sem vidro e sem folga, para caber em metade do mapa */
.mprev .card{padding:0;background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--r-lg);overflow:hidden}
.mprev .card__media{border-radius:0}
.mprev .card__body{padding:12px 14px 6px}
.mprev .card__foot{padding:10px 14px 12px}
.mprev .card__nome{font-size:1.05rem}
.mprev .card__sub{font-size:.8rem;margin-top:1px}
@media (prefers-reduced-motion:reduce){
  .card,.card__media img,.gal2__t img,.aside,.aside__bt,.fmodal__caixa{transition:none;animation:none}
  body[data-pagina="venda"] .cards>.card,body[data-pagina="imovel"] .pdp__hd,body[data-pagina="imovel"] .gal2,body[data-pagina="imovel"] .pdp__cols>*{animation:none}
  .card:hover,.aside,.aside:hover{transform:none}
}

/* --- injetado pelo app.js no protótipo --- */
.dd{position:relative;min-width:0}
.dd__btn{display:flex;align-items:center;gap:9px;width:100%;height:46px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  font-size:var(--fs-body);color:var(--ink);text-align:left;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);}
.dd__btn:hover{border-color:#B9C4CF}
.dd.is-open .dd__btn{border-color:var(--cor);box-shadow:var(--ring)}
.dd__ico{color:var(--dest);flex-shrink:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px}
.dd__ico svg{display:block;width:16px;height:16px}
.dd__lb{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__chev{flex-shrink:0;color:var(--muted);transition:transform var(--t) var(--ease)}
.dd.is-open .dd__chev{transform:rotate(180deg)}
.dd__pan{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  max-height:min(66vh,430px);overflow-y:auto;overscroll-behavior:contain;padding:6px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 44px -20px rgba(var(--rgb),.45);
  animation:ddIn .16s var(--ease-out);}
.dd__pan[hidden]{display:none}
@keyframes ddIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.dd__grp{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#77838F;padding:13px 10px 5px;margin-top:5px;border-top:1px solid var(--line)}
.dd__opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:0;background:transparent;border-radius:var(--r);text-align:left;
  font-size:var(--fs-body);color:var(--ink);transition:background var(--t-fast)}
.dd__opt>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__opt b{font-weight:600;font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.dd__opt:hover,.dd__opt.is-foco{background:var(--gray)}
.dd__opt.is-on{font-weight:600;color:var(--cor);background:transparent}
.dd__opt.is-on:hover,.dd__opt.is-on.is-foco{background:var(--gray)}
.dd__opt.is-on b{color:var(--cor)}
.dd__ck{color:var(--dest);flex-shrink:0}
@media (prefers-reduced-motion:reduce){.dd__pan{animation:none}.dd__chev{transition:none}}
/* O cartao de preco da ficha mudou de desenho no lote F do Plano 5 (tela 16,
   variacao 4) e o CSS dele mora no estilo-base.css, junto do componente.
   As regras de .aside__price, __meta, __body, __tel e __fav que moravam aqui
   sairam com as classes: nenhuma pagina as escreve mais. */
/* --muted (#5A6672), e nao o #8A96A3 que estava aqui.
   Medido com `node _scripts/medir.mjs` em 04/09/2026: o cinza claro sobre
   o branco do card dava 3,01:1 em texto de 11px, que precisa de 4,5:1.
   `design/LEI.md` e explicita: cinza claro "por elegancia" e proibido,
   e cinza dessa familia so serve para borda, icone decorativo e
   separador - nunca para texto. Com --muted da 5,9:1. */
.aside__note{font-size:11px;line-height:1.45;color:var(--muted)}
.pdp__local{display:flex;align-items:center;gap:8px;margin:22px 0 0;
  font-size:var(--fs-body);color:var(--muted)}
.pdp__local strong{color:var(--cor-tx)}
.pdp__local svg{color:var(--dest);flex-shrink:0}
.dbody{max-width:78ch}
.pdp__desc>h2{max-width:78ch}

@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtRecua .30s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vtFolha .44s cubic-bezier(.19,.86,.24,1) both}
  @keyframes vtRecua{to{opacity:0;transform:scale(.972);filter:brightness(.82)}}
  @keyframes vtFolha{from{opacity:0;transform:translateY(26px) scale(.994)}}
  /* voltar: inverte o sentido, a folha desce e a listagem volta da profundidade */
  html[data-nav="tras"] ::view-transition-old(root){animation:vtDesce .28s cubic-bezier(.4,0,.2,1) both}
  html[data-nav="tras"] ::view-transition-new(root){animation:vtVolta .40s cubic-bezier(.19,.86,.24,1) both}
  @keyframes vtDesce{to{opacity:0;transform:translateY(26px)}}
  @keyframes vtVolta{from{opacity:0;transform:scale(.978);filter:brightness(.86)}}
}

.pag a{
  min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);
  background:var(--white);border-radius:var(--r);font-size:var(--fs-sm);
  display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--t-fast);
}
.pag a:hover{border-color:var(--cor);color:var(--cor)}
.pag a.is-on{background:var(--cor);border-color:var(--cor);color:var(--sobre-cor);font-weight:600}
.pag a.is-off{opacity:.35;pointer-events:none}

/* --- o tema desta imobiliária --- */
:root{--font:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--r-sm:5px;--r:9px;--r-lg:12px;--r-pill:100px;--fs-display:clamp(2.25rem, 1.3rem + 3.6vw, 4rem);--fs-h2:clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);--pad:clamp(18px, 4vw, 32px);--gap-section:clamp(48px, 6vw, 88px);--shadow-card:0 2px 4px rgba(var(--rgb),.08);--shadow-hover:0 20px 44px -18px rgba(var(--rgb),.40);--shadow-lift:0 28px 56px -24px rgba(var(--rgb),.46),0 6px 16px -8px rgba(var(--rgb),.28);}h1,h2,h3{font-weight:800;letter-spacing:-.03em}.eyebrow{letter-spacing:.3em;font-weight:700}

/* --- a cor desta imobiliária --- */
:root{--cor:#14375E;--cor-esc:#102b49;--cor-tx:#14375E;--sobre-cor:#FFFFFF;--dest:#F08000;--dest-esc:#bb6400;--sobre-dest:#1C1917;--dest-btn:#b25f00;--sobre-btn:#FFFFFF;--dest-btn-hover:#9d5400;--rgb:20,55,94;--rgb-dest:240,128,0;--rgb-esc:16,43,73;--rgb-veu:40,42,48;--grifo:#e27800;--dest-tx:#a85a00}