/* ==========================================================================
   Portal Jardins de Laranjeiras, LEAL Imóveis
   Paleta tirada da própria fachada: reboco off-white quente, faixa areia,
   base taupe, esquadrias escuras. O acento é um ocre queimado.
   Versão de outubro de 2026: menos texto, mais leitura rápida. Cada seção
   tem um título curto e o mínimo de frase possível.
   ========================================================================== */

:root{
  --terra:#2A2420;
  --taupe:#4A3F35;
  --taupe-2:#5E5044;
  --bege:#F6F0E7;
  --bege-2:#EDE4D7;
  --areia:#C9B79C;
  --branco-s:#EFE7DA;
  --ocre:#A8752E;
  --ocre-cl:#E0C089;
  --ocre-esc:#7A5F33;
  --ink:#2A2420;
  --ink-soft:#5A5148;
  --linha:#E0D5C4;
  --linha-esc:rgba(224,192,137,.22);
  --wa:#25D366;
  --wa-txt:#0E7A3C;
  --wa-txt-d:#0A6531;
  --vinho:#820633;
  --rosa:#BB2852;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --maxw:1200px;
  --pad-sec:clamp(60px,7.5vw,108px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--bege); color:var(--ink);
  font-family:var(--sans); font-size:1.06rem; font-weight:400; line-height:1.6;
  /* a Cormorant usa algarismos antigos por padrão: o 1 vira um "I" e o 3 desce da linha */
  font-variant-numeric:lining-nums;
  overflow-x:hidden;
  /* desencoraja a cópia casual; os campos continuam editáveis */
  -webkit-user-select:none; user-select:none;
}
input,textarea,select,[contenteditable]{-webkit-user-select:text; user-select:text}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.18; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--rosa); color:#fff}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(18px,4vw,36px)}
.section-pad{padding-block:var(--pad-sec)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200; background:var(--terra); color:var(--bege);
  padding:12px 18px; border-radius:4px; font-size:.92rem; font-weight:600; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:calc(16px + env(safe-area-inset-top,0px))}
:is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--ocre); outline-offset:3px; border-radius:2px}

/* ---------- entrada das seções ----------
   As duas regras levam a guarda html.js. Sem ela na primeira, um script que
   não carregue deixa a página invisível; sem ela na segunda, a especificidade
   da primeira vence e nada é revelado.
   O script dispara a entrada um pouco antes do bloco chegar à tela, então no
   celular ele já entra aparecendo, sem faixa vazia nem surgimento brusco. */
html.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
html.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1; transform:none}
}

