/* ==========================================================================
   ARTESANO CAMPO GRANDE — Avelino Imóveis
   Design system "Estado da Arte"
   Paleta e tipografia conforme Guideline oficial Artesano Campo Grande:
     Pantone 5753c #6e6b47 · 1375c #fbaa26 · 152c #d98126 · black #231f20
     Futura Next  ->  Jost (substituta geométrica de métricas equivalentes)
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* marca */
  --oliva:        #6e6b47;
  --oliva-esc:    #4a4830;
  --oliva-prof:   #212016;   /* mais profundo: dá contraste real ao âmbar */
  --oliva-claro:  #8d8a68;
  --ambar:        #fbaa26;
  --ambar-vivo:   #ffbc45;   /* realce em fundo escuro */
  --terracota:    #d98126;
  --tinta:        #231f20;

  /* neutros quentes */
  --papel:        #faf8f3;
  --papel-2:      #f2eee4;
  --areia:        #e6e0d2;
  --branco:       #ffffff;

  /* texto */
  --txt:          #231f20;
  --txt-suave:    #504c43;   /* +contraste sobre papel */
  --txt-claro:    #7d786a;
  --txt-inv:      #fbf9f3;
  --txt-inv-suave:#ddd8c6;   /* +contraste sobre oliva profundo */

  /* tipografia */
  --display: 'Jost', 'Futura Next', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --texto:   'Jost', 'Futura Next', system-ui, -apple-system, sans-serif;

  /* escala fluida */
  --fs-mega:  clamp(3rem, 9vw, 8.5rem);
  --fs-h1:    clamp(2.4rem, 6vw, 5.5rem);
  /* título único para TODAS as seções: faixas, splits e blocos comuns */
  --fs-h2:    clamp(1.8rem, 3.2vw, 2.9rem);
  --fs-h3:    clamp(1.3rem, 1.9vw, 1.7rem);
  --fs-lead:  clamp(1rem, 1.15vw, 1.125rem);   /* 18px no desktop */
  --fs-base:  clamp(1rem, 1.05vw, 1.075rem);
  --fs-sm:    .875rem;
  --fs-xs:    .75rem;

  /* ritmo */
  --sec:      80px;   /* respiro fixo entre seções, definido pelo cliente */
  --gut:      clamp(1.25rem, 4vw, 3rem);
  --max:      1320px;
  --max-txt:  62ch;

  --r-sm: 4px;
  --r:    10px;
  --r-lg: 22px;

  --sombra:    0 2px 8px rgba(35,31,32,.05), 0 12px 32px rgba(35,31,32,.07);
  --sombra-lg: 0 4px 14px rgba(35,31,32,.07), 0 28px 70px rgba(35,31,32,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--texto);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:1.68;
  color:var(--txt);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,picture,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
/* o padrão do navegador é margin:1em 40px — somava 80px ao gap das grades */
figure{ margin:0; }

::selection{ background:var(--ambar); color:var(--tinta); }

