/* =========================================================
   RESERVA DO BOSQUE - Landing Page
   Identidade: #005029 (verde profundo) · #9DC83B (verde-limão)
   ========================================================= */

:root{
  /* marca */
  --verde:        #005029;
  --verde-esc:    #042A17;
  --verde-esc-2:  #063620;
  --verde-800:    #05411F;
  --lima:         #9DC83B;
  --lima-esc:     #8DB93F;

  /* neutros */
  --branco:       #FFFFFF;
  --areia:        #F5F4EE;
  --areia-2:      #EDEBE2;
  --tinta:        #11190F;
  --tinta-60:     #5A6357;
  --linha:        #E3E1D7;

  /* sistema */
  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  /* recuo que alinha a galeria sangrada com a coluna de texto */
  --gal-inset: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.22,.75,.24,1);
  --shadow: 0 24px 60px -24px rgba(4,42,23,.28);
  --shadow-sm: 0 10px 30px -14px rgba(4,42,23,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; line-height:1.04; letter-spacing:-.035em; font-weight:700}
p{margin:0 0 1.1em}
::selection{background:var(--lima); color:var(--verde-esc)}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* itens de grid/flex têm min-width:auto por padrão e estouram o container
   quando o conteúdo (selects, palavras longas) é mais largo que a coluna */
.conceito__grid > *, .conceito__pull > *, .local__grid > *,
.faq__grid > *, .vip__box > *, .pilares__grid > *{min-width:0}

/* ---------- tipografia utilitária ---------- */
.h2{font-size:clamp(2.1rem, 4.6vw, 3.9rem)}
.h2 em, .hero__title em, .final__title em, .quote em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em;
}
.h2 em{color:var(--verde)}
.h2--light{color:var(--branco)}
.h2--light em{color:var(--lima)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.735rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin-bottom:1.1rem;
}
.eyebrow--light{color:var(--lima)}
.eyebrow__pulse{
  width:7px;height:7px;border-radius:50%;background:var(--lima);
  box-shadow:0 0 0 0 rgba(157,200,59,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(157,200,59,0)}
  100%{box-shadow:0 0 0 0 rgba(157,200,59,0)}
}

.lead{font-size:1.115rem; color:var(--tinta-60)}
.h2 + .lead{margin-top:1.4em}
.section__head{max-width:760px; margin-bottom:clamp(36px,5vw,64px)}
.section__head--row{
  max-width:none; display:flex; gap:32px;
  justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
}
.section__sub{color:var(--tinta-60); max-width:46ch; margin:1.1rem 0 0}
.pilares .section__sub, .ape .section__sub, .vip .section__sub{color:rgba(255,255,255,.62)}

