/* =========================================================
   MONTCLAIR RESIDENCE — landing page
   Paleta, tipografia e composições extraídas do book técnico (PDF)
   ========================================================= */

:root{
  --verde:        #2C4446;
  --verde-escuro: #1E3234;
  --verde-claro:  #4A6663;
  --areia:        #E7CBA9;
  --areia-clara:  #F4E4D2;
  --ouro:         #C9A87C;
  --creme:        #FBF8F4;
  --branco:       #FFFFFF;
  --texto:        #4C4C4A;
  --texto-suave:  #7A7A78;
  --linha:        #E3DCD2;
  --whats:        #25D366;

  --display: 'Cormorant Garamond', Georgia, serif;
  --corpo:   'Jost', 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1240px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:hidden; }

body{
  margin:0;
  background:var(--creme);
  color:var(--texto);
  font-family:var(--corpo);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* ---------- tipografia ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  color:var(--verde);
  line-height:1.08;
  letter-spacing:.02em;
  margin:0;
  font-size:clamp(30px,3.6vw,54px);
}
.sub{
  font-size:clamp(15px,1.25vw,19px);
  color:var(--texto-suave);
  margin:.6em 0 0;
  font-weight:300;
}
.rule{
  border:0;
  height:1px;
  background:linear-gradient(90deg,var(--ouro),rgba(201,168,124,.15));
  margin:28px 0;
  width:min(420px,100%);
}
.rule--center{ margin-left:auto; margin-right:auto; background:linear-gradient(90deg,rgba(201,168,124,.1),var(--ouro),rgba(201,168,124,.1)); }
.rule--curta{ width:70px; margin:16px 0; }
.rule--ouro{ background:linear-gradient(90deg,rgba(201,168,124,0),var(--ouro),rgba(201,168,124,0)); width:min(280px,70%); margin:26px auto; }

b,strong{ font-weight:500; color:var(--verde); }

.section{ padding:clamp(64px,8vw,120px) var(--pad); max-width:var(--max); margin-inline:auto; }
.section--flush{ padding:0; }
.section__head{ text-align:center; max-width:760px; margin:0 auto clamp(36px,4vw,60px); }

.btn{
  display:inline-block;
  font-family:var(--corpo);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:14px 30px;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.btn--linha{ border:1px solid var(--ouro); color:var(--verde); background:transparent; }
.btn--linha:hover{ background:var(--verde); border-color:var(--verde); color:#fff; }
.btn--ouro{ background:var(--ouro); color:#20302f; border:1px solid var(--ouro); }
.btn--ouro:hover{ background:transparent; color:var(--areia); }
.btn--whats{
  background:var(--whats); color:#fff; border:1px solid var(--whats);
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
}
.btn--whats svg{ width:20px; height:20px; fill:currentColor; flex:0 0 auto; }
.btn--whats:hover{ background:#1eb757; border-color:#1eb757; }

.dica{
  text-align:center;
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--texto-suave);
  margin-top:26px;
  text-transform:uppercase;
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   HEADER — fundo claro sempre, texto verde (legível no topo)
   ========================================================= */
/* topo: sem fundo, letras verdes sobre a capa clara.
   ao rolar, ganha fundo creme para continuar legível sobre fotos */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:16px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), box-shadow .4s var(--ease),
             padding .4s var(--ease), border-color .4s var(--ease);
}
.header.is-solid{
  background:rgba(251,248,244,.96);
  backdrop-filter:blur(12px);
  padding:10px 0;
  border-bottom-color:var(--linha);
  box-shadow:0 6px 24px rgba(44,68,70,.08);
}
.header__inner{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.header__logo{ display:flex; align-items:center; }
.header__logo img{ height:36px; width:auto; display:block; transition:height .4s var(--ease); }
.header.is-solid .header__logo img{ height:32px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.7vw,28px); }
/* links e botão na mesma altura de linha: o sublinhado é pseudo-elemento,
   então não empurra o texto e tudo centraliza na mesma linha óptica */
.nav a{
  position:relative;
  display:flex; align-items:center;
  height:40px; padding:0;
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  line-height:1; color:var(--verde-escuro);
  transition:color .3s;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:11px;
  height:1px; background:var(--ouro);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--verde); }
.nav a:hover::after{ transform:scaleX(1); }
.nav__cta{
  height:40px;
  padding:0 20px !important;
  border:1px solid var(--ouro);
  border-radius:2px;
  color:var(--verde-escuro);
  justify-content:center;
  transition:background .3s, color .3s, border-color .3s;
}
.nav__cta::after{ content:none; }
.nav__cta:hover{ background:var(--verde); border-color:var(--verde); color:#fff; }

.burger{ display:none; width:40px; height:32px; position:relative; }
.burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--verde-escuro);
  transition:transform .35s var(--ease), opacity .25s, background .3s;
}
.burger span:nth-child(1){ top:8px; }
.burger span:nth-child(2){ top:15px; }
.burger span:nth-child(3){ top:22px; }
.burger.is-open span{ background:#fff; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1080px){
  .burger{ display:block; z-index:3; }
  /* painel dentro da viewport (evita scroll horizontal em telas pequenas) */
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw);
    background:var(--verde); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:22px; padding:0 34px;
    opacity:0; visibility:hidden; transform:translateX(26px);
    transition:opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s;
  }
  .nav.is-open{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .35s var(--ease), transform .45s var(--ease), visibility 0s;
  }
  .nav a{ color:#fff; font-size:14px; }
  .nav__cta{ border-color:var(--ouro) !important; color:var(--areia); }
}