:focus-visible{
  outline:2px solid var(--terracota);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 3. UTILITÁRIOS ---------- */
/* compensa o cabeçalho fixo ao navegar pelas âncoras */
section[id],div[id]{ scroll-margin-top:88px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-slim{ max-width:920px; }
.sec{ padding-block:var(--sec); position:relative; }
.vis-oculto{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* etiqueta / eyebrow */
.rotulo{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:1.5rem;
}
.rotulo::before{
  content:''; width:2.2rem; height:1px; background:currentColor; opacity:.55;
}
.rotulo--inv{ color:var(--ambar); }

.titulo-sec{ font-size:var(--fs-h2); margin-bottom:1.4rem; }
.lead{
  font-size:var(--fs-lead); font-weight:300;
  color:var(--txt-suave); line-height:1.62; max-width:var(--max-txt);
}
.lead--inv{ color:var(--txt-inv-suave); }

/* fundos */
.bg-oliva{ background:var(--oliva-prof); color:var(--txt-inv); }
.bg-oliva h1,.bg-oliva h2,.bg-oliva h3{ color:var(--txt-inv); }
.bg-papel2{ background:var(--papel-2); }

/* filete decorativo com o gradiente da marca */
.filete{
  height:3px; border:0; margin:0;
  background:linear-gradient(90deg,var(--oliva) 0%,var(--ambar) 50%,var(--terracota) 100%);
}

/* ---------- 4. SÍMBOLO DA MARCA (CSS puro) ---------- */
/* círculo oliva + quadrante ambar/terracota — conforme guideline */
.simbolo{
  --s:1em;
  display:block;            /* <i> é inline: sem isto, width/height são ignorados */
  width:var(--s); height:var(--s); position:relative; flex:none;
  border-radius:50%; background:var(--oliva); overflow:hidden;
}
.simbolo::after{
  content:''; position:absolute; inset:0 50% 50% 0; background:var(--ambar);
}

/* ---------- 5. BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  padding:1.05em 2.1em;
  font-family:var(--display); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  border-radius:100px; cursor:pointer;
  transition:transform .4s var(--ease), background .35s var(--ease),
             color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primario{
  background:var(--terracota); color:#fff;
  box-shadow:0 6px 22px rgba(217,129,38,.32);
}
.btn--primario:hover{ background:#c3701c; box-shadow:0 12px 34px rgba(217,129,38,.42); }

.btn--marca{
  background:var(--oliva); color:#fff;
  box-shadow:0 6px 22px rgba(110,107,71,.3);
}
.btn--marca:hover{ background:var(--oliva-esc); box-shadow:0 12px 34px rgba(110,107,71,.4); }

.btn--fantasma{ border:1px solid rgba(255,255,255,.42); color:#fff; }
.btn--fantasma:hover{ background:#fff; color:var(--tinta); border-color:#fff; }

.btn--linha{ border:1px solid var(--oliva); color:var(--oliva); }
.btn--linha:hover{ background:var(--oliva); color:#fff; }

.btn--bloco{ width:100%; }

/* ---------- 6. CABEÇALHO ---------- */
.topo{
  position:fixed; inset:0 0 auto; z-index:900;
  padding-block:1.15rem;
  transition:background .45s var(--ease), padding .45s var(--ease),
             box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.topo__int{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.topo.fixo{
  background:rgba(250,248,243,.93);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding-block:.7rem;
  border-bottom-color:var(--areia);
  box-shadow:0 2px 24px rgba(35,31,32,.06);
}

.marca-topo{ display:flex; align-items:center; gap:1.15rem; }
.marca-topo__logo{ height:52px; width:auto; transition:height .45s var(--ease); }
.topo.fixo .marca-topo__logo{ height:42px; }
/* logo Artesano: versão branca no topo do hero, escura quando fixo */
.marca-topo__logo--claro{ display:block; }
.marca-topo__logo--escuro{ display:none; }
.topo.fixo .marca-topo__logo--claro{ display:none; }
.topo.fixo .marca-topo__logo--escuro{ display:block; }

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  position:relative; font-size:var(--fs-sm); font-weight:400;
  letter-spacing:.08em; color:rgba(255,255,255,.9);
  transition:color .35s var(--ease);
}
.topo.fixo .nav a{ color:var(--txt-suave); }
.nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--terracota); transition:width .4s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{ width:100%; }
.nav a:hover{ color:var(--terracota); }
.topo.fixo .nav a:hover{ color:var(--terracota); }

.topo__cta{ padding:.85em 1.7em; font-size:var(--fs-xs); }

/* menu mobile */
.hamburguer{
  display:none; width:44px; height:44px; position:relative; z-index:1001;
  align-items:center; justify-content:center;
}
.hamburguer span{
  display:block; width:24px; height:1.5px; background:#fff; position:relative;
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.topo.fixo .hamburguer span{ background:var(--tinta); }
.hamburguer span::before,.hamburguer span::after{
  content:''; position:absolute; left:0; width:24px; height:1.5px;
  background:inherit; transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.hamburguer span::before{ top:-7px; }
.hamburguer span::after{  top:7px; }
.menu-aberto .hamburguer span{ background:transparent!important; }
.menu-aberto .hamburguer span::before{ transform:translateY(7px) rotate(45deg); background:var(--tinta); }
.menu-aberto .hamburguer span::after{  transform:translateY(-7px) rotate(-45deg); background:var(--tinta); }

.gaveta{
  position:fixed; inset:0; z-index:1000;
  background:var(--papel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem; padding:var(--gut);
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
.menu-aberto .gaveta{ opacity:1; visibility:visible; transform:none; }
.gaveta a{
  font-family:var(--display); font-size:1.45rem; font-weight:300;
  letter-spacing:.02em; color:var(--tinta);
}
.gaveta a:hover{ color:var(--terracota); }
/* `.gaveta a` tem especificidade maior que `.btn` e vinha inflando o botão
   para 1.45rem com padding em em — o resultado era um bloco gigante. */
.gaveta .btn{
  margin-top:1.25rem;
  font-size:var(--fs-sm);
  padding:1em 2.2em;
}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:7.5rem 3.5rem;
  overflow:hidden; isolation:isolate;
}
.hero__midia{ position:absolute; inset:0; z-index:0; }
.hero__midia picture{ display:block; width:100%; height:100%; }
.hero__midia img,.hero__midia video{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
}
.hero__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(35,31,32,.55) 0%, rgba(35,31,32,.18) 30%,
                    rgba(35,31,32,.48) 70%, rgba(35,31,32,.85) 100%),
    /* reforço à esquerda: garante contraste do texto sobre o céu claro */
    linear-gradient(95deg, rgba(28,26,18,.82) 0%, rgba(28,26,18,.52) 34%,
                    rgba(28,26,18,.12) 58%, rgba(28,26,18,0) 74%);
}
.hero__int{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
}
/* hero em duas colunas: discurso à esquerda, captura à direita */
.hero__grade{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__conteudo{ max-width:min(640px, 100%); }

/* ---------- 7b. FORMULÁRIO DO HERO ---------- */
.form-topo{
  background:rgba(250,248,243,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2.15rem);
  box-shadow:0 8px 24px rgba(15,14,8,.2), 0 32px 80px rgba(15,14,8,.34);
  border:1px solid rgba(255,255,255,.5);
}
.form-topo h2{
  font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:400;
  letter-spacing:-.015em; margin-bottom:.35rem;
}
.form-topo__sub{
  font-size:var(--fs-xs); color:var(--txt-suave);
  margin-bottom:1.25rem; letter-spacing:.01em;
}
.form-topo .campo{ margin-bottom:.7rem; }
.form-topo .campo label{ font-size:10px; margin-bottom:.35rem; }
.form-topo .campo input,.form-topo .campo select{ padding:.78em .95em; font-size:.95rem; }
.form-topo .consent{ margin:.85rem 0 1.05rem; font-size:11px; }
.form-topo .btn{ padding:.95em 1.6em; }
.form-topo__selo{
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  margin-top:.9rem; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-claro);
}
.form-topo__selo .simbolo{ --s:.7em; }

.hero__selo{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.5rem 1.15rem .5rem .55rem;
  border:1px solid rgba(255,255,255,.32); border-radius:100px;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; margin-bottom:1.9rem;
}
.hero__selo .simbolo{ --s:1.55em; }

/* H1 = nome do empreendimento (sinal de SEO) + promessa */
.hero h1{ margin-bottom:1.15rem; }
/* o hero é o destaque da página: maior que qualquer título de seção */
.hero__marca{
  display:block;
  font-size:clamp(2.5rem, min(6vw, 8.6vh), 5.4rem);
  font-weight:300; color:#fff;
  line-height:.98; letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(20,18,12,.42);
}
.hero__promessa{
  display:block; margin-top:.6rem;
  font-size:clamp(1.1rem, min(1.9vw, 2.6vh), 1.65rem);
  font-weight:400; color:var(--ambar-vivo);
  line-height:1.22; letter-spacing:.005em;
  text-shadow:0 2px 22px rgba(20,18,12,.5);
}
.hero__sub{
  font-size:var(--fs-lead); font-weight:300; line-height:1.58;
  color:rgba(255,255,255,.93); max-width:46ch; margin-bottom:2.1rem;
  text-shadow:0 1px 16px rgba(20,18,12,.4);
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---------- 8. FAIXA DE NÚMEROS ---------- */
.numeros{ background:var(--oliva-prof); color:var(--txt-inv); padding-block:clamp(2.75rem,5vw,4rem); }
.numeros__grade{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.13);
}
.numero{ background:var(--oliva-prof); padding:1.5rem clamp(.75rem,2vw,1.75rem); text-align:center; }
.numero__v{
  display:block; font-family:var(--display); font-size:clamp(1.85rem,3.4vw,3rem);
  font-weight:300; line-height:1; color:var(--ambar); letter-spacing:-.02em;
  margin-bottom:.6rem;
}
.numero__v sup{ font-size:.45em; top:-.9em; }
.numero__r{
  font-size:var(--fs-xs); letter-spacing:.17em; text-transform:uppercase;
  color:var(--txt-inv-suave); line-height:1.45;
}

/* ==========================================================================
   FAIXAS FOTOGRÁFICAS — o empreendimento se vende pela imagem
   .faixa  = foto de fora a fora, texto por cima
   .split  = foto ocupando 50% da tela, sangrando até a borda
   ========================================================================== */

/* ---------- 8b. FAIXA FULL-BLEED ---------- */
.faixa{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(520px, 84vh, 820px);
  display:flex; align-items:center;
  padding-block:80px;
}
.faixa__midia{ position:absolute; inset:0; z-index:0; }
.faixa__midia picture{ display:block; width:100%; height:100%; }
.faixa__midia img{ width:100%; height:100%; object-fit:cover; }
.faixa__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(92deg, rgba(20,19,12,.93) 0%, rgba(20,19,12,.78) 32%,
                    rgba(20,19,12,.34) 58%, rgba(20,19,12,.06) 80%),
    linear-gradient(180deg, rgba(20,19,12,.42) 0%, rgba(20,19,12,0) 28%,
                    rgba(20,19,12,0) 72%, rgba(20,19,12,.52) 100%);
}
/* variante com o véu espelhado, para alternar o ritmo */
.faixa--dir .faixa__veu{
  background:
    linear-gradient(268deg, rgba(20,19,12,.93) 0%, rgba(20,19,12,.78) 32%,
                    rgba(20,19,12,.34) 58%, rgba(20,19,12,.06) 80%),
    linear-gradient(180deg, rgba(20,19,12,.42) 0%, rgba(20,19,12,0) 28%,
                    rgba(20,19,12,0) 72%, rgba(20,19,12,.52) 100%);
}
.faixa__int{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
}
.faixa__texto{ max-width:640px; color:var(--txt-inv); }
.faixa--dir .faixa__texto{ margin-left:auto; }
.faixa__texto h2{
  font-size:var(--fs-h2); font-weight:300; color:#fff;
  line-height:1.06; letter-spacing:-.022em; margin-bottom:1.35rem;
  text-shadow:0 2px 34px rgba(15,14,8,.5);
}
.faixa__texto h2 em{ font-style:normal; color:var(--ambar-vivo); }
.faixa__texto .lead{
  color:rgba(255,255,255,.94); max-width:56ch;
  text-shadow:0 1px 20px rgba(15,14,8,.55);
}
.faixa__legenda{
  position:absolute; right:var(--gut); bottom:1.5rem; z-index:2;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* nome monumental (Burle Marx) */
.faixa__monumento{
  font-family:var(--display); font-size:var(--fs-mega);
  font-weight:300; line-height:.88; letter-spacing:-.035em;
  color:var(--ambar-vivo); margin-bottom:1.5rem;
  text-shadow:0 4px 44px rgba(15,14,8,.55);
}
.faixa__monumento span{ display:block; }

/* ---------- 8c. SPLIT 50/50 COM FOTO SANGRANDO ---------- */
.split{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; min-height:clamp(520px, 78vh, 820px);
}
.split__midia{ position:relative; align-self:stretch; overflow:hidden; }
.split__midia picture{ display:block; width:100%; height:100%; }
.split__midia img{ width:100%; height:100%; object-fit:cover; }
.split__midia figcaption{
  position:absolute; left:1.5rem; bottom:1.25rem;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.split__texto{
  padding:80px clamp(1.5rem,5vw,5rem);
  max-width:none;
}
/* a foto sangra até a borda da tela, não até o container */
.split--fotoEsq .split__midia{ grid-column:1; }
.split--fotoEsq .split__texto{ grid-column:2; padding-right:max(var(--gut), calc((100vw - var(--max))/2 + var(--gut))); }
.split--fotoDir .split__midia{ grid-column:2; }
.split--fotoDir .split__texto{ grid-column:1; padding-left:max(var(--gut), calc((100vw - var(--max))/2 + var(--gut))); }

.split__texto h2{ font-size:var(--fs-h2); font-weight:300; line-height:1.06;
  letter-spacing:-.022em; margin-bottom:1.35rem; }

/* ---------- 8d. FAIXA DE CHAMADA (CTA) ---------- */
.cta-faixa{
  background:var(--oliva-prof); color:var(--txt-inv);
  padding-block:clamp(2.75rem,5vw,4rem);
  border-top:3px solid var(--ambar);
}
.cta-faixa__int{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 2.5rem;
}
.cta-faixa__txt{ max-width:56ch; }
.cta-faixa h3{
  font-size:clamp(1.35rem,2.3vw,1.95rem); font-weight:300;
  color:#fff; letter-spacing:-.015em; margin-bottom:.4rem;
}
.cta-faixa p{ font-size:var(--fs-sm); color:var(--txt-inv-suave); margin:0; }
.cta-faixa .btn{ flex:none; }

/* variante clara, para alternar com seções escuras */
.cta-faixa--claro{
  background:var(--areia); color:var(--txt); border-top-color:var(--terracota);
}
.cta-faixa--claro h3{ color:var(--tinta); }
.cta-faixa--claro p{ color:var(--txt-suave); }

/* ---------- 9. CONCEITO ---------- */
.conceito__grade{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.conceito__citacao{
  font-family:var(--display); font-size:clamp(1.6rem,2.9vw,2.5rem);
  font-weight:300; line-height:1.24; letter-spacing:-.015em; color:var(--oliva);
  margin-bottom:2rem;
}
.conceito__figura{ position:relative; }
.conceito__figura img{ border-radius:var(--r-lg); box-shadow:var(--sombra-lg); }
.conceito__figura figcaption{
  margin-top:1rem; font-size:var(--fs-xs); letter-spacing:.11em;
  text-transform:uppercase; color:var(--txt-claro);
}

/* ---------- 10. BURLE MARX ---------- */
.burle{ position:relative; overflow:hidden; }
.burle__grade{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
.burle__nome{
  font-family:var(--display); font-size:clamp(3rem,8vw,6.5rem);
  font-weight:300; line-height:.92; letter-spacing:-.03em;
  color:var(--ambar); margin-bottom:2rem;
}
.burle__nome span{ display:block; }
.burle__anos{
  font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-inv-suave); margin-bottom:2.2rem;
}
.burle__img{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-lg); }

/* ---------- 11. LOCALIZAÇÃO ---------- */
.local__grade{
  display:grid; grid-template-columns:.95fr 1.15fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.distancias{ display:flex; flex-direction:column; gap:0; margin-top:2.5rem; }
.distancia{
  display:flex; align-items:baseline; gap:1.4rem;
  padding:1.15rem 0; border-top:1px solid var(--areia);
}
.distancia:last-child{ border-bottom:1px solid var(--areia); }
.distancia__t{
  font-family:var(--display); font-size:1.5rem; font-weight:400;
  color:var(--terracota); flex:none; min-width:4.5rem; letter-spacing:-.01em;
}
.distancia__t small{ font-size:.55em; letter-spacing:.08em; margin-left:.15em; }
.distancia__n{ font-size:var(--fs-base); color:var(--txt-suave); }

.mapa{
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sombra-lg); border:1px solid var(--areia);
  aspect-ratio:4/3; background:var(--papel-2);
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- MAPAS DAS ÁREAS DE LAZER ---------- */
.mapas{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:2.75rem;
}
.mapa-card{
  margin:0; position:relative; cursor:zoom-in;
  background:var(--branco); border:1px solid var(--areia);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease),
             border-color .5s var(--ease);
}
.mapa-card:hover{
  transform:translateY(-4px); box-shadow:var(--sombra-lg);
  border-color:var(--oliva-claro);
}
.mapa-card img{ width:100%; display:block; }
.mapa-card figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; border-top:1px solid var(--areia);
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-suave);
}
.mapa-card__zoom{
  width:28px; height:28px; flex:none; border-radius:50%;
  border:1px solid var(--areia); display:grid; place-items:center;
  font-size:1rem; line-height:1; color:var(--oliva);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .45s var(--ease);
}
.mapa-card:hover .mapa-card__zoom{
  background:var(--ambar); border-color:var(--ambar);
  color:var(--tinta); transform:rotate(90deg);
}

/* ---------- 12. GALERIA / LAZER ---------- */
.lazer__cabeca{ text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.lazer__cabeca .lead{ margin-inline:auto; }
.lazer__cabeca .rotulo{ justify-content:center; }

/* grid de linhas fixas: os cartões preenchem a célula inteira,
   então o vão entre eles é sempre exatamente o gap (20px) */
.galeria{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:180px; gap:20px;
}
.cartao{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--areia); isolation:isolate; cursor:pointer;
  grid-column:span 4; grid-row:span 2;
}
.cartao--lg{ grid-column:span 8; }
.cartao--md{ grid-column:span 6; }
.cartao--destaque{ grid-row:span 3; }
.cartao img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.05s var(--ease-out), filter .6s var(--ease);
}
.cartao:hover img{ transform:scale(1.055); }
.cartao::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(35,31,32,0) 42%,rgba(35,31,32,.78) 100%);
  transition:opacity .5s var(--ease);
}
.cartao__rot{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1.15rem,2.4vw,1.9rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
.cartao__nome{
  font-family:var(--display); font-size:clamp(1.05rem,1.6vw,1.4rem);
  font-weight:400; color:#fff; letter-spacing:-.005em; line-height:1.2;
}
.cartao__mais{
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  display:grid; place-items:center; color:#fff; font-size:1.05rem; line-height:1;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .45s var(--ease);
}
.cartao:hover .cartao__mais{
  background:var(--ambar); border-color:var(--ambar);
  color:var(--tinta); transform:rotate(90deg);
}

/* lista de comodidades */
.comodidades{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:.6rem 2.5rem; margin-top:clamp(2.5rem,5vw,4rem);
}
.comodidade{
  display:flex; align-items:center; gap:.85rem;
  padding:.72rem 0; border-bottom:1px solid var(--areia);
  font-size:var(--fs-sm); color:var(--txt-suave);
}
.comodidade .simbolo{ --s:.62em; }
.bg-oliva .comodidade{ border-bottom-color:rgba(255,255,255,.14); color:var(--txt-inv-suave); }
.bg-oliva .comodidade .simbolo{ background:var(--ambar); }
.bg-oliva .comodidade .simbolo::after{ background:var(--terracota); }

/* ---------- 13. PRAÇAS ---------- */
/* 6 praças em 3 colunas = duas fileiras cheias (4 colunas deixaria 2 órfãs) */
.pracas{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:2.75rem;
}
/* cartões em vidro sobre a fotografia da faixa */
.praca{
  padding:clamp(1.5rem,2.4vw,2rem);
  background:rgba(24,23,16,.46);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .55s var(--ease), background .45s var(--ease),
             border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.praca:hover{
  transform:translateY(-6px);
  background:rgba(24,23,16,.62);
  border-color:rgba(251,170,38,.55);
  box-shadow:0 20px 50px rgba(10,9,5,.42);
}
.praca .simbolo{ --s:1.6em; margin-bottom:1rem; background:var(--ambar); }
.praca .simbolo::after{ background:var(--terracota); }
.praca h3{
  font-size:1.32rem; font-weight:400; color:#fff;
  letter-spacing:-.01em; margin-bottom:.5rem; line-height:1.2;
}
.praca p{ font-size:var(--fs-sm); color:rgba(255,255,255,.84); line-height:1.58; }

/* ---------- 14. SUSTENTABILIDADE ---------- */
.sust__grade{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.sust__itens{ display:flex; flex-direction:column; gap:1.35rem; margin-top:2.2rem; }
.sust__item{ display:flex; gap:1.15rem; align-items:flex-start; }
.sust__item .simbolo{ --s:1.35em; margin-top:.28em; }
.sust__item h3{ font-size:1.075rem; font-weight:500; margin-bottom:.3rem; letter-spacing:0; }
.sust__item p{ font-size:var(--fs-sm); color:var(--txt-inv-suave); margin:0; }

/* selo Sistema B */
.selo-b{
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.05rem 1.7rem; margin-top:2.5rem;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r);
  background:rgba(255,255,255,.05);
}
.selo-b__b{
  font-family:var(--display); font-size:2.1rem; font-weight:400;
  color:var(--ambar); line-height:1;
}
.selo-b__t{ font-size:var(--fs-xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-inv-suave); line-height:1.5; }

/* ---------- 15. PROJETISTAS ---------- */
/* cartões em vidro sobre a fotografia da faixa */
.projetistas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px; margin-top:2.75rem;
}
.projetista{
  background:rgba(24,23,16,.46);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);
  transition:transform .55s var(--ease), background .45s var(--ease),
             border-color .45s var(--ease);
}
.projetista:hover{
  transform:translateY(-6px);
  background:rgba(24,23,16,.62); border-color:rgba(251,170,38,.5);
}
/* o paisagismo é o argumento principal: ganha destaque na grade */
.projetista--destaque{
  border-color:rgba(251,170,38,.45);
  background:rgba(24,23,16,.58);
}
.projetista__p{
  font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ambar-vivo); margin-bottom:.8rem;
}
.projetista h3{ font-size:1.32rem; font-weight:400; color:#fff; margin-bottom:.65rem; }
.projetista p{ font-size:var(--fs-sm); color:rgba(255,255,255,.84); line-height:1.6; }

/* ---------- 16. IMPLANTAÇÃO ---------- */
.implantacao{
  border-radius:var(--r-lg); overflow:hidden; margin-top:3rem;
  box-shadow:var(--sombra-lg); background:var(--papel-2);
  position:relative; cursor:zoom-in;
}
.implantacao img{ width:100%; }
.implantacao__dica{
  position:absolute; right:1.25rem; bottom:1.25rem;
  padding:.6rem 1.1rem; border-radius:100px;
  background:rgba(35,31,32,.72); backdrop-filter:blur(8px);
  color:#fff; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- 17. FORMULÁRIO ---------- */
.form-sec{ position:relative; overflow:hidden; }
.form-sec__fundo{ position:absolute; inset:0; z-index:0; }
.form-sec__fundo picture{ display:block; width:100%; height:100%; }
.form-sec__fundo img{ width:100%; height:100%; object-fit:cover; }

/* imagens que preenchem o cartão da galeria */
.cartao picture{ display:block; width:100%; height:100%; }
.form-sec__fundo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(46,44,32,.96) 0%,rgba(46,44,32,.88) 45%,rgba(46,44,32,.6) 100%);
}
.form-sec__int{ position:relative; z-index:1; }
.form-grade{
  display:grid; grid-template-columns:1fr .95fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}

