/* ============================================================
   CLICIA VITÓRIA — Corretora de Imóveis · Uberlândia-MG
   Reconstrução pós-briefing (v3)
   · Paleta 03 — Berinjela Alto Padrão (escolha da cliente)
   · Poiret One (títulos) + Manrope (texto) · fina
   · Editorial minimalista + contraste noite/areia (ref. Steno)
   · Posicionamento: do primeiro imóvel (MCMV) ao alto padrão
   Animações: GSAP + ScrollTrigger + Lenis + SplitType
   Feito pela O KAFÉ · okafehub.com.br
   ============================================================ */

:root{
  /* Paleta 03 · Berinjela Alto Padrão */
  --noite:#150A1D;
  --noite-2:#1C0E26;
  --berinjela:#3D1E4A;
  --uva:#6C3D7E;
  --ouro:#B8924A;
  --ouro-claro:#D4B36A;
  --areia:#F1ECE3;
  --papel:#FBF9F4;
  --tinta:#20122A;

  --claro:rgba(241,236,227,.92);
  --claro-2:rgba(241,236,227,.58);
  --muted:#6E6276;
  --linha:rgba(61,30,74,.13);
  --linha-clara:rgba(241,236,227,.13);
  --linha-ouro:rgba(184,146,74,.45);

  --display:'Poiret One',sans-serif;
  --fonte:'Manrope',sans-serif;

  --largura:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-height:94px; /* .header .wrap{height:94px} — usado para descontar o header em seções pinadas */
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto; }

body{
  font-family:var(--fonte); font-weight:300; color:var(--tinta);
  background:var(--noite); line-height:1.75; font-size:16.5px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }
::selection{ background:var(--ouro); color:#150A1D; }

.wrap{ width:min(var(--largura),90%); margin-inline:auto; }

/* ---------- estados iniciais (só com JS ligado — sem JS, tudo visível) ---------- */
.js [data-fade]{ opacity:0; transform:translateY(42px); }
.js [data-stagger] > *{ opacity:0; transform:translateY(46px); }
.js .hero-sub,.js .hero-ctas,.js .hero-stats{ opacity:0; transform:translateY(22px); }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.08; }

.sec-title{ font-size:clamp(2.4rem,4.8vw,3.9rem); letter-spacing:.01em; margin-bottom:22px; }
.sec-lead{ font-size:1.06rem; max-width:560px; }

/* ============================================================
   BOTÕES — poucos estilos, bem feitos
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:19px 44px; border:none; border-radius:999px; cursor:pointer;
  transition:transform .45s var(--ease),background .35s,color .35s,border-color .35s,box-shadow .45s var(--ease);
}
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn .seta{ transition:transform .4s var(--ease); }
.btn:hover .seta{ transform:translateX(5px); }

/* texto escuro literal: o dourado é igual nos dois temas, o texto não pode clarear no claro */
.btn-ouro{
  background:var(--ouro); color:#150A1D;
  box-shadow:0 18px 40px -16px rgba(184,146,74,.55);
}
.btn-ouro:hover{ background:#D4B36A; transform:translateY(-3px); }

.btn-claro{ background:transparent; color:var(--areia); border:1px solid rgba(241,236,227,.32); }
.btn-claro:hover{ border-color:var(--ouro); color:var(--ouro-claro); transform:translateY(-3px); }

.btn-escuro{ background:var(--berinjela); color:var(--areia); box-shadow:0 18px 40px -18px rgba(32,18,42,.5); }
.btn-escuro:hover{ background:var(--uva); transform:translateY(-3px); }

.btn-vazado{ background:transparent; color:var(--berinjela); border:1px solid var(--berinjela); }
.btn-vazado:hover{ background:var(--berinjela); color:var(--areia); transform:translateY(-3px); }

/* ============================================================
   BOTÃO RADIAL — o preenchimento nasce do ponto onde o cursor entra
   e cobre o botão; ao sair, encolhe em direção ao ponto de saída.
   Aplicado via JS (a todo .btn — já são só CTAs comerciais neste site)
   injetando um <span class="radial-fill">; sem JS, o botão mantém
   apenas o hover simples já definido acima (fallback automático).
   Cores literais da paleta Clicia (berinjela/ouro) — nunca azul/verde.
   ============================================================ */
.btn{ isolation:isolate; }
.js .btn{ overflow:hidden; }
.btn .radial-fill{
  position:absolute; top:var(--ry,50%); left:var(--rx,50%);
  width:var(--rd,220%); aspect-ratio:1; z-index:-1;
  margin-top:calc(var(--rd,220%) * -0.5); margin-left:calc(var(--rd,220%) * -0.5);
  border-radius:50%; background:var(--radial-cor,var(--berinjela));
  transform:scale(0); transform-origin:center;
  transition:transform .55s var(--ease);
  pointer-events:none;
}
.btn.is-radial-ativo .radial-fill{ transform:scale(1); }
.btn.is-radial-ativo{ color:var(--radial-texto,var(--areia)); border-color:transparent; }
.btn.is-radial-ativo svg{ fill:var(--radial-texto,var(--areia)); }
.btn.is-radial-ativo svg[stroke]{ stroke:var(--radial-texto,var(--areia)); }

/* cor do preenchimento + texto-alvo por variante (mesma leitura em qualquer tema) */
.btn-ouro{ --radial-cor:var(--berinjela); --radial-texto:#F1ECE3; }
.btn-claro{ --radial-cor:var(--ouro); --radial-texto:#150A1D; }
.btn-escuro{ --radial-cor:var(--ouro); --radial-texto:#150A1D; }
.btn-vazado{ --radial-cor:var(--berinjela); --radial-texto:#F1ECE3; }

/* teclado: mesmo destaque do hover, com contorno visível de foco */
.btn:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }

/* teclado, geral: qualquer link/botão sem estilo de foco próprio (nav, rodapé,
   FAQ, filtros de imóveis, tema-toggle, burger) ganha o mesmo contorno dourado —
   antes dependia só do outline padrão do navegador, inconsistente com a marca. */
a:focus-visible, button:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }

/* toque: sem "ponto de saída" — feedback de pressionar, encolhe ao soltar */
@media (hover:none){
  .btn .radial-fill{ transition:transform .4s var(--ease); }
}

@media (prefers-reduced-motion:reduce){
  .btn .radial-fill{ transition:opacity .25s linear; transform:scale(1); opacity:0; }
  .btn.is-radial-ativo .radial-fill{ opacity:1; }
}

/* link com seta */
.link-seta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--berinjela); transition:gap .4s var(--ease),color .3s;
}
.link-seta::after{ content:"→"; }
.link-seta:hover{ gap:16px; color:var(--ouro); }
.sec-noite .link-seta{ color:var(--ouro-claro); }

/* ============================================================
   SKIP LINK — invisível até receber foco pelo teclado
   ============================================================ */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ouro); color:#150A1D;
  padding:12px 22px; border-radius:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.04em;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:12px; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s,transform .45s var(--ease);
}
.header.rolado{
  background:rgba(21,10,29,.86); backdrop-filter:blur(16px);
  border-bottom-color:var(--linha-clara);
}
.header.escondido{ transform:translateY(-100%); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; height:94px; }

.marca{ display:flex; flex-direction:column; line-height:1.15; z-index:120; }

.nav{ display:flex; align-items:center; gap:40px; }
.nav > a.nav-link{
  position:relative; font-size:.76rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--claro);
  padding:6px 0; transition:color .25s;
}
.nav > a.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ouro); transition:width .35s var(--ease);
}
.nav > a.nav-link:hover,.nav > a.nav-link.ativo{ color:var(--ouro-claro); }
.nav > a.nav-link:hover::after,.nav > a.nav-link.ativo::after{ width:100%; }
.nav .btn{ padding:13px 26px; }

/* redes no header + menu */
.nav-redes{ display:flex; align-items:center; gap:8px; }
.nav-redes a{
  width:36px; height:36px; border:1px solid rgba(241,236,227,.2); border-radius:50%;
  display:grid; place-items:center; transition:all .4s var(--ease);
}
.nav-redes a svg{ width:14px; height:14px; fill:var(--claro); transition:fill .3s; }
.nav-redes a:hover{ border-color:var(--ouro); transform:translateY(-3px); }
.nav-redes a:hover svg{ fill:var(--ouro-claro); }

.burger{
  display:none; background:none; border:none; cursor:pointer;
  width:36px; height:26px; position:relative; z-index:130;
}
.burger span{
  position:absolute; left:0; width:100%; height:1.5px; background:var(--areia);
  transition:all .4s var(--ease);
}
.burger span:nth-child(1){ top:4px; } .burger span:nth-child(2){ top:12px; } .burger span:nth-child(3){ top:20px; }
.burger.aberto span:nth-child(1){ top:12px; transform:rotate(45deg); }
.burger.aberto span:nth-child(2){ opacity:0; }
.burger.aberto span:nth-child(3){ top:12px; transform:rotate(-45deg); }