/* =========================================================
   HERO — capa: céu claro com a marca e a fachada ancorada embaixo
   ========================================================= */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:grid; grid-template-rows:minmax(0,1fr) auto auto;
  background:linear-gradient(180deg,#FDFDFC 0%,#F4F5F5 55%,#EEEFF1 100%);
}
.hero__content{
  position:relative; z-index:2; text-align:center;
  padding:clamp(92px,12vh,150px) var(--pad) clamp(16px,3vh,40px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero__logo{ margin:0; }
.hero__logo img{ width:min(460px,74vw); animation:sobe 1.2s var(--ease) both; }
.hero__tagline{
  color:var(--verde); margin:clamp(14px,2.4vh,30px) 0 0;
  font-size:clamp(17px,1.7vw,23px); line-height:1.5;
  animation:sobe 1.2s .18s var(--ease) both;
}
.hero__tagline strong{ display:block; font-weight:500; }
.hero__tagline span{ font-weight:300; color:var(--verde-claro); }

.hero__scroll{ margin-top:clamp(18px,3.5vh,46px); display:block; }
.hero__scroll-line{
  display:block; width:1px; height:clamp(34px,7vh,64px); margin-inline:auto;
  background:linear-gradient(180deg,var(--ouro),rgba(201,168,124,0));
  animation:desce 2.2s infinite;
}
.hero__imagem{ position:relative; z-index:1; }
.hero__imagem img{
  width:100%; height:auto;
  max-height:46svh; object-fit:cover; object-position:center 28%;
}
@keyframes sobe{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes desce{ 0%{ transform:scaleY(.2); transform-origin:top; opacity:0; } 40%{ opacity:1; } 100%{ transform:scaleY(1); transform-origin:top; opacity:0; } }

.hero__facts{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--verde);
}
.hero__facts div{
  padding:clamp(14px,2vw,22px) var(--pad); text-align:center; color:#fff;
  border-left:1px solid rgba(255,255,255,.14);
}
.hero__facts div:first-child{ border-left:0; }
.hero__facts b{ display:block; font-family:var(--display); font-size:clamp(17px,1.6vw,23px); color:#fff; font-weight:500; letter-spacing:.03em; }
.hero__facts span{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--areia); opacity:.85; }
@media (max-width:820px){
  .hero__facts div{ padding-inline:10px; }
  .hero__facts b{ font-size:15px; }
  .hero__facts span{ font-size:9.5px; letter-spacing:.08em; }
}
@media (max-width:620px){
  .hero__facts{ grid-template-columns:1fr; }
  .hero__facts div{ border-left:0; border-top:1px solid rgba(255,255,255,.14); padding:10px 16px; }
  .hero__facts div:first-child{ border-top:0; }
}

/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */
.localizacao{ max-width:none; padding-inline:0; padding-block:0; }
.localizacao__grid{ display:grid; grid-template-columns:1fr .78fr; align-items:stretch; }
.localizacao__texto{
  padding:clamp(64px,8vw,120px) clamp(28px,5vw,90px);
  max-width:760px; margin-left:auto;
  border-right:clamp(18px,3vw,46px) solid var(--areia-clara);
}
.localizacao__texto p{ margin:0 0 1.25em; }
.foto-terreno{ margin:34px 0 0; }
.foto-terreno img{ width:min(420px,100%); border:8px solid #fff; box-shadow:0 18px 46px rgba(44,68,70,.16); cursor:zoom-in; }

.localizacao__foto{ position:relative; overflow:hidden; min-height:520px; }
.localizacao__foto > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width:900px){
  .localizacao__grid{ grid-template-columns:1fr; }
  .localizacao__texto{ border-right:0; border-bottom:14px solid var(--areia-clara); margin-inline:auto; }
  .localizacao__foto{ min-height:60vh; }
}

/* ---------- vista aérea ---------- */
.vista-capivari{ position:relative; }
.vista-capivari img{ width:100%; height:clamp(320px,58vw,660px); object-fit:cover; }
.tag{
  position:absolute; background:#111; color:#fff;
  font-size:clamp(11px,1.1vw,15px); letter-spacing:.32em; padding:8px 18px;
}
.tag--capivari{ left:50%; top:20%; transform:translateX(-50%); }
.tag--area{ left:50%; top:82%; transform:translateX(-50%); }

/* =========================================================
   ARQUITETURA
   ========================================================= */
.arquitetura{ max-width:none; padding-inline:0; padding-block:0; }
.arquitetura__grid{
  display:grid;
  grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);
  align-items:center;
}
.arquitetura__texto{
  padding:clamp(64px,8vw,120px) clamp(30px,4vw,64px) clamp(64px,8vw,120px) var(--pad);
  justify-self:end; max-width:620px;
}
.arquitetura__texto p{ margin:0 0 1.25em; }
.arquitetura__render{ position:relative; height:100%; min-height:640px; }
.arquitetura__render img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width:1000px){
  .arquitetura__grid{ grid-template-columns:1fr; }
  .arquitetura__texto{ padding-inline:var(--pad); justify-self:stretch; max-width:none; }
  .arquitetura__render{ min-height:62vw; }
}

