/* ==========================================================================
   SYNC Studios, LEAL Imóveis
   Identidade tirada do próprio material da Sotegel: grafite quase preto,
   areia, verde-sálvia e o dourado do letreiro da fachada. Títulos em Archivo
   larga, em caixa alta; texto em Archivo normal. Pouco texto, foto grande.
   ========================================================================== */

/* Fontes fixas (uma por estilo), hospedadas no site. A versão variável do
   Google Fonts não renderiza no WebKit do Windows nem em alguns navegadores
   embutidos: a Archivo larga saía com as letras espaçadas em vez de largas. */
@font-face{font-family:'Archivo Site'; src:url(fonts/archivo-400.woff) format('woff'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Archivo Site'; src:url(fonts/archivo-500.woff) format('woff'); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Archivo Site'; src:url(fonts/archivo-600.woff) format('woff'); font-weight:600; font-style:normal; font-display:swap}
@font-face{font-family:'Archivo Larga'; src:url(fonts/archivo-larga-700.woff) format('woff'); font-weight:700; font-style:normal; font-display:swap}

:root{
  --carvao:#1D1A18;
  --grafite:#26221F;
  --grafite-2:#2F2A27;
  --offwhite:#F5F2EC;
  --areia:#E4DBCD;
  --areia-esc:#B9AC99;
  --salvia:#7C977B;
  --salvia-esc:#4F6B50;
  --dourado:#C9A264;
  --dourado-cl:#E3C68F;
  --tinta:#26221F;
  --tinta-soft:#5C554F;
  --linha:#DDD4C6;
  --linha-esc:rgba(227,198,143,.2);
  --wa:#25D366;
  --wa-txt:#0E7A3C;
  --wa-txt-d:#0A6531;
  --font:'Archivo Site',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --larga:'Archivo Larga','Archivo Site',system-ui,sans-serif;
  --maxw:1240px;
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(72px,9vw,128px);
}

*,*::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(--offwhite); color:var(--tinta);
  font-family:var(--font); font-size:1.06rem; font-weight:400; line-height:1.6;
  font-variant-numeric:lining-nums;
  overflow-x:hidden;
  -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.1; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
button{font-family:inherit}
::selection{background:var(--dourado); color:var(--carvao)}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.secao{padding-block:var(--sec)}
.claro{background:var(--offwhite); color:var(--tinta)}
.areia{background:var(--areia); color:var(--tinta)}
.escuro{background:var(--grafite); color:var(--offwhite)}
.nw{white-space:nowrap}
.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(--carvao); color:var(--offwhite);
  padding:12px 18px; border-radius:3px; 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(--dourado); outline-offset:3px; border-radius:2px}

/* ---------- entrada dos blocos ----------
   As duas regras levam a guarda html.js: sem script, nada fica escondido.
   O script dispara a entrada um pouco antes do bloco chegar à tela. */
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 ---------- */
.display{
  font-family:var(--larga); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1; font-size:clamp(2rem,4.2vw,3.4rem);
}
.display em{font-style:normal; color:var(--salvia-esc)}
.escuro .display em, .hero .display em{color:var(--dourado-cl)}
.eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  font-size:.8rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--salvia-esc);
}
.eyebrow::before{content:""; width:28px; height:2px; background:currentColor; flex:none}
.escuro .eyebrow, .hero .eyebrow{color:var(--dourado)}
.lead{font-size:clamp(1.08rem,1.6vw,1.22rem); color:var(--tinta-soft); max-width:46ch; text-wrap:balance}
.escuro .lead{color:rgba(245,242,236,.82)}
.cab{margin-bottom:clamp(34px,4.4vw,56px)}
.cab .display{max-width:22ch}
.nota{font-size:.86rem; color:var(--tinta-soft); margin-top:22px; text-wrap:balance}
.escuro .nota{color:rgba(245,242,236,.6)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px; border-radius:2px; border:1px solid transparent;
  font-family:var(--font); font-size:.95rem; font-weight:600; letter-spacing:.02em; 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 svg{width:19px; height:19px; flex:none}
.btn-ouro{background:var(--dourado); color:var(--carvao); border-color:var(--dourado)}
.btn-ouro:hover{background:var(--dourado-cl); border-color:var(--dourado-cl)}
.btn-linha{background:transparent; color:var(--offwhite); border-color:rgba(245,242,236,.45)}
.btn-linha:hover{border-color:var(--offwhite); background:rgba(245,242,236,.08)}
.btn-escuro{background:var(--grafite); color:var(--offwhite); border-color:var(--grafite)}
.btn-escuro:hover{background:var(--carvao); border-color:var(--carvao)}
.btn-fantasma{background:transparent; color:var(--offwhite); border-color:rgba(245,242,236,.3)}
.btn-fantasma:hover{border-color:var(--dourado-cl); color:var(--dourado-cl)}
.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)}

