/* ============================================================
   Adriana Rocha Imóveis · folha de estilo do site
   ============================================================ */
:root{
  /* fonte dos titulos em UM lugar so: trocar aqui muda o site inteiro.
     A Fraunces esta PROIBIDA (virou cara de site gerado por IA), assim como
     Cormorant Garamond e Bodoni Moda, que o cliente ja reprovou. */
  --serif:'Newsreader',Georgia,serif;
  --verde:#123B34;
  --verde-esc:#0C2A25;
  --verde-claro:#1C5449;
  --ouro:#C2A06B;
  --ouro-claro:#E3D2AF;
  --areia:#F7F3EC;
  --areia-2:#F1EBE0;
  --grafite:#25302C;
  --cinza:#6C7873;
  /* o unico vermelho do site: so o selo de imovel vendido usa */
  --vermelho:#C62828;
  --linha:#E4DDD1;
  --sombra:0 18px 44px rgba(18,59,52,.10);
  --sombra-alta:0 28px 64px rgba(18,59,52,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{ scroll-behavior:smooth; scroll-padding-top:96px }
body{
  font-family:'Montserrat',"Segoe UI",Arial,sans-serif;
  color:var(--grafite); background:#fff; font-size:15.5px; line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto e obrigatorio: sem ele o atributo height do <img> vira altura fixa
   e a foto estica quando o CSS mexe so na largura */
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
.env{ width:min(1200px,90vw); margin:0 auto }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; color:var(--verde); line-height:1.15 }
.kicker{
  display:inline-block; font-size:10px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ouro); margin-bottom:16px;
}

/* ---------- entrada suave ---------- */
.anim .rev{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.22,.7,.28,1), transform .9s cubic-bezier(.22,.7,.28,1) }
.anim .rev.ok{ opacity:1; transform:none }
.anim .rev.esq{ transform:translateX(-30px) } .anim .rev.esq.ok{ transform:none }
.anim .rev.zoom{ transform:scale(.965) }      .anim .rev.zoom.ok{ transform:none }
@media (prefers-reduced-motion:reduce){
  .anim .rev{ opacity:1; transform:none; transition:none } html{ scroll-behavior:auto }
}

/* ---------- detalhes de fundo ---------- */
.tem-detalhe{ position:relative; overflow:hidden }
.tem-detalhe > .env, .tem-detalhe > .env-largo{ position:relative; z-index:2 }
.det{ position:absolute; pointer-events:none; z-index:0 }
.det-aro{ border:1px solid var(--ouro); border-radius:50%; opacity:.10 }
.det-aro.a{ width:46vmin; height:46vmin; top:-14vmin; right:-12vmin }
.det-aro.b{ width:30vmin; height:30vmin; bottom:-12vmin; left:-8vmin; opacity:.08 }
.det-mono{ width:min(560px,52vw); opacity:.035; right:-6%; bottom:-14% }
.det-mono.esq{ right:auto; left:-8%; top:-10%; bottom:auto }
.det-linhas{
  inset:0; opacity:.5;
  background-image:repeating-linear-gradient(115deg, rgba(194,160,107,.07) 0 1px, transparent 1px 78px);
}
.claro .det-aro{ border-color:var(--ouro); opacity:.16 }
.escuro .det-aro{ border-color:var(--ouro-claro); opacity:.14 }
.escuro .det-mono{ opacity:.05 }