/* ---------- galeria fachadas ---------- */
.galeria-fachadas{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--creme); }
.galeria-fachadas figure{ margin:0; overflow:hidden; }
.galeria-fachadas img{ width:100%; height:clamp(240px,32vw,470px); object-fit:cover; cursor:zoom-in; transition:transform 1.1s var(--ease); }
.galeria-fachadas img:hover{ transform:scale(1.04); }
@media (max-width:760px){ .galeria-fachadas{ grid-template-columns:1fr; } }

/* =========================================================
   CARROSSEL DE PLANTAS
   ========================================================= */
.filtros{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,46px); }
.filtro{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 22px; border:1px solid var(--linha); color:var(--texto-suave);
  transition:all .3s var(--ease);
}
.filtro:hover{ border-color:var(--ouro); color:var(--verde); }
.filtro.is-active{ background:var(--verde); border-color:var(--verde); color:#fff; }

.carrossel{ position:relative; outline:none; }
.carrossel__viewport{ overflow:hidden; }
.carrossel__trilha{
  display:flex;
  gap:clamp(12px,2vw,32px);
  transition:transform .65s var(--ease);
  touch-action:pan-y;
  will-change:transform;
}
.carrossel__trilha.is-dragging{ transition:none; }
.slide{ flex:0 0 100%; min-width:0; }
.slide > *{ min-width:0; }
.slide{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(10px,2vw,40px);
  align-items:center;
  background:#fff; border:1px solid var(--linha); box-shadow:0 20px 60px rgba(44,68,70,.08);
}
.slide[hidden]{ display:none; }

.planta{ margin:0; padding:clamp(18px,3vw,46px); }
.planta img{
  margin-inline:auto; cursor:zoom-in;
  max-height:min(58vh,560px); width:auto; max-width:100%; object-fit:contain;
  image-rendering:auto;
}

.planta__info{ padding:clamp(18px,3vw,44px) clamp(22px,3vw,50px) clamp(30px,3vw,44px) 0; }
.planta__info h3{
  font-family:var(--display); font-weight:400; color:var(--verde);
  font-size:clamp(26px,3vw,40px); margin:0; letter-spacing:.03em;
}
.planta__area{
  font-family:var(--display); font-size:clamp(22px,2.4vw,32px);
  color:var(--verde-claro); margin:2px 0 0; letter-spacing:.02em;
}
.planta__desc{ margin:0 0 18px; color:var(--texto); }
.planta__finais{ font-size:14px; color:var(--texto-suave); margin:0 0 26px; max-width:34ch; }
.planta__finais span{ display:block; color:var(--verde); letter-spacing:.06em; margin-bottom:3px; }

@media (max-width:860px){
  .slide{ grid-template-columns:1fr; }
  .planta__info{ padding:0 clamp(22px,6vw,40px) 34px; }
}

.carrossel__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.94); border:1px solid var(--linha);
  box-shadow:0 8px 26px rgba(44,68,70,.14);
  display:grid; place-items:center;
  transition:all .3s var(--ease);
}
.carrossel__nav svg{ width:20px; height:20px; fill:none; stroke:var(--verde); stroke-width:1.4; }
.carrossel__nav:hover{ background:var(--verde); border-color:var(--verde); }
.carrossel__nav:hover svg{ stroke:#fff; }
.carrossel__nav--prev{ left:-18px; }
.carrossel__nav--next{ right:-18px; }
@media (max-width:900px){
  .carrossel__nav{ width:44px; height:44px; }
  .carrossel__nav--prev{ left:4px; }
  .carrossel__nav--next{ right:4px; }
}

.carrossel__dots{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.carrossel__dots button{
  width:9px; height:9px; border-radius:50%;
  background:transparent; border:1px solid var(--verde-claro);
  transition:all .3s var(--ease);
}
.carrossel__dots button.is-active{ background:var(--ouro); border-color:var(--ouro); transform:scale(1.25); }

/* =========================================================
   INTERIORES / LAZER
   ========================================================= */
.interiores, .lazer{ max-width:none; background:#fff; }
.interiores{ padding-bottom:clamp(20px,3vw,40px); }
.lazer{ padding-top:clamp(30px,4vw,60px); }
.banda{ margin:0 auto clamp(20px,3vw,44px); max-width:1500px; }
.banda img{ width:100%; cursor:zoom-in; }

/* =========================================================
   DIFERENCIAIS
   ========================================================= */
.dif__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px) clamp(24px,3vw,52px); }
.dif{ display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:start; }
.dif img{ width:64px; height:auto; }
.dif p{ margin:0; font-size:15.5px; line-height:1.6; }
.dif b{ font-family:var(--display); font-size:19px; font-weight:500; display:inline; letter-spacing:.01em; }
@media (max-width:900px){ .dif__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .dif__grid{ grid-template-columns:1fr; } }

/* =========================================================
   FECHAMENTO / CONTATO
   ========================================================= */
.fechamento{ position:relative; overflow:hidden; padding:clamp(70px,9vw,130px) var(--pad); }
.fechamento__bg{ position:absolute; inset:0; }
.fechamento__bg img{ width:100%; height:100%; object-fit:cover; }
.fechamento::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,50,52,.93),rgba(23,40,42,.97)); }
.fechamento__conteudo{ position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center; color:#fff; }
.fechamento__logo{ width:min(400px,74vw); margin-inline:auto; }
.fechamento__tagline{ font-size:clamp(17px,1.7vw,22px); margin:0; color:#fff; }
.fechamento__tagline strong{ color:#fff; font-weight:500; }
.fechamento__frase{ color:rgba(255,255,255,.82); margin:0 0 clamp(34px,4vw,54px); }
.fechamento__frase span{ opacity:.75; }

.form{ text-align:left; display:grid; gap:16px; }
.form__linha{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form__linha{ grid-template-columns:1fr; } }
.campo{ display:grid; gap:6px; }
.campo span{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--areia); }
.campo span i{ font-style:normal; opacity:.6; letter-spacing:.08em; }
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:15px; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  padding:13px 15px; border-radius:2px;
  transition:border-color .3s, background .3s;
}
.campo textarea{ resize:vertical; }
.campo input::placeholder,.campo textarea::placeholder{ color:rgba(255,255,255,.4); }
.campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--ouro); background:rgba(255,255,255,.1); }
.campo select option{ color:#20302f; }
.form .btn{ justify-self:start; margin-top:6px; }
.form__aviso{ font-size:14px; color:var(--areia); margin:0; min-height:1.2em; }

.endereco{
  font-style:normal; margin-top:clamp(34px,4vw,54px);
  font-size:13px; letter-spacing:.1em; color:rgba(255,255,255,.6);
}

/* ---------- parceiros / rodapé ---------- */
.parceiros{ background:#fff; padding:clamp(10px,2vw,26px) var(--pad); }
.parceiros img{ max-width:1200px; margin-inline:auto; width:100%; }
.rodape{ background:#fff; text-align:center; padding:28px var(--pad) 44px; border-top:1px solid var(--linha); }
.rodape > p{ margin:0 0 14px; font-size:13px; letter-spacing:.1em; color:var(--verde); text-transform:uppercase; }
.rodape__legal{
  max-width:900px; margin-inline:auto;
  padding-top:14px; border-top:1px solid var(--linha);
  text-align:justify; text-align-last:center;
}
.rodape__legal p{
  margin:0 0 10px;
  font-size:11.5px; line-height:1.65; letter-spacing:.01em;
  color:var(--texto-suave);
}
.rodape__legal p:last-child{ margin-bottom:0; }
@media (max-width:640px){ .rodape__legal{ text-align:left; text-align-last:left; } }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,32,33,.94);
  display:grid; place-items:center; padding:clamp(16px,4vw,60px);
  animation:fade .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.lightbox__fechar{
  position:absolute; top:18px; right:24px; font-size:40px; line-height:1;
  color:#fff; opacity:.8; transition:opacity .2s;
}
.lightbox__fechar:hover{ opacity:1; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* =========================================================
   MODAL DO WHATSAPP
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:110;
  background:rgba(20,32,33,.6);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  padding:clamp(14px,4vw,40px);
  opacity:0; transition:opacity .3s var(--ease);
  overflow-y:auto;
}
.modal[hidden]{ display:none; }
.modal.is-open{ opacity:1; }

/* dimensionado em vh para caber inteiro na tela, sem rolagem */
.modal__caixa{
  position:relative;
  width:min(470px,100%);
  background:var(--verde);
  border:1px solid rgba(201,168,124,.35);
  border-radius:4px;
  padding:clamp(18px,3vh,34px) clamp(20px,4vw,34px) clamp(16px,2.4vh,26px);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  transform:translateY(14px) scale(.98);
  transition:transform .35s var(--ease);
  max-height:calc(100svh - 24px);
  overflow-y:auto;
}
.modal.is-open .modal__caixa{ transform:none; }

.modal__fechar{
  position:absolute; top:4px; right:12px;
  font-size:30px; line-height:1; color:rgba(255,255,255,.65);
  transition:color .2s;
}
.modal__fechar:hover{ color:#fff; }

.modal__topo{ text-align:center; margin-bottom:clamp(12px,2vh,20px); }
.modal__logo{
  width:clamp(120px,20vh,170px); margin:0 auto clamp(8px,1.6vh,16px);
  filter:brightness(0) invert(1); opacity:.95;
}
.modal__titulo{
  font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(21px,3.2vh,28px); margin:0; letter-spacing:.02em; line-height:1.2;
}
.modal__sub{ margin:6px 0 0; font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.45; }

.form--modal{ gap:clamp(8px,1.4vh,13px); }
.form--modal .form__linha{ gap:12px; }
.form--modal .campo span{ font-size:10.5px; letter-spacing:.14em; }
.form--modal .campo input,
.form--modal .campo select,
.form--modal .campo textarea{ padding:clamp(9px,1.4vh,13px) 14px; font-size:14.5px; }
.form--modal .campo textarea{ min-height:52px; }
.form--modal .btn{ justify-self:stretch; margin-top:clamp(2px,.8vh,8px); padding:13px 24px; }
.form--modal .form__aviso{ min-height:0; font-size:13px; }

.modal__rodape{
  margin:clamp(10px,1.6vh,16px) 0 0; text-align:center;
  font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.55);
}

/* telas muito baixas: o subtítulo sai para o conteúdo continuar cabendo */
@media (max-height:620px){
  .modal__sub{ display:none; }
  .form--modal .campo textarea{ min-height:44px; }
}
.modal__rodape a{ color:var(--areia); border-bottom:1px solid rgba(231,203,169,.4); }

/* =========================================================
   BOTÃO FLUTUANTE
   ========================================================= */
.whats{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:var(--whats); display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whats:hover{ transform:scale(1.08); box-shadow:0 14px 36px rgba(0,0,0,.34); }
.whats svg{ width:32px; height:32px; fill:#fff; }

body.no-scroll{ overflow:hidden; }

/* Armadilha anti-robô do formulário.
   Fora da tela em vez de display:none — alguns robôs ignoram campos
   com display:none, mas preenchem os que continuam no layout. */
.armadilha{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}