/* ============================================================
   HERO — bloco noite
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:180px 0 130px; overflow:hidden; color:var(--claro);
  background:radial-gradient(58% 48% at 82% 12%, rgba(108,61,126,.24) 0%, transparent 62%), var(--noite);
}
.hero-cv{
  position:absolute; top:4%; right:-4%; z-index:0;
  font-family:var(--display); font-size:clamp(220px,30vw,430px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(241,236,227,.05);
  user-select:none; pointer-events:none;
}
.hero .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.08fr .92fr; gap:84px; align-items:center;
}
.hero h1{
  font-size:clamp(2.9rem,5.8vw,5rem); color:var(--areia);
  letter-spacing:.01em; margin-bottom:30px;
}
.hero h1 .h1-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero h1 em{ font-style:normal; color:var(--ouro-claro); }
.hero-sub{ font-size:1.08rem; color:var(--claro-2); max-width:470px; margin-bottom:46px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:62px; }
.hero-stats{ display:flex; gap:56px; border-top:1px solid var(--linha-clara); padding-top:34px; }
.hero-stats .stat b{
  display:block; font-family:var(--display); font-size:2.7rem; font-weight:400;
  color:var(--areia); line-height:1.12; margin-bottom:4px;
}
.hero-stats .stat > span{
  font-size:.64rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--claro-2);
}

/* ============================================================
   BANDA — faixa tipográfica entre blocos
   ============================================================ */