.cartao-form{
  background:var(--papel); border-radius:var(--r-lg);
  padding:clamp(1.85rem,3.4vw,3rem); box-shadow:var(--sombra-lg);
}
.cartao-form h3{ font-size:clamp(1.4rem,2.2vw,1.85rem); margin-bottom:.55rem; }
.cartao-form__sub{ font-size:var(--fs-sm); color:var(--txt-suave); margin-bottom:1.85rem; }

.campo{ margin-bottom:1.05rem; }
.campo label{
  display:block; font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-suave); margin-bottom:.5rem;
}
.campo input,.campo select,.campo textarea{
  width:100%; padding:.92em 1.05em;
  font-family:var(--texto); font-size:var(--fs-base); color:var(--txt);
  background:var(--branco); border:1px solid var(--areia); border-radius:var(--r);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0; border-color:var(--oliva);
  box-shadow:0 0 0 3px rgba(110,107,71,.13);
}
.campo input::placeholder,.campo textarea::placeholder{ color:#b5b0a2; }
.campo textarea{ resize:vertical; min-height:96px; }
.campo select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c584f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05em center;
  padding-right:2.6em;
}
.campo--erro input,.campo--erro select{ border-color:#c0392b; }
.campo__erro{ display:none; font-size:var(--fs-xs); color:#c0392b; margin-top:.35rem; letter-spacing:0; text-transform:none; }
.campo--erro .campo__erro{ display:block; }

.dupla{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }

.consent{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:var(--fs-xs); color:var(--txt-claro); line-height:1.55;
  margin:1.15rem 0 1.5rem;
}
.consent input{ margin-top:.2em; accent-color:var(--oliva); flex:none; width:15px; height:15px; }
.consent a{ color:var(--oliva); text-decoration:underline; text-underline-offset:2px; }

.form-ok{
  display:none; text-align:center; padding:2.5rem 1rem;
}
.form-ok .simbolo{ --s:3rem; margin:0 auto 1.4rem; }
.form-ok h3{ margin-bottom:.7rem; }
.form-ok p{ font-size:var(--fs-sm); color:var(--txt-suave); }
.enviado .cartao-form__corpo,
.enviado .form-topo__corpo{ display:none; }
.enviado .form-ok{ display:block; }

/* ---------- 18. FAQ ---------- */
.faq{ max-width:880px; margin-inline:auto; margin-top:3rem; }
.faq__item{ border-bottom:1px solid var(--areia); }
.faq__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; padding:1.5rem 0; text-align:left;
  font-family:var(--display); font-size:clamp(1.05rem,1.55vw,1.22rem);
  font-weight:400; color:var(--tinta); line-height:1.35;
  transition:color .3s var(--ease);
}
.faq__q:hover{ color:var(--oliva); }
.faq__ico{
  flex:none; width:26px; height:26px; position:relative; margin-top:.15em;
}
.faq__ico::before,.faq__ico::after{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%;
  background:var(--terracota); transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.faq__ico::before{ width:13px; height:1.5px; }
.faq__ico::after{  width:1.5px; height:13px; }
.faq__item[aberto] .faq__ico::after{ transform:rotate(90deg); opacity:0; }
.faq__r{
  overflow:hidden; max-height:0;
  transition:max-height .55s var(--ease), opacity .4s var(--ease), padding .5s var(--ease);
  opacity:0;
}
.faq__item[aberto] .faq__r{ opacity:1; padding-bottom:1.6rem; }
.faq__r p{ font-size:var(--fs-base); color:var(--txt-suave); line-height:1.68; max-width:70ch; }

/* ---------- 18b. PÁGINAS DE TEXTO (política, termos) ---------- */
.pagina{ padding-block:calc(80px + 5rem) 80px; }
.pagina__cabeca{ max-width:70ch; margin-bottom:3rem; }
.pagina__cabeca h1{
  font-size:clamp(2.1rem,4vw,3.4rem); font-weight:300;
  letter-spacing:-.025em; margin-bottom:1.15rem;
}
.pagina__data{
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-claro); margin-top:1.5rem;
}
.pagina__texto{ max-width:74ch; }
.pagina__texto h2{
  font-size:clamp(1.3rem,2vw,1.6rem); font-weight:500;
  letter-spacing:-.01em; color:var(--oliva);
  margin:2.75rem 0 .9rem; padding-top:1.5rem;
  border-top:1px solid var(--areia);
}
.pagina__texto h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.pagina__texto h3{
  font-size:1.075rem; font-weight:500; margin:1.75rem 0 .6rem;
  letter-spacing:0; color:var(--tinta);
}
.pagina__texto p{ color:var(--txt-suave); line-height:1.75; }
.pagina__texto strong{ color:var(--tinta); font-weight:500; }
.pagina__texto a{
  color:var(--terracota); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.pagina__texto a:hover{ color:var(--oliva); }
.lista{ margin:0 0 1.15em; padding-left:0; }
.lista li{
  position:relative; padding-left:1.5rem; margin-bottom:.6rem;
  color:var(--txt-suave); line-height:1.7;
}
.lista li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--oliva);
}
.pagina__nota{
  font-size:11px!important; line-height:1.7; color:var(--txt-claro)!important;
}