/* ---------- cabeçalho ---------- */
#header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding:calc(16px + env(safe-area-inset-top,0px)) 0 16px;
  background:transparent; transition:background .3s ease, box-shadow .3s ease, transform .35s ease, padding .3s ease;
}
#header.scrolled{background:rgba(245,242,236,.96); box-shadow:0 1px 0 var(--linha); padding:10px 0; 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; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s}
#header.scrolled .head-logo{opacity:1; visibility:visible}
.head-logo img{height:30px; width:auto}
.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:30px}
.menu a:not(.btn){
  font-size:.86rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--offwhite); 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(--tinta)}
.head-cta{min-height:44px; padding:11px 20px; font-size:.88rem}
@media (min-width:1001px){ .menu .head-cta{display:none} }
@media (max-width:1000.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(245,242,236,.5); border-radius:2px; cursor:pointer}
#header.scrolled .hamb{border-color:var(--linha)}
.hamb span{display:block; width:20px; height:2px; background:var(--offwhite); 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(--tinta)}
.progress{position:fixed; top:0; left:0; height:2px; width:100%; background:var(--dourado); z-index:95; transform:scaleX(0); transform-origin:0 50%; will-change:transform}

/* ---------- abertura ---------- */
.hero{position:relative; background:var(--carvao); color:var(--offwhite); display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); min-height:max(100svh,700px)}
.hero-foto{grid-column:2; grid-row:1; position:relative; overflow:hidden}
.hero-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 34%}
.hero-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--carvao) 0%, rgba(29,26,24,0) 22%)}
.hero-in{
  grid-column:1; grid-row:1; position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:calc(120px + env(safe-area-inset-top,0px)) clamp(28px,5vw,88px) 64px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.hero-logo{width:clamp(150px,13vw,210px); height:auto; margin-bottom:clamp(30px,5vh,52px)}
.hero h1{font-size:clamp(2.5rem,4.6vw,4.3rem); line-height:.96; max-width:12ch}
.hero-sub{margin-top:24px; font-size:clamp(1.06rem,1.5vw,1.2rem); color:rgba(245,242,236,.85); max-width:34ch; text-wrap:balance}
.hero-preco{margin-top:34px; display:grid; gap:2px; padding-left:20px; border-left:2px solid var(--dourado)}
.hp-rot{font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dourado)}
.hp-de{font-size:.92rem; color:rgba(245,242,236,.7)}
.hp-de s{color:rgba(245,242,236,.5); margin-left:4px}
.hp-valor{font-family:var(--larga); font-weight:700; font-size:clamp(2.2rem,3.6vw,3rem); line-height:1.05; color:var(--dourado-cl); letter-spacing:-.01em}
.hero-acoes{margin-top:34px; display:flex; flex-wrap:wrap; gap:12px}
.hero-nota{margin-top:20px; font-size:.8rem; color:rgba(245,242,236,.55)}