.banda{
  background:var(--noite-2); padding:19px 0; overflow:hidden;
  border-block:1px solid rgba(184,146,74,.22);
}
.banda .trilho{ display:flex; gap:46px; width:max-content; animation:marquee 38s linear infinite; }
.banda span{
  display:flex; align-items:center; gap:46px; white-space:nowrap;
  font-family:var(--display); font-size:clamp(.92rem,1.6vw,1.25rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(212,179,106,.55);
}
.banda span.cheio{ color:var(--areia); }
.banda span::after{ content:"·"; font-size:1.2rem; color:var(--ouro); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao{ position:relative; padding:140px 0; }
.sec-areia{ background:var(--areia); color:var(--tinta); }
.sec-papel{ background:var(--papel); color:var(--tinta); }
.sec-noite{ background:var(--noite-2); color:var(--claro); }
.sec-areia .sec-lead,.sec-papel .sec-lead{ color:var(--muted); }
.sec-noite .sec-lead{ color:var(--claro-2); }
.sec-noite .sec-title{ color:var(--areia); }
.sec-noite .sec-title em,.sec-title em{ font-style:normal; color:var(--ouro); }
.sec-noite .sec-title em{ color:var(--ouro-claro); }

.secao-cabeca{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:44px; margin-bottom:76px;
}

/* ============================================================
   CAMINHOS — 3 portas de entrada por perfil
   ============================================================ */
/* cartões separados e escuros com "animated gradient border glow" —
   conic-gradient roxo girando na borda + halo neon difuso (blur).
   Cores literais (não mudam com o tema): legível no noite E no claro. */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.caminhos{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.caminho{
  position:relative; border-radius:16px;
  border:1.5px solid transparent;
  /* fundo escuro (padding-box) + luz girando na borda (border-box) */
  background:
    radial-gradient(130% 75% at 50% -25%, rgba(108,61,126,.45) 0%, transparent 62%) padding-box,
    linear-gradient(165deg, #241130 0%, #1C0E26 55%, #150A1D 100%) padding-box,
    conic-gradient(from var(--ang),
      #6C3D7E 0%, #C79BDD 12%, #3D1E4A 28%, #9D65B2 46%,
      #6C3D7E 60%, #D4B36A 78%, #A96BC8 90%, #6C3D7E 100%) border-box;
  animation:gira-borda 7s linear infinite;
  padding:52px 40px 46px;
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease);
}
/* halo difuso: o mesmo conic girando, borrado, atrás do cartão */
.caminho::after{
  content:""; position:absolute; inset:-3px; z-index:-1; border-radius:inherit;
  background:conic-gradient(from var(--ang),
    #6C3D7E 0%, #C79BDD 12%, #3D1E4A 28%, #9D65B2 46%,
    #6C3D7E 60%, #D4B36A 78%, #A96BC8 90%, #6C3D7E 100%);
  filter:blur(20px); opacity:.45;
  animation:gira-borda 7s linear infinite;
  transition:opacity .5s;
}
@keyframes gira-borda{ to{ --ang:360deg; } }
.caminho > *{ position:relative; z-index:1; }
.caminho:hover{ transform:translateY(-8px); }
.caminho:hover::after{ opacity:.75; }
.caminho h3{ font-size:1.9rem; letter-spacing:.01em; margin-bottom:6px; color:#F1ECE3; }
.caminho .cam-tag{
  font-size:.66rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:#D4B36A; margin-bottom:20px;
}
.caminho p{ font-size:.97rem; color:rgba(241,236,227,.62); margin-bottom:26px; }
.caminho ul{ margin-bottom:38px; }
.caminho li{
  position:relative; padding-left:24px; font-size:.9rem; color:rgba(241,236,227,.62);
  margin-bottom:10px; font-weight:400;
}
.caminho li::before{ content:"—"; position:absolute; left:0; color:#B8924A; }
.caminho .link-seta{ margin-top:auto; color:#D4B36A; }
.caminho .link-seta:hover{ color:#F1ECE3; }

/* ============================================================
   CARDS DE IMÓVEIS
   ============================================================ */
.grade-imoveis{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.card-imovel{
  position:relative; background:#fff; border-radius:16px; overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex; flex-direction:column;
}
.card-imovel:hover{ transform:translateY(-10px); box-shadow:0 40px 80px -28px rgba(32,18,42,.32); }
.card-foto{ position:relative; aspect-ratio:4/3; border-radius:0; }
.card-foto img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card-imovel:hover .card-foto img{ transform:scale(1.06); }
.card-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(21,10,29,.8); color:var(--ouro-claro); backdrop-filter:blur(6px);
  font-size:.58rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  padding:8px 15px; border-radius:2px;
}
/* placa de preço atravessando a borda da foto */
.card-placa{
  position:absolute; left:20px; bottom:-24px; z-index:3;
  background:var(--noite); border-radius:2px; padding:11px 20px;
  border-left:2px solid var(--ouro);
}
.card-placa b{ display:block; font-weight:700; font-size:1.06rem; color:var(--areia); line-height:1.25; }
.card-placa span{ font-size:.56rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--ouro-claro); }
.card-corpo{ padding:46px 28px 30px; display:flex; flex-direction:column; flex:1; }
.card-bairro{
  font-size:.64rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:8px;
}
.card-corpo h3{ font-size:1.5rem; margin-bottom:16px; }
.card-specs{
  display:flex; flex-wrap:wrap; gap:16px; padding-block:15px; margin-bottom:20px;
  border-block:1px solid var(--linha);
  font-size:.78rem; color:var(--muted); font-weight:500;
}
.card-specs span{ display:inline-flex; align-items:center; gap:7px; }
.card-specs svg{ width:15px; height:15px; stroke:var(--uva); }
.card-rodape{ margin-top:auto; }
.card-imovel.escondido{ display:none; }
/* card inteiro leva pra página do imóvel */
.card-foto > a{ display:block; height:100%; overflow:hidden; }
.card-corpo h3 a{ transition:color .3s; }
.card-corpo h3 a:hover{ color:var(--uva); }

/* ============================================================
   QUEM É A CLICIA — bloco noite, foto atravessando a fronteira
   ============================================================ */
.sec-quem{ position:relative; padding:0 0 140px; margin-top:120px; background:var(--noite-2); color:var(--claro); }
.quem-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:76px; align-items:center; }
.quem-visual{ position:relative; margin-top:-120px; z-index:5; }
.quem-visual img{
  width:100%; height:560px; object-fit:cover; border-radius:3px;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.55);
}
.quem-visual::before{
  content:""; position:absolute; inset:24px -24px -24px 24px; z-index:-1;
  border:1px solid var(--linha-ouro); border-radius:3px;
}
/* selo circular girando — logo-selo oficial gira devagar (18s), permanecendo
   legível o tempo todo por ser um badge circular simétrico */
.selo-giro{
  position:absolute; right:-58px; top:48px; z-index:6; width:118px; height:118px;
  background:var(--noite); border:1px solid rgba(184,146,74,.3); border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45);
}
.selo-giro img{
  width:88%; height:88%; object-fit:contain;
  animation:gira 18s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .selo-giro img{ animation:none; } }
@keyframes gira{ to{ transform:rotate(360deg); } }

.quem-conteudo{ padding-top:56px; }
.quem-quote{
  font-family:var(--display); font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.28;
  color:var(--areia); margin-bottom:32px;
  padding-left:28px; border-left:2px solid var(--ouro);
}
.quem-quote em{ font-style:normal; color:var(--ouro-claro); }
.quem-conteudo p{ color:var(--claro-2); margin-bottom:20px; max-width:530px; }
.quem-conteudo p strong{ color:var(--areia); font-weight:600; }
.assinatura{
  font-family:var(--display); font-size:1.65rem; letter-spacing:.18em;
  color:var(--ouro-claro); margin:30px 0 40px;
}

/* ============================================================
   PROCESSO — experiência editorial de 4 etapas controlada pelo scroll
   Fixação nativa via position:sticky (robusta em qualquer altura de tela);
   o GSAP/ScrollTrigger só LÊ o progresso da seção e troca a etapa ativa.
   Estados: base/fallback (lista legível) → .is-enhanced (sticky, 1 por vez).
   ============================================================ */
.secao.proc{ padding:0; }

/* ---- Base / fallback (sem JS ou prefers-reduced-motion): lista editorial ---- */
.proc-outer{ padding:clamp(80px,12vh,140px) 0; }
.proc-inner{ display:flex; flex-direction:column; }
.proc-intro{
  font-family:var(--display); font-weight:400; color:var(--tinta);
  font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.18; letter-spacing:.01em;
  max-width:16ch; margin-bottom:clamp(32px,5vh,56px);
}
.proc-num{ display:none; }
.proc-divider{ display:none; }
.proc-dots{ display:none; }
.proc-steps{ list-style:none; display:flex; flex-direction:column; margin:0; }
.proc-step{ padding:30px 0; border-top:1px solid var(--linha); }
.proc-step:last-child{ border-bottom:1px solid var(--linha); }
.proc-step-num{
  display:block; font-family:var(--display); font-size:2.2rem; line-height:1;
  color:var(--ouro); margin-bottom:8px; font-variant-numeric:tabular-nums;
}
.proc-step-titulo{ font-family:var(--display); font-size:clamp(1.5rem,2.4vw,1.9rem); color:var(--tinta); margin-bottom:10px; }
.proc-step-desc{ font-size:1.02rem; color:var(--muted); max-width:56ch; }

/* ---- Enhanced (JS confirmou que dá pra animar): sticky, uma etapa por vez ---- */
.proc.is-enhanced .proc-outer{ height:340vh; padding:0; }
.proc.is-enhanced .proc-sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;              /* svh evita o pulo da barra do mobile */
  display:flex; align-items:center; overflow:hidden;
}
.proc.is-enhanced .proc-inner{
  /* mantém o container centralizado do .wrap (min(1200px,90%) + margin auto) */
  flex-direction:row; align-items:center;
  gap:clamp(28px,4vw,64px);
}
.proc.is-enhanced .proc-intro{
  font-size:clamp(.95rem,1.4vw,1.2rem); color:var(--muted); font-weight:400;
  line-height:1.35; max-width:30ch; margin:0 0 clamp(18px,3.5vh,40px);
}
.proc.is-enhanced .proc-num-col{
  flex:0 0 42%; max-width:42%;
  display:flex; flex-direction:column; justify-content:center;
}
.proc.is-enhanced .proc-num{
  display:block; text-align:center; color:var(--tinta);
  font-family:var(--display); font-weight:300; letter-spacing:-.05em;
  font-size:clamp(8rem,24vh,19rem); line-height:.8;
  font-variant-numeric:tabular-nums; user-select:none;
  will-change:transform,opacity;
}
.proc.is-enhanced .proc-divider{
  display:block; position:relative; flex:0 0 1px; width:1px;
  height:min(52vh,400px); background:var(--linha-ouro); align-self:center;
}
.proc.is-enhanced .proc-marker{
  position:absolute; left:50%; top:8%;
  width:11px; height:11px; border-radius:50%; background:var(--ouro);
  transform:translate(-50%,-50%); box-shadow:0 0 0 5px rgba(184,146,74,.13);
  will-change:top;
}
.proc.is-enhanced .proc-content-col{ flex:1 1 58%; max-width:58%; }
.proc.is-enhanced .proc-steps{ position:relative; min-height:clamp(230px,40vh,340px); }
.proc.is-enhanced .proc-step{
  position:absolute; inset:0; margin:0; padding:0; border:0;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; pointer-events:none;
}
.proc.is-enhanced .proc-step.is-active{ opacity:1; pointer-events:auto; }
.proc.is-enhanced .proc-step-num{ display:none; }
.proc.is-enhanced .proc-step-titulo{ font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.05; margin-bottom:16px; }
.proc.is-enhanced .proc-step-desc{ font-size:clamp(1rem,1.25vw,1.15rem); color:var(--muted); max-width:46ch; line-height:1.7; }

/* Tablet: mantém 2 colunas, número menor, sem esmagar o texto */
@media (min-width:769px) and (max-width:1080px){
  .proc.is-enhanced .proc-num{ font-size:clamp(7rem,20vh,13rem); }
  .proc.is-enhanced .proc-num-col{ flex-basis:40%; max-width:40%; }
  .proc.is-enhanced .proc-content-col{ max-width:60%; }
}

/* Celular: composição adaptada — número no topo, título, descrição, 4 pontos */
@media (max-width:768px){
  .proc.is-enhanced .proc-inner{
    flex-direction:column; align-items:center; text-align:center;
    gap:clamp(18px,3.5vh,32px); padding-bottom:92px; /* folga pro botão flutuante do WhatsApp */
  }
  .proc.is-enhanced .proc-num-col{ flex:none; max-width:100%; align-items:center; }
  .proc.is-enhanced .proc-intro{ max-width:26ch; margin:0 auto 4px; }
  .proc.is-enhanced .proc-num{ font-size:clamp(6.5rem,30vh,12rem); }
  .proc.is-enhanced .proc-divider{ display:none; }
  .proc.is-enhanced .proc-content-col{ flex:none; max-width:100%; }
  .proc.is-enhanced .proc-steps{ min-height:clamp(180px,30vh,240px); }
  .proc.is-enhanced .proc-step{ align-items:center; }
  .proc.is-enhanced .proc-step-desc{ max-width:40ch; margin-inline:auto; }
  .proc.is-enhanced .proc-dots{ display:flex; gap:10px; justify-content:center; }
  .proc.is-enhanced .proc-dots > span{
    width:8px; height:8px; border-radius:50%; background:var(--linha-ouro);
    transition:background .4s var(--ease),transform .4s var(--ease);
  }
  .proc.is-enhanced .proc-dots > span.is-active{ background:var(--ouro); transform:scale(1.35); }
}

/* ============================================================
   DEPOIMENTOS — editorial, com texto decorativo gigante ao fundo.
   Só existe no DOM visível quando js/main.js remove o [hidden] (2+
   avaliações reais, ou preview local — ver js/depoimentos-data.js).
   ============================================================ */
.depo{
  position:relative;
  overflow-x:clip; overflow-y:visible; /* recorta só o texto decorativo, não sombras/hover */
  background:
    radial-gradient(46% 60% at 88% 8%, rgba(108,61,126,.16) 0%, transparent 62%),
    radial-gradient(38% 50% at 6% 92%, rgba(61,30,74,.14) 0%, transparent 60%),
    radial-gradient(3px 3px at 14% 22%, rgba(184,146,74,.5) 0%, transparent 100%),
    var(--areia);
}
.depo-marca-wrap{
  position:absolute; inset:0; z-index:0; overflow:clip;
  display:flex; align-items:flex-start; pointer-events:none; user-select:none;
}
.depo-marca{
  margin:.4em 0 0 max(3vw, calc((100vw - var(--largura)) / 2));
  font-family:var(--display); font-weight:400; line-height:.86;
  font-size:clamp(4.5rem,13vw,11rem); letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1px rgba(61,30,74,.13);
  white-space:nowrap;
}
.depo-inner{ position:relative; z-index:2; }
.depo-cabeca{ margin-bottom:64px; max-width:640px; }
.depo-cabeca .sec-title em{ font-style:normal; color:var(--berinjela); }

.depo-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  justify-items:stretch;
}
.depo-cards.is-1{ grid-template-columns:min(560px,100%); justify-content:center; }
.depo-cards.is-3 .depo-card:last-child{ grid-column:1 / -1; max-width:calc(50% - 14px); justify-self:center; }

.depo-card{
  position:relative; background:rgba(251,249,244,.82); backdrop-filter:blur(6px);
  border:1px solid var(--linha); border-radius:20px;
  box-shadow:0 30px 60px -38px rgba(32,18,42,.28);
  padding:clamp(28px,3.4vw,42px); text-align:left;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.depo-quote{ margin-bottom:26px; }
.depo-quote p{
  font-family:var(--display); font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:400;
  line-height:1.42; color:var(--tinta);
}
.depo-quote p::before{ content:"“"; } .depo-quote p::after{ content:"”"; }
.depo-autor{ display:flex; align-items:center; gap:14px; }
.depo-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:var(--berinjela); color:var(--ouro-claro);
  display:grid; place-items:center;
  font-family:var(--display); font-size:.95rem; letter-spacing:.05em;
}
.depo-avatar img{ width:100%; height:100%; object-fit:cover; }
.depo-identidade{ display:flex; flex-direction:column; line-height:1.35; }
.depo-nome{ font-style:normal; font-weight:600; font-size:.92rem; color:var(--tinta); }
.depo-contexto{ font-size:.76rem; color:var(--muted); }
.depo-fonte{
  display:inline-block; margin-top:16px; font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--berinjela);
}
.depo-fonte:hover{ color:var(--ouro); }
.depo-selo-exemplo{
  position:absolute; top:18px; right:18px; font-size:.58rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ouro);
  border:1px solid rgba(184,146,74,.4); border-radius:999px; padding:5px 11px;
}

@media (hover:hover){
  .depo-card:hover{
    transform:translateY(-4px);
    box-shadow:0 38px 74px -36px rgba(32,18,42,.34);
    border-color:rgba(184,146,74,.4);
  }
}

@media (max-width:900px){
  .depo-cards,.depo-cards.is-1,.depo-cards.is-3 .depo-card:last-child{
    grid-template-columns:1fr; max-width:none;
  }
  .depo-marca{ font-size:clamp(3.6rem,16vw,6rem); }
}

@media (prefers-reduced-motion:reduce){
  .depo-card{ transition:none; }
}

/* ============================================================
   FAQ — acordeão
   ============================================================ */
.faq-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:96px; align-items:start;
}
.faq-fixo{ position:sticky; top:150px; }
.faq-lista{ display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--linha); }
.faq-item:last-child{ border-bottom:1px solid var(--linha); }
.faq-pergunta{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:30px 0; text-align:left;
}
.faq-pergunta h3{ font-family:var(--fonte); font-size:1.06rem; font-weight:600; color:var(--tinta); transition:color .3s; }
.faq-item:hover .faq-pergunta h3{ color:var(--uva); }
.faq-icone{
  position:relative; width:34px; height:34px; flex-shrink:0;
  border:1px solid var(--linha); border-radius:50%;
  transition:all .45s var(--ease);
}
.faq-icone::before,.faq-icone::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--berinjela);
  transition:all .45s var(--ease);
}
.faq-icone::before{ width:12px; height:1.5px; transform:translate(-50%,-50%); }
.faq-icone::after{ width:1.5px; height:12px; transform:translate(-50%,-50%); }
.faq-item.aberto .faq-icone{ background:var(--berinjela); border-color:var(--berinjela); }
.faq-item.aberto .faq-icone::before{ background:var(--areia); }
.faq-item.aberto .faq-icone::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; background:var(--areia); }
.faq-resposta{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease);
}
.faq-resposta > div{ overflow:hidden; }
.faq-resposta p{ font-size:.96rem; color:var(--muted); max-width:560px; padding-bottom:30px; }
.faq-item.aberto .faq-resposta{ grid-template-rows:1fr; }