/* ---------- tipografia ---------- */
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ocre-esc);
}
.eyebrow::after{
  content:""; display:inline-block; width:28px; height:1px; background:currentColor;
  opacity:.6; vertical-align:middle; margin-left:14px; transform:translateY(-2px);
}
.on-dark .eyebrow{color:var(--ocre-cl)}
.display{
  font-family:var(--serif); font-weight:600; letter-spacing:.005em;
  font-size:clamp(2rem,4.6vw,3.1rem); color:var(--taupe);
}
.on-dark .display{color:var(--branco-s)}
.display .destaque{color:var(--ocre-esc)}
.on-dark .display .destaque{color:var(--ocre-cl)}
.lead{
  font-size:clamp(1.06rem,1.7vw,1.2rem); color:var(--ink-soft);
  max-width:56ch; text-wrap:balance;
}
.on-dark .lead{color:rgba(239,231,218,.88)}
.section-head{margin-bottom:clamp(30px,3.6vw,46px)}
.section-head .display{margin-top:16px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px; border-radius:4px; border:1px solid transparent;
  font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn svg{width:19px; height:19px; flex:none}
.btn-ocre{background:var(--ocre-cl); color:var(--terra); border-color:var(--ocre-cl)}
.btn-ocre:hover{background:#EBD0A4; border-color:#EBD0A4}
.btn-linha{background:transparent; color:var(--branco-s); border-color:rgba(239,231,218,.6)}
.btn-linha:hover{border-color:var(--branco-s); background:rgba(239,231,218,.10)}
.btn-escuro{background:var(--taupe); color:var(--branco-s); border-color:var(--taupe)}
.btn-escuro:hover{background:var(--terra); border-color:var(--terra)}
/* branco sobre #25D366 dá 1,98:1 e reprova; o verde de marca fica só no FAB, sem texto */
.btn-wa{background:var(--wa-txt); color:#fff; border-color:var(--wa-txt)}
.btn-wa:hover{background:var(--wa-txt-d); border-color:var(--wa-txt-d)}
.btn-fantasma{background:transparent; color:var(--taupe); border-color:#CDBFA9}
.btn-fantasma:hover{border-color:var(--taupe); background:rgba(74,63,53,.05)}

/* ---------- cabeçalho ---------- */
#header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 14px;
  background:transparent; transition:background .3s ease, box-shadow .3s ease, transform .35s ease, padding .3s ease;
}
#header.scrolled{
  background:rgba(246,240,231,.96); box-shadow:0 1px 0 var(--linha);
  padding:10px 0 10px; backdrop-filter:blur(8px);
}
#header.hide{transform:translateY(-104%)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.head-logo{display:inline-flex; align-items:center; min-height:44px}
.head-logo img{height:42px; width:auto; transition:height .3s ease}
#header.scrolled .head-logo img{height:36px}
.head-logo{opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s}
#header.scrolled .head-logo{opacity:1; visibility:visible}
.head-logo .claro{display:block}
.head-logo .escuro{display:none}
#header.scrolled .head-logo .claro{display:none}
#header.scrolled .head-logo .escuro{display:block}
.menu{display:flex; align-items:center; gap:28px}
.menu a:not(.btn){
  font-size:.96rem; font-weight:500; text-decoration:none; color:var(--branco-s);
  padding:6px 0; border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.menu a:not(.btn):hover{border-bottom-color:currentColor}
#header.scrolled .menu a:not(.btn){color:var(--taupe)}
.head-cta{min-height:44px; padding:11px 20px; font-size:.94rem}
@media (min-width:861px){ .menu .head-cta{display:none} }
@media (max-width:860.98px){ .head-cta.desk{display:none} }
.hamb{display:none; width:46px; height:46px; align-items:center; justify-content:center; background:none; border:1px solid rgba(239,231,218,.5); border-radius:4px; cursor:pointer}
#header.scrolled .hamb{border-color:var(--linha)}
.hamb span{display:block; width:20px; height:2px; background:var(--branco-s); position:relative}
.hamb span::before,.hamb span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:inherit}
.hamb span::before{top:-6px} .hamb span::after{top:6px}
#header.scrolled .hamb span, #header.scrolled .hamb span::before, #header.scrolled .hamb span::after{background:var(--taupe)}
/* escala em vez de largura: não recalcula o layout a cada quadro da rolagem */
.progress{position:fixed; top:0; left:0; height:2px; width:100%; background:var(--ocre); z-index:95; transform:scaleX(0); transform-origin:0 50%; will-change:transform}

/* ---------- abertura ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; color:var(--branco-s);
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 58%}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,13,.70) 0%, rgba(20,16,13,.46) 26%, rgba(20,16,13,.58) 58%, rgba(20,16,13,.92) 100%);
}
/* o hero é flex column: sem width:100% o margin:auto do .wrap cancela o stretch */
.hero-in{position:relative; z-index:1; width:100%; padding-block:clamp(120px,18vh,180px) clamp(26px,4vh,40px)}
.hero-logo{width:clamp(260px,32vw,400px); height:auto; margin-bottom:clamp(22px,4vh,36px); filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
.hero .eyebrow{color:var(--ocre-cl); text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero h2.display{
  color:#fff; margin:16px 0 14px; max-width:17ch;
  font-size:clamp(2.2rem,5.4vw,3.6rem); text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-sub{
  font-size:clamp(1.06rem,1.9vw,1.22rem); color:rgba(255,255,255,.94);
  max-width:46ch; margin-bottom:26px; text-wrap:balance;
}
.hero-acoes{display:flex; flex-wrap:wrap; gap:12px}
.hero-nota{margin-top:18px; font-size:.84rem; color:rgba(255,255,255,.8)}

/* as três tipologias, com preço, no pé da primeira tela */
.hero-portas{
  position:relative; z-index:1; background:rgba(26,21,18,.82); backdrop-filter:blur(6px);
  border-top:1px solid rgba(224,192,137,.3);
}
.portas-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(224,192,137,.2)}
.porta{
  background:rgba(26,21,18,.94); padding:18px 20px; min-height:104px;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  text-decoration:none; color:var(--branco-s); transition:background .2s ease;
}
.porta:hover{background:rgba(74,63,53,.94)}
.porta b{font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.15; color:#fff}
.porta span{font-size:.92rem; color:rgba(239,231,218,.8); line-height:1.4}
.porta .preco{color:var(--ocre-cl); font-weight:600}

/* ---------- o empreendimento ---------- */
.emp-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,64px); align-items:center}
.emp-foto{position:relative; isolation:isolate; max-width:440px; justify-self:end; width:100%}
.emp-foto img{width:100%; height:auto; border-radius:3px}
.emp-foto::before{
  content:""; position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border:1px solid var(--ocre); opacity:.55; border-radius:3px;
}
.emp-numeros{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--linha); margin-top:30px; border:1px solid var(--linha); max-width:520px}
.emp-num{background:var(--bege); padding:20px 18px}
.emp-num b{display:block; font-family:var(--serif); font-variant-numeric:lining-nums; font-size:2.4rem; font-weight:600; color:var(--ocre-esc); line-height:1}
.emp-num span{display:block; margin-top:6px; font-size:.95rem; color:var(--ink-soft); font-weight:500}

/* ---------- faixa da BRZ ---------- */
.brz{
  margin-top:clamp(44px,6vw,76px); background:var(--taupe); color:var(--branco-s);
  border-top:2px solid var(--ocre-cl); border-radius:5px; padding:clamp(24px,3.4vw,40px);
  display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr); gap:22px clamp(24px,3.4vw,44px); align-items:center;
}
.brz .eyebrow{color:var(--ocre-cl)}
.brz-tit{font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:600; line-height:1.12; margin-top:12px; color:#fff; text-wrap:balance}
.brz-tit em{font-style:normal; color:var(--ocre-cl)}
.brz-nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(224,192,137,.24); border:1px solid rgba(224,192,137,.24)}
.brz-num{background:var(--taupe); padding:18px 16px}
.brz-num b{display:block; font-family:var(--serif); font-variant-numeric:lining-nums; font-size:clamp(2rem,3vw,2.5rem); font-weight:600; line-height:1; color:#fff; white-space:nowrap}
.brz-num.ent b{color:var(--ocre-cl)}
.brz-num span{display:block; margin-top:7px; font-size:.9rem; line-height:1.35; color:rgba(239,231,218,.84)}
.brz-nota{grid-column:1 / -1; font-size:.84rem; color:rgba(239,231,218,.72)}

/* ---------- plantas ---------- */
.plantas{background:var(--bege-2)}
.plantas-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px)}
.pcard{
  scroll-margin-top:84px;
  background:var(--bege); border:1px solid var(--linha); border-radius:5px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:box-shadow .35s ease, transform .35s ease;
}
.pcard:hover{transform:translateY(-4px); box-shadow:0 26px 46px -30px rgba(42,36,32,.42)}
/* mesma proporção nas três imagens, para os cartões alinharem */
.pcard-img{
  position:relative; background:#fff; cursor:zoom-in; border:0; border-bottom:1px solid var(--linha);
  padding:14px; width:100%; display:block; aspect-ratio:4/3;
}
.pcard-img img{position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain}
.pcard-corpo{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.pcard h3{font-family:var(--serif); font-size:2rem; color:var(--taupe); line-height:1.05}
.pcard .metros{margin-top:6px; font-size:1.05rem; color:var(--ink-soft); font-weight:500}
.pcard .preco{margin-top:14px; font-size:1.5rem; font-weight:600; color:var(--ocre-esc); line-height:1.15}
.pcard .preco span{display:block; font-size:.84rem; font-weight:500; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:2px}
.pcard .var{margin-top:14px; color:var(--ink-soft); font-size:.97rem; flex:1; text-wrap:pretty}
.pcard .acoes{margin-top:20px; display:grid; grid-template-columns:1fr; gap:10px}

.comum{
  margin-top:clamp(24px,3vw,36px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:5px; overflow:hidden;
}
.comum li{background:var(--bege); padding:16px 18px; display:flex; gap:10px; align-items:center; font-size:1rem; font-weight:500; color:var(--ink)}
.comum svg{width:18px; height:18px; flex:none; color:var(--ocre-esc)}
.plantas-nota{margin-top:18px; font-size:.88rem; color:var(--ink-soft)}

/* ---------- pagamento ---------- */
.cond{background:var(--taupe); color:var(--branco-s)}
.cond-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
.ccard{
  background:rgba(239,231,218,.07); border:1px solid rgba(224,192,137,.26); border-top:2px solid var(--ocre-cl);
  border-radius:5px; padding:28px 26px 30px; display:flex; flex-direction:column;
}
.ccard .rot{font-size:.86rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ocre-cl)}
.ccard .big{margin-top:14px; font-family:var(--serif); font-size:clamp(3rem,5.4vw,3.8rem); font-weight:600; color:#fff; line-height:1; white-space:nowrap}
.ccard .big small{font-size:.42em; font-weight:600; color:rgba(239,231,218,.86); margin-right:4px}
.ccard .uni{margin-top:6px; font-size:1rem; color:rgba(239,231,218,.86)}
.ccard .txt{margin-top:16px; padding-top:16px; border-top:1px solid rgba(224,192,137,.2); font-size:.98rem; color:rgba(239,231,218,.9); text-wrap:pretty}

.cond-faixa{
  margin-top:clamp(18px,2.4vw,26px); display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:rgba(224,192,137,.13); border:1px solid rgba(224,192,137,.42); border-radius:5px;
  padding:24px clamp(20px,3vw,32px);
}
.nw{white-space:nowrap}
.destaque-txt{font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.7rem); font-weight:600; color:#fff; line-height:1.25; text-wrap:balance; max-width:32ch}
.selos{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px 22px}
.selos li{display:flex; align-items:center; gap:8px; font-size:.96rem; color:#ECD6AB; font-weight:500}
.selos li::before{content:"\25C6"; font-size:.55rem}
.cond-faixa .btn{flex:none}
.cond-nota{margin-top:16px; font-size:.86rem; color:rgba(239,231,218,.74)}

/* ---------- lazer ---------- */
.lazer-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(26px,3.4vw,46px); align-items:center}
.impl-img{
  position:relative; border:1px solid var(--linha); border-radius:5px; overflow:hidden;
  background:#fff; cursor:zoom-in; padding:0; width:100%; display:block;
}
.impl-img img{width:100%; height:auto}
.lazer-fotos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-bottom:clamp(26px,3.4vw,46px)}
.lazer-foto{position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; border:0; border-radius:5px; overflow:hidden; cursor:zoom-in; background:var(--bege-2)}
.lazer-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.lazer-foto:hover img{transform:scale(1.03)}
.lupa{
  position:absolute; right:12px; bottom:12px; background:rgba(42,36,32,.86); color:var(--ocre-cl);
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:8px 13px; border-radius:3px;
}
.itens{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px}
.itens li{
  display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--linha);
  font-size:1rem; color:var(--ink);
}
.itens li::before{content:"\25C6"; color:var(--ocre); font-size:.55rem; flex:none}