/* ---------- topo ---------- */
header{
  position:sticky; top:0; z-index:50; padding:16px 0; background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
header.solido{ background:#fff; box-shadow:0 6px 30px rgba(18,59,52,.09); padding:9px 0 }
header.fixo{ background:#fff; box-shadow:0 6px 30px rgba(18,59,52,.09) }
.topo{ display:flex; align-items:center; justify-content:space-between; gap:26px }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; position:relative; z-index:70 }
.logo svg{ width:58px; height:58px; flex:0 0 58px; color:#fff; transition:width .35s ease, height .35s ease, color .35s ease }
header.solido .logo svg, header.fixo .logo svg{ width:48px; height:48px; color:var(--verde) }
.logo .n{
  font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; line-height:1; white-space:nowrap; transition:color .35s ease;
}
.logo .s{ font-size:7.5px; font-weight:500; letter-spacing:.44em; text-transform:uppercase; color:var(--ouro); margin-top:5px; padding-left:.44em }
header.solido .logo .n, header.fixo .logo .n{ color:var(--verde) }
nav{ display:flex; align-items:center; gap:28px }
nav a{
  position:relative; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:rgba(255,255,255,.9); transition:color .3s ease;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px;
  background:var(--ouro); transition:width .35s cubic-bezier(.22,.7,.28,1);
}
nav a:hover{ color:var(--ouro-claro) } nav a:hover::after{ width:100% }
nav a.aqui::after{ width:100% }
header.solido nav a, header.fixo nav a{ color:var(--verde) }
header.solido nav a:hover, header.fixo nav a:hover{ color:var(--ouro) }

.menu-bt{ display:none; background:none; border:0; cursor:pointer; color:#fff; padding:6px }
.menu-bt svg{ width:26px; height:26px }
header.solido .menu-bt, header.fixo .menu-bt{ color:var(--verde) }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; cursor:pointer;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 26px; border-radius:100px; border:1px solid transparent;
  transition:transform .3s cubic-bezier(.22,.7,.28,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn svg{ width:16px; height:16px }
.btn-ouro{ background:var(--ouro); color:#10322C; box-shadow:0 10px 28px rgba(194,160,107,.32) }
.btn-ouro:hover{ background:var(--ouro-claro); transform:translateY(-3px); box-shadow:0 16px 34px rgba(194,160,107,.4) }
.btn-verde{ background:var(--verde); color:#fff; box-shadow:0 10px 28px rgba(18,59,52,.22) }
.btn-verde:hover{ background:var(--verde-claro); transform:translateY(-3px) }
.btn-vidro{ border-color:rgba(255,255,255,.45); color:#fff }
.btn-vidro:hover{ border-color:var(--ouro); color:var(--ouro-claro); transform:translateY(-3px) }
.btn-linha{ border-color:var(--linha); color:var(--verde) }
.btn-linha:hover{ border-color:var(--ouro); color:var(--ouro); transform:translateY(-3px) }

/* ---------- hero da home ---------- */
.hero{ position:relative; margin-top:-92px; padding:190px 0 120px; overflow:hidden; color:#fff }
.hero .fundo{ position:absolute; inset:0; z-index:0; background:var(--verde-esc) }
.hero .fundo img, .hero .fundo video{ width:100%; height:100%; object-fit:cover }
.hero .fundo img{ transform:scale(1.06); animation:respira 20s ease-in-out infinite alternate }
@keyframes respira{ to{ transform:scale(1) } }
.hero .veu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,42,37,.9) 0%, rgba(12,42,37,.62) 42%, rgba(12,42,37,.94) 100%);
}
.hero .env{ position:relative; z-index:2 }
.hero h1{ color:#fff; font-size:clamp(34px,5vw,58px); font-weight:500; max-width:22ch }
.hero h1 em{ font-style:italic; color:var(--ouro-claro) }
.hero .sub{ max-width:56ch; margin-top:22px; color:rgba(247,243,236,.84); font-size:clamp(15px,1.5vw,17px); font-weight:300 }
.hero .acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px }
.cidades{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:52px; padding-top:24px;
  border-top:1px solid rgba(247,243,236,.18);
}
.cidades span{ font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:rgba(247,243,236,.75) }
.cidades span b{ color:var(--ouro); font-weight:600 }

/* ---------- capa das páginas internas ---------- */
.capa{ position:relative; margin-top:-92px; padding:180px 0 74px; overflow:hidden; color:#fff }
.capa .fundo{ position:absolute; inset:0; z-index:0; background:var(--verde-esc) }
.capa .fundo img{ width:100%; height:100%; object-fit:cover }
.capa .veu{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(12,42,37,.92) 0%, rgba(12,42,37,.72) 60%, rgba(12,42,37,.94) 100%) }
.capa .env{ position:relative; z-index:2 }
.capa h1{ color:#fff; font-size:clamp(32px,4.6vw,52px); font-weight:500; max-width:20ch }
.capa h1 em{ font-style:italic; color:var(--ouro-claro) }
.capa p{ max-width:60ch; margin-top:18px; color:rgba(247,243,236,.8); font-weight:300 }
.migalhas{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,243,236,.55); margin-bottom:14px }
.migalhas a{ text-decoration:none; color:var(--ouro) }

/* ---------- faixa de selos ---------- */
.selos{ background:var(--areia); border-bottom:1px solid var(--linha) }
.selos .env{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; padding:46px 0 }
.selo{ display:flex; gap:16px; align-items:flex-start }
.selo svg{ width:30px; height:30px; color:var(--ouro); flex:0 0 30px; margin-top:3px }
.selo h3{ font-size:19px; margin-bottom:3px }
.selo p{ font-size:13.5px; color:var(--cinza); line-height:1.6; font-weight:300 }

/* ---------- seções ---------- */
section{ padding:clamp(70px,8vw,112px) 0 }
.cab{ max-width:680px; margin:0 auto clamp(40px,5vw,60px); text-align:center }
.cab.esq{ margin-left:0; text-align:left }
.cab h2{ font-size:clamp(30px,4vw,46px) }
.cab h2 em{ font-style:italic; color:var(--ouro) }
.cab p{ color:var(--cinza); margin-top:16px; font-size:15.5px; font-weight:300 }
.fundo-areia{ background:var(--areia) }
.fundo-verde{ background:var(--verde); color:#fff }
.fundo-verde h2, .fundo-verde h3{ color:#fff }
.fundo-verde .cab p{ color:rgba(247,243,236,.76) }

/* ---------- regiões (2 por linha) ---------- */
.grade-reg{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px }
.reg{
  position:relative; border-radius:18px; overflow:hidden; background:var(--verde);
  box-shadow:var(--sombra); min-height:420px; display:flex; align-items:flex-end;
  transition:transform .45s cubic-bezier(.22,.7,.28,1), box-shadow .45s ease, opacity .9s ease;
}
.reg:hover{ transform:translateY(-8px); box-shadow:var(--sombra-alta) }
.reg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,.7,.28,1) }
.reg:hover img{ transform:scale(1.07) }
.reg .veu{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,42,37,.05) 20%, rgba(12,42,37,.62) 60%, rgba(12,42,37,.94) 100%) }
.reg .txt{ position:relative; padding:32px }
.reg h3{ color:#fff; font-size:30px }
.reg p{ font-size:14px; line-height:1.65; color:rgba(247,243,236,.86); margin-top:10px; font-weight:300; max-width:42ch }
.reg .link{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ouro-claro); text-decoration:none;
}
.reg .link svg{ width:14px; height:14px; transition:transform .3s ease }
.reg:hover .link svg{ transform:translateX(4px) }

/* ---------- cards de imóvel ---------- */
.grade-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
/* com 1 ou 2 anuncios, tres colunas deixam um buraco a direita que parece erro de
   carregamento: aqui as colunas encolhem e o bloco fica centralizado. Navegador sem
   :has() so cai no comportamento antigo, alinhado a esquerda */
.grade-3:has(> :last-child:nth-child(-n+2)){
  grid-template-columns:repeat(auto-fit,minmax(0,380px)); justify-content:center;
}
.card{
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--sombra);
  transition:transform .45s cubic-bezier(.22,.7,.28,1), box-shadow .45s ease, opacity .9s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--sombra-alta) }
.card .foto{ position:relative; aspect-ratio:3/2; overflow:hidden }
.card .foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.22,.7,.28,1) }
.card:hover .foto img{ transform:scale(1.07) }
.card .negocio{
  position:absolute; top:14px; right:14px; background:var(--ouro); color:#10322C;
  font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:7px 13px; border-radius:100px;
}
/* imovel vendido continua na vitrine, e e ele que mostra o que ja saiu pela corretora.
   O selo fica no CENTRO da capa e substitui a pilula de Venda/Locacao, para nao dizer
   duas coisas no mesmo canto. O veu e a dessaturacao fazem o vermelho saltar */