/* ============================================================
   BUSCA PERSONALIZADA — card roxo premium → WhatsApp
   Substitui a antiga seção do formulário. Fundo areia (.sec-areia) +
   card roxo "ilha escura" com cores LITERAIS (premium igual nos 2 temas).
   ============================================================ */
.conv-card{
  position:relative; overflow:hidden;
  max-width:var(--largura); margin-inline:auto;
  background:linear-gradient(150deg, #3D1E4A 0%, #180D22 66%);
  border:1px solid rgba(184,146,74,.22); border-radius:26px;
  padding:clamp(34px,5vw,74px);
  box-shadow:0 50px 100px -55px rgba(24,13,34,.6);
  color:#F1ECE3;
}
/* filete dourado discreto no topo do card */
.conv-card::before{
  content:''; position:absolute; left:0; top:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,179,106,.65), transparent);
}
.conv-grid{
  position:relative; z-index:2; display:grid;
  grid-template-columns:.85fr 1.15fr; gap:clamp(30px,4vw,68px); align-items:center;
}
.conv-eyebrow{
  display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:#D4B36A; margin-bottom:20px;
}
/* título com máscara (revela de baixo p/ cima) + brilho suave atravessando */
.conv-titulo{ overflow:hidden; margin-bottom:20px; }
.conv-titulo-inner{
  display:inline-block; font-family:var(--display); font-weight:400; line-height:1.05;
  font-size:clamp(2rem,3.4vw,3.1rem); color:#F1ECE3;
  background:linear-gradient(100deg,#F1ECE3 0 42%,#FFF6E2 50%,#F1ECE3 58% 100%);
  background-size:230% 100%; background-position:110% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .conv-titulo-inner{ -webkit-text-fill-color:#F1ECE3; }
}
.conv-titulo.brilha .conv-titulo-inner{ animation:convBrilho 1.5s var(--ease) .05s forwards; }
@keyframes convBrilho{ from{ background-position:110% 0 } to{ background-position:-30% 0 } }
.conv-texto{ color:rgba(241,236,227,.62); font-size:1.02rem; max-width:44ch; }
.conv-selo{
  display:inline-block; margin-top:28px; padding-top:18px;
  border-top:1px solid rgba(184,146,74,.25);
  font-size:.6rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:#D4B36A;
}
.conv-form-titulo{
  font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,1.9vw,1.65rem);
  color:#F1ECE3; margin-bottom:24px; line-height:1.2;
}
.conv-form{ display:flex; flex-direction:column; gap:19px; }
.conv-campo{ position:relative; display:flex; flex-direction:column; }
.conv-campo label{
  font-size:.62rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:#D4B36A; margin-bottom:9px;
}
.conv-campo input,.conv-campo select{
  width:100%; background:rgba(241,236,227,.05); color:#F1ECE3;
  border:1px solid rgba(241,236,227,.16); border-radius:11px;
  font-family:var(--fonte); font-size:1rem; font-weight:300; padding:13px 15px; outline:none;
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.conv-campo select{ cursor:pointer; }
.conv-campo select option{ background:#20122A; color:#F1ECE3; }
.conv-campo input::placeholder{ color:rgba(241,236,227,.4); }
.conv-campo input:focus,.conv-campo select:focus{
  border-color:var(--ouro); background:rgba(241,236,227,.08); box-shadow:0 0 0 3px rgba(184,146,74,.14);
}
.conv-campo.tem-erro input{ border-color:#CF8378; box-shadow:0 0 0 3px rgba(207,131,120,.14); }
.conv-erro{ font-size:.72rem; color:#E6A99E; margin-top:7px; }
/* botão premium: brilho contido + seta (herda lift/seta do .btn .btn-ouro) */
.conv-btn{ position:relative; overflow:hidden; width:100%; justify-content:center; margin-top:8px; }
.conv-btn::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-130%); transition:transform .75s var(--ease);
}
.conv-btn:hover::before{ transform:translateX(130%); }
.conv-nota{ font-size:.78rem; color:rgba(241,236,227,.6); margin-top:2px; }
@media (max-width:960px){ .conv-grid{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:768px){
  .conv-card{ padding:30px 22px 34px; border-radius:20px; }
  .conv-titulo-inner{ font-size:clamp(1.7rem,7vw,2.2rem); }
  .conv-form-titulo{ margin-bottom:20px; }
}

/* ---- Variante "simples" do painel roxo compartilhado (sem formulário) ----
   Usada em sobre.html ("Me conte o seu momento"). Mesmo .conv-card da home/
   imóveis — conteúdo centralizado + texto decorativo gigante ao fundo. */
.conv-card--simples{
  overflow:hidden; text-align:center;
  padding:clamp(56px,9vw,120px) clamp(26px,6vw,60px);
}
.conv-card--simples .cta-fundo{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  display:flex; gap:60px; width:max-content;
  animation:marquee 42s linear infinite; pointer-events:none;
}
.conv-card--simples .cta-fundo span{
  font-family:var(--display); font-size:clamp(4.5rem,12vw,9rem); line-height:1;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(241,236,227,.09);
}
.conv-simples{ position:relative; z-index:2; max-width:640px; margin-inline:auto; }
.conv-titulo--central{ text-align:center; }
.conv-texto-central{ color:rgba(241,236,227,.66); max-width:520px; margin:0 auto 40px; font-size:1.05rem; }
@media (max-width:768px){
  .conv-card--simples{ padding:50px 22px 54px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#0F0715; color:var(--claro-2); border-top:1px solid rgba(184,146,74,.22); }
/* rodapé "cheio" — index/imóveis/sobre/imóvel (têm o wordmark); privacidade.html
   fica fora de propósito (footer minimalista, sem wordmark, baixo valor de tela
   cheia numa página jurídica). Preenche a tela toda quando o usuário chega no fim:
   a marca cresce pra ocupar o espaço livre; nav e base ficam no tamanho natural,
   ancorados embaixo — sem vão vazio no meio. */
.footer--grande{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.footer--grande .footer-wordmark{
  flex:1; display:flex; align-items:center; justify-content:center; padding:56px 0 24px;
}
.footer--grande > .wrap{ flex-shrink:0; }
.footer-wordmark{ padding:76px 0 0; overflow:hidden; }
.footer-wordmark span{
  display:block; text-align:center;
  font-family:var(--display); font-size:clamp(2.8rem,9.6vw,8.2rem); line-height:1;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(241,236,227,.13);
}
.footer-wordmark .letra{ display:inline-block; }
.footer-topo{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:56px;
  padding:70px 0 60px; border-bottom:1px solid var(--linha-clara);
}
.footer-desc{ font-size:.92rem; margin-top:18px; max-width:300px; }
.footer h4{
  font-size:.66rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:22px;
}
.footer li{ margin-bottom:12px; }
.footer li a{ font-size:.92rem; transition:color .25s,padding-left .35s var(--ease); }
.footer li a:hover{ color:var(--areia); padding-left:6px; }
.redes{ display:flex; gap:14px; margin-top:26px; }
.redes a{
  width:44px; height:44px; border:1px solid rgba(241,236,227,.22); border-radius:50%;
  display:grid; place-items:center; transition:all .4s var(--ease);
}
.redes a svg{ width:17px; height:17px; fill:var(--areia); transition:fill .3s; }
.redes a:hover{ background:var(--ouro); border-color:var(--ouro); transform:translateY(-4px); }
.redes a:hover svg{ fill:#150A1D; }
.footer-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding:26px 0; font-size:.74rem; letter-spacing:.06em;
}
.footer-base a{ color:var(--ouro); }

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante{
  position:fixed; right:26px; bottom:26px; z-index:99;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 16px 36px rgba(37,211,102,.4);
  transition:transform .4s var(--ease);
}
.zap-flutuante::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(37,211,102,.65); animation:eco 2.6s var(--ease) infinite;
}
@keyframes eco{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.65); opacity:0; } }
.zap-flutuante svg{ width:30px; height:30px; fill:#fff; }
.zap-flutuante:hover{ transform:scale(1.08); }

/* ---------- Barra de contato fixa (mobile) — WhatsApp + Ligue agora ----------
   Só existe (visualmente) em ≤768px; substitui o zap-flutuante nesse breakpoint
   (nunca os dois juntos). O padding reservado no body só se aplica em páginas
   que de fato têm a barra (classe body.tem-contato-fixo) — privacidade.html e
   404.html não a têm, então não ganham espaço vazio embaixo. */
.contato-fixo{ display:none; }
@media (max-width:768px){
  .zap-flutuante{ display:none; }
  .contato-fixo{
    display:flex; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    padding:10px 14px max(10px, env(safe-area-inset-bottom));
    background:rgba(21,10,29,.92); backdrop-filter:blur(12px);
    border-top:1px solid rgba(184,146,74,.22);
    transition:transform .35s var(--ease);
  }
  [data-tema="claro"] .contato-fixo{ background:rgba(246,241,232,.94); border-top-color:rgba(61,30,74,.18); }
  .contato-fixo.teclado-aberto{ transform:translateY(100%); }
  .contato-fixo .btn{
    flex:1; justify-content:center; padding:14px 12px; font-size:.68rem; gap:7px;
  }
  .contato-fixo .btn svg{ width:15px; height:15px; }
  body.tem-contato-fixo{ padding-bottom:var(--contato-fixo-h, 78px); }
}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.hero-interno{
  position:relative; overflow:hidden;
  padding:215px 0 105px; color:var(--claro);
  background:radial-gradient(56% 66% at 88% 0%, rgba(108,61,126,.26) 0%, transparent 60%), var(--noite);
  border-bottom:1px solid rgba(184,146,74,.2);
}
.hero-interno .hero-cv{ top:-14%; }
.hero-interno h1{ font-size:clamp(2.7rem,5.4vw,4.4rem); color:var(--areia); margin-bottom:22px; }
.hero-interno h1 .h1-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-interno h1 em{ font-style:normal; color:var(--ouro-claro); }
.hero-interno .sub{ color:var(--claro-2); max-width:560px; font-size:1.05rem; }

/* variante da hero interna COM foto de fundo (sobre.html) — mesmo padrão da home:
   foto atrás + véu que troca de cor com o tema, mantendo o texto sempre legível */
.hero-interno--foto{ padding-top:190px; }
.hero-interno--foto .hero-cv{ display:none; }        /* a marca-d'água "CV" sujaria a foto */
.hero-interno--foto .wrap{ position:relative; z-index:2; }
.hero-fundo-int{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-fundo-int picture{ position:absolute; inset:0; display:block; }
.hero-fundo-int img{ width:100%; height:100%; object-fit:cover; object-position:78% center; }
.js .hero-fundo-int img{ animation:hero-aproxima 18s var(--ease) forwards; }
.hero-veu-int{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(21,10,29,.92) 0%, rgba(21,10,29,.66) 46%, rgba(21,10,29,.16) 78%, rgba(21,10,29,.05) 100%),
    linear-gradient(0deg, rgba(21,10,29,.6) 0%, transparent 32%);
}
[data-tema="claro"] .hero-interno--foto .hero-veu-int{
  background:
    linear-gradient(90deg, rgba(246,241,232,.92) 0%, rgba(246,241,232,.62) 46%, rgba(246,241,232,.14) 78%, rgba(246,241,232,.04) 100%),
    linear-gradient(0deg, rgba(246,241,232,.6) 0%, transparent 32%);
}

.migalha{
  font-size:.64rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--claro-2); margin-bottom:36px;
}
.migalha a{ color:var(--ouro-claro); }
.migalha span{ margin-inline:10px; }

/* ============================================================
   HERO IMÓVEIS — vídeo cinematográfico controlado pelo scroll
   EXCLUSIVO de imoveis.html (classes .imoveis-hero / .ish-*). Nenhuma
   outra página tem esses elementos, então isto não vaza pro resto do site.
   Base = hero estática (fallback/sem JS/reduced-motion). .is-enhanced (via
   js/imoveis-hero.js) liga os 450vh + sticky + scrubbing do vídeo.
   ============================================================ */
.imoveis-hero{ position:relative; background:var(--noite); color:var(--areia); }
.ish-outer{ position:relative; }
.ish-sticky{
  position:relative; width:100%;
  height:100vh; height:100svh; min-height:520px;
  overflow:hidden; display:flex; align-items:center;
  background:var(--noite);
}
.ish-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:1;
  /* fallback antes do vídeo decodificar / se ele falhar — nunca tela escura */
  background:var(--noite) url('../assets/img/imovel-alto-2.webp') center/cover no-repeat;
  pointer-events:none;
}
/* degradê lateral (leitura do texto) + topo (contraste do header) — sem escurecer tudo */
.ish-veu{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(21,10,29,.80) 0%, rgba(21,10,29,.50) 30%, rgba(21,10,29,0) 60%),
    linear-gradient(0deg,  rgba(21,10,29,.62) 0%, rgba(21,10,29,0) 26%),
    linear-gradient(180deg, rgba(21,10,29,.52) 0%, rgba(21,10,29,0) 15%);
}
.ish-conteudo{
  position:relative; z-index:3;
  width:56%; max-width:720px;
  padding-left:max(5vw, calc((100vw - var(--largura)) / 2));
}
.ish-frases{ position:relative; }
.ish-frase{
  font-family:var(--display); font-weight:400; color:var(--areia);
  font-size:clamp(2.1rem,5vw,4.2rem); line-height:1.06; letter-spacing:.01em;
  max-width:min(780px,82vw); margin:0;
  text-shadow:0 2px 34px rgba(21,10,29,.45);
}
.ish-frase em{ font-style:normal; color:var(--ouro-claro); }
/* fallback: só a 1ª frase, empilhamento normal */
.ish-frase + .ish-frase{ display:none; }

/* dica inicial de scroll */
.ish-scroll-hint{
  position:absolute; z-index:3; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--claro-2); font-size:.6rem; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; pointer-events:none; white-space:nowrap;
}
.ish-hint-line{
  width:1px; height:42px; background:linear-gradient(var(--ouro-claro), transparent);
  animation:ishHint 1.9s var(--ease) infinite;
}
@keyframes ishHint{
  0%{ transform:scaleY(0); transform-origin:top; opacity:.25 }
  50%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:.25 }
}
.imoveis-hero:not(.is-enhanced) .ish-scroll-hint{ display:none; }