/* os quatro tipos */
.tipos{background:var(--grafite); border-top:1px solid var(--linha-esc)}
.tipos-grid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.tipo{
  display:grid; align-content:center; gap:4px; padding:24px var(--pad); min-height:112px;
  text-decoration:none; color:var(--offwhite); border-left:1px solid var(--linha-esc); transition:background .2s ease;
}
.tipo:first-child{border-left:0}
.tipo:hover{background:var(--grafite-2)}
.tipo b{font-family:var(--larga); font-weight:700; font-size:1.7rem; line-height:1; letter-spacing:-.01em}
.tipo s{font-size:.86rem; color:rgba(245,242,236,.5); text-decoration-thickness:1px}
.tipo span{font-size:1rem; font-weight:600; color:var(--dourado-cl)}
.tipos-selo{
  margin:0; display:flex; align-items:center; justify-content:center; gap:6px 14px; flex-wrap:wrap; text-align:center;
  background:var(--dourado); color:var(--carvao); padding:11px var(--pad);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
}
.tipos-selo b{font-weight:600}
.tipos-selo span{display:inline-flex; align-items:center; gap:14px; font-weight:500; opacity:.85}
.tipos-selo span::before{content:"\25C6"; font-size:.55rem; letter-spacing:0}
.tipo i{font-style:normal; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dourado)}

/* ---------- localização ---------- */
.loc-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(36px,5.5vw,84px); align-items:center}
.loc-texto .display{font-size:clamp(2rem,3.4vw,3rem)}
.loc-texto .lead{margin-top:22px}
.metros{margin:34px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--linha)}
.metros li{padding:22px 16px 20px 0; border-bottom:1px solid var(--linha)}
.metros li:not(.dest) + li:not(.dest){padding-left:20px; border-left:1px solid var(--linha)}
.metros li.dest{grid-column:1 / -1; padding-right:0}
.metros li.dest b{font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.005em; text-transform:uppercase; color:var(--salvia-esc)}
.metros b{display:block; font-family:var(--larga); font-weight:700; font-size:clamp(2.2rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.02em; color:var(--tinta)}
.metros b small{font-size:.42em; margin-left:4px; letter-spacing:0; color:var(--salvia-esc)}
.metros span{display:block; margin-top:8px; font-size:.93rem; line-height:1.35; color:var(--tinta-soft)}
.loc-foto{position:relative; padding:0; border:0; background:var(--areia); cursor:zoom-in; border-radius:3px; overflow:hidden; display:block; width:100%}
.loc-foto img{width:100%; height:auto; transition:transform .8s ease}
.loc-foto:hover img{transform:scale(1.02)}
.nota-foto{position:absolute; right:14px; bottom:12px; font-size:.74rem; color:rgba(255,255,255,.88); text-shadow:0 1px 6px rgba(0,0,0,.6)}
.loc-mapa{margin-top:clamp(40px,5vw,64px); border-radius:3px; overflow:hidden; background:var(--areia); border:1px solid var(--linha)}
.loc-mapa iframe{display:block; width:100%; height:clamp(300px,40vh,420px); border:0; filter:grayscale(.55) contrast(1.02)}

/* ---------- studios ---------- */
.st-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px)}
.st{background:var(--grafite-2); border:1px solid var(--linha-esc); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; scroll-margin-top:90px}
.st-foto{position:relative; aspect-ratio:4/3; padding:0; border:0; background:var(--carvao); cursor:zoom-in; overflow:hidden; display:block; width:100%}
.st-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.st:hover .st-foto img{transform:scale(1.04)}
.st-corpo{padding:24px 22px 24px; display:flex; flex-direction:column; flex:1}
.st-m{font-family:var(--larga); font-weight:700; font-size:2.9rem; line-height:1; letter-spacing:-.02em; color:var(--offwhite); display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px}
.st-m small{font-size:.4em; letter-spacing:0; color:var(--areia-esc)}
.st-selo{
  position:absolute; left:14px; top:14px; z-index:1; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--carvao); background:var(--dourado-cl); padding:7px 11px 6px; border-radius:2px; box-shadow:0 4px 14px rgba(0,0,0,.3)
}
.st-tag{
  margin-top:18px; align-self:flex-start; font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--carvao); background:var(--dourado); padding:6px 10px 5px; border-radius:2px;
}
.st-preco{margin-top:12px; color:var(--offwhite); line-height:1.2}
.st-preco span{display:block; font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,242,236,.6); margin-bottom:4px}
.st-preco s{display:block; font-size:.92rem; color:rgba(245,242,236,.5); text-decoration-thickness:1px}
.st-preco strong{display:block; margin-top:2px; font-size:1.55rem; font-weight:600; color:var(--dourado-cl)}
.st-acoes{margin-top:22px; padding-top:20px; border-top:1px solid var(--linha-esc); display:grid; gap:10px; margin-top:auto}
.st-preco{margin-bottom:22px}
.st-acoes .btn-wa{order:-1}
.st-acoes .btn{min-height:48px; padding:12px 14px; font-size:.9rem}
.st-comum{margin-top:clamp(28px,3.4vw,40px); display:flex; flex-wrap:wrap; gap:12px 34px}
.st-comum li{display:flex; align-items:center; gap:12px; font-size:.98rem; color:rgba(245,242,236,.88)}
.st-comum li::before{content:"\25C6"; color:var(--dourado); font-size:.6rem}

