/* Valley Negócios Imobiliários — folha de estilo do site
   Tokens da marca: navy #001926 · cinza #989898 · dourado de apoio #B0894E
   Tipografia: serif alto-contraste (Didot stack ≈ Hyogo) + Avenir (≈ Oduda) */
:root{
  --bg:#F5F3EE; --surface:#FFFFFF; --surface-2:#ECEAE2;
  --ink:#001926; --muted:#5E6B75; --faint:#98A2AC; --line:#E3DFD5;
  --navy:#001926; --navy-2:#0C2E44;
  --gold:#B0894E; --gold-soft:rgba(176,137,78,.14);
  --on-navy:#EFECE4; --on-navy-muted:#9DB1BF;
  --btn-bg:#001926; --btn-ink:#F5F3EE;
  --hero-1:#052B40; --hero-2:#00131E; --hero-3:#0C405C;
  --shadow:0 20px 44px -26px rgba(0,25,38,.5);
  --serif:'Didot','Bodoni MT','Hoefler Text','Playfair Display',Georgia,serif;
  --sans:'Avenir Next','Avenir',ui-sans-serif,-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,'Cascadia Mono',Menlo,monospace;
  --maxw:1200px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#001926; --surface:#04202F; --surface-2:#082B3E; --ink:#EEF2F3;
    --muted:#9DB1BF; --faint:#6E828F; --line:#123043; --gold:#C6A063;
    --btn-bg:#EFECE4; --btn-ink:#001926; --shadow:0 22px 48px -24px rgba(0,0,0,.7);}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.08;
  text-wrap:balance; margin:0; letter-spacing:.005em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(1.25rem,5vw,3rem)}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); font-weight:500}
section{padding-block:clamp(4rem,9vw,7.5rem)}

/* ------------------------------------------------------------- botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.02em;
  padding:.9rem 1.6rem; border-radius:1px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s, background .18s, color .18s, border-color .18s; white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.btn-primary{background:var(--btn-bg); color:var(--btn-ink)}
.btn-primary:hover{transform:translateY(-2px); background:var(--navy-2)}
.btn-gold{background:var(--gold); color:#1a1206}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.07)}
.btn-outline-light{border-color:rgba(239,236,228,.42); color:var(--on-navy)}
.btn-outline-light:hover{background:rgba(239,236,228,.12); transform:translateY(-2px)}
.btn-outline{border-color:var(--line); color:var(--ink)}
.btn-outline:hover{background:var(--surface-2); transform:translateY(-2px)}

/* ------------------------------------------------------------- header */
header{position:sticky; top:0; z-index:50; background:var(--navy);
  border-bottom:1px solid rgba(239,236,228,.13)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:78px}
.brand{display:flex; align-items:center; gap:.7rem}
.brandmark{height:38px; width:auto; display:block}
.brand .lock{display:flex; flex-direction:column; line-height:1; gap:.3rem}
.brand .name{font-family:var(--serif); font-size:1.5rem; font-weight:500;
  letter-spacing:.16em; color:#fff}
.brand .sub{font-family:var(--mono); font-size:.5rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--on-navy-muted)}
.navlinks{display:flex; gap:2rem; align-items:center}
.navlinks a{font-size:.9rem; font-weight:500; color:rgba(239,236,228,.72);
  position:relative; padding-block:.4rem; transition:color .16s}
.navlinks a:hover{color:#fff}
.navlinks a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px;
  width:0; background:var(--gold); transition:width .2s}
.navlinks a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:1.1rem}
.phone{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.phone .lbl{font-family:var(--mono); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(239,236,228,.5)}
.phone .num{font-weight:600; font-size:.95rem; color:#fff}
.menu-btn{display:none; background:none; border:1px solid rgba(239,236,228,.3);
  border-radius:1px; width:44px; height:40px; cursor:pointer; color:#fff; font-size:1.2rem}
.navlinks .nav-wa{display:none} /* CTA do menu — só aparece no dropdown mobile */

/* --------------------------------------------------------------- hero */
/* overflow VISÍVEL: a caixa de busca flutua pra fora do hero (margem negativa)
   — com hidden, o desktop cortava a metade de baixo dela. O grain é inset:0,
   não vaza. */
.hero{position:relative; color:var(--on-navy); overflow:visible;
  /* camadas: overlay navy (legibilidade do texto) → foto do imóvel → navy fallback.
     O overlay é forte à esquerda (onde fica o texto) e some à direita (mostra a foto). */
  background:
    linear-gradient(90deg,
      rgba(0,19,29,.97) 0%, rgba(0,19,29,.88) 26%, rgba(0,19,29,.55) 46%,
      rgba(0,19,29,.20) 66%, rgba(0,19,29,0) 100%),
    linear-gradient(180deg, rgba(0,19,29,.32) 0%, rgba(0,19,29,0) 34%),
    url('/assets/img/hero.jpg') center right / cover no-repeat,
    var(--hero-2);
  padding-block:clamp(3.5rem,8vw,6rem) 0}
.hero-grain{position:absolute; inset:0; opacity:.04; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px);
  background-size:4px 4px}
.hero .wrap{position:relative; z-index:2}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.3rem); color:#fff; margin:1.1rem 0 0;
  max-width:15ch; font-weight:500}