/* --- ENHANCED: 450vh + sticky + frases empilhadas controladas pelo JS --- */
.imoveis-hero.is-enhanced .ish-outer{ height:450vh; }
.imoveis-hero.is-enhanced .ish-sticky{ position:sticky; top:0; }
.imoveis-hero.is-enhanced .ish-frases{ min-height:clamp(180px,26vh,300px); }
.imoveis-hero.is-enhanced .ish-frase{
  position:absolute; left:0; bottom:0; width:100%; display:block;
  opacity:0; transform:translateY(30px); filter:blur(6px);
  will-change:opacity,transform,filter;
}

/* celular: fonte menor, padding lateral, texto limitado, foco no imóvel */
@media (max-width:768px){
  .ish-sticky{ align-items:flex-end; }
  .ish-conteudo{ width:auto; max-width:none; padding-left:6vw; padding-right:6vw; padding-bottom:16vh; }
  .ish-frase{ font-size:clamp(1.7rem,7.5vw,2.6rem); max-width:88vw; }
  .ish-veu{
    background:
      linear-gradient(0deg, rgba(21,10,29,.82) 0%, rgba(21,10,29,.32) 38%, rgba(21,10,29,0) 66%),
      linear-gradient(180deg, rgba(21,10,29,.5) 0%, rgba(21,10,29,0) 14%);
  }
  .imoveis-hero.is-enhanced .ish-frases{ min-height:clamp(150px,22vh,220px); }
}