/* ---------- botões ---------- */
.btn{
  --bg:var(--verde-esc); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  padding:1.02em 1.7em; border:0; border-radius:999px;
  font-size:.94rem; font-weight:600; letter-spacing:-.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn svg{width:14px;height:14px; transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn:focus-visible{outline:2px solid var(--lima); outline-offset:3px}
.btn--lime{--bg:var(--lima); --fg:var(--verde-esc)}
.btn--lime:hover{--bg:#AFD556}
.btn--dark{--bg:var(--verde-esc); --fg:#fff}
.btn--ghost{
  --bg:transparent; --fg:#fff;
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{--bg:rgba(255,255,255,.12)}
.btn--sm{padding:.78em 1.3em; font-size:.85rem}
.btn--lg{padding:1.2em 2.2em; font-size:1rem}
.btn--block{width:100%}
.btn--nav{padding:.78em 1.35em; font-size:.86rem; --bg:var(--lima); --fg:var(--verde-esc)}

.circlebtn{
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:transparent; color:#fff;
  display:grid;place-items:center; transition:.3s var(--ease);
}
.circlebtn svg{width:16px;height:16px}
.circlebtn:hover{background:rgba(255,255,255,.14)}
.circlebtn--solid{background:var(--lima); border-color:var(--lima); color:var(--verde-esc)}
.circlebtn--solid:hover{background:#AFD556}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:18px var(--pad) 0;
  transition:padding .4s var(--ease);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:28px;
  padding:12px 12px 12px 26px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px) saturate(1.3);
  transition:background .45s var(--ease), border-color .45s, box-shadow .45s, color .45s;
}
.nav__logo{display:block; flex:none}
.nav__logo-img{height:30px; width:auto}
.nav__logo-img--dark{display:none}
.nav__links{display:flex; gap:6px; margin-left:auto}
.nav__links a{
  padding:.6em 1em; border-radius:999px;
  font-size:.875rem; font-weight:500; color:rgba(255,255,255,.82);
  transition:.25s var(--ease);
}
.nav__links a:hover{background:rgba(255,255,255,.14); color:#fff}
.nav__actions{display:flex; align-items:center; gap:10px}

/* estado "scrolled" - nav clara sobre corpo branco */
.nav.is-stuck .nav__inner{
  background:rgba(255,255,255,.86);
  border-color:var(--linha);
  box-shadow:0 12px 40px -20px rgba(4,42,23,.35);
}
.nav.is-stuck .nav__logo-img--light{display:none}
.nav.is-stuck .nav__logo-img--dark{display:block}
.nav.is-stuck .nav__links a{color:var(--tinta-60)}
.nav.is-stuck .nav__links a:hover{background:var(--areia); color:var(--verde)}
.nav.is-stuck .nav__burger span{background:var(--tinta)}

.nav__burger{
  display:none; width:46px;height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:0; place-items:center; gap:5px;
}
.nav__burger span{
  display:block; width:17px;height:1.6px;background:#fff;border-radius:2px;
  transition:.3s var(--ease);
}
.nav.is-open .nav__burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.mobilemenu{
  position:fixed; z-index:55; inset:96px var(--pad) auto;
  background:var(--verde-esc); border-radius:var(--r-lg);
  padding:14px; display:none; flex-direction:column;
  box-shadow:var(--shadow);
}
.mobilemenu.is-open{display:flex; animation:drop .35s var(--ease)}
@keyframes drop{from{opacity:0; transform:translateY(-10px)}}
.mobilemenu a{
  padding:1em 1.2em; border-radius:var(--r-sm); color:rgba(255,255,255,.85);
  font-weight:500;
}
.mobilemenu a:hover{background:rgba(255,255,255,.08); color:#fff}
.mobilemenu__cta{
  background:var(--lima); color:var(--verde-esc)!important; text-align:center;
  font-weight:700; margin-top:6px;
}

/* =========================================================
   HERO - 100vh, a cena do apartamento como imagem de fundo
   ========================================================= */
.hero{
  overflow:hidden;
  position:relative; isolation:isolate;
  /* a primeira dobra inteira cabe na tela ao abrir */
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(120px,14vw,150px) var(--pad) clamp(64px,7vw,88px);
  background:#042A17;
}

/* imagem de fundo */
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  opacity:.95;
}
/* véu verde da marca por cima, para o texto ter contraste */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    /* escurecimento neutro: preserva a madeira e o bege da cena */
    radial-gradient(74% 58% at 50% 46%, rgba(0,0,0,.60), transparent 78%),
    linear-gradient(180deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.26) 42%, rgba(0,0,0,.58) 100%),
    /* tinta da marca só nas pontas, para fundir com o resto da página */
    linear-gradient(180deg, rgba(3,28,13,.55) 0%, transparent 34%, transparent 66%, rgba(3,28,13,.7) 100%);
}

.hero__inner{max-width:940px; margin:auto}
.hero__title{
  color:#fff; font-size:clamp(2.7rem, 6.6vw, 5.4rem);
  letter-spacing:-.045em; margin-bottom:.42em;
  text-shadow:0 2px 30px rgba(3,33,15,.5);
}
.hero__title em{color:var(--lima)}
.hero__sub{
  color:rgba(255,255,255,.82); font-size:clamp(1rem,1.5vw,1.16rem);
  max-width:50ch; margin:0 auto 2.4em;
  text-shadow:0 1px 18px rgba(3,33,15,.6);
}

/* botão branco com bolha escura, como na referência */
.btn--white{--bg:#fff; --fg:var(--verde-esc); padding-right:.55em; font-weight:700}
.btn--white:hover{--bg:#F2F5EA}
.btn__circle{
  width:2.35em;height:2.35em;border-radius:50%; flex:none;
  background:var(--verde-esc); color:#fff;
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.btn__circle svg{width:13px;height:13px}
.btn--white:hover .btn__circle{transform:rotate(45deg)}
.btn--white:hover svg{transform:none}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-block:1px solid var(--linha);
  padding:22px 0; overflow:hidden; background:var(--areia);
}
.marquee__track{display:flex; width:max-content; animation:scroll 42s linear infinite}
.marquee__track span{
  font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.5rem);
  color:var(--verde); white-space:nowrap; padding-right:.4em;
}
.marquee__track i{color:var(--lima); font-style:normal; margin-inline:.3em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* =========================================================
   CONCEITO
   ========================================================= */
.conceito{padding:clamp(80px,11vw,150px) 0}
.conceito__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px);
  align-items:start;
}
.conceito__head{position:sticky; top:120px}
.conceito__head .h2{font-size:clamp(2rem,3.6vw,3.1rem)}
.conceito__text p{color:var(--tinta-60)}
.conceito__text .lead{color:var(--tinta); font-weight:500}

.conceito__pull{
  margin-top:clamp(60px,8vw,110px);
  display:grid; grid-template-columns:1.15fr 1fr; gap:14px;
}
.conceito__img{margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3}
.conceito__img img{width:100%;height:100%;object-fit:cover}
.quote{
  margin:0; background:var(--areia); border-radius:var(--r-lg);
  padding:clamp(32px,4vw,52px);
  display:flex; flex-direction:column; justify-content:space-between;
}
.quote p{
  font-size:clamp(1.28rem,2.2vw,1.72rem); line-height:1.32;
  letter-spacing:-.025em; font-weight:500; color:var(--verde-esc);
}
.quote em{color:var(--verde)}
.quote footer{display:flex; align-items:center; gap:14px; font-size:.86rem; font-weight:600}
.quote footer img{width:30px}
.quote footer small{font-weight:400; color:var(--tinta-60)}

/* =========================================================
   PILARES (bloco escuro)
   ========================================================= */
.pilares{
  background:var(--verde-esc); color:#fff;
  padding:clamp(80px,11vw,140px) 0;
  border-radius:var(--r-xl);
}
.pilares__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.pilar{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .45s var(--ease), background .45s;
}
.pilar:hover{transform:translateY(-7px); background:rgba(255,255,255,.08)}
.pilar__media{aspect-ratio:4/3.4; overflow:hidden}
.pilar__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease); filter:saturate(.95);
}
.pilar:hover .pilar__media img{transform:scale(1.06)}
.pilar__body{padding:26px 24px 30px}
.pilar__n{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.12em;
  color:var(--lima); margin-bottom:1rem;
}
.pilar h3{font-size:1.14rem; line-height:1.24; margin-bottom:.7em; letter-spacing:-.025em}
.pilar p{margin:0; font-size:.9rem; color:rgba(255,255,255,.58); line-height:1.55}

/* =========================================================
   ÁREAS COMUNS
   ========================================================= */
.areas{padding:clamp(80px,11vw,150px) 0}
.areas__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:270px; gap:14px;
}
.area{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--areia);
}
.area--tall{grid-row:span 2}
.area img{width:100%;height:100%;object-fit:cover; transition:transform .9s var(--ease)}
.area:hover img{transform:scale(1.055)}
.area__tag{
  position:absolute; inset:auto 14px 14px;
  background:rgba(4,42,23,.5); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm); padding:14px 18px; color:#fff;
  transform:translateY(0); transition:.4s var(--ease);
}
.area__tag span{display:block; font-weight:600; font-size:.98rem; letter-spacing:-.02em}
.area__tag small{color:rgba(255,255,255,.66); font-size:.78rem}
.area:hover .area__tag{background:rgba(4,42,23,.72)}