/* ---------- 19. RODAPÉ ---------- */
.rodape{ background:var(--oliva-prof); color:var(--txt-inv-suave); padding-block:clamp(3.5rem,7vw,5.5rem) 0; }
.rodape__grade{
  display:grid; grid-template-columns:1.35fr 1fr 1fr;
  gap:clamp(2.25rem,5vw,4rem); padding-bottom:3.25rem;
}
.rodape__logo{ height:64px; width:auto; margin-bottom:1.5rem; }
.rodape p{ font-size:var(--fs-sm); line-height:1.7; }
.rodape h4{
  font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:1.35rem; font-weight:500;
}
.rodape__lista li{ margin-bottom:.75rem; font-size:var(--fs-sm); }
.rodape__lista a{ transition:color .3s var(--ease); }
.rodape__lista a:hover{ color:var(--ambar); }

.rodape__rot{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ambar); display:block;
}
.rodape__corretora{
  display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;
}
.rodape__avelino{ height:44px; width:auto; }
.rodape__creci{ font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; }

/* ---------- INCORPORADORA ---------- */
.rodape__marcas{
  display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.5rem);
  margin:1.15rem 0 1.5rem; flex-wrap:wrap;
}
.rodape__marcas a{
  display:block; opacity:.88;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.rodape__marcas a:hover{ opacity:1; transform:translateY(-2px); }
.rodape__marcas img{ width:auto; display:block; }
.rodape__marcas img[alt="Hartt Incorporadora"]{ height:52px; }
.rodape__marcas img[alt="Artesano Urbanismo"]{ height:86px; }
.rodape__marcas-sep{
  width:1px; height:48px; background:rgba(255,255,255,.18); flex:none;
}
.rodape p strong{ color:var(--txt-inv); font-weight:500; }

.rodape__legal{
  border-top:1px solid rgba(255,255,255,.13);
  padding-block:2.5rem;
}
/* marca da imobiliária ao lado do texto legal */
.rodape__legal-grade{
  display:grid; grid-template-columns:230px 1fr;
  gap:2rem clamp(2rem,4vw,3.5rem); align-items:start;
}
.rodape__legal-grade > .rodape__base{ grid-column:1 / -1; }
.rodape__legal p{
  font-size:11px; line-height:1.7; color:rgba(201,196,178,.62);
  max-width:none; margin-bottom:0;
}
.rodape__base{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  align-items:center; font-size:var(--fs-xs);
  padding-top:1.75rem; margin-top:.5rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.rodape__assinatura a{
  color:var(--ambar); text-decoration:none;
  border-bottom:1px solid rgba(251,170,38,.4);
  padding-bottom:1px; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.rodape__assinatura a:hover{ color:var(--ambar-vivo); border-bottom-color:var(--ambar-vivo); }

/* ---------- 20. WHATSAPP FLUTUANTE ---------- */
.zap{
  position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:880; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(37,211,102,.42);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.zap:hover{ transform:scale(1.07); box-shadow:0 10px 34px rgba(37,211,102,.55); }
.zap svg{ width:30px; height:30px; fill:#fff; }
.zap::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:pulso 2.6s var(--ease) infinite;
}
@keyframes pulso{ 0%{transform:scale(1);opacity:.75} 100%{transform:scale(1.65);opacity:0} }

/* ---------- 21. LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1200;
  background:rgba(20,18,14,.96);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3.5rem);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox[aberto]{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:82vh; object-fit:contain;
  border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__leg{
  position:absolute; left:0; right:0; bottom:clamp(1.25rem,3vw,2.25rem);
  text-align:center; color:#fff; font-size:var(--fs-sm); letter-spacing:.1em;
  text-transform:uppercase; padding-inline:4rem;
}
.lightbox__x,.lightbox__nav{
  position:absolute; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  display:grid; place-items:center; font-size:1.4rem; line-height:1;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s;
}
.lightbox__x:hover,.lightbox__nav:hover{ background:#fff; color:var(--tinta); border-color:#fff; }
.lightbox__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lightbox__nav{ top:50%; translate:0 -50%; }
.lightbox__nav--ant{ left:clamp(.75rem,2.5vw,2rem); }
.lightbox__nav--pro{ right:clamp(.75rem,2.5vw,2rem); }
body.travado{ overflow:hidden; }

/* ---------- 21b. KEN BURNS — respiro contínuo nas imagens de fundo ---------- */
/* Timing LINEAR: com ease-in-out o movimento congela nos extremos e o efeito
   some justamente quando o usuário chega na seção. A classe .zoom-on é
   aplicada pelo JS quando o bloco entra na tela, para a animação sempre
   começar do zero e ser percebida. */
@keyframes derivaLenta{
  from{ transform:scale(1.005); }
  to  { transform:scale(1.16); }
}
.hero__midia img,
.faixa__midia img,
.split__midia img,
.form-sec__fundo img{
  transform:scale(1.005);
  transform-origin:center center;
  will-change:transform;
}
.zoom-on{ animation:derivaLenta 22s linear infinite alternate; }

/* tempos e eixos distintos: evita que as seções pulsem em sincronia */
.hero__midia img       { animation-duration:26s; }
.faixa__midia img      { animation-duration:22s; transform-origin:62% 45%; }
.faixa--dir .faixa__midia img{ transform-origin:38% 45%; }
.split__midia img      { animation-duration:19s; transform-origin:50% 40%; }
.form-sec__fundo img   { animation-duration:30s; }

/* ---------- 22. ANIMAÇÕES DE ENTRADA ---------- */
.rev{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
.rev.vis{ opacity:1; transform:none; }
.rev-d1{ transition-delay:.09s; }
.rev-d2{ transition-delay:.18s; }
.rev-d3{ transition-delay:.27s; }
.rev-d4{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1!important; transform:none!important; transition:none!important; }
  .zap::before{ animation:none; }
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* ---------- 23. RESPONSIVO ---------- */
@media (max-width:1080px){
  .conceito__grade,.burle__grade,.local__grade,.sust__grade,.form-grade,
  .hero__grade{
    grid-template-columns:1fr;
  }
  .burle__grade .burle__img,.conceito__figura{ order:-1; }
  .numeros__grade{ grid-template-columns:repeat(2,1fr); }
  .rodape__grade{ grid-template-columns:1fr 1fr; }

  /* split vira empilhado: foto em cima, texto embaixo */
  .split{ grid-template-columns:1fr; min-height:0; }
  .split__midia{ grid-column:1!important; min-height:clamp(280px,46vw,440px); }
  .split__texto{
    grid-column:1!important; padding:80px var(--gut)!important;
  }
  .split--fotoDir .split__midia{ order:-1; }

  /* no hero, o formulário desce para depois do discurso */
  .hero{ min-height:0; align-items:flex-start; padding-block:7rem 80px; }
  .hero__grade{ gap:2.5rem; }
  .form-topo{ max-width:560px; }
}

@media (max-width:860px){
  .nav,.topo__cta{ display:none; }
  .hamburguer{ display:flex; }
  .cartao,.cartao--lg,.cartao--md{ grid-column:span 6; }
  .galeria{ grid-auto-rows:150px; }
  .pracas{ grid-template-columns:repeat(2,1fr); }
  .projetistas{ grid-template-columns:repeat(2,1fr); }

  /* a coluna fixa de 230px espremia o texto legal numa tira estreita */
  .rodape__legal-grade{ grid-template-columns:1fr; gap:1.75rem; }
}

@media (max-width:620px){
  .hero{ min-height:0; padding-block:6.5rem 80px; }
  .hero__conteudo{ max-width:100%; }
  .faixa{ min-height:0; padding-block:80px; }
  .faixa__texto{ max-width:100%; }
  .faixa__veu{
    background:linear-gradient(180deg, rgba(20,19,12,.72) 0%, rgba(20,19,12,.88) 55%,
                               rgba(20,19,12,.94) 100%)!important;
  }
  .faixa__legenda{ display:none; }
  .cta-faixa__int{ flex-direction:column; align-items:flex-start; }
  .cta-faixa .btn{ width:100%; }
  .cartao,.cartao--lg,.cartao--md{ grid-column:span 12; }
  .cartao,.cartao--destaque{ grid-row:span 2; }
  .galeria{ grid-auto-rows:120px; }
  .pracas,.projetistas{ grid-template-columns:1fr; }
  .rodape__marcas-sep{ display:none; }
  .numeros__grade{ grid-template-columns:1fr; }
  .numero{ display:flex; align-items:baseline; justify-content:space-between;
           gap:1rem; text-align:left; padding:1.15rem .25rem; }
  .numero__v{ margin-bottom:0; }
  .dupla{ grid-template-columns:1fr; }
  .rodape__grade{ grid-template-columns:1fr; }
  .lightbox__nav{ width:40px; height:40px; }
}

/* ---------- 24. IMPRESSÃO ---------- */
@media print{
  .topo,.zap,.gaveta,.lightbox{ display:none!important; }
  body{ background:#fff; color:#000; }
  .sec{ padding-block:1.5rem; break-inside:avoid; }
}