/* filtros da página de imóveis */
.filtros-blocos{ position:relative; z-index:2; display:flex; flex-direction:column; gap:26px; margin-bottom:70px; }
.filtro-grupo{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.filtro-rotulo{
  font-size:.62rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin-right:10px; min-width:56px;
}
.filtro{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  background:none; border:1px solid var(--linha); border-radius:999px;
  color:var(--muted); padding:12px 26px; cursor:pointer;
  transition:all .35s var(--ease);
}
.filtro:hover{ border-color:var(--berinjela); color:var(--berinjela); }
.filtro.ativo{ background:var(--berinjela); border-color:var(--berinjela); color:var(--areia); }
.filtros-vazio{
  display:none; padding:60px 0; text-align:center; color:var(--muted); font-size:1rem;
}
.filtros-vazio.visivel{ display:block; }

/* valores (sobre) — cards escuros roxos, mesma linguagem de "Por onde você
   quer começar?", com luz radial que segue o cursor (--mx/--my, via JS;
   sem JS o brilho aparece centrado no hover — degrada bem) */
.valores{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
.valor{
  position:relative; overflow:hidden; border-radius:20px; height:100%;
  background:linear-gradient(165deg, #241130 0%, #1C0E26 55%, #150A1D 100%);
  border:1px solid rgba(184,146,74,.22);
  padding:52px 40px 46px;
  box-shadow:0 40px 80px -42px rgba(24,13,34,.55);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.valor::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(184,146,74,.16), transparent 68%);
  opacity:0; transition:opacity .5s var(--ease);
}
.valor:hover{ transform:translateY(-8px); border-color:rgba(184,146,74,.42); box-shadow:0 46px 90px -36px rgba(24,13,34,.65); }
.valor:hover::before{ opacity:1; }
.valor > *{ position:relative; z-index:1; }
.valor .vn{
  font-family:var(--display); font-size:.9rem; letter-spacing:.3em; color:var(--ouro-claro); display:block; margin-bottom:30px;
}
.valor h3{ font-size:1.6rem; margin-bottom:12px; color:#F1ECE3; }
.valor p{ font-size:.95rem; color:rgba(241,236,227,.62); }
@media (hover:none){ .valor::before{ display:none; } }
@media (prefers-reduced-motion:reduce){ .valor{ transition:none; } .valor:hover{ transform:none; } }

.credencial{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid rgba(184,146,74,.35); border-radius:2px; padding:14px 26px;
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta); margin-top:6px;
}
.sec-noite .credencial{ color:var(--ouro-claro); }

/* composição de duas fotos (sobre) */
.fotos-camadas{ position:relative; padding-bottom:96px; }
.fotos-camadas .foto-a{
  width:84%; height:520px; object-fit:cover; border-radius:3px;
  box-shadow:0 50px 100px -30px rgba(32,18,42,.38);
}
.fotos-camadas .foto-b{
  position:absolute; right:0; bottom:0; width:52%; height:300px; object-fit:cover;
  border-radius:3px; border:6px solid var(--papel);
}
.sec-noite .fotos-camadas .foto-b{ border-color:var(--noite-2); }

.duas-colunas{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center;
}
.duas-colunas .texto p{ margin-bottom:20px; max-width:530px; }
.sec-papel .duas-colunas .texto p,.sec-areia .duas-colunas .texto p{ color:var(--muted); }
.sec-papel .duas-colunas .texto p strong,.sec-areia .duas-colunas .texto p strong{ color:var(--tinta); font-weight:600; }
.sec-noite .duas-colunas .texto p{ color:var(--claro-2); }
.sec-noite .duas-colunas .texto p strong{ color:var(--areia); font-weight:600; }

/* ============================================================
   PÁGINA DO IMÓVEL — galeria + informações
   ============================================================ */
.hero-imovel{ padding:185px 0 66px; }
.hero-imovel h1{ font-size:clamp(2.1rem,4.2vw,3.4rem); }

.imovel-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start;
}
.galeria-principal{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:3px;
  background:var(--linha);
}
.galeria-principal img{ width:100%; height:100%; object-fit:cover; }
.galeria-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.galeria-thumbs button{
  aspect-ratio:4/3; overflow:hidden; border-radius:3px; padding:0;
  border:1px solid var(--linha); background:none; cursor:pointer;
  opacity:.6; transition:opacity .35s,border-color .35s;
}
.galeria-thumbs button img{ width:100%; height:100%; object-fit:cover; }
.galeria-thumbs button.ativo,.galeria-thumbs button:hover{ opacity:1; border-color:var(--ouro); }

.imovel-desc{ margin-top:54px; max-width:640px; }
.imovel-desc h2{ font-size:1.9rem; margin-bottom:16px; }
.imovel-desc p{ color:var(--muted); margin-bottom:16px; }

.imovel-info{
  position:sticky; top:130px;
  background:#fff; border:1px solid var(--linha); border-radius:3px;
  padding:40px 36px;
}
.imovel-info .rotulo{
  display:block; font-size:.6rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ouro); margin-bottom:6px;
}
.imovel-info .preco{
  display:block; font-family:var(--display); font-size:2.4rem; line-height:1.1;
  color:var(--tinta); margin-bottom:24px;
}
.imovel-info .card-specs{ margin-bottom:24px; }
.imovel-info h3{
  font-family:var(--fonte); font-size:.64rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.imovel-destaques{ margin-bottom:30px; }
.imovel-destaques li{
  position:relative; padding-left:24px; font-size:.92rem; color:var(--muted);
  margin-bottom:9px; font-weight:400;
}
.imovel-destaques li::before{ content:"—"; position:absolute; left:0; color:var(--ouro); }
.imovel-info .btn{ width:100%; justify-content:center; text-align:center; }
.imovel-nota{ font-size:.76rem; color:var(--muted); margin-top:14px; text-align:center; }

.imovel-volta{ margin-top:60px; position:relative; z-index:2; }
.link-volta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--berinjela); transition:gap .4s var(--ease),color .3s;
}
.link-volta::before{ content:"←"; }
.link-volta:hover{ gap:16px; color:var(--ouro); }

.imovel-vazio{ text-align:center; padding:30px 0; }
.imovel-vazio h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.imovel-vazio p{ color:var(--muted); max-width:480px; margin:0 auto 34px; }

/* ============================================================
   PÁGINA 404
   ============================================================ */
.pagina-404{
  min-height:100svh; display:flex; align-items:center; text-align:center;
  background:radial-gradient(58% 48% at 82% 12%, rgba(108,61,126,.24) 0%, transparent 62%), var(--noite);
  color:var(--claro); padding:160px 0 120px;
}
.pagina-404 .codigo{
  font-family:var(--display); font-size:clamp(6rem,18vw,11rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--linha-ouro);
}
.pagina-404 h1{ font-size:clamp(1.9rem,4.4vw,3.2rem); color:var(--areia); margin:20px 0 16px; }
.pagina-404 p{ color:var(--claro-2); max-width:460px; margin:0 auto 42px; }
.acoes-404{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }

/* ============================================================
   PROSA — política de privacidade e afins
   ============================================================ */