.area--teaser{background:var(--verde); grid-column:1/-1; display:grid; place-items:center}
.teaser{
  padding:34px clamp(26px,4vw,52px); color:#fff;
  display:flex; align-items:center; gap:clamp(20px,3vw,38px); flex-wrap:wrap;
  justify-content:center; text-align:left;
}
.teaser img{width:46px; margin:0; opacity:.9; flex:none}
.teaser > div{flex:1 1 260px}
.teaser h3{font-size:clamp(1.05rem,1.9vw,1.45rem); letter-spacing:-.025em; margin-bottom:.4em}
.teaser p{font-size:.88rem; color:rgba(255,255,255,.7); margin:0}
.teaser .btn{flex:none}

/* =========================================================
   APARTAMENTO (bloco escuro + carrossel)
   ========================================================= */
.ape{
  background:var(--verde-esc-2); color:#fff;
  padding:clamp(80px,11vw,140px) 0 clamp(60px,7vw,90px);
  border-radius:var(--r-xl);
}
.ape__nav{display:flex; gap:10px}
.gallery{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--pad) 10px;
  padding-left:var(--gal-inset);
  /* sem isto o scroll-snap "come" o padding e cola o 1º card na borda */
  scroll-padding-left:var(--gal-inset);
  scrollbar-width:none; scroll-behavior:smooth;
}
.gallery::-webkit-scrollbar{display:none}
.gcard{
  margin:0; flex:0 0 clamp(250px, 27vw, 380px); scroll-snap-align:start;
  border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:rgba(255,255,255,.05);
}
.gcard img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .9s var(--ease)}
.gcard:hover img{transform:scale(1.05)}
.gcard figcaption{
  position:absolute; inset:auto 0 0; padding:36px 22px 20px;
  background:linear-gradient(transparent, rgba(4,42,23,.88));
  font-size:.9rem; font-weight:600; letter-spacing:-.02em;
}
.ape__note{
  margin:26px 0 0; font-size:.78rem; color:rgba(255,255,255,.42);
}