/* ---------- decorados ---------- */
.dec-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(28px,3.4vw,44px)}
.dec-setas{display:flex; gap:10px}
.dec-seta{width:52px; height:52px; border-radius:50%; border:1px solid rgba(38,34,31,.35); background:transparent; color:var(--tinta); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, color .2s ease}
.dec-seta:hover{background:var(--tinta); color:var(--offwhite)}
.dec-seta svg{width:20px; height:20px}
.dec-trilho{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,24vw,330px); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  padding:0 max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dec-trilho::-webkit-scrollbar{display:none}
.dec{position:relative; aspect-ratio:4/5; padding:0; border:0; border-radius:3px; overflow:hidden; background:var(--areia-esc); cursor:zoom-in; scroll-snap-align:start}
.dec img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.dec:hover img{transform:scale(1.04)}

/* ---------- rooftop e serviços ---------- */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(170px,17vw,230px); gap:clamp(10px,1.2vw,16px)}
.bt{position:relative; padding:0; border:0; border-radius:3px; overflow:hidden; background:var(--carvao); cursor:zoom-in; display:block}
.bt img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.bt:hover img{transform:scale(1.04)}
.bt::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(29,26,24,0) 55%, rgba(29,26,24,.75) 100%); pointer-events:none}
.bt span{position:absolute; left:18px; right:18px; bottom:16px; z-index:1; text-align:left; font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff}
.bt-a{grid-column:span 2; grid-row:span 2}
.bt-b,.bt-c{grid-column:span 2}
.servicos{margin-top:clamp(28px,3.4vw,40px); display:flex; flex-wrap:wrap; gap:12px 34px}
.servicos li{display:flex; align-items:center; gap:12px; font-size:.98rem; color:rgba(245,242,236,.88)}
.servicos li::before{content:"\25C6"; color:var(--dourado); font-size:.6rem}

/* ---------- para investir ---------- */
.inv-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,80px); align-items:center}
.inv-grid .cab{margin-bottom:0}
.inv{border-top:1px solid var(--linha)}
.inv li{display:grid; grid-template-columns:17rem minmax(0,1fr); gap:24px; padding:24px 0; border-bottom:1px solid var(--linha); align-items:baseline}
.inv b{font-family:var(--larga); font-weight:700; font-size:.95rem; white-space:nowrap; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta)}
.inv span{color:var(--tinta-soft); text-wrap:balance}

/* ---------- pagamento ---------- */
.fluxo{display:grid; grid-template-columns:10fr 10fr 10fr 10fr 60fr; gap:3px; border-radius:3px; overflow:hidden}
.fx{display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:170px; padding:20px 14px 18px; color:var(--offwhite)}
.fx b{font-family:var(--larga); font-weight:700; font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1; letter-spacing:-.02em}
.fx span{font-size:.84rem; line-height:1.3; color:rgba(245,242,236,.85)}
.fx-10:first-child{background:var(--grafite)}
.fx-10:not(:first-child){background:var(--salvia-esc)}
.fx-60{background:var(--dourado); color:var(--carvao); padding-inline:24px}
.fx-60 b{font-size:clamp(2.2rem,4vw,3.4rem)}
.fx-60 span{color:var(--carvao); font-size:.95rem; font-weight:600}
.flexivel{
  margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:20px 40px; flex-wrap:wrap;
  background:var(--offwhite); border-left:3px solid var(--salvia-esc); border-radius:2px; padding:24px clamp(20px,3vw,32px);
}
.flexivel > div{flex:1 1 420px}
.flex-tit{font-family:var(--larga); font-weight:700; font-size:clamp(1.25rem,2vw,1.6rem); text-transform:uppercase; line-height:1.1; color:var(--salvia-esc)}
.flex-txt{margin-top:8px; color:var(--tinta-soft); max-width:60ch}
.flexivel .btn{flex:none}