.prosa{ max-width:720px; position:relative; z-index:2; }
.prosa h2{ font-size:1.55rem; margin:44px 0 14px; }
.prosa h2:first-child{ margin-top:0; }
.prosa p,.prosa li{ color:var(--muted); margin-bottom:14px; }
.prosa li{ position:relative; padding-left:24px; margin-bottom:9px; }
.prosa li::before{ content:"—"; position:absolute; left:0; color:var(--ouro); }
.prosa ul{ margin-bottom:16px; }
.prosa a{ color:var(--berinjela); text-decoration:underline; }
.prosa .atualizacao{ font-size:.8rem; margin-top:44px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .hero .wrap{ grid-template-columns:1fr; gap:72px; }
  .hero{ min-height:auto; }
  .caminhos{ grid-template-columns:1fr; }
  .grade-imoveis{ grid-template-columns:repeat(2,1fr); }
  .quem-grid{ grid-template-columns:1fr; gap:0; }
  .quem-visual{ margin-top:-80px; max-width:520px; }
  .selo-giro{ right:-16px; top:-34px; }
  .quem-conteudo{ padding-top:56px; }
  .imovel-grid{ grid-template-columns:1fr; gap:56px; }
  .imovel-info{ position:static; }
  .faq-grid,.duas-colunas{ grid-template-columns:1fr; gap:56px; }
  .faq-fixo{ position:static; }
  .valores{ grid-template-columns:1fr; }
  .footer-topo{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .nav{
    position:fixed; inset:0; background:var(--noite);
    flex-direction:column; justify-content:center; gap:36px;
    transform:translateX(100%); transition:transform .5s var(--ease); z-index:125;
  }
  .nav.aberto{ transform:none; }
  .nav > a.nav-link{ font-size:1.15rem; font-family:var(--display); letter-spacing:.3em; }
  .burger{ display:block; }
  .hero{ padding:150px 0 100px; }
  .hero-stats{ gap:30px; flex-wrap:wrap; }
  .selo-giro{ width:94px; height:94px; }
  .quem-quote{ padding-left:20px; }
  .galeria-thumbs{ grid-template-columns:repeat(3,1fr); }
  .secao{ padding:95px 0; }
  .sec-quem{ padding:0 0 95px; }
  .secao-cabeca{ flex-direction:column; align-items:flex-start; gap:28px; margin-bottom:52px; }
  .grade-imoveis{ grid-template-columns:1fr; }
  .footer-topo{ grid-template-columns:1fr; gap:42px; }
  .fotos-camadas .foto-a{ width:100%; height:400px; }
  .fotos-camadas .foto-b{ width:62%; height:220px; }
  .filtro-rotulo{ width:100%; }
}

/* ============================================================
   MARCA — logo horizontal da Clicia (header + footer)
   ============================================================ */
/* align-self evita a logo esticar dentro de colunas flex/grid largas */
.marca-logo{ height:56px; width:auto; display:block; align-self:flex-start; }
.footer .marca-logo{ height:64px; }

/* crédito O KAFÉ no rodapé — "Feito pela" + logo formam um único bloco legível */
.credito-okafe{ display:inline-flex; align-items:center; gap:9px; }
.credito-okafe a{ display:inline-flex; align-items:center; }
.credito-okafe img{
  height:42px; width:auto; opacity:.82;
  filter:brightness(0) invert(1); /* silhueta clara sobre o fundo escuro */
  transition:opacity .3s;
}
.credito-okafe:hover img{ opacity:1; }
@media (max-width:768px){ .credito-okafe img{ height:34px; } }

/* ============================================================
   TOGGLE DE TEMA — noite (padrão) / claro
   ============================================================ */
.tema-toggle{
  position:relative; width:58px; height:30px; flex-shrink:0;
  background:transparent; border:1px solid rgba(241,236,227,.32);
  border-radius:999px; cursor:pointer; padding:0;
  transition:border-color .35s;
}
.tema-toggle:hover{ border-color:var(--ouro); }
.tema-toggle .bolinha{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--berinjela); display:grid; place-items:center;
  transition:transform .45s var(--ease), background .35s;
}
.tema-toggle svg{
  width:13px; height:13px; fill:none; stroke:var(--ouro-claro);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.tema-toggle .icone-sol{ display:none; }
[data-tema="claro"] .tema-toggle .bolinha{ transform:translateX(28px); background:var(--ouro); }
[data-tema="claro"] .tema-toggle .icone-sol{ display:block; }
[data-tema="claro"] .tema-toggle .icone-lua{ display:none; }
[data-tema="claro"] .tema-toggle svg{ stroke:#150A1D; }

/* ============================================================
   CARROSSEL DE DESTAQUES — anda sozinho; arraste ou segure
   Sem JS ele vira uma fileira com rolagem normal (fallback).
   ============================================================ */
.carrossel{ position:relative; z-index:2; overflow-x:auto; scrollbar-width:none; }
.carrossel::-webkit-scrollbar{ display:none; }
.carrossel.vivo{
  overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.carrossel.vivo:active{ cursor:grabbing; }
.carrossel-trilho{
  display:flex; gap:38px; width:max-content;
  padding:0 max(5vw,calc((100vw - var(--largura))/2)) 10px;
  will-change:transform;
}
.carrossel .card-imovel{ width:min(400px,80vw); flex-shrink:0; }
.carrossel img{ -webkit-user-drag:none; }
.carrossel-dica{
  font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-top:16px;
}
.carrossel-dica::before{ content:"—"; margin-right:10px; color:var(--ouro); }

/* ============================================================
   GALERIA — a rolagem da página desliza as fotos na horizontal
   ============================================================ */
/* área interna calculada pela viewport disponível abaixo do header fixo (94px) —
   centraliza o conjunto (cabeça+trilho) de verdade dentro do espaço livre, em vez
   de confiar num padding fixo em px que cortava foto/legenda em telas mais baixas
   (ex. 1366×768). overflow-x:clip/overflow-y:visible (não overflow:hidden na seção
   inteira) preserva sombra e elevação do hover — o clip do movimento horizontal do
   trilho continua isolado em .galeria-viewport.presa, mais abaixo. */
.galeria{
  position:relative; background:var(--papel);
  overflow-x:clip; overflow-y:visible;
  min-height:100vh; min-height:100svh;
  padding-top:var(--header-height);
  padding-bottom:clamp(40px,6vh,72px);
  display:flex; flex-direction:column; justify-content:center;
}
.galeria-cabeca{ margin-bottom:clamp(24px,4vh,48px); }
/* padrão: fileira rolável (funciona sem JS); .presa entra via JS quando o pin assume */
.galeria-viewport{ overflow-x:auto; scrollbar-width:none; }
.galeria-viewport::-webkit-scrollbar{ display:none; }
.galeria-viewport.presa{ overflow:hidden; }
.galeria-trilho{
  display:flex; align-items:flex-start; gap:30px; width:max-content;
  padding-inline:max(5vw,calc((100vw - var(--largura))/2));
  will-change:transform;
}
.galeria-item{ flex-shrink:0; width:min(920px,86vw); margin:0; }
/* moldura que recorta a foto — o parallax interno acontece dentro dela */
.galeria-item .quadro{
  position:relative; overflow:hidden; border-radius:18px;
  transition:transform .9s var(--ease), box-shadow .9s var(--ease);
}
.galeria-item .quadro::after{
  content:""; position:absolute; inset:0; border:1px solid transparent;
  border-radius:18px; pointer-events:none; transition:border-color .5s;
}
.galeria-item img{
  width:100%; height:clamp(230px,56vh,780px); object-fit:cover; display:block;
  transition:filter .8s; /* o transform é do GSAP (parallax interno) */
}
.galeria-item:nth-child(even){ padding-top:44px; }
.galeria-item:nth-child(even) img{ height:clamp(210px,50vh,700px); }
.galeria-item:hover .quadro{
  transform:scale(1.02);
  box-shadow:0 34px 70px -30px rgba(32,18,42,.45);
}
.galeria-item:hover .quadro::after{ border-color:rgba(184,146,74,.6); }
.galeria-item:hover img{ filter:brightness(1.07) saturate(1.06); }
.galeria-item figcaption{
  margin-top:14px; font-size:.66rem; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted); transition:color .4s;
}
.galeria-item:hover figcaption{ color:var(--ouro); }
@media (max-width:768px){
  /* mobile não pina (sem gsap.matchMedia >=769px) — volta a ser bloco normal,
     dimensionado pelo conteúdo, sem forçar 100svh de altura à toa */
  .galeria{ min-height:0; display:block; padding:80px 0 70px; }
  .galeria-viewport{ scroll-snap-type:x mandatory; }
  .galeria-item{ scroll-snap-align:center; }
  .galeria-item:nth-child(even){ padding-top:0; }
}
/* telas curtas em desktop/tablet (>=769px): a galeria pina de verdade (JS), então
   a área ocupada precisa caber abaixo do header em qualquer altura — reduz o
   clamp aqui em vez de deixar o piso alto "travar" o tamanho num 900x600 real. */
@media (min-width:769px) and (max-height:720px){
  .galeria-cabeca{ margin-bottom:clamp(16px,3vh,28px); }
  .galeria{ padding-bottom:clamp(24px,4vh,48px); }
  .galeria-item img{ height:clamp(180px,40vh,480px); }
  .galeria-item:nth-child(even){ padding-top:26px; }
  .galeria-item:nth-child(even) img{ height:clamp(160px,35vh,420px); }
}

/* ============================================================
   BANDA FIXA — foto parada ao fundo, o site desliza por cima
   ============================================================ */
.banda-fixa{
  position:relative; display:flex; align-items:center; min-height:72vh; padding:130px 0;
  background-image:linear-gradient(rgba(21,10,29,.72),rgba(21,10,29,.58)),url("../assets/img/interior-1.webp");
  background-size:cover; background-position:center;
  background-attachment:fixed;
  border-block:1px solid rgba(184,146,74,.3);
  color:var(--claro);
}
/* variante "imóvel dos sonhos" — foto de fundo própria, mesmo tratamento */
.banda-fixa--sonho{
  background-image:linear-gradient(rgba(21,10,29,.66),rgba(21,10,29,.7)),url("../assets/img/foto-fundo-imovel.webp");
}
.banda-fixa h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.3rem,4.8vw,3.9rem); line-height:1.14;
  color:#F1ECE3; max-width:680px; margin-bottom:20px;
}
.banda-fixa p{ color:rgba(241,236,227,.72); max-width:520px; margin-bottom:46px; }
/* iOS/tablets não lidam bem com background fixo — volta pro normal */
@media (max-width:1080px){
  .banda-fixa{ background-attachment:scroll; min-height:auto; padding:100px 0; }
  /* tela menor não precisa da imagem em resolução cheia — usa a variante -1000
     já otimizada (existia no assets/img/ mas não era referenciada em lugar nenhum) */
  .banda-fixa--sonho{
    background-image:linear-gradient(rgba(21,10,29,.66),rgba(21,10,29,.7)),url("../assets/img/foto-fundo-imovel-1000.webp");
  }
}
/* Safari de toque (iPad Pro paisagem passa dos 1080px) */
@supports (-webkit-touch-callout:none){
  .banda-fixa{ background-attachment:scroll; }
}