/* =========================================================
   LISTA VIP
   ========================================================= */
.vip{padding:clamp(80px,11vw,150px) 0}
.vip__box{
  background:var(--verde); border-radius:var(--r-xl);
  padding:clamp(34px,5vw,72px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px);
  align-items:center;
  position:relative; overflow:hidden;
}
.vip__box::after{
  content:""; position:absolute; width:520px;height:520px; right:-190px; top:-190px;
  background:radial-gradient(circle, rgba(157,200,59,.22), transparent 66%);
  pointer-events:none;
}
.vip__left{position:relative; z-index:1}
.vip__intro{color:rgba(255,255,255,.74); margin:1.5em 0 2.2em; max-width:44ch}
.vip__list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.vip__list li{
  display:flex; gap:16px; align-items:flex-start;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.16);
  font-size:.93rem; color:rgba(255,255,255,.72); line-height:1.5;
}
.vip__list span{
  flex:none; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--lima); padding-top:.28em;
}
.vip__list strong{color:#fff; font-weight:700; display:block}

/* form */
.form{
  background:var(--branco); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,38px); position:relative; z-index:1;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.5);
}
.form__title{font-size:1.5rem; letter-spacing:-.03em}
.form__sub{color:var(--tinta-60); font-size:.88rem; margin:.5em 0 1.8em}
.field{display:block; margin-bottom:16px}
.field span{
  display:block; font-size:.76rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tinta-60); margin-bottom:.6em;
}
.field input, .field select{
  width:100%; font:inherit; font-size:.97rem; color:var(--tinta);
  padding:.92em 1.1em; border:1px solid var(--linha); border-radius:var(--r-sm);
  background:var(--areia); transition:.25s var(--ease); appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235A6357' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center; background-size:15px;
  padding-right:2.8em;
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--verde); background:#fff;
  box-shadow:0 0 0 3px rgba(157,200,59,.28);
}
.field input::placeholder{color:#A9B0A5}
.field.is-error input{border-color:#C4453B; background:#FDF3F2}
.form button{margin-top:10px}
.form__legal{
  margin:1.3em 0 0; font-size:.735rem; color:var(--tinta-60);
  line-height:1.5; text-align:center;
}

/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */
.local{padding:0 0 clamp(80px,11vw,150px)}
.local__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px);
  align-items:center;
}
.local__list{list-style:none; margin:2em 0 2.4em; padding:0; display:grid; gap:14px}
.local__list li{
  padding-left:30px; position:relative; font-size:.95rem; color:var(--tinta-60);
}
.local__list li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:14px;height:14px;border-radius:50%;
  background:var(--lima); box-shadow:inset 0 0 0 3px var(--branco);
  outline:1px solid var(--lima);
}
.local__img{margin:0; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/4.4}
.local__img img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:0 0 clamp(80px,11vw,150px)}
.faq__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px);
  align-items:start;
}
.acc__item{border-top:1px solid var(--linha)}
.acc__item:last-child{border-bottom:1px solid var(--linha)}
.acc__item summary{
  list-style:none; cursor:pointer; padding:1.35em 44px 1.35em 0;
  font-size:1.06rem; font-weight:600; letter-spacing:-.025em; position:relative;
  transition:color .25s;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{color:var(--verde)}
.acc__item summary::after{
  content:""; position:absolute; right:6px; top:50%; margin-top:-1px;
  width:15px;height:2px;background:var(--verde); border-radius:2px;
}
.acc__item summary::before{
  content:""; position:absolute; right:12.5px; top:50%; margin-top:-7.5px;
  width:2px;height:15px;background:var(--verde); border-radius:2px;
  transition:transform .3s var(--ease);
}
.acc__item[open] summary::before{transform:rotate(90deg)}
.acc__item > div{overflow:hidden; animation:acc .4s var(--ease)}
.acc__item p{
  margin:0; padding:0 60px 1.7em 0; color:var(--tinta-60); font-size:.95rem;
}
@keyframes acc{from{opacity:0; transform:translateY(-8px)}}

/* =========================================================
   CTA FINAL
   ========================================================= */
.final{
  color:#fff;
  margin:0 var(--pad) clamp(56px,7vw,96px);
  border-radius:var(--r-xl);
  background:linear-gradient(180deg, #03210F 0%, #042A17 45%, #063D21 100%);
  padding:clamp(80px,11vw,140px) var(--pad); text-align:center;
  position:relative; overflow:hidden;
}
.final::before{
  content:""; position:absolute; inset:auto 50% -320px auto; transform:translateX(50%);
  width:900px;height:640px;
  background:radial-gradient(ellipse at center, rgba(157,200,59,.2), transparent 68%);
}
.final__inner{position:relative}
.final__logo{width:clamp(110px,13vw,158px); margin:0 auto clamp(30px,4vw,46px)}
.final__title{font-size:clamp(2.2rem,5.4vw,4.4rem); margin-bottom:.4em}
.final__title em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--lima)}
.final p{color:rgba(255,255,255,.68); max-width:44ch; margin:0 auto 2.4em}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:#03210F; color:#fff; padding:clamp(60px,8vw,96px) 0 34px}
.footer__grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;
  padding-bottom:clamp(40px,5vw,64px);
}
.footer__brand img{width:190px; margin-bottom:22px}
.footer__brand p{color:rgba(255,255,255,.55); font-size:.9rem; margin:0}
.footer__col h4{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lima); margin-bottom:1.3em; font-weight:600;
}
.footer__col{display:flex; flex-direction:column; gap:.85em}
.footer__col a{color:rgba(255,255,255,.62); font-size:.92rem; transition:color .25s; width:fit-content}
.footer__col a:hover{color:var(--lima)}
.footer__base{
  border-top:1px solid rgba(255,255,255,.12); padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.76rem; color:rgba(255,255,255,.4);
}
.footer__base p{margin:0}
.footer__legal{max-width:62ch; text-align:right}