.hero .lead{margin-top:1.4rem; font-size:clamp(1.05rem,1.6vw,1.28rem);
  color:var(--on-navy-muted); max-width:52ch}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem}

/* -------------------------------------------------------------- busca */
.search{position:relative; z-index:3; margin:clamp(2.5rem,5vw,3.5rem) auto -3.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  box-shadow:var(--shadow); padding:1.5rem}
.search-label{font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1rem}
.search-row{display:grid; grid-template-columns:1fr 1.5fr .9fr .7fr auto;
  gap:.7rem; align-items:end}
.field{display:flex; flex-direction:column; gap:.35rem; text-align:left; min-width:0}
.field label{font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint)}
.field select,.field input{font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:1px;
  padding:.75rem .8rem; width:100%}
.field input::placeholder{color:var(--faint)}
.search-row .btn{height:calc(1rem + 1.5rem + 2px)}
.search-foot{margin-top:.95rem; font-size:.82rem; color:var(--muted)}

/* autocomplete de bairros (substitui o datalist — iPhone não suporta) */
.field-ac{position:relative}
.ac-list{position:absolute; top:100%; left:0; right:0; z-index:40;
  margin-top:4px; background:var(--surface); border:1px solid var(--line);
  border-radius:2px; box-shadow:var(--shadow);
  max-height:290px; overflow-y:auto; -webkit-overflow-scrolling:touch}
.ac-item{display:flex; justify-content:space-between; align-items:center;
  width:100%; text-align:left; padding:.72rem .85rem; background:none;
  border:0; border-bottom:1px solid var(--line); font-family:var(--sans);
  font-size:.95rem; color:var(--ink); cursor:pointer}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item:active{background:var(--surface-2)}
.ac-n{font-family:var(--mono); font-size:.68rem; color:var(--faint)}

/* -------------------------------------------------------------- stats */
.stats{padding-top:clamp(6rem,9vw,8rem)}
/* catálogo vem logo após o hero → folga extra no topo p/ a caixa de busca que desce */
#destaques{padding-top:clamp(6rem,10vw,8.5rem)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:2px; overflow:hidden}
.stat{background:var(--bg); padding:1.9rem 1.4rem; text-align:center}
.stat .n{font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.9rem); color:var(--ink);
  font-variant-numeric:tabular-nums; font-weight:500}
.stat .l{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:.45rem}

/* ----------------------------------------------------- cabeçalho seção */
.head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  margin-bottom:2.6rem; flex-wrap:wrap}
.head h2{font-size:clamp(1.9rem,3.5vw,2.9rem); margin-top:.65rem; font-weight:500}
.head .link{font-weight:600; font-size:.88rem; color:var(--gold); white-space:nowrap}
.head .link:hover{text-decoration:underline}
.sort{display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted)}
.sort select{font-family:var(--sans); font-size:.88rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:1px; padding:.45rem .6rem}

/* -------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
/* card claro (segue o tema light/dark) — a foto é o destaque */
.card{--card-ink:var(--ink); --card-muted:var(--muted); --card-gold:var(--gold);
  --card-line:var(--line);
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; transition:transform .2s, box-shadow .2s; display:flex;
  flex-direction:column; cursor:pointer}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.card .photo{aspect-ratio:4/3; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0e3149,#00131d)}
.card .photo img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transition:transform .35s}
.card:hover .photo img{transform:scale(1.04)}
.card .photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,19,29,0) 52%, rgba(0,19,29,.62))}
.card .tag{position:absolute; z-index:2; top:.8rem; left:.8rem; font-family:var(--mono);
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  background:var(--gold); color:#1a1206; padding:.34rem .55rem; border-radius:1px}
.card .code{position:absolute; z-index:2; bottom:.7rem; right:.8rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:rgba(255,255,255,.85)}
.card .nfotos{position:absolute; z-index:2; bottom:.7rem; left:.8rem;
  font-family:var(--mono); font-size:.62rem; color:rgba(255,255,255,.85)}
.card .body{padding:1.2rem 1.25rem 1.35rem; display:flex; flex-direction:column;
  gap:.55rem; flex:1}
.card .type{font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--card-gold)}
.card .loc{font-family:var(--serif); font-size:1.3rem; line-height:1.2; font-weight:500;
  color:var(--card-ink)}