/* ---------- localização ---------- */
.loc{background:var(--bege-2)}
.loc-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,56px); align-items:center}
.perto{font-size:.86rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ocre-esc); margin-bottom:10px}
.loc-lista{margin-bottom:28px; border-top:1px solid var(--linha)}
.loc-lista li{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--linha); font-size:1.08rem; font-weight:500; color:var(--ink)}
.loc-lista svg{width:20px; height:20px; flex:none; color:var(--ocre-esc)}
.loc-mapa{border:1px solid var(--linha); border-radius:5px; overflow:hidden; background:var(--bege)}
.loc-mapa iframe{width:100%; height:clamp(320px,46vh,460px); border:0; display:block}

/* ---------- dúvidas ---------- */
.faq .wrap{max-width:880px}
.faq-list{border-top:1px solid var(--linha)}
.faq-item{border-bottom:1px solid var(--linha)}
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer;
  padding:22px 4px; font-size:1.08rem; font-weight:600; color:var(--taupe); list-style:none;
  min-height:56px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{width:16px; height:16px; flex:none; position:relative}
.faq-ic::before,.faq-ic::after{content:""; position:absolute; background:var(--ocre-esc); transition:transform .25s ease}
.faq-ic::before{left:0; top:7px; width:16px; height:2px}
.faq-ic::after{left:7px; top:0; width:2px; height:16px}
.faq-item[open] .faq-ic::after{transform:scaleY(0)}
.faq-a{padding:0 4px 24px; color:var(--ink-soft); max-width:72ch}
.faq-a p + p{margin-top:12px}