/* =========================================================
   FLOAT CTA (WhatsApp)
   ========================================================= */
.floatcta{
  position:fixed; z-index:50; right:22px; bottom:22px;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--lima); color:var(--verde-esc);
  padding:14px 22px 14px 18px; border-radius:999px;
  font-size:.9rem; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 16px 40px -12px rgba(4,42,23,.55);
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:.45s var(--ease);
}
.floatcta.is-visible{opacity:1; visibility:visible; transform:translateY(0)}
.floatcta:hover{background:#AFD556; transform:translateY(-3px)}
.floatcta svg{width:21px;height:21px; flex:none}

/* =========================================================
   REVEAL
   ========================================================= */
/* o conteudo so parte invisivel quando o JS esta ativo - sem JS, tudo aparece */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .pilares__grid{grid-template-columns:repeat(2,1fr)}
  .conceito__grid,.local__grid,.faq__grid,.vip__box,.conceito__pull{grid-template-columns:1fr}
  .conceito__head{position:static}
  .areas__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:720px){
  body{font-size:16px}
  :root{--r-xl:26px; --r-lg:20px; --r-md:16px}
  .hero{padding:118px var(--pad) 72px}
  .areas__grid{grid-template-columns:1fr; grid-auto-rows:230px}
  .area--tall{grid-row:span 1}
  .pilares__grid{grid-template-columns:1fr}
  .pilar__media{aspect-ratio:16/10}
  .local__img{aspect-ratio:4/3.2}
  .footer__grid{grid-template-columns:1fr}
  .footer__base{flex-direction:column}
  .footer__legal{text-align:left}
  .acc__item p{padding-right:20px}
  .floatcta span{display:none}
  .floatcta{padding:16px; right:16px; bottom:16px}
  .section__head--row{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none}
}