/* ---------- incorporadora ---------- */
.sotegel{background:var(--carvao); color:var(--offwhite); padding-block:clamp(30px,3.6vw,44px); border-top:1px solid var(--linha-esc)}
.sot-in{display:flex; align-items:center; justify-content:space-between; gap:24px 48px; flex-wrap:wrap}
.sot-tit{font-family:var(--larga); font-weight:700; font-size:clamp(1.6rem,2.6vw,2.1rem); text-transform:uppercase; letter-spacing:.04em; line-height:1}
.sot-tit span{display:block; font-family:var(--font); font-size:.72rem; font-weight:600; letter-spacing:.2em; color:var(--dourado); margin-bottom:10px}
.sot-nums{display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap}
.sot-nums b{display:block; font-family:var(--larga); font-weight:700; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; color:var(--dourado-cl); letter-spacing:-.01em}
.sot-nums span{display:block; margin-top:6px; font-size:.86rem; color:rgba(245,242,236,.7)}

/* ---------- cadastro e atendimento ---------- */
.atend{background:linear-gradient(170deg, var(--grafite-2) 0%, var(--grafite) 45%, var(--carvao) 100%)}
.atend-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,64px); align-items:start}
.form-box{background:rgba(245,242,236,.05); border:1px solid rgba(227,198,143,.25); border-top:2px solid var(--dourado); border-radius:3px; padding:clamp(24px,3vw,36px)}
.campo{margin-bottom:18px}
.campo label{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--dourado); margin-bottom:8px}
.campo label .opc{text-transform:none; letter-spacing:0; font-weight:400; opacity:.75}
.campo input{
  width:100%; font-family:var(--font); font-size:1.02rem; color:var(--offwhite);
  background:rgba(0,0,0,.28); border:1px solid rgba(227,198,143,.28); border-radius:2px; padding:13px 14px; min-height:52px;
}
.campo input::placeholder{color:rgba(245,242,236,.45)}
.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.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{
  font-family:var(--font); font-size:.93rem; font-weight:500; cursor:pointer; min-height:48px;
  background:rgba(0,0,0,.28); color:rgba(245,242,236,.9); border:1px solid rgba(227,198,143,.28);
  border-radius:2px; padding:11px 6px; text-align:center; transition:all .18s ease;
}
.opt:hover{border-color:var(--dourado-cl); color:var(--offwhite)}
.opt.sel{background:var(--dourado); color:var(--carvao); border-color:var(--dourado); font-weight:600}
.consent{display:flex; gap:11px; align-items:flex-start; margin:8px 0 20px; font-size:.92rem; color:rgba(245,242,236,.85)}
.consent input{width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--dourado)}
.form-ok{margin-top:16px; padding:14px 16px; border:1px solid rgba(143,199,159,.5); background:rgba(63,107,74,.2); border-radius:3px; font-size:.95rem}
.aside-or{text-align:center; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dourado); font-weight:600; margin:0 0 20px}
.corretores{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.cor{background:rgba(245,242,236,.05); border:1px solid rgba(227,198,143,.22); border-radius:3px; padding:26px 16px; text-align:center; transition:background .3s ease, transform .3s ease}
.cor:hover{background:rgba(245,242,236,.09); 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:2px solid rgba(227,198,143,.8)}
.cor b{display:block; font-size:1.02rem}
.cor span{display:block; font-size:.84rem; letter-spacing:.04em; color:rgba(245,242,236,.7); margin-top:4px}
.cor .btn{margin-top:16px; width:100%; min-height:46px; font-size:.9rem; padding:11px 10px; white-space:nowrap}
.cor .btn svg{width:18px; height:18px}
.cor .btn span{display:inline; margin:0; font-size:inherit; letter-spacing:normal; color:inherit}
.trust{margin-top:26px; display:flex; gap:10px 28px; flex-wrap:wrap; justify-content:center; font-size:.88rem; color:rgba(245,242,236,.72)}
.trust span{display:inline-flex; align-items:center; gap:10px}
.trust span::before{content:"\25C6"; color:var(--dourado); font-size:.55rem}

/* ---------- dúvidas ---------- */
.faq .wrap{max-width:900px}
.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.06rem; font-weight:600; color:var(--tinta); 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(--salvia-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(--tinta-soft); max-width:72ch}

/* ---------- rodapé ---------- */
.rodape{background:var(--carvao); color:rgba(245,242,236,.72); padding-block:clamp(52px,6vw,76px) 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:40px; width:auto; margin-bottom:18px}
.rod-emp p{font-size:.95rem; line-height:1.6; color:rgba(245,242,236,.78); max-width:38ch; text-wrap:balance}
.rod-grid h4{font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dourado); margin-bottom:14px}
.rod-grid a{color:rgba(245,242,236,.82); text-decoration:none; font-size:.95rem; display:inline-flex; align-items:center; min-height:44px}
.rod-grid a:hover{color:var(--dourado-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(245,242,236,.12); padding-block:24px 22px; font-size:.8rem; line-height:1.65; color:rgba(245,242,236,.58)}
.rod-fim{border-top:1px solid rgba(245,242,236,.12); padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:.86rem; color:rgba(245,242,236,.64); padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.rod-fim .creci{color:var(--dourado-cl); font-weight:600; letter-spacing:.04em}
.rod-fim span:last-child{flex-basis:100%; font-size:.8rem; color:rgba(245,242,236,.52); line-height:1.6}

/* ---------- 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(29,26,24,.86); color:var(--dourado-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,16,14,.96); 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:84vh; width:auto; height:auto; object-fit:contain; border-radius:2px; background:#fff}
.lb-cap{position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom,0px)); text-align:center; color:var(--offwhite); font-size:.95rem; padding-inline:70px}
.lb-btn{position:absolute; background:rgba(245,242,236,.12); border:1px solid rgba(245,242,236,.3); color:var(--offwhite); width:52px; height:52px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center}
.lb-btn:hover{background:rgba(245,242,236,.24)}
.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,16,14,.72); opacity:0; transition:opacity .28s ease}
.cmodal[hidden]{display:none!important}
.cmodal.show{opacity:1}
.cmodal-in{background:var(--offwhite); border-radius:3px; 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(--larga); font-size:1.35rem; text-transform:uppercase; letter-spacing:-.005em; color:var(--tinta)}
.cmodal-sub{margin-top:8px; font-size:.95rem; color:var(--tinta-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:2px; text-decoration:none; color:var(--tinta); transition:border-color .2s ease, background .2s ease}
.cmodal-item:hover{border-color:var(--salvia-esc); background:rgba(79,107,80,.06)}
.cmodal-item.destaque{border-color:var(--dourado); background:rgba(201,162,100,.1)}
.cmodal-item .ini{width:52px; height:52px; border-radius:50%; flex:none; object-fit:cover; object-position:center top; background:var(--grafite); color:var(--dourado-cl); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.95rem}
.cmodal-item b{display:block; font-size:1rem}
.cmodal-item span{display:block; font-size:.86rem; color:var(--tinta-soft)}
.cmodal-fechar{margin-top:18px; width:100%; min-height:48px; background:none; border:1px solid var(--linha); border-radius:2px; font-size:.95rem; font-weight:600; color:var(--tinta-soft); cursor:pointer}
.cmodal-fechar:hover{border-color:var(--tinta); color:var(--tinta)}

/* ==========================================================================
   Responsivo. A maior parte do público vê pelo celular.
   ========================================================================== */
@media (max-width:1180px){
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  /* abertura: a fachada em cima e o texto embaixo, no fundo escuro.
     Com o texto por cima da foto, o título caía sobre o letreiro dourado. */
  .hero{display:block; min-height:0}
  .hero-foto{height:min(50svh,520px); min-height:300px}
  .hero-foto img{object-position:50% 26%}
  .hero-foto::after{background:linear-gradient(180deg, rgba(29,26,24,.5) 0%, rgba(29,26,24,0) 24%, rgba(29,26,24,0) 62%, var(--carvao) 100%)}
  .hero-in{margin-top:-34px; padding:0 var(--pad) 44px}
  .hero-logo{display:none}
  .hero h1{max-width:14ch}
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(330px,88vw);
    background:linear-gradient(170deg,var(--grafite-2) 0%,var(--grafite) 45%,var(--carvao) 100%);
    border-left:2px solid var(--dourado); box-shadow:-18px 0 44px -20px rgba(0,0,0,.7);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
    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:var(--offwhite); font-size:1rem; padding:14px 0; width:100%; border-bottom:1px solid rgba(227,198,143,.18)}
  .menu .head-cta{margin-top:16px; width:100%}
  .hamb{display:flex; z-index:101}
  .ov{position:fixed; inset:0; background:rgba(18,16,14,.6); z-index:99}
  .ov[hidden]{display:none!important}
  .loc-grid,.inv-grid,.atend-grid{grid-template-columns:1fr}
  .tipos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tipo:nth-child(3){border-left:0}
  .tipo:nth-child(n+3){border-top:1px solid var(--linha-esc)}
  .rod-grid{grid-template-columns:1fr 1fr}
  .rod-emp{grid-column:1 / -1}
}
@media (max-width:760px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(130px,36vw,190px)}
  .bt-a{grid-column:span 2; grid-row:span 2}
  .bt-b,.bt-c{grid-column:span 1}
  .bt span{left:14px; right:14px; bottom:12px; font-size:.68rem; letter-spacing:.12em}
  /* fluxo de pagamento: de barra proporcional para blocos */
  .fluxo{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fx{min-height:120px; padding:16px 10px 14px; justify-content:flex-start}
  .fx-60{justify-content:space-between}
  .fx-60{grid-column:1 / -1; min-height:110px; flex-direction:row; align-items:flex-end; justify-content:space-between}
  .inv li{grid-template-columns:1fr; gap:6px}
}
@media (max-width:640px){
  body{font-size:1.04rem}
  .hero .eyebrow{font-size:.72rem; letter-spacing:.14em; white-space:nowrap}
  .hero-acoes{flex-direction:column; width:100%}
  .hero-acoes .btn{width:100%}
  .hero-preco{margin-top:26px}
  .hero-acoes{margin-top:26px}
  .tipo{padding:18px var(--pad); min-height:96px}
  .tipo b{font-size:1.45rem}
  .tipo span{font-size:.86rem}
  .st-grid{grid-template-columns:1fr; max-width:520px; margin-inline:auto}
  .metros li{padding-right:10px}
  .metros li:not(.dest) + li:not(.dest){padding-left:12px}
  .metros b{font-size:1.9rem}
  .metros span{font-size:.84rem}
  .tipos-selo{font-size:.66rem; letter-spacing:.12em}
  .tipo s{font-size:.8rem}
  .tipo span{font-size:.92rem}
  .flexivel .btn{width:100%}
  .dec-setas{display:none}
  .dec-trilho{grid-auto-columns:70vw}
  .fx b{font-size:1.35rem}
  .fx span{font-size:.76rem}
  .sot-in{flex-direction:column; align-items:flex-start}
  .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}
  .cor .meio{flex:1; min-width:0}
  .cor .btn{margin-top:0; width:auto; padding:11px 16px; flex:none}
  .opt{font-size:.9rem; 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:.9rem}
  .lb-prev{left:8px} .lb-next{right:8px}
  .fab{width:56px; height:56px}
  /* no celular o botão de voltar ao topo cobria texto; no iPhone basta tocar na barra de status */
  .toTop{display:none}
}
@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}
  .opcoes.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:380px){
  /* iPhone SE e telas de 320: o título largo e o selo não cabiam */
  .hero h1{font-size:2.1rem}
  .hero .eyebrow{font-size:.66rem; letter-spacing:.1em}
  .hero .eyebrow::before{width:18px}
  .fx{padding-inline:8px}
  .fx b{font-size:1.12rem}
  .fx span{font-size:.72rem}
  .opcoes.tres{grid-template-columns:1fr 1fr}
  .opcoes.tres .opt:last-child{grid-column:1 / -1}
}