/* ---------- cadastro e atendimento ---------- */
.atend{background:linear-gradient(165deg,var(--taupe-2) 0%,var(--taupe) 42%,var(--terra) 100%); color:var(--branco-s)}
.atend-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,64px); align-items:start}
.form-box{background:rgba(239,231,218,.09); border:1px solid rgba(224,192,137,.28); border-top:2px solid var(--ocre-cl); border-radius:5px; padding:clamp(24px,3vw,36px); box-shadow:0 26px 50px -34px rgba(0,0,0,.6)}
.campo{margin-bottom:18px}
.campo label{display:block; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--ocre-cl); margin-bottom:8px}
.campo label .opc{text-transform:none; letter-spacing:0; font-weight:400; opacity:.75}
.campo input{
  width:100%; font-family:var(--sans); font-size:1.02rem; color:var(--branco-s);
  background:rgba(0,0,0,.30); border:1px solid rgba(224,192,137,.30); border-radius:4px;
  padding:13px 14px; min-height:52px;
}
.campo input::placeholder{color:rgba(239,231,218,.5)}
.campo.invalid input{border-color:#E39A92}
.erro{display:none; margin-top:7px; font-size:.88rem; color:#E39A92}
.erro.show{display:block}
.opcoes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
.opcoes.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.opcoes.andar{grid-template-columns:1.5fr 1fr 1fr}
.opt{
  font-family:var(--sans); font-size:.95rem; font-weight:500; cursor:pointer; min-height:48px;
  background:rgba(0,0,0,.30); color:rgba(239,231,218,.9); border:1px solid rgba(224,192,137,.30);
  border-radius:4px; padding:11px 8px; text-align:center; transition:all .18s ease;
}
.opt:hover{border-color:var(--ocre-cl); color:var(--branco-s)}
.opt.sel{background:var(--ocre-cl); color:var(--terra); border-color:var(--ocre-cl); font-weight:600}
.consent{display:flex; gap:11px; align-items:flex-start; margin:8px 0 20px; font-size:.92rem; color:rgba(239,231,218,.86)}
.consent input{width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--ocre)}
.form-ok{margin-top:16px; padding:14px 16px; border:1px solid rgba(143,199,159,.5); background:rgba(63,107,74,.2); border-radius:4px; font-size:.95rem}
.aside-or{text-align:center; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ocre-cl); font-weight:600; margin:0 0 20px}
.corretores{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cor{background:rgba(239,231,218,.09); border:1px solid rgba(224,192,137,.26); border-radius:5px; padding:26px 16px; text-align:center; transition:background .3s ease, transform .3s ease}
.cor:hover{background:rgba(239,231,218,.14); transform:translateY(-4px)}
.cor .ini{
  width:96px; height:96px; margin:0 auto 14px; border-radius:50%; display:block;
  object-fit:cover; object-position:center top;
  border:3px solid rgba(224,192,137,.85); box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.cor b{display:block; font-size:1.05rem}
.cor span{display:block; font-size:.84rem; letter-spacing:.04em; color:rgba(239,231,218,.78); margin-top:4px}
.cor .btn{margin-top:16px; width:100%; min-height:46px; font-size:.94rem; padding:11px 10px; white-space:nowrap}
.cor .btn svg{width:18px; height:18px; flex:none}
.cor .btn span{display:inline; margin:0; font-size:inherit; letter-spacing:normal; color:inherit}
.trust{margin-top:26px; display:flex; gap:12px 22px; flex-wrap:wrap; justify-content:center; font-size:.9rem; color:rgba(239,231,218,.8)}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust svg{width:16px; height:16px; color:var(--ocre-cl)}

/* ---------- rodapé ---------- */
.rodape{background:#1F1A16; color:rgba(239,231,218,.72); padding-block:clamp(48px,6vw,72px) 0}
.rod-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:clamp(30px,4vw,44px)}
.rod-logo-emp{height:48px; width:auto; margin-bottom:16px}
.rod-emp p{font-size:.95rem; line-height:1.6; color:rgba(239,231,218,.78); max-width:34ch; text-wrap:balance}
.rod-grid h4{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ocre-cl); margin-bottom:14px}
.rod-grid a{color:rgba(239,231,218,.82); text-decoration:none; font-size:.96rem; display:inline-flex; align-items:center; min-height:44px}
.rod-grid a:hover{color:var(--ocre-cl)}
.rod-grid li{margin-bottom:2px}
.rod-grid a.rod-leal-logo{display:block; width:max-content; min-height:0; margin:4px 0 10px}
.rod-leal-logo img{height:40px; width:auto; display:block}
.rod-legal{border-top:1px solid rgba(239,231,218,.14); padding-block:24px 22px; font-size:.82rem; line-height:1.65; color:rgba(239,231,218,.62)}
.rod-fim{border-top:1px solid rgba(239,231,218,.14); padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:.86rem; color:rgba(239,231,218,.66); padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.rod-fim .creci{color:var(--ocre-cl); font-weight:600; letter-spacing:.04em}
.rod-fim span:last-child{flex-basis:100%; font-size:.82rem; color:rgba(239,231,218,.56); line-height:1.6}

/* ---------- botões flutuantes ---------- */
.fab{
  position:fixed; right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:80;
  width:60px; height:60px; border-radius:50%; background:var(--wa); color:#0B1D15;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:all .3s ease;
}
body.away .fab{opacity:1; visibility:visible; transform:none}
.fab svg{width:31px; height:31px}
.fab::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--wa); opacity:.45; animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(.92); opacity:.5} 70%{transform:scale(1.22); opacity:0} 100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fab::after{animation:none}}
.toTop{
  position:fixed; left:calc(18px + env(safe-area-inset-left,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:80;
  width:52px; height:52px; border-radius:50%; background:rgba(42,36,32,.85); color:var(--ocre-cl);
  border:1px solid var(--linha-esc); display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transition:all .3s ease;
}
body.away .toTop{opacity:1; visibility:visible}
.toTop svg{width:19px; height:19px}
body.modal-open, body.menu-open{overflow:hidden}
body.modal-open .fab, body.modal-open .toTop{opacity:0; visibility:hidden}

/* ---------- galeria ampliada ---------- */
.lb{position:fixed; inset:0; z-index:120; background:rgba(18,14,11,.95); display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px) clamp(12px,3vw,40px) 70px}
.lb[hidden]{display:none!important}
.lb img{max-width:100%; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:3px; background:#fff}
.lb-cap{position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom,0px)); text-align:center; color:var(--branco-s); font-size:1rem; padding-inline:70px}
.lb-btn{
  position:absolute; background:rgba(239,231,218,.14); border:1px solid rgba(239,231,218,.34); color:var(--branco-s);
  width:52px; height:52px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lb-btn:hover{background:rgba(239,231,218,.26)}
.lb-btn svg{width:20px; height:20px}
.lb-close{top:calc(16px + env(safe-area-inset-top,0px)); right:16px}
.lb-prev{left:14px; top:50%; transform:translateY(-50%)}
.lb-next{right:14px; top:50%; transform:translateY(-50%)}
.lb.unica .lb-prev,.lb.unica .lb-next{display:none}

/* ---------- modal de contato ---------- */
.cmodal{position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(18,14,11,.7); opacity:0; transition:opacity .28s ease}
.cmodal[hidden]{display:none!important}
.cmodal.show{opacity:1}
.cmodal-in{
  background:var(--bege); border-radius:6px; max-width:440px; width:100%; padding:30px 26px 26px;
  max-height:88vh; overflow-y:auto; transform:translateY(14px); transition:transform .28s ease;
}
.cmodal.show .cmodal-in{transform:none}
.cmodal h3{font-family:var(--serif); font-size:1.7rem; color:var(--taupe)}
.cmodal-sub{margin-top:8px; font-size:.97rem; color:var(--ink-soft)}
.cmodal-lista{margin-top:20px; display:flex; flex-direction:column; gap:10px}
.cmodal-item{
  display:flex; align-items:center; gap:14px; padding:12px 16px; min-height:68px;
  border:1px solid var(--linha); border-radius:4px; text-decoration:none; color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.cmodal-item:hover{border-color:var(--ocre); background:rgba(168,117,46,.05)}
.cmodal-item.destaque{border-color:var(--ocre); background:rgba(168,117,46,.07)}
.cmodal-item .ini{
  width:52px; height:52px; border-radius:50%; flex:none; object-fit:cover; object-position:center top;
  background:linear-gradient(145deg,var(--ocre-cl),var(--ocre)); color:var(--terra);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:1.05rem;
}
.cmodal-item b{display:block; font-size:1.02rem}
.cmodal-item span{display:block; font-size:.86rem; color:var(--ink-soft)}
.cmodal-fechar{margin-top:18px; width:100%; min-height:48px; background:none; border:1px solid var(--linha); border-radius:4px; font-family:var(--sans); font-size:.97rem; font-weight:600; color:var(--ink-soft); cursor:pointer}
.cmodal-fechar:hover{border-color:var(--taupe); color:var(--ink)}

/* ==========================================================================
   Responsivo. A maior parte do público vê pelo celular.
   ========================================================================== */
@media (max-width:1040px){
  .emp-grid,.loc-grid,.atend-grid,.lazer-grid{grid-template-columns:1fr}
  .brz{grid-template-columns:1fr}
  .emp-foto{justify-self:center; max-width:420px}
  .emp-numeros{max-width:none}
  .cond-cards{gap:14px}
  .ccard{padding:22px 18px}
  .ccard .rot{font-size:.8rem; letter-spacing:.05em}
  .ccard .big{font-size:2.8rem}
  .plantas-grid{gap:14px}
  .pcard-corpo{padding:20px 18px 22px}
  .pcard h3{font-size:1.7rem}
  .comum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cond-faixa{flex-direction:column; align-items:flex-start}
}
@media (max-width:860px){
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(330px,88vw);
    background:linear-gradient(165deg,var(--taupe-2) 0%,var(--taupe) 45%,var(--terra) 100%);
    border-left:2px solid var(--ocre-cl); box-shadow:-18px 0 44px -20px rgba(0,0,0,.7);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:8px;
    padding:80px 30px calc(30px + env(safe-area-inset-bottom,0px));
    transform:translateX(100%); visibility:hidden;
    transition:transform .32s ease, visibility .32s;
    z-index:100;
  }
  .menu.open{transform:none; visibility:visible}
  .menu a:not(.btn),#header.scrolled .menu a:not(.btn){color:#fff; font-size:1.12rem; font-weight:500; padding:14px 0; width:100%; border-bottom:1px solid rgba(224,192,137,.18)}
  .menu .head-cta{margin-top:16px; width:100%}
  .hamb{display:flex; z-index:101}
  .ov{position:fixed; inset:0; background:rgba(18,14,11,.6); z-index:99}
  .ov[hidden]{display:none!important}
  .rod-grid{grid-template-columns:1fr 1fr}
  .rod-emp{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:1.04rem}
  .hero{min-height:92svh}
  .hero-acoes{flex-direction:column}
  .hero-acoes .btn{width:100%}
  .hero-logo{width:min(70vw,280px)}
  .portas-grid{grid-template-columns:1fr}
  /* max-content e nowrap: no Safari do iPhone a metragem quebrava em "46 / m²" */
  .porta{min-height:auto; padding:14px 18px; display:grid; grid-template-columns:minmax(0,1fr) max-content; column-gap:14px; row-gap:2px; align-items:baseline}
  .porta b{font-size:1.35rem}
  .porta span{font-size:.9rem; white-space:nowrap; justify-self:end}
  .porta .preco{grid-column:1 / -1; justify-self:start}
  .emp-num{padding:16px 16px}
  .emp-num b{font-size:2rem}
  .plantas-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
  .cond-cards{grid-template-columns:1fr}
  .ccard{padding:24px 22px 26px}
  .ccard .big{font-size:3rem}
  .pcard-corpo{padding:24px 24px 26px}
  .pcard h3{font-size:2rem}
  .comum{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
  .plantas-nota{max-width:560px; margin-inline:auto}
  .itens{gap:0 16px}
  .brz{padding:24px 18px}
  .brz-nums{grid-template-columns:1fr}
  .brz-num{display:flex; align-items:center; gap:14px; padding:13px 14px}
  .brz-num b{font-size:1.9rem; min-width:5.2ch}
  .brz-num span{margin-top:0}
  .itens li{font-size:.95rem; align-items:flex-start; line-height:1.35}
  .itens li::before{margin-top:.45em}
  .corretores{grid-template-columns:1fr}
  .cor{display:flex; align-items:center; gap:16px; text-align:left; padding:16px 18px}
  .cor .ini{margin:0; width:66px; height:66px; border-width:2px}
  .cor .meio{flex:1; min-width:0}
  .cor .btn{margin-top:0; width:auto; padding:11px 16px; flex:none}
  .opt{font-size:.92rem; padding:11px 4px}
  .rod-grid{grid-template-columns:1fr; gap:26px}
  .rod-links{display:flex; flex-wrap:wrap; column-gap:22px}
  .rod-grid .rod-links li{margin:0}
  .lb-cap{padding-inline:20px; font-size:.92rem}
  .lb-prev{left:8px} .lb-next{right:8px}
  .fab{width:56px; height:56px}
  /* no celular o botão de voltar ao topo cobria o texto do lado esquerdo;
     no iPhone basta tocar na barra de status para subir */
  .toTop{display:none}
}

/* cartao do corretor com botao redondo so com o icone: com o texto
   "WhatsApp" o CRECI quebrava em duas linhas ate 480px */
@media (max-width:480px){
  .cor .meio span{white-space:nowrap}
  .cor{gap:12px; padding:14px}
  .cor .ini{width:58px; height:58px}
  .cor .btn{width:48px; height:48px; min-height:48px; padding:0; border-radius:50%; justify-content:center}
  .cor .btn svg{width:22px; height:22px}
  .cor .btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

/* telas bem estreitas */
@media (max-width:420px){
  .lazer-fotos{grid-template-columns:1fr}
  .form-box{padding:22px 18px}
  .form-box .btn{padding-inline:12px; white-space:nowrap}
}