/* ============================================================
   TEMA CLARO — <html data-tema="claro">; o padrão é o noite
   ============================================================ */
[data-tema="claro"]{
  --noite:#F6F1E8;
  --noite-2:#EFE7D9;
  --claro:rgba(32,18,42,.88);
  --claro-2:rgba(32,18,42,.58);
  --linha-clara:rgba(61,30,74,.16);
  --ouro-claro:#8A662C;
}
[data-tema="claro"] .header.rolado{ background:rgba(246,241,232,.88); }
[data-tema="claro"] .burger span{ background:var(--tinta); }
[data-tema="claro"] .nav-redes a{ border-color:rgba(32,18,42,.22); }
[data-tema="claro"] .nav-redes a svg{ fill:var(--tinta); }
[data-tema="claro"] .btn-claro{ color:var(--tinta); border-color:rgba(32,18,42,.35); }
[data-tema="claro"] .btn-claro:hover{ color:var(--ouro); border-color:var(--ouro); }
[data-tema="claro"] .tema-toggle{ border-color:rgba(32,18,42,.3); }

[data-tema="claro"] .hero h1,
[data-tema="claro"] .hero-stats .stat b,
[data-tema="claro"] .hero-interno h1,
[data-tema="claro"] .sec-noite .sec-title,
[data-tema="claro"] .quem-quote,
[data-tema="claro"] .quem-conteudo p strong,
[data-tema="claro"] .sec-noite .duas-colunas .texto p strong,
[data-tema="claro"] .footer li a:hover,
[data-tema="claro"] .footer-base a,
[data-tema="claro"] .banda span.cheio,
[data-tema="claro"] .card-placa b,
[data-tema="claro"] .pagina-404 h1{ color:var(--tinta); }

[data-tema="claro"] .hero-cv{ -webkit-text-stroke:1px rgba(32,18,42,.06); }
[data-tema="claro"] .selo-giro{ background:var(--papel); }
[data-tema="claro"] .banda span{ color:rgba(138,102,44,.7); }
[data-tema="claro"] .card-tag{ color:#D4B36A; } /* a etiqueta continua escura */
[data-tema="claro"] .footer{ background:#EAE1D0; }
[data-tema="claro"] .footer-wordmark span{ -webkit-text-stroke:1px rgba(32,18,42,.16); }
[data-tema="claro"] .redes a{ border-color:rgba(32,18,42,.22); }
[data-tema="claro"] .redes a svg{ fill:var(--tinta); }
[data-tema="claro"] .credito-okafe img{ filter:none; opacity:.75; }
[data-tema="claro"] .cta-fundo span{ -webkit-text-stroke:1px rgba(32,18,42,.07); }
[data-tema="claro"] .pagina-404 .codigo{ -webkit-text-stroke:1px rgba(138,102,44,.5); }
/* a banda fixa continua escura sobre a foto, mesmo no claro */
[data-tema="claro"] .banda-fixa p{ color:rgba(241,236,227,.72); }

/* ============================================================
   HERO COM FOTO DE FUNDO — foto da Clicia + zoom lento
   ============================================================ */
.hero--foto{ background:var(--noite); }
.hero--foto .wrap{ display:block; }
.hero--foto .hero-conteudo{ max-width:660px; }
.hero-fundo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-fundo picture{ position:absolute; inset:0; display:block; }
.hero-fundo img{
  width:100%; height:100%; object-fit:cover; object-position:72% center;
}
.js .hero-fundo img{ animation:hero-aproxima 18s var(--ease) forwards; }
@keyframes hero-aproxima{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.hero-fundo .hero-veu{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(21,10,29,.92) 0%, rgba(21,10,29,.66) 46%, rgba(21,10,29,.16) 78%, rgba(21,10,29,.05) 100%),
    linear-gradient(0deg, rgba(21,10,29,.6) 0%, transparent 32%);
}
@media (max-width:1080px){ .hero--foto{ min-height:76svh; } }
@media (max-width:768px){ .hero--foto{ min-height:auto; } }

/* foto do hero muda com o tema: noite (padrão) / dia (claro) */
.hero-fundo .foto-dia{ display:none; }
[data-tema="claro"] .hero-fundo .foto-dia{ display:block; }
[data-tema="claro"] .hero-fundo .foto-noite{ display:none; }
/* no claro a foto é diurna e clara — véu creme + textos escuros (regras gerais do claro) */
[data-tema="claro"] .hero-fundo .hero-veu{
  background:
    linear-gradient(90deg, rgba(246,241,232,.92) 0%, rgba(246,241,232,.62) 46%, rgba(246,241,232,.14) 78%, rgba(246,241,232,.04) 100%),
    linear-gradient(0deg, rgba(246,241,232,.6) 0%, transparent 32%);
}

/* ============================================================
   CAMADAS DO SCROLL — sobreposição por scroll (reutilizável)
   Empilhamento em 3 níveis pro efeito "seção presa + vizinha
   desliza por cima" (ref. dixieraizpacheco.com). Vale em qualquer
   página com body.camadas-scroll:
     · nível 1 (atrás) — heros: ficam presas e são cobertas;
     · nível 2 (meio)  — seções normais: fundo sólido, cobrem a hero
                          e são cobertas pelo rodapé (última seção);
     · nível 3 (frente)— rodapé: sobe por cima da última seção.
   Header (z-100), menu (z-125+) e WhatsApp (z-99) têm z-index próprio,
   acima destes — não ficam presos atrás da animação.
   O z-index das heros é setado por CLASSE (funciona mesmo quando o
   ScrollTrigger prende/reposiciona o elemento). Só o empilhamento é
   global; o "prender" em si é feito no JS, e apenas em telas >=769px. */
.camadas-scroll main > *{ position:relative; z-index:2; }
.camadas-scroll .hero--foto,
.camadas-scroll .hero-interno,
.camadas-scroll .imoveis-hero{ z-index:1; }
.camadas-scroll .footer{ position:relative; z-index:3; }

@media (max-width:768px){
  .marca-logo{ height:44px; }
  .footer .marca-logo{ height:54px; }
}

/* respeita preferência de movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js [data-fade],.js [data-stagger] > *,.js .hero-sub,.js .hero-ctas,.js .hero-stats{ opacity:1; transform:none; }
  /* Processo: com movimento reduzido o JS não liga o modo sticky (fica a lista
     editorial legível). Nada a forçar aqui — a lista é o estado natural. */
}