.card .loc span{display:block; font-size:.82rem; font-family:var(--sans);
  color:var(--card-muted); margin-top:.2rem; letter-spacing:normal}
.specs{display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--card-muted);
  padding-top:.55rem; margin-top:auto; border-top:1px solid var(--card-line)}
.specs b{color:var(--card-ink); font-weight:600}
.price{display:flex; align-items:baseline; gap:.6rem; margin-top:.3rem}
.price .now{font-family:var(--serif); font-size:1.45rem; color:var(--card-ink);
  font-variant-numeric:tabular-nums; font-weight:500}
.no-res{color:var(--muted); font-size:.95rem; margin-top:1.5rem}
.no-res a{color:var(--gold); font-weight:600}

/* ----------------------------------------------------- seção "vender" */
.sell{background:radial-gradient(120% 130% at 86% 8%, var(--hero-3) 0%, transparent 50%),
  linear-gradient(158deg,var(--hero-1),var(--hero-2)); color:var(--on-navy)}
.sell .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center}
.sell h2{font-size:clamp(2rem,3.6vw,3.1rem); color:#fff; max-width:16ch; font-weight:500}
.sell p{margin-top:1.1rem; color:var(--on-navy-muted); max-width:46ch}
.sell-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}
.sell-panel{background:rgba(239,236,228,.05); border:1px solid rgba(239,236,228,.15);
  border-radius:3px; padding:2rem}
.sell-panel .step{display:flex; gap:1rem; padding:1rem 0;
  border-bottom:1px solid rgba(239,236,228,.12)}
.sell-panel .step:last-child{border:none; padding-bottom:0}
.sell-panel .step:first-child{padding-top:0}
.sell-panel .num{font-family:var(--serif); font-size:1.05rem; color:var(--gold);
  border:1px solid var(--gold); border-radius:50%; width:2.1rem; height:2.1rem;
  display:grid; place-items:center; flex-shrink:0}
.sell-panel .st-t{font-weight:600; color:#fff}
.sell-panel .st-d{font-size:.86rem; color:var(--on-navy-muted); margin-top:.15rem}

/* ------------------------------------------------------------ pilares */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.pillar{padding:2.1rem 1.8rem; border:1px solid var(--line); border-radius:3px;
  background:var(--surface)}
.pillar .pn{font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; color:var(--gold)}
.pillar h3{font-size:1.45rem; margin:1rem 0 .6rem; font-weight:500}
.pillar p{font-size:.95rem; color:var(--muted)}

/* --------------------------------------------------------------- time */
.team{background:var(--surface-2)}
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
.member{display:flex; align-items:center; gap:1.4rem; background:var(--surface);
  border:1px solid var(--line); border-radius:3px; padding:1.6rem}
.member .ph{width:96px; height:96px; border-radius:2px; flex-shrink:0;
  background:var(--g,linear-gradient(135deg,#0e3149,#00131d)); position:relative}
.member .ph::after{content:attr(data-i); position:absolute; inset:0; display:grid;
  place-items:center; font-family:var(--serif); font-size:1.9rem; color:rgba(255,255,255,.85)}
.member h3{font-size:1.35rem; font-weight:500}
.member .role{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:.35rem 0 .6rem}
.member p{font-size:.92rem; color:var(--muted)}

/* -------------------------------------------------------------- bairros */
.hoods{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.hood{aspect-ratio:3/4; border-radius:3px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:1.1rem; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#0e3149,#00131d); transition:transform .2s; border:none;
  font-family:inherit; text-align:left}
.hood img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hood::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,19,29,.12),rgba(0,19,29,.78))}
.hood:hover{transform:translateY(-4px)}
.hood .hn{font-family:var(--serif); font-size:1.2rem; position:relative; z-index:2;
  font-weight:500}
.hood .hc{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  color:rgba(255,255,255,.8); position:relative; z-index:2; margin-top:.1rem}

/* ---------------------------------------------------------------- CTA */
.final{background:radial-gradient(120% 130% at 16% 8%, var(--hero-3) 0%, transparent 50%),
  linear-gradient(158deg,var(--hero-1),var(--hero-2)); color:var(--on-navy); text-align:center}
.final h2{font-size:clamp(2.1rem,4vw,3.3rem); color:#fff; max-width:18ch;
  margin-inline:auto; font-weight:500}
.final p{margin:1rem auto 0; color:var(--on-navy-muted); max-width:44ch}
.final-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}

/* -------------------------------------------------------------- rodapé */
footer{background:var(--hero-2); color:var(--on-navy-muted); padding-block:3.5rem 2rem}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(239,236,228,.12)}
footer .name{font-family:var(--serif); font-size:1.4rem; color:#fff;
  letter-spacing:.1em; font-weight:500}