.card.vendido .foto img{ filter:saturate(.45) brightness(.78) }
.card.vendido .valor{ color:var(--cinza) }
.card .selo-vendido{ font-size:11.5px; letter-spacing:.3em; padding:12px 21px 12px 26px }
.card .txt{ padding:24px; display:flex; flex-direction:column; flex:1 }
.card .local{ font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro) }
.card h3{ font-size:23px; margin:9px 0 8px }
.card p{ font-size:13.5px; color:var(--cinza); font-weight:300 }
.card .infos{
  display:flex; gap:20px; margin-top:auto; padding-top:16px; border-top:1px solid var(--linha);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cinza);
}
.nota{ text-align:center; margin-top:34px; font-size:13px; color:var(--cinza); font-weight:300 }
.centro{ text-align:center; margin-top:42px }

/* ---------- blocos de duas colunas ---------- */
.duas{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center }
.duas.invertida .foto-borda{ order:2 }
.foto-borda{ position:relative; z-index:1 }
.foto-borda img{ border-radius:16px; box-shadow:var(--sombra-alta); width:100% }
.foto-borda::after{
  content:""; position:absolute; inset:20px -20px -20px 20px; border:1px solid var(--ouro);
  border-radius:16px; z-index:-1;
}
.lista-atende{ list-style:none; margin-top:30px; display:grid; gap:22px }
.lista-atende li{ display:flex; gap:18px }
.lista-atende .ic{
  flex:0 0 46px; height:46px; border-radius:50%; background:var(--areia); color:var(--ouro);
  display:flex; align-items:center; justify-content:center; transition:background .35s ease, color .35s ease;
}
.lista-atende li:hover .ic{ background:var(--ouro); color:#fff }
.lista-atende .ic svg{ width:21px; height:21px }
.lista-atende h3{ font-size:20px; margin-bottom:3px }
.lista-atende p{ font-size:13.5px; color:var(--cinza); font-weight:300; line-height:1.6 }

.assinatura{ font-family:var(--serif); font-style:italic; font-size:27px; color:var(--ouro); margin-top:26px }
.creci{
  display:inline-block; margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--verde); border:1px solid var(--linha); background:#fff;
  border-radius:100px; padding:10px 20px;
}
.texto-longo{ margin-top:20px } /* o h2 acima nao tem margem propria */
.texto-longo p{ margin-top:16px; color:#46524E; font-weight:300 }
.texto-longo p:first-child{ margin-top:0 }

/* ---------- etapas numeradas ---------- */
.etapas{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:passo }
/* variante de 3 colunas: precisa ser classe, nao style inline, senao o responsivo nao vence */
.etapas.tres{ grid-template-columns:repeat(3,1fr) }
.etapa{
  position:relative; background:#fff; border:1px solid var(--linha); border-radius:16px; padding:30px 26px;
  transition:transform .4s ease, box-shadow .4s ease, opacity .9s ease;
}
.etapa:hover{ transform:translateY(-6px); box-shadow:var(--sombra) }
.etapa::before{
  counter-increment:passo; content:"0" counter(passo);
  font-family:var(--serif); font-size:34px; color:var(--ouro-claro); line-height:1; display:block; margin-bottom:14px;
}
.etapa h3{ font-size:21px; margin-bottom:8px }
.etapa p{ font-size:13.5px; color:var(--cinza); font-weight:300; line-height:1.6 }

/* ---------- perguntas ---------- */
.faq{ max-width:840px; margin:0 auto }
.faq details{
  border-bottom:1px solid var(--linha); padding:22px 0; transition:opacity .9s ease, transform .9s ease;
}
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center;
  font-family:var(--serif); font-size:21px; color:var(--verde); font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; font-family:'Montserrat',sans-serif; font-size:22px; color:var(--ouro); font-weight:300;
  transition:transform .3s ease; line-height:1;
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq p{ margin-top:14px; color:var(--cinza); font-weight:300; font-size:14.5px; max-width:70ch }


/* ---------- dropdown com a cara do site ---------- */
.select-bonito{ position:relative }
.select-bonito select{
  position:absolute; opacity:0; pointer-events:none; width:100%; height:100%; left:0; top:0;
}
.sb-gatilho{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  background:none; border:0; padding:1px 0; cursor:pointer; text-align:left;
  font-family:'Montserrat',sans-serif; font-size:13.5px; font-weight:500; color:var(--verde);
}
.sb-gatilho .sb-valor{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sb-gatilho svg{ width:15px; height:15px; flex:0 0 15px; color:var(--ouro); transition:transform .3s ease }
.select-bonito.aberto .sb-gatilho svg{ transform:rotate(180deg) }
.sb-painel{
  position:absolute; z-index:40; top:calc(100% + 14px); left:-15px; right:-15px;
  background:#fff; border:1px solid var(--linha); border-radius:14px; padding:8px;
  box-shadow:0 24px 50px rgba(18,59,52,.18); max-height:340px; overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,.7,.28,1);
}
.select-bonito.aberto .sb-painel{ opacity:1; transform:none; pointer-events:auto }
.sb-grupo{
  font-size:8.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro); padding:12px 14px 6px;
}
.sb-grupo:first-child{ padding-top:6px }
.sb-opcao{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:10px; cursor:pointer;
  font-size:13.5px; font-weight:400; color:#46524E; transition:background .2s ease, color .2s ease;
}
.sb-opcao:hover, .sb-opcao.ativa{ background:var(--areia); color:var(--verde) }
.sb-opcao.escolhida{ color:var(--verde); font-weight:600 }
.sb-opcao.escolhida::after{
  content:""; width:15px; height:15px; flex:0 0 15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A06B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sb-painel::-webkit-scrollbar{ width:8px }
.sb-painel::-webkit-scrollbar-thumb{ background:var(--linha); border-radius:8px; border:2px solid #fff }
.sb-painel::-webkit-scrollbar-track{ background:transparent }
.busca-imoveis .campo:has(.select-bonito.aberto){ box-shadow:0 0 0 2px var(--ouro) }

/* ---------- busca de imóveis ---------- */
.busca-imoveis{
  background:#fff; border:1px solid var(--linha); border-radius:18px; padding:16px;
  box-shadow:var(--sombra);
}
.busca-imoveis .linha-1{ display:grid; grid-template-columns:1fr 1fr 1.7fr auto; gap:12px; align-items:stretch }
.busca-imoveis .linha-2{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-top:14px; padding-top:16px; border-top:1px solid var(--linha);
}
.busca-imoveis .campo{
  background:var(--areia); border-radius:12px; padding:10px 15px; display:flex; flex-direction:column;
  justify-content:center; transition:box-shadow .3s ease;
}
.busca-imoveis .campo:focus-within{ box-shadow:0 0 0 2px var(--ouro) }
.busca-imoveis label{
  font-size:8.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:3px;
}
.busca-imoveis select, .busca-imoveis input{
  width:100%; border:0; background:transparent; outline:none; padding:1px 0;
  font-family:'Montserrat',sans-serif; font-size:13.5px; color:var(--verde); font-weight:500;
}
.busca-imoveis select, .form select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A06B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:15px;
}
/* no formulario de contato o gatilho herda a moldura do campo */
.form .select-bonito .sb-gatilho{
  border:1px solid var(--linha); border-radius:10px; padding:14px 16px; background:#fff;
  font-size:14.5px; transition:border-color .3s ease, box-shadow .3s ease;
}
.form .select-bonito.aberto .sb-gatilho{ border-color:var(--ouro); box-shadow:0 0 0 3px rgba(194,160,107,.14) }
.form .sb-painel{ left:0; right:0 }
.busca-imoveis .com-lupa{ display:flex; align-items:center; gap:9px }
.busca-imoveis .com-lupa svg{ width:16px; height:16px; color:var(--ouro); flex:0 0 16px }
.busca-imoveis input::placeholder{ color:#A9B2AE; font-weight:400 }
.busca-imoveis .btn{ min-height:58px }

.resultado{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:22px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
}
.resultado strong{ color:var(--verde) }
.resultado a{ color:var(--ouro); text-decoration:none; border-bottom:1px solid rgba(194,160,107,.4) }
.vazio{
  background:#fff; border:1px dashed var(--linha); border-radius:16px; padding:52px 30px;
  text-align:center; margin-top:34px;
}
.vazio h3{ font-size:26px; margin-bottom:10px }
.vazio p{ color:var(--cinza); font-weight:300; max-width:52ch; margin:0 auto }

.card .valor{
  font-family:var(--serif); font-size:21px; font-weight:600; color:var(--verde); margin-top:14px;
}
.card .infos{ flex-wrap:wrap; gap:8px 16px; font-size:10.5px }

/* ---------- contato ---------- */
.form{ display:grid; gap:16px }
.form .par{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form label{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro); margin-bottom:7px }
.form input, .form textarea, .form select{
  width:100%; font-family:'Montserrat',sans-serif; font-size:14.5px; color:var(--grafite);
  background:#fff; border:1px solid var(--linha); border-radius:10px; padding:14px 16px; outline:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.form textarea{ min-height:130px; resize:vertical }
.form input:focus, .form textarea:focus, .form select:focus{ border-color:var(--ouro); box-shadow:0 0 0 3px rgba(194,160,107,.14) }
.form .mel{ position:absolute; left:-9999px }
.aviso-ok{ background:#EAF3EE; border:1px solid #BBD8C8; color:#1C5449; border-radius:12px; padding:18px 20px; font-size:14px }
.aviso-erro{ background:#FBEDEA; border:1px solid #EBC7BE; color:#8E3B2A; border-radius:12px; padding:18px 20px; font-size:14px }
.dados-contato{ list-style:none; display:grid; gap:20px }
.dados-contato li{ display:flex; gap:16px; align-items:flex-start }
.dados-contato .ic{ flex:0 0 42px; height:42px; border-radius:50%; background:var(--areia); color:var(--ouro); display:flex; align-items:center; justify-content:center }
.dados-contato .ic svg{ width:19px; height:19px }
.dados-contato h3{ font-size:18px; margin-bottom:2px }
.dados-contato p, .dados-contato a{ font-size:14px; color:var(--cinza); font-weight:300; text-decoration:none }
.dados-contato a:hover{ color:var(--ouro) }

/* ---------- chamada final ---------- */
.chamada{ position:relative; overflow:hidden; background:var(--verde); color:#fff; text-align:center }
.chamada h2{ color:#fff; font-size:clamp(30px,4vw,46px) }
.chamada h2 em{ font-style:italic; color:var(--ouro-claro) }
.chamada p{ color:rgba(247,243,236,.78); max-width:52ch; margin:16px auto 32px; font-weight:300 }

/* ---------- rodapé ---------- */
footer{ background:var(--verde-esc); color:rgba(247,243,236,.62); padding:64px 0 32px; font-size:13px; font-weight:300 }
footer .grade-rod{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px }
footer .n{ font-family:var(--serif); font-size:22px; letter-spacing:.1em; text-transform:uppercase; color:#fff }
footer .s{ font-size:8px; letter-spacing:.44em; text-transform:uppercase; color:var(--ouro); margin-top:6px; padding-left:.44em }
footer h4{ font-size:14px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ouro); margin-bottom:16px }
footer ul{ list-style:none; display:grid; gap:9px }
footer a{ text-decoration:none; transition:color .3s ease, opacity .3s ease; opacity:.85 }
footer a:hover{ color:var(--ouro-claro); opacity:1 }
.fim{
  margin-top:46px; padding-top:22px; border-top:1px solid rgba(247,243,236,.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(247,243,236,.4);
}
.fim a{ color:var(--ouro); opacity:.9 }

/* ---------- voltar ao topo ---------- */
.subir{
  position:fixed; right:22px; bottom:22px; z-index:40; width:46px; height:46px; border-radius:50%;
  background:var(--verde); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(18,59,52,.3); opacity:0; pointer-events:none; text-decoration:none;
  transition:opacity .35s ease, transform .35s ease, background .3s ease; transform:translateY(10px);
}
.subir.ok{ opacity:1; pointer-events:auto; transform:none }
.subir:hover{ background:var(--ouro); color:#10322C }
.subir svg{ width:18px; height:18px }

/* botao fixo do WhatsApp. Fica logo acima do "voltar ao topo" e em dourado, e nao no
   verde do WhatsApp, para nao brigar com a identidade do site */
.zap-flutua{
  position:fixed; right:22px; bottom:78px; z-index:41; width:54px; height:54px; border-radius:50%;
  background:var(--ouro); color:#10322C; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(194,160,107,.42); text-decoration:none;
  transition:transform .3s cubic-bezier(.22,.7,.28,1), background .3s ease;
}
.zap-flutua:hover{ background:var(--ouro-claro); transform:translateY(-3px) scale(1.05) }
.zap-flutua svg{ width:26px; height:26px }
@media (max-width:620px){
  .zap-flutua{ width:50px; height:50px; right:16px; bottom:70px }
  .subir{ right:16px; bottom:16px }
}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  /* nesta faixa o menu ainda e horizontal e logo + 6 itens + botao nao cabem:
     o botao saia da tela cortado. Contato ja esta no menu, entao ele sai daqui */
  .topo{ gap:18px }
  .topo > .btn{ display:none }
  nav{ gap:20px }
  .selos .env{ grid-template-columns:1fr; gap:26px }
  .etapas, .etapas.tres{ grid-template-columns:1fr 1fr }
  .busca-imoveis .linha-1{ grid-template-columns:1fr 1fr; }
  .busca-imoveis .linha-1 .campo-busca{ grid-column:1 / -1 }
  .busca-imoveis .linha-2{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  nav{
    position:fixed; inset:0 0 auto; top:0; padding:96px 8vw 34px; background:var(--verde-esc);
    flex-direction:column; align-items:flex-start; gap:22px; transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.22,.7,.28,1); box-shadow:0 20px 50px rgba(0,0,0,.3);
  }
  nav.aberto{ transform:none }
  .topo > .btn{ display:inline-flex } /* menu virou gaveta, o botao volta */
  nav a, header.solido nav a, header.fixo nav a{ color:#fff; font-size:15px; letter-spacing:.14em }
  nav{ padding-top:120px }
  .menu-bt{ display:block; z-index:70; position:relative }
  .grade-3{ grid-template-columns:1fr 1fr }
  .grade-reg{ grid-template-columns:1fr }
  .reg{ min-height:340px }
  .duas, .duas.invertida{ grid-template-columns:1fr }
  .duas.invertida .foto-borda{ order:0 }
  .foto-borda::after{ inset:14px -14px -14px 14px }
  .hero{ padding:150px 0 90px }
  .capa{ padding:150px 0 60px }
  footer .grade-rod{ grid-template-columns:1fr 1fr }
  .form .par{ grid-template-columns:1fr }
}
@media (max-width:620px){
  .grade-3{ grid-template-columns:1fr }
  .etapas, .etapas.tres{ grid-template-columns:1fr }
  .busca-imoveis .linha-1{ grid-template-columns:1fr 1fr }
  .busca-imoveis .linha-1 .campo-busca,
  .busca-imoveis .linha-1 .btn{ grid-column:1 / -1 }
  .busca-imoveis .linha-2{ grid-template-columns:1fr 1fr }
  .busca-imoveis select, .busca-imoveis input{ font-size:12px }
  .busca-imoveis .campo{ padding:9px 12px }
  .topo > .btn{ display:none }
  .hero .acoes{ flex-direction:column; align-items:stretch }
  footer .grade-rod{ grid-template-columns:1fr }
  .cidades{ gap:14px }
  .det-mono{ width:80vw }
}

/* ============================================================
   Página de um imóvel
   ============================================================ */

/* cartão da vitrine, agora clicável */
.capa-card{ display:block; text-decoration:none }
.card h3 a{ text-decoration:none; transition:color .3s ease }
.card h3 a:hover{ color:var(--ouro) }
.card .fotos-qtd{
  position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:6px;
  background:rgba(12,42,37,.78); color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.1em;
  padding:6px 12px; border-radius:100px;
}
.card .fotos-qtd svg{ width:14px; height:14px; color:var(--ouro-claro) }
.ver-imovel{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; text-decoration:none;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro);
}
.ver-imovel svg{ width:15px; height:15px; transition:transform .3s ease }
.card:hover .ver-imovel svg{ transform:translateX(5px) }

/* topo da página */
.im-topo{ padding:30px 0 clamp(50px,6vw,74px) }
.migalhas.escuras{ color:var(--cinza) }
.migalhas.escuras a{ color:var(--ouro) }
/* Quem manda na largura do topo é a FOTO, não o .env.
   O palco tem aspect-ratio 3/2 e max-height:min(70vh,620px), então no desktop ele
   para em ~930px enquanto o .env vai a 1200px. Sem amarrar as duas coisas, o preço
   do cabeçalho ia até a borda do .env e sobrava ~270px além da foto: ele ficava
   voando sozinho no vazio, e ficou gritante com título de 3 linhas (o AR-1032). */
.im-topo .env{ --palco:min(100%, calc(min(70vh, 620px) * 3 / 2)) }
.im-cabeca, .im-topo .galeria, .im-topo .compartilhar{ max-width:var(--palco) }
.im-cabeca{
  display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;
  margin-bottom:26px;
}
.im-cabeca .local{
  display:block; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:9px;
}
.im-cabeca h1{ font-size:clamp(27px,3.8vw,44px); font-weight:500; max-width:20ch }
/* Título de mais de 48 letras (o imovel.php marca com .longo) daria 3 linhas na medida
   de 20ch: corpo menor e medida maior seguram em 2 linhas de 390px a 1920px, que foi
   onde isto foi medido. Não usar text-wrap:balance aqui: ele equilibra as linhas, mas
   não muda quantas são. */
.im-cabeca h1.longo{ font-size:clamp(24px,2.9vw,34px); max-width:30ch }
.im-tags{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px }
.tag{
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cinza);
  border:1px solid var(--linha); border-radius:100px; padding:7px 14px; background:#fff;
}
.tag-negocio{ background:var(--ouro); border-color:var(--ouro); color:#10322C }
.tag-vendido{ background:var(--vermelho); border-color:var(--vermelho); color:#fff }
.im-preco-topo.fechado .v{ color:var(--cinza) }
/* Selo de VENDIDO, o mesmo no cartao da vitrine e sobre o palco da galeria.
   O padding da esquerda e maior de proposito: o letter-spacing sobra depois da
   ultima letra e, sem essa compensacao, a palavra fica visivelmente fora de centro */
.selo-vendido{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--vermelho); color:#fff; white-space:nowrap;
  font-size:clamp(14px,1.5vw,19px); font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  padding:16px 30px 16px 38px; border-radius:100px; box-shadow:0 16px 38px rgba(0,0,0,.34);
  /* o selo cobre o meio do palco, que e onde se clica para abrir a tela cheia */
  pointer-events:none;
}
/* escurece pela propria foto, e nao com um veu por cima: veu abriria briga de
   z-index com a legenda, as setas e o botao de ampliar */
.galeria.vendido .palco .quadro img{ filter:saturate(.55) brightness(.82) }
.negocio-card.e-vendido{ background:var(--vermelho); color:#fff }
.im-card.vendido .valor{ color:var(--cinza) }
/* margin-left:auto e nao so o space-between do pai: em janela BAIXA o palco encolhe
   (70vh), o titulo e o preco nao cabem na mesma linha e o preco quebra para a linha
   de baixo. Sem o auto ele cai colado na ESQUERDA, porque e flex:0 0 auto e o
   text-align:right so alinha dentro da propria caixa. */
.im-preco-topo{ text-align:right; flex:0 0 auto; margin-left:auto }
.im-preco-topo .v{ font-family:var(--serif); font-size:clamp(26px,3.2vw,36px); font-weight:600; color:var(--verde) }
.im-preco-topo .m{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cinza); margin-top:4px }

/* galeria */
.galeria{ display:grid; gap:12px }
.palco{
  position:relative; aspect-ratio:3/2; max-height:min(70vh,620px); border-radius:18px; overflow:hidden;
  background:var(--verde-esc); box-shadow:var(--sombra-alta);
}
.palco .quadro{
  position:absolute; inset:0; margin:0; opacity:0; pointer-events:none;
  transition:opacity .5s ease; cursor:zoom-in;
}
.palco .quadro.on{ opacity:1; pointer-events:auto }
.palco .quadro picture, .palco .quadro img{ width:100%; height:100%; object-fit:cover; display:block }
/* o padding da direita e o lugar do contador "7 de 36", que fica por cima: sem ele,
   legenda comprida passa por baixo da pilula e as duas viram borrao */
.palco figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:52px 112px 18px 20px; color:#fff;
  font-size:13px; font-weight:300; letter-spacing:.02em;
  background:linear-gradient(180deg, rgba(12,42,37,0) 0%, rgba(12,42,37,.72) 100%);
}
.palco .seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border:0;
  border-radius:50%; background:rgba(255,255,255,.9); color:var(--verde); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(12,42,37,.24);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.palco .seta:hover{ background:var(--ouro); color:#10322C }
.palco .seta.ant{ left:16px } .palco .seta.pro{ right:16px }
.palco .seta svg{ width:20px; height:20px }
.palco .ampliar{
  position:absolute; top:16px; right:16px; z-index:3; display:flex; align-items:center; gap:8px;
  border:0; border-radius:100px; padding:9px 15px; cursor:pointer; background:rgba(255,255,255,.9);
  color:var(--verde); font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; transition:background .3s ease, color .3s ease;
}
.palco .ampliar:hover{ background:var(--ouro); color:#10322C }
.palco .ampliar svg{ width:15px; height:15px }
.palco .contador{
  position:absolute; right:16px; bottom:16px; z-index:3; background:rgba(12,42,37,.78); color:#fff;
  font-size:10.5px; font-weight:500; letter-spacing:.12em; padding:7px 13px; border-radius:100px;
}
.palco .contador b{ color:var(--ouro-claro); font-weight:600 }
.tiras{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin }
.tiras::-webkit-scrollbar{ height:6px }
.tiras::-webkit-scrollbar-thumb{ background:var(--linha); border-radius:8px }
.tira{
  flex:0 0 120px; aspect-ratio:3/2; border:0; padding:0; border-radius:10px; overflow:hidden;
  cursor:pointer; opacity:.55; background:var(--areia-2);
  transition:opacity .3s ease, box-shadow .3s ease, transform .3s ease;
}
.tira img{ width:100%; height:100%; object-fit:cover }
.tira:hover{ opacity:.9; transform:translateY(-2px) }
.tira.on{ opacity:1; box-shadow:0 0 0 2px var(--ouro) }

/* corpo: texto + coluna do lado */
.im-corpo{ padding:clamp(56px,6vw,84px) 0 }
.im-grade{ display:grid; grid-template-columns:1.62fr 1fr; gap:clamp(34px,4vw,58px); align-items:start }
.im-texto .bloco + .bloco{ margin-top:clamp(40px,4.5vw,58px) }
.im-texto h2{ font-size:clamp(24px,2.9vw,34px); margin-bottom:20px }
.im-texto h2 em{ font-style:italic; color:var(--ouro) }
.lista-check{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:13px 26px }
.lista-check li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; font-weight:300; color:#46524E }
.lista-check svg{ width:17px; height:17px; flex:0 0 17px; color:var(--ouro); margin-top:4px }
.ficha-tec{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px }
.ficha-tec > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px dashed var(--linha);
}
.ficha-tec dt{ font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cinza) }
.ficha-tec dd{ font-size:14px; font-weight:500; color:var(--verde); text-align:right }
.obs{ margin-top:18px; font-size:12px; font-weight:300; color:var(--cinza) }
.pilulas{ display:flex; gap:9px; flex-wrap:wrap; margin-top:20px }
.pilulas span{
  background:#fff; border:1px solid var(--linha); border-radius:100px; padding:9px 16px;
  font-size:12px; font-weight:500; color:var(--verde);
}

/* coluna fixa com valor e contato */
.im-lado{ position:sticky; top:104px }
.im-card{ background:#fff; border:1px solid var(--linha); border-radius:18px; padding:28px; box-shadow:var(--sombra) }
.negocio-card{
  display:inline-block; background:var(--ouro); color:#10322C; font-size:9px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; padding:7px 13px; border-radius:100px;
}
.im-card .valor{ font-family:var(--serif); font-size:34px; font-weight:600; color:var(--verde); margin-top:16px; line-height:1.1 }
.im-card .valor span{ display:block; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--cinza); margin-top:6px }
.im-card .local{ font-size:13px; font-weight:300; color:var(--cinza); margin-top:10px }
.im-card .resumo{
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:22px 0; padding:20px 0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
}
.im-card .resumo li{ display:flex; align-items:center; gap:10px }
.im-card .resumo svg{ width:21px; height:21px; flex:0 0 21px; color:var(--ouro) }
.im-card .resumo b{ font-size:16px; color:var(--verde); font-weight:600 }
.im-card .resumo span{ font-size:11.5px; color:var(--cinza); font-weight:300; margin-left:5px }
.im-card .custos{ list-style:none; display:grid; gap:9px; margin-bottom:22px }
.im-card .custos li{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--cinza); font-weight:300 }
.im-card .custos b{ color:var(--verde); font-weight:600 }
.im-card .acoes{ display:grid; gap:10px }
.im-card .acoes .btn{ width:100% }
.im-card .assina{ margin-top:20px; font-size:11.5px; line-height:1.65; font-weight:300; color:var(--cinza) }
.nota-lado{ margin-top:18px; font-size:11.5px; font-weight:300; color:var(--cinza); line-height:1.65 }

/* ---------- compartilhar (padrao de todo single) ---------- */
.compartilhar{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap }
.compartilhar .rot{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--cinza);
}
.compartilhar .canais{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.compartilhar .cp{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--linha); background:#fff; color:var(--verde); cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.compartilhar .cp svg{ width:18px; height:18px }
.compartilhar .cp:hover{
  background:var(--ouro); border-color:var(--ouro); color:#10322C; transform:translateY(-2px);
}
.compartilhar .cp.copiado-ok{ background:var(--verde); border-color:var(--verde); color:var(--ouro-claro) }
.compartilhar .copiado{
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--verde);
}
@media (max-width:620px){
  .compartilhar{ gap:12px }
  .compartilhar .cp{ width:38px; height:38px }
}

/* capa do video do imovel: foto + botao de play, o player entra no lugar no clique */
.video-imovel{
  position:relative; aspect-ratio:16/9; border-radius:var(--raio); overflow:hidden;
  background:var(--verde); box-shadow:var(--sombra);
}
.video-imovel img, .video-imovel iframe{ width:100%; height:100%; display:block; border:0 }
.video-imovel img{ object-fit:cover }
.video-imovel button{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; padding:0;
  background:linear-gradient(180deg, rgba(12,42,37,.12) 0%, rgba(12,42,37,.42) 100%);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease;
}
.video-imovel button:hover{ background:rgba(12,42,37,.5) }
.video-imovel button svg{
  width:34px; height:34px; padding:22px; box-sizing:content-box; border-radius:50%;
  background:var(--ouro); color:#10322C; box-shadow:0 10px 30px rgba(12,42,37,.35);
  transition:transform .35s cubic-bezier(.22,.7,.28,1);
}
.video-imovel button:hover svg{ transform:scale(1.09) }
/* video em pe (Short do YouTube): a capa continua 3:2, e o quadro so vira 9:16
   quando o player entra. Sem isso o proprio YouTube preenche 2/3 da largura com
   preto, que e o que aparecia no AR-1027 */
.video-imovel.em-pe.tocando{
  aspect-ratio:9/16; max-width:min(100%, 360px); margin-inline:auto;
}

/* foto em tela cheia */
.lupa{
  position:fixed; inset:0; z-index:100; background:rgba(8,22,19,.97);
  display:flex; align-items:center; justify-content:center; padding:4vmin;
}
.lupa[hidden]{ display:none }
.lupa figure{ margin:0; max-width:100%; text-align:center }
.lupa img{ max-width:92vw; max-height:82vh; width:auto; border-radius:10px; margin:0 auto }
.lupa figcaption{
  display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin-top:16px; color:rgba(247,243,236,.82); font-size:13px; font-weight:300;
}
.lupa figcaption .conta{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ouro) }
.lupa .fechar, .lupa .seta{
  position:absolute; z-index:2; width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.lupa .fechar:hover, .lupa .seta:hover{ background:var(--ouro); color:#10322C }
.lupa .fechar{ top:18px; right:18px }
.lupa .fechar svg, .lupa .seta svg{ width:21px; height:21px }
.lupa .seta{ top:50%; transform:translateY(-50%) }
.lupa .seta.ant{ left:18px } .lupa .seta.pro{ right:18px }

@media (max-width:1080px){
  .im-grade{ grid-template-columns:1fr }
  .im-lado{ position:static; order:-1 }   /* no celular o valor e o botao vem antes do texto */
  .im-card .resumo{ grid-template-columns:repeat(4,auto); justify-content:start; gap:24px }
}
@media (max-width:900px){
  .im-cabeca{ align-items:flex-start }
  .im-preco-topo{ text-align:left }
  .ficha-tec{ grid-template-columns:1fr }
  .palco .seta{ width:40px; height:40px }
  .palco .seta.ant{ left:10px } .palco .seta.pro{ right:10px }
}
@media (max-width:620px){
  .im-topo{ padding-top:22px }
  .lista-check{ grid-template-columns:1fr }
  .tira{ flex-basis:92px }
  .palco{ border-radius:14px }
  .palco .ampliar span{ display:none }
  .palco .ampliar{ padding:10px }
  .palco figcaption{ font-size:12px; padding:44px 104px 14px 14px }
  /* no celular o selo no tamanho cheio encosta nas setas do palco */
  .selo-vendido{ font-size:12.5px; letter-spacing:.26em; padding:13px 22px 13px 28px }
  .im-card{ padding:22px }
  .im-card .resumo{ grid-template-columns:1fr 1fr; gap:16px }
  .lupa .fechar, .lupa .seta{ width:40px; height:40px }
  .lupa .seta.ant{ left:8px } .lupa .seta.pro{ right:8px }
}

/* aviso de qual imovel o visitante veio ver */
.veio-do-imovel{
  display:flex; gap:16px; align-items:center; margin-top:22px; padding:14px;
  background:var(--areia); border:1px solid var(--linha); border-radius:14px;
}
.veio-do-imovel picture{ flex:0 0 96px }
.veio-do-imovel img{ width:96px; height:70px; object-fit:cover; border-radius:9px }
.veio-do-imovel span{ font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro) }
.veio-do-imovel h3{ font-size:17px; margin:4px 0 2px }
.veio-do-imovel p{ font-size:12.5px; color:var(--cinza); font-weight:300 }
.veio-do-imovel a{ font-size:11px; color:var(--ouro); text-decoration:none; border-bottom:1px solid rgba(194,160,107,.4) }
@media (max-width:520px){
  .veio-do-imovel{ flex-direction:column; align-items:flex-start }
  .veio-do-imovel img{ width:100%; height:120px }
  .veio-do-imovel picture{ flex:1 1 auto; width:100% }
}