footer h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1rem}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
footer a:hover{color:#fff}
footer .addr{font-size:.88rem; line-height:1.7; margin-top:1rem}
.foot-bot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; font-size:.76rem; font-family:var(--mono); letter-spacing:.05em}

/* ------------------------------------------------- página do imóvel */
.crumbs{font-size:.85rem; color:var(--muted); padding-top:1.6rem}
.crumbs a{color:var(--gold); font-weight:600}
.detail{padding-block:1.4rem clamp(3rem,6vw,5rem)}
.detail-grid{display:grid; grid-template-columns:1.65fr .85fr; gap:2rem; align-items:start}
.detail-grid > *{min-width:0} /* impede as thumbs de estourarem a coluna */

.gal-main{aspect-ratio:16/10; position:relative; border-radius:4px; overflow:hidden;
  background:linear-gradient(135deg,#0e3149,#00131d)}
.gal-main img{width:100%; height:100%; object-fit:cover; display:block}
.gal-btn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border-radius:50%; border:none; cursor:pointer; background:rgba(0,19,29,.6);
  color:#fff; font-size:1.15rem; display:grid; place-items:center; transition:background .15s}
.gal-btn:hover{background:rgba(0,19,29,.85)}
.gal-prev{left:.8rem} .gal-next{right:.8rem}
.gal-main #gal-img{cursor:zoom-in}
.gal-count{position:absolute; bottom:.8rem; right:.9rem; font-family:var(--mono);
  font-size:.7rem; background:rgba(0,19,29,.72); color:#fff;
  padding:.42rem .7rem; border-radius:2px; border:1px solid rgba(255,255,255,.25);
  cursor:pointer; transition:background .15s}
.gal-count:hover{background:rgba(0,19,29,.95)}

/* visualizador: todas as fotos em rolagem vertical, tamanho grande */
.gal-view{position:fixed; inset:0; z-index:120; background:rgba(0,10,16,.98);
  display:flex; flex-direction:column}
.gal-view[hidden]{display:none}
.gal-view-top{display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.8rem 1rem; color:#fff; flex:0 0 auto}
.gv-title{font-family:var(--serif); font-size:1.05rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.gv-close{width:44px; height:44px; border-radius:50%; border:none; flex:0 0 auto;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.15rem;
  cursor:pointer; display:grid; place-items:center; transition:background .15s}
.gv-close:hover{background:rgba(255,255,255,.28)}
.gal-view-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 .7rem 2.5rem}
.gal-view-body img{display:block; width:100%; max-width:1000px;
  margin:0 auto .8rem; border-radius:4px; cursor:zoom-in}

/* zoom: UMA foto em tela cheia, por cima da rolagem */
.gal-zoom{position:fixed; inset:0; z-index:140; background:rgba(0,6,10,.99);
  display:grid; place-items:center}
.gal-zoom[hidden]{display:none}
.gal-zoom img{max-width:100vw; max-height:100vh; object-fit:contain}
.gz-back{position:absolute; top:.9rem; left:1rem; z-index:2;
  background:rgba(255,255,255,.14); color:#fff; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.92rem; padding:.6rem 1rem;
  border-radius:999px; transition:background .15s}
.gz-back:hover{background:rgba(255,255,255,.3)}
.gal-zoom .gal-prev{left:.7rem}
.gal-zoom .gal-next{right:.7rem}
.gz-count{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.72rem; color:#fff;
  background:rgba(0,19,29,.7); padding:.35rem .8rem; border-radius:999px}
.thumbs{display:flex; gap:.5rem; overflow-x:auto; margin-top:.6rem; padding-bottom:.4rem;
  scrollbar-width:thin}
.thumbs img{width:112px; height:78px; object-fit:cover; border-radius:2px; cursor:pointer;
  opacity:.72; flex:none; border:2px solid transparent; transition:opacity .15s}
.thumbs img:hover{opacity:1}
.thumbs img.sel{opacity:1; border-color:var(--gold)}

/* ------------------------------------------- vídeo do imóvel (reels 9:16)
   Os vídeos da Valley são gravados no celular, em pé. Em vez de tentar
   encaixá-los num player deitado (que sobraria tarja preta dos dois lados),
   a moldura é 9:16 e fica centrada — no desktop parece um celular apoiado na
   página; no celular ocupa a largura toda, que é o formato nativo do vídeo.
   `contain` sobre o navy garante que um vídeo fora do 9:16 (um horizontal
   antigo, por exemplo) apareça inteiro em vez de cortado. */
.reel{position:relative; margin:0 auto; width:min(340px,100%); aspect-ratio:9/16;
  background:var(--navy); border-radius:6px; overflow:hidden; box-shadow:var(--shadow)}
.reel video{width:100%; height:100%; object-fit:contain; display:block;
  background:var(--navy)}
.reel-som{position:absolute; z-index:2; top:.7rem; right:.7rem; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.01em;
  color:#1a1206; background:var(--gold); border:none; border-radius:999px;
  padding:.45rem .85rem; box-shadow:0 6px 16px -6px rgba(0,0,0,.55);
  transition:filter .18s, transform .18s}
.reel-som:hover{filter:brightness(1.08); transform:translateY(-1px)}
.reel-som[hidden]{display:none}
.reel-cap{margin-top:.7rem; text-align:center; color:var(--muted);
  font-size:.82rem}
/* chip "▶ Vídeo" sobre a foto principal: avisa que tem vídeo sem rolar a página */
.gal-video{position:absolute; z-index:2; bottom:.8rem; left:.9rem; cursor:pointer;
  font-family:var(--sans); font-size:.76rem; font-weight:600; color:#1a1206;
  background:var(--gold); border:none; border-radius:999px; padding:.42rem .9rem;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.55); transition:filter .18s, transform .18s}
.gal-video:hover{filter:brightness(1.08); transform:translateY(-1px)}
.gal-video[hidden]{display:none}
/* selo no card do catálogo */
.card .vid{position:absolute; z-index:2; top:.8rem; right:.8rem; font-family:var(--mono);
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  background:rgba(0,19,29,.82); color:#fff; padding:.34rem .55rem; border-radius:1px;
  white-space:nowrap; backdrop-filter:saturate(140%) blur(2px)}

.d-type{font-family:var(--mono); font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold)}
.d-title{font-size:clamp(1.7rem,3.4vw,2.6rem); margin-top:.4rem}
.d-sub{color:var(--muted); font-size:.95rem; margin-top:.4rem}
.spec-band{display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:2px;
  overflow:hidden; margin-top:1.6rem}
.spec-band .sp{background:var(--surface); padding:.95rem .6rem; text-align:center}
.spec-band .sp b{display:block; font-family:var(--serif); font-size:1.3rem; font-weight:500}
.spec-band .sp span{font-family:var(--mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}
.d-block{margin-top:2.2rem}
.d-block h3{font-size:1.3rem; margin-bottom:.9rem}
.d-desc{color:var(--muted); font-size:.98rem; line-height:1.75; white-space:pre-line}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{font-size:.8rem; border:1px solid var(--line); padding:.35rem .75rem;
  border-radius:999px; color:var(--muted); background:var(--surface)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; font-size:.9rem}
.kv dt{color:var(--faint); font-family:var(--mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; align-self:center}
.kv dd{margin:0; color:var(--ink)}

.side-card{position:sticky; top:98px; background:var(--surface); border:1px solid var(--line);
  border-radius:4px; padding:1.7rem; box-shadow:var(--shadow)}
.side-card .cod{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  color:var(--faint); text-transform:uppercase}
.side-card .val{font-family:var(--serif); font-size:2rem; margin:.5rem 0 .2rem;
  font-variant-numeric:tabular-nums}
.side-card .extra{font-size:.82rem; color:var(--muted); display:flex; flex-direction:column;
  gap:.15rem; margin-bottom:1.2rem}
.side-card .btn{width:100%; margin-top:.6rem}
.side-card .talk{font-size:.8rem; color:var(--muted); margin-top:1rem; text-align:center}

.skel{color:var(--muted); text-align:center; padding:4rem 1rem; font-size:.95rem}

/* -------------------------------------------- mobile: ver mais / FAB / barra */
.more-btn{display:none; width:100%; margin-top:1.5rem}
.fab-wa{position:fixed; z-index:60; right:1rem; bottom:1rem; width:56px; height:56px;
  border-radius:50%; background:#25D366; display:none; place-items:center;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.5)}
.fab-wa svg{width:30px; height:30px; fill:#fff}
.mob-bar{position:fixed; z-index:60; left:0; right:0; bottom:0; display:none;
  align-items:center; gap:.9rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
  background:var(--navy); border-top:1px solid rgba(239,236,228,.16)}
.mob-bar .mb-info{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.mob-bar .mb-cod{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-navy-muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.mob-bar .mb-preco{font-family:var(--serif); font-size:1.25rem; color:#fff;
  font-variant-numeric:tabular-nums}
.mob-bar .btn{margin-left:auto; padding:.8rem 1.2rem; flex-shrink:0}

/* ------------------------------------------------------------ reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* --------------------------------------------------------- responsivo */
@media (max-width:1000px){
  .search-row{grid-template-columns:1fr 1fr}
  .search-row .btn{grid-column:1/-1}
  .detail-grid{grid-template-columns:1fr}
  .side-card{position:static}
}
@media (max-width:900px){
  .navlinks,.phone{display:none}
  .menu-btn{display:block}
  .navlinks.open{display:flex; position:absolute; top:78px; left:0; right:0;
    flex-direction:column; align-items:stretch; background:var(--navy);
    border-bottom:1px solid rgba(239,236,228,.13);
    padding:.4rem clamp(1.25rem,5vw,3rem) 1.2rem; gap:0;
    box-shadow:0 26px 40px -22px rgba(0,0,0,.6)}
  .navlinks.open a{padding-block:.95rem; font-size:1rem;
    border-bottom:1px solid rgba(239,236,228,.09)}
  .navlinks.open a::after{display:none}
  .navlinks.open .nav-wa{display:flex; justify-content:center; margin-top:1.1rem;
    background:var(--gold); color:#1a1206; font-weight:600; border:none;
    border-radius:1px; padding:.95rem}
  .fab-wa{display:grid}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .cards,.pillars{grid-template-columns:1fr 1fr}
  .sell .grid,.team-grid{grid-template-columns:1fr}
  .hoods{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-cta .btn{display:none} /* no celular o menu ☰ já leva pro contato */
  .brand .name{font-size:1.25rem}
}
@media (max-width:760px){
  /* no mobile o texto ocupa a largura toda → overlay vertical forte sobre a foto */
  .hero{
    background:
      linear-gradient(180deg,
        rgba(0,19,29,.93) 0%, rgba(0,19,29,.84) 46%, rgba(0,19,29,.74) 100%),
      url('/assets/img/hero-mobile.jpg') center top / cover no-repeat,
      var(--hero-2);
  }
  /* a caixa de busca é alta no celular; a sobreposição (margin negativa) fazia o
     overflow:hidden do hero cortar o rodapé. No mobile ela para de flutuar e senta
     limpa, com folga normal até o catálogo. */
  .search{margin-bottom:1.5rem}
  #destaques{padding-top:clamp(2.5rem,7vw,3.5rem)}
  .gal-main{aspect-ratio:4/3}
  .gal-btn{width:38px; height:38px}
}
@media (max-width:700px){
  .more-btn{display:block} /* o JS esconde quando não há mais imóveis */
}
@media (max-width:560px){
  .cards,.pillars,.stats-grid,.foot-top,.search-row{grid-template-columns:1fr}
  .spec-band{grid-template-columns:repeat(3,1fr)}
  /* bairros: grade 2x2 compacta em vez de blocões empilhados */
  .hoods{grid-template-columns:1fr 1fr; gap:.8rem}
  .hood{aspect-ratio:1/1.08; padding:.9rem}
  .hood .hn{font-size:1.02rem}
}
@media (max-width:1000px){
  .mob-bar{display:flex}
  body:has(.mob-bar) footer{padding-bottom:6rem}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none; transition:none}
  .card:hover,.hood:hover,.btn:hover{transform:none}
  .card:hover .photo img{transform:none}
}