/* =========================================================
   CENTRAL PARK ATIBAIA, landing page
   Tipografia: TASA Orbiter (títulos) + Inter (corpo)
   ========================================================= */

@font-face{font-family:'Inter';src:url('fonts/Inter-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'TASA Orbiter';src:url('fonts/TASAOrbiter-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TASA Orbiter';src:url('fonts/TASAOrbiter-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'TASA Orbiter';src:url('fonts/TASAOrbiter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* --- escuros --- */
  --ink:        #0D110C;
  --ink-2:      #131A11;
  --ink-3:      #1B2318;
  --ink-4:      #232D1E;

  /* --- claros --- */
  --bone:       #F7F5F0;
  --bone-2:     #EDE9DF;
  --bone-3:     #E2DDD0;

  /* --- verde da marca --- */
  --green:      #596C47;
  --green-700:  #3F4E32;
  --green-600:  #4A5A3B;
  --green-300:  #9CB07C;
  --green-200:  #BCCBA3;
  --green-100:  #DDE5CE;

  /* --- acento metálico, bronze --- */
  --gold-1:     #F0DCAE;
  --gold-2:     #D6B473;
  --gold-3:     #B08A3E;
  --gold-4:     #8A6829;
  --gold-deep:  #7A5A1C;   /* sobre fundo claro */
  --gold-deeper:#5E4514;

  --grad-gold:  linear-gradient(150deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 72%, var(--gold-4) 100%);
  --grad-gold-l:linear-gradient(150deg, #A98322 0%, var(--gold-deep) 55%, var(--gold-deeper) 100%);

  /* --- texto --- */
  --tx-d:       #F4F3EE;
  --tx-d-2:     rgba(244,243,238,.66);
  --tx-d-3:     rgba(244,243,238,.44);
  --tx-l:       #161C13;
  --tx-l-2:     #4E5747;
  --tx-l-3:     #7A8272;

  --line-d:     rgba(244,243,238,.13);
  --line-l:     rgba(22,28,19,.12);

  /* --- forma --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* --- tipografia --- */
  --ff-t: 'TASA Orbiter', 'Inter', system-ui, sans-serif;
  --ff-b: 'Inter', system-ui, -apple-system, sans-serif;

  /* escala de texto, quatro degraus, todos pares */
  --fs-corpo: 20px;   /* parágrafos */
  --fs-apoio: 16px;   /* texto secundário, descrição de card */
  --fs-peq:   14px;   /* legenda, rótulo, microcopy */
  --fs-tag:   12px;   /* etiqueta em caixa alta */

  /* títulos e números de exibição */
  --fs-h1: 64px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-h4: 22px;
  --fs-titulo-md: 34px;
  --fs-display:   54px;
  /* marca d agua do CTA. Fluido de proposito: a palavra tem largura fixa
     em ems, entao so um tamanho ligado a largura da tela garante que ela
     caiba inteira em qualquer monitor. */
  --fs-ghost:     min(168px, 11vw);

  --ls-h1: -.04em;
  --ls-h2: -.03em;
  --ls-b:  -.01em;

  /* --- espaçamento --- */
  --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px;
  --s-32:32px; --s-40:40px; --s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;

  --sec-y: 128px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--tx-l);
  font-family:var(--ff-b);
  font-size:var(--fs-corpo);
  font-weight:400;
  line-height:1.6;
  letter-spacing:var(--ls-b);
  -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,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--ff-t);font-weight:600;text-wrap:balance}
p{margin:0;text-wrap:pretty}

.container{width:min(1280px,92%);margin-inline:auto}

.h2{font-size:var(--fs-h2);line-height:1.22;letter-spacing:var(--ls-h2)}
.h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:var(--ls-h2)}

/* seções */
.sec{padding-block:var(--sec-y);position:relative}
.sec--dark{background:var(--ink);color:var(--tx-d)}
.sec--light{background:var(--bone);color:var(--tx-l)}
.sec--bone{background:var(--bone-2);color:var(--tx-l)}
.sec--flush{position:relative}

/* fundo com padrão sutil */
.sec--dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(156,176,124,.10) 1px, transparent 1px);
  background-size:26px 26px;opacity:.5;
}
.sec--dark > *{position:relative;z-index:1}

/* =========================================================
   TAG
   ========================================================= */
.tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 12px;border-radius:999px;
  font-family:var(--ff-b);font-size:var(--fs-tag);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;line-height:1;
}
/* a bolinha pulsa em anel, o ponto de dentro fica parado */
.tag__dot{
  width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  display:grid;place-items:center;
  animation:pulsoTag 2.6s ease-out infinite;
}
@keyframes pulsoTag{
  0%   {box-shadow:0 0 0 0 var(--pulso)}
  70%  {box-shadow:0 0 0 9px transparent}
  100% {box-shadow:0 0 0 0 transparent}
}
.tag__dot span{width:7px;height:7px;border-radius:50%;display:block}

.tag--glass{
  background:rgba(244,243,238,.07);
  border:1px solid rgba(244,243,238,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--tx-d);
}
.tag--glass .tag__dot{background:rgba(214,180,115,.22);--pulso:rgba(214,180,115,.55)}
.tag--glass .tag__dot span{background:var(--gold-2);box-shadow:0 0 10px rgba(214,180,115,.9)}

.tag--light{
  background:rgba(89,108,71,.08);
  border:1px solid rgba(89,108,71,.14);
  color:var(--green-700);
}
.tag--light .tag__dot{background:rgba(89,108,71,.18);--pulso:rgba(89,108,71,.45)}
.tag--light .tag__dot span{background:var(--green)}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 16px 16px 28px;border-radius:999px;border:0;
  font-family:var(--ff-b);font-size:var(--fs-apoio);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;text-align:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background-position .5s ease;
}
.btn--gold{
  color:#20180A;
  background:var(--grad-gold);
  background-size:180% 180%;background-position:0% 0%;
  box-shadow:0 10px 26px -10px rgba(176,138,62,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
/* lavagem branca por cima do degrade. Trocar background-image nao anima,
   por isso a camada separada. */
.btn--gold::before{
  content:'';position:absolute;inset:0;
  background:#FFFFFF;opacity:0;
  transition:opacity .3s ease;pointer-events:none;
}
.btn--gold:hover::before{opacity:1}
.btn--gold:hover{
  transform:translateY(-2px);
  color:var(--tx-l);
  box-shadow:0 18px 40px -14px rgba(22,28,19,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--gold:hover::after{opacity:0}
.btn--gold:hover .btn__ico{background:rgba(22,28,19,.10)}
.btn > span,.btn__ico{position:relative;z-index:2}
.btn__ico{
  width:36px;height:36px;flex:0 0 36px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(32,24,10,.16);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), background .28s ease;
}
.btn__ico svg{width:17px;height:17px}
.btn:hover .btn__ico{background:rgba(32,24,10,.26)}

/* brilho em laço */
.btn--gold::after{
  content:'';position:absolute;top:-60%;left:-60%;
  width:38%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(22deg);
  animation:sheen 12s ease-in-out infinite;
  transition:opacity .3s ease;
  pointer-events:none;
}
@keyframes sheen{
  0%,68%   {left:-60%}
  100%     {left:150%}
}

.btn--sm{padding:12px 12px 12px 22px;font-size:var(--fs-apoio)}
.btn--sm .btn__ico{width:32px;height:32px;flex:0 0 32px}
.btn--sm .btn__ico svg{width:15px;height:15px}
.btn--lg{padding:19px 19px 19px 34px;font-size:var(--fs-apoio)}
.btn--lg .btn__ico{width:42px;height:42px;flex:0 0 42px}
.btn--block{width:100%;justify-content:space-between}

/* rótulo alternativo, para os CTAs que ficam dentro de card com padding
   e apertam no mobile. Só troca o texto abaixo de 767. */
.btn--compacto .btn__curto{display:none}

.btn--ghost{
  background:rgba(244,243,238,.07);
  border:1px solid rgba(244,243,238,.20);
  color:var(--tx-d);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn--ghost .btn__ico{background:rgba(244,243,238,.12)}
.btn--ghost:hover{transform:translateY(-2px);background:rgba(244,243,238,.13)}

/* link com seta */
.linkarrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-apoio);font-weight:600;letter-spacing:-.01em;
  color:var(--gold-deep);
  border-bottom:1px solid rgba(122,90,28,.3);
  padding-bottom:4px;
  transition:color .25s ease,border-color .25s ease,gap .25s ease;
}
.linkarrow svg{width:17px;height:17px;transition:transform .25s ease}
.linkarrow:hover{color:var(--gold-deeper);border-color:rgba(122,90,28,.6);gap:14px}
.linkarrow:hover svg{transform:translateY(3px)}
.linkarrow--light{color:var(--gold-2);border-color:rgba(214,180,115,.34)}
.linkarrow--light:hover{color:var(--gold-1);border-color:rgba(240,220,174,.7)}
.linkarrow--light:hover svg{transform:translate(2px,-2px)}
.cta__second:hover svg{transform:translateY(3px)}

/* =========================================================
   CAIXA DE ÍCONE
   ========================================================= */
.ibox{
  width:52px;height:52px;flex:0 0 52px;aspect-ratio:1;flex-shrink:0;
  border-radius:14px;display:grid;place-items:center;
}
.ibox svg{width:26px;height:26px}
.ibox--gold{background:rgba(214,180,115,.13);border:1px solid rgba(214,180,115,.26);color:var(--gold-2)}
.ibox--green{background:rgba(89,108,71,.11);border:1px solid rgba(89,108,71,.20);color:var(--green-600)}
.ibox--onGreen{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:#fff}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;color:var(--tx-d);overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero__veil{
  position:absolute;inset:0;
  /* almofada radial atras do texto centralizado, para a foto poder ficar
     clara nas bordas sem custar leitura no meio */
  background:
    radial-gradient(ellipse 68% 74% at 50% 42%,
      rgba(13,17,12,.76) 0%,
      rgba(13,17,12,.48) 50%,
      rgba(13,17,12,0) 100%),
    linear-gradient(180deg,
      rgba(13,17,12,.58) 0%,
      rgba(13,17,12,.18) 30%,
      rgba(13,17,12,.30) 60%,
      rgba(13,17,12,.74) 86%,
      var(--ink) 100%);
}
.hero__inner{
  position:relative;z-index:2;width:min(1280px,92%);
  display:flex;flex-direction:column;
  padding-block:40px 48px;
}
/* as duas marcas lado a lado, empreendimento e incorporadora */
.hero__marcas{
  display:flex;align-items:center;justify-content:center;gap:28px;
  margin:0 auto 24px;
  filter:drop-shadow(0 2px 20px rgba(13,17,12,.9));
}
.hero__marcas-divisor{
  width:1px;height:72px;flex:0 0 1px;
  background:rgba(244,243,238,.30);
}
.hero__marca{flex:0 0 auto;display:block}
.hero__marca--cp{width:200px;height:auto}
.hero__marca--vp{height:112px;width:auto;aspect-ratio:704/745}

.hero__content{max-width:960px;margin:auto;text-align:center;padding-block:48px}
.hero__title,.hero__sub,.hero__micro{text-shadow:0 2px 24px rgba(13,17,12,.75)}
.hero__title{
  font-size:var(--fs-h1);line-height:1.15;letter-spacing:var(--ls-h1);
  margin:16px 0 0;
}
.hero__title em{
  font-style:normal;
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  margin-top:16px;max-width:790px;margin-inline:auto;
  font-size:var(--fs-corpo);font-weight:300;line-height:1.62;color:var(--tx-d-2);
}
.hero__content .btn{margin-top:40px}
.hero__micro{margin-top:20px;font-size:var(--fs-peq);color:rgba(244,243,238,.58);letter-spacing:.01em}

/* barra de credibilidade */
.credbar{margin-top:48px}
.credbar__line{display:block;height:1px;background:var(--line-d);width:100%}
.credbar__list{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:24px;flex-wrap:nowrap;
}
.credbar__list li{
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:var(--fs-peq);font-weight:500;color:rgba(244,243,238,.86);
}
.credbar__list svg{width:19px;height:19px;flex:0 0 19px;color:var(--gold-2)}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  position:relative;overflow:hidden;
  padding-block:20px;
  background:linear-gradient(90deg,var(--ink) 0%, var(--ink-3) 22%, var(--ink-4) 50%, var(--ink-3) 78%, var(--ink) 100%);
  border-block:1px solid var(--line-d);
}
.marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{display:flex;align-items:center;gap:28px;padding-right:28px}
.marquee__row span{
  font-family:var(--ff-t);font-size:var(--fs-apoio);font-weight:500;letter-spacing:-.01em;
  color:rgba(244,243,238,.80);white-space:nowrap;
}
.marquee__row b{
  width:9px;height:9px;flex:0 0 9px;transform:rotate(45deg);
  background:var(--grad-gold);border-radius:2px;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   DOR + SOLUÇÃO
   ========================================================= */
.problema__grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:96px;align-items:center;
}
.problema__media{margin:0;position:relative}
.problema__media img{
  width:100%;height:520px;object-fit:cover;border-radius:var(--r-xl);
  box-shadow:0 40px 70px -40px rgba(22,28,19,.5);
}
.floatcard{
  position:absolute;right:-40px;bottom:-40px;
  background:var(--ink);color:var(--tx-d);
  border:1px solid rgba(244,243,238,.10);
  border-radius:var(--r-lg);padding:24px 28px;
  min-width:240px;
  box-shadow:0 30px 60px -25px rgba(13,17,12,.6);
}
.floatcard__label{display:block;font-size:var(--fs-tag);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-d-3)}
.floatcard__value{
  display:block;margin-top:8px;font-family:var(--ff-t);font-size:var(--fs-titulo-md);font-weight:600;
  line-height:1.15;letter-spacing:-.03em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.floatcard__foot{
  display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(244,243,238,.10);
  font-size:var(--fs-peq);color:var(--tx-d-2);
}
/* a partir da segunda linha o divisor não se repete */
.floatcard__foot + .floatcard__foot{margin-top:8px;padding-top:0;border-top:0}
.floatcard__foot svg{width:16px;height:16px;flex:0 0 16px;color:var(--green-300)}

.problema__text .tag{margin-bottom:16px}
.problema__text .h2 em{font-style:normal;color:var(--gold-deep)}
.problema__text .lead{margin-top:24px;font-size:var(--fs-corpo);font-weight:500;color:var(--tx-l)}
.problema__text p+p{margin-top:16px;color:var(--tx-l-2);font-weight:300;font-size:var(--fs-corpo)}
.problema__text .linkarrow{margin-top:32px}

/* specs */
.specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:96px;
}
.spec{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);
  padding:32px 28px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.spec:hover{transform:translateY(-6px);box-shadow:0 26px 44px -28px rgba(22,28,19,.42);border-color:rgba(89,108,71,.28)}
.spec__ico{
  width:52px;height:52px;flex:0 0 52px;aspect-ratio:1;border-radius:14px;
  display:grid;place-items:center;margin-bottom:24px;
  background:rgba(89,108,71,.10);border:1px solid rgba(89,108,71,.18);color:var(--green-600);
}
.spec__ico svg{width:26px;height:26px}
.spec__label{display:block;font-size:var(--fs-tag);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-l-3)}
.spec__value{display:block;margin-top:8px;font-family:var(--ff-t);font-size:var(--fs-h4);font-weight:600;letter-spacing:-.03em;line-height:1.25}
.spec__foot{display:block;margin-top:8px;font-size:var(--fs-peq);color:var(--tx-l-2);font-weight:300}

/* =========================================================
   MÉTRICAS
   ========================================================= */
.metrics{overflow:hidden}
.metrics__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.metrics__bg img{width:100%;height:100%;object-fit:cover;opacity:.14}
.metrics__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%, rgba(13,17,12,.62) 42%, rgba(13,17,12,.78) 70%, var(--ink) 100%);
}
.metrics__head{margin-bottom:48px}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.metric{
  padding:32px 28px 28px;border-radius:var(--r-lg);
  background:linear-gradient(170deg, rgba(244,243,238,.055), rgba(244,243,238,.015));
  border:1px solid var(--line-d);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background .3s ease;
}
.metric:hover{transform:translateY(-6px);border-color:rgba(214,180,115,.34);background:linear-gradient(170deg, rgba(214,180,115,.10), rgba(244,243,238,.02))}
.metric__ico{
  width:48px;height:48px;flex:0 0 48px;aspect-ratio:1;border-radius:13px;
  display:grid;place-items:center;
  background:rgba(214,180,115,.12);border:1px solid rgba(214,180,115,.24);color:var(--gold-2);
}
.metric__ico svg{width:24px;height:24px}
.metric__line{display:block;height:1px;background:var(--line-d);margin:24px 0 20px}
.metric__num{
  display:block;font-family:var(--ff-t);font-size:var(--fs-display);font-weight:600;line-height:1.05;letter-spacing:-.04em;
  white-space:nowrap;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.metric__num i{font-style:normal;font-size:var(--fs-h3);font-weight:500;letter-spacing:-.02em;margin-right:.24em}
.metric__label{display:block;margin-top:12px;font-size:var(--fs-peq);font-weight:300;color:var(--tx-d-2);line-height:1.5}

/* =========================================================
   BENTO
   ========================================================= */
.sechead{margin-bottom:64px;max-width:720px}
.sechead .tag{margin-bottom:16px}
.sechead--center{margin-inline:auto;text-align:center}
.sechead--wide{max-width:900px}
.sechead__sub{margin-top:20px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-d-2)}
.sec--light .sechead__sub,.sec--bone .sechead__sub{color:var(--tx-l-2)}
.h2 em{font-style:normal;color:var(--gold-deep)}
.sec--dark .h2 em,.cta .h2 em,.local .h2 em,.obra .h2 em{
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(268px,auto);
  gap:24px;
}
.bento__card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:32px;display:flex;flex-direction:column;
  border:1px solid var(--line-l);
}

.bento__num{
  position:absolute;top:24px;right:28px;
  font-family:var(--ff-t);font-size:var(--fs-titulo-md);font-weight:600;letter-spacing:-.04em;
  color:rgba(22,28,19,.08);line-height:1;
}
.bento__kicker{
  position:relative;z-index:2;padding-right:56px;
  font-size:var(--fs-tag);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-l-3);line-height:1;
}
.bento__body{position:relative;z-index:2;margin-top:auto;padding-top:20px}
.bento__body .ibox{margin-bottom:18px;width:48px;height:48px;flex:0 0 48px}
.bento__body .ibox svg{width:24px;height:24px}
.bento__title{font-size:var(--fs-h4);line-height:1.28;letter-spacing:-.03em;margin-bottom:10px}
.bento__card p{font-size:var(--fs-apoio);font-weight:300;line-height:1.55;color:var(--tx-l-2)}

/* herói do bento */
.bento__card--hero{
  grid-column:span 2;grid-row:span 2;
  color:var(--tx-d);border-color:rgba(244,243,238,.10);
  background-image:var(--bg);background-size:cover;background-position:center;
  background-repeat:no-repeat;background-clip:padding-box;
}
.bento__card--hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,17,12,.66) 0%, rgba(13,17,12,.34) 20%, rgba(13,17,12,.64) 52%, rgba(13,17,12,.92) 100%);
  transition:opacity .4s ease;
}
.bento__card--hero .bento__num{color:rgba(244,243,238,.22)}
.bento__card--hero .bento__kicker{color:rgba(244,243,238,.86)}
.bento__card--hero p{color:rgba(244,243,238,.76);font-size:var(--fs-apoio);max-width:44ch}
.bento__card--hero .bento__title{font-size:var(--fs-titulo-md)}

.bento__card--photo{
  grid-column:span 2;
  color:var(--tx-d);border-color:rgba(244,243,238,.10);
  background-image:var(--bg);background-size:cover;background-position:center 62%;
  background-repeat:no-repeat;background-clip:padding-box;
}
.bento__card--photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,17,12,.70) 0%, rgba(13,17,12,.40) 22%, rgba(13,17,12,.74) 50%, rgba(13,17,12,.94) 100%);
}
.bento__card--photo .bento__num{color:rgba(244,243,238,.20)}
.bento__card--photo .bento__body{max-width:52ch}
.bento__card--photo .bento__kicker{color:rgba(244,243,238,.86)}
.bento__card--photo p{color:rgba(244,243,238,.74)}

.bento__card--dark{background:var(--ink);color:var(--tx-d);border-color:rgba(244,243,238,.10)}
.bento__card--dark .bento__num{color:rgba(244,243,238,.17)}
.bento__card--dark .bento__kicker{color:var(--tx-d-3)}
.bento__card--dark p{color:var(--tx-d-2)}

.bento__card--pale{background:#fff}
.bento__card--num{background:var(--bone-3)}
.bento__card--garagem{grid-column:span 2;background:#fff}
.bento__card--green{background:linear-gradient(160deg,var(--green) 0%, var(--green-700) 100%);color:var(--tx-d);border-color:rgba(255,255,255,.14)}
.bento__card--green .bento__num{color:rgba(255,255,255,.16)}
.bento__card--green .bente__kicker,.bento__card--green .bento__kicker{color:rgba(255,255,255,.66)}
.bento__card--green p{color:rgba(255,255,255,.82)}

.bigfig{
  display:block;font-family:var(--ff-t);font-size:var(--fs-display);font-weight:600;line-height:1;
  letter-spacing:-.04em;margin-bottom:14px;
  background:var(--grad-gold-l);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.bigfig span{font-size:var(--fs-h3)}

/* selo */
.selo{
  margin-top:32px;display:flex;align-items:center;gap:24px;
  padding:28px 32px;border-radius:var(--r-lg);
  background:#fff;border:1px solid rgba(89,108,71,.22);
  box-shadow:0 22px 44px -30px rgba(22,28,19,.35);
}
.selo__ico{
  width:48px;height:48px;flex:0 0 48px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;
}
.selo__ico svg{width:24px;height:24px}
.selo p{flex:1;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-l-2)}
.selo p strong{font-weight:600;color:var(--tx-l)}
.selo .btn{flex:0 0 auto}

/* =========================================================
   SANFONA HORIZONTAL, unidades
   ========================================================= */
.unidades{padding-bottom:96px}
.sanfona{
  display:flex;gap:8px;height:560px;margin-block:0 96px;
  padding-inline:max(24px, calc((100% - 1280px) / 2));
}
.pane{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  flex:1 1 0;min-width:0;cursor:pointer;
  background-image:var(--img);background-size:cover;background-position:center;
  /* sem estes dois a foto se repete dentro da borda de 1px e cria um risco
     na beirada do card, com a ponta oposta da imagem aparecendo */
  background-repeat:no-repeat;
  /* sombra interna no lugar de border: acompanha o raio exato do card.
     Com border de 1px o veu interno para na caixa de padding e sobra um
     arco mais claro nos cantos de baixo. */
  border:0;box-shadow:inset 0 0 0 1px rgba(244,243,238,.10);
  transition:flex-grow .55s cubic-bezier(.2,.7,.3,1);
}
.pane::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg, rgba(13,17,12,.30) 0%, rgba(13,17,12,.70) 55%, rgba(13,17,12,.94) 100%);
  transition:background .5s ease;
}
.pane.is-open{flex-grow:4.2}
.pane.is-open::after{
  background:linear-gradient(180deg, rgba(13,17,12,.24) 0%, rgba(13,17,12,.58) 50%, rgba(13,17,12,.92) 100%);
}
.pane__idx{
  position:absolute;top:28px;left:0;right:0;z-index:3;text-align:center;
  font-family:var(--ff-t);font-size:var(--fs-peq);font-weight:600;letter-spacing:.06em;
  color:var(--gold-2);
  transition:opacity .18s ease;
}
.pane__vert{
  position:absolute;left:50%;bottom:32px;z-index:3;
  transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:var(--fs-corpo);font-weight:600;letter-spacing:.04em;color:var(--tx-d);
  white-space:nowrap;
  transition:opacity .18s ease;
}
/* Largura fixa em ch, e não em left/right, para o texto não refluir enquanto
   o card muda de largura. Sem isso o conteúdo se comprime e sobe ao sair.
   O que sai apenas desaparece, o que entra aparece depois do card já ter aberto. */
.pane__open{
  position:absolute;left:40px;right:auto;bottom:40px;z-index:3;
  /* acompanha a largura interna do card aberto, mas em vw, que não muda
     durante o hover. Com left/right o texto refluiria a cada quadro. */
  width:min(653px, calc((100vw - 88px) * .58 - 80px));
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.pane.is-open .pane__open{
  opacity:1;pointer-events:auto;
  transition:opacity .32s ease .26s;
}
.pane.is-open .pane__vert,.pane.is-open .pane__idx{opacity:0}
.pane__torre{
  display:inline-block;margin-bottom:12px;padding:6px 14px;border-radius:999px;
  background:rgba(244,243,238,.10);border:1px solid rgba(244,243,238,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:var(--fs-tag);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-1);
}
.pane__title{font-size:var(--fs-titulo-md);line-height:1.18;letter-spacing:-.03em;color:var(--tx-d)}
.pane__desc{margin-top:12px;max-width:46ch;font-size:var(--fs-apoio);font-weight:300;color:rgba(244,243,238,.78)}
.pane__specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pane__specs li{
  padding:9px 16px;border-radius:999px;
  background:rgba(244,243,238,.08);border:1px solid rgba(244,243,238,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:var(--fs-peq);font-weight:400;color:rgba(244,243,238,.9);white-space:nowrap;
}
.pane__specs li b{font-family:var(--ff-t);font-weight:600;color:var(--gold-1)}
.pane__open .linkarrow{margin-top:24px}

.unidades__foot{
  display:grid;grid-template-columns:1fr 0.9fr;gap:48px;align-items:stretch;
  padding-top:96px;border-top:1px solid var(--line-d);
}
.unidades__plantas,.unidades__implant{
  margin:0;background:#fff;border-radius:var(--r-lg);padding:24px;
  display:flex;flex-direction:column;overflow:hidden;
}
.unidades__plantas-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0;align-content:center}
.unidades__plantas-grid img{width:100%;height:100%;min-height:0;object-fit:contain}
.unidades__implant{overflow:hidden}
.unidades__implant img{width:100%;height:210px;object-fit:cover;border-radius:var(--r-sm)}
.unidades__plantas figcaption,.unidades__implant figcaption{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-l);
  font-size:var(--fs-peq);font-weight:500;letter-spacing:.02em;color:var(--tx-l-3);text-align:center;
}
.unidades__note{display:flex;flex-direction:column}
.unidades__note .h3{color:var(--tx-d)}
.unidades__note > p{margin-top:16px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-d-2)}
.unidades__implant{margin-top:32px}
.unidades__note .btn{margin-top:32px;align-self:flex-start}

/* =========================================================
   OBRA, metade e metade
   ========================================================= */
.obra{display:grid;grid-template-columns:1fr 1fr;background:var(--ink-2);color:var(--tx-d);position:relative}
.obra__media{position:relative;min-height:100%}
.obra__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.obra__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(13,17,12,.30) 0%, rgba(13,17,12,0) 40%, rgba(19,26,17,.55) 100%);
}
.obra__badge{
  position:absolute;z-index:3;right:-38px;top:64px;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  background:var(--ink);border:1px solid rgba(214,180,115,.30);
  box-shadow:0 22px 44px -22px rgba(13,17,12,.8);
  font-size:var(--fs-peq);font-weight:600;color:var(--gold-1);white-space:nowrap;
}
.obra__badge-dot{
  width:9px;height:9px;border-radius:50%;background:var(--green-300);
  box-shadow:0 0 0 5px rgba(156,176,124,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(156,176,124,.16)}50%{box-shadow:0 0 0 9px rgba(156,176,124,.04)}}

.obra__panel{padding-block:var(--sec-y);display:flex;align-items:center}
.obra__inner{
  width:min(560px, calc(100% - 128px));
  margin-left:64px;margin-right:auto;
}
.obra__inner .tag{margin-bottom:16px}
.obra__inner > p{margin-top:24px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-d-2)}

.timeline{margin-top:40px;position:relative}
.timeline__item{display:flex;gap:20px;padding-bottom:28px;position:relative}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{
  content:'';position:absolute;left:8px;top:22px;bottom:0;width:1px;background:var(--line-d);
}
.timeline__item:last-child::before{display:none}
.timeline__mark{
  width:17px;height:17px;flex:0 0 17px;aspect-ratio:1;border-radius:50%;margin-top:4px;
  border:2px solid rgba(244,243,238,.22);background:var(--ink-2);position:relative;z-index:2;
}
.timeline__item.is-done .timeline__mark{background:var(--green-300);border-color:var(--green-300)}
.timeline__item.is-now .timeline__mark{background:var(--gold-2);border-color:var(--gold-2);box-shadow:0 0 0 5px rgba(214,180,115,.16)}
.timeline__item strong{display:block;font-family:var(--ff-t);font-size:var(--fs-apoio);font-weight:600;letter-spacing:-.02em}
.timeline__item span{display:block;margin-top:2px;font-size:var(--fs-peq);color:var(--tx-d-2);font-weight:300}

/* carrossel de fotos da obra, em todas as larguras */
.obra__carrossel{margin-top:40px}
.obra__thumbs{
  display:flex;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.obra__thumbs::-webkit-scrollbar{display:none}
.obra__thumbs img{
  flex:0 0 62%;width:62%;max-width:none;
  height:240px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line-d);
  scroll-snap-align:start;
}
.obra__nav{display:flex;gap:10px;margin-top:16px}
.obra__seta{
  width:40px;height:40px;flex:0 0 40px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(244,243,238,.07);
  border:1px solid rgba(244,243,238,.18);
  color:var(--tx-d);
  transition:background .25s ease,border-color .25s ease,opacity .25s ease;
}
.obra__seta svg{width:18px;height:18px}
.obra__seta:hover{background:rgba(214,180,115,.16);border-color:rgba(214,180,115,.45)}
.obra__seta[disabled]{opacity:.3;cursor:default}
.obra__seta[disabled]:hover{background:rgba(244,243,238,.07);border-color:rgba(244,243,238,.18)}
.obra__inner .btn{margin-top:40px}

/* =========================================================
   GALERIA
   ========================================================= */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* cards da galeria sao apenas imagem, sem hover e sem destino */
.gal__card{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;border:1px solid var(--line-l);
}
.gal__img{overflow:hidden}
.gal__img img{width:100%;height:250px;object-fit:cover}
.gal__tag{
  position:absolute;top:16px;left:16px;z-index:3;
  padding:7px 14px;border-radius:999px;
  background:rgba(13,17,12,.55);border:1px solid rgba(244,243,238,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:var(--fs-tag);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-d);
}
.gal__go{
  position:absolute;top:16px;right:16px;z-index:3;
  width:40px;height:40px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(13,17,12,.50);border:1px solid rgba(244,243,238,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--tx-d);
}
.gal__go svg{width:16px;height:16px}
.gal__bar{
  display:flex;align-items:center;gap:12px;padding:20px 24px;
  font-family:var(--ff-t);font-size:var(--fs-apoio);font-weight:500;letter-spacing:-.02em;color:var(--tx-l);
}
.gal__bar svg{width:20px;height:20px;flex:0 0 20px;color:var(--green-600)}

/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */
.local{position:relative;padding-block:var(--sec-y);color:var(--tx-d);overflow:hidden}
.local__bg{position:absolute;inset:0}
.local__bg img{width:100%;height:100%;object-fit:cover}
.local__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,17,12,.78) 0%, rgba(13,17,12,.84) 100%);
}
.local__inner{position:relative;z-index:2}
.local__head{max-width:760px;margin-bottom:48px}
.local__head .tag{margin-bottom:16px}
.local__card{
  background:rgba(19,26,17,.62);
  border:1px solid rgba(244,243,238,.13);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-radius:var(--r-xl);padding:40px;
  box-shadow:0 40px 80px -40px rgba(13,17,12,.9);
}
.local__addr{display:flex;align-items:center;gap:20px;padding-bottom:32px;border-bottom:1px solid var(--line-d)}
.local__addr > div{flex:1}
.local__addr strong{display:block;font-family:var(--ff-t);font-size:var(--fs-h4);font-weight:600;letter-spacing:-.03em}
.local__addr span{display:block;margin-top:2px;font-size:var(--fs-peq);color:var(--tx-d-2);font-weight:300}
.local__intro{margin-top:32px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-d-2)}
.local__list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 24px;margin-top:24px}
.local__list li{display:flex;align-items:center;gap:12px;font-size:var(--fs-apoio);color:rgba(244,243,238,.9)}
.local__list li svg{
  width:20px;height:20px;flex:0 0 20px;
  color:var(--gold-2);
}

/* =========================================================
   FORMULÁRIO
   ========================================================= */
/* fundo escuro chapado. A secao de cima ja tem foto, duas seguidas com
   imagem deixam a pagina repetitiva. */
.form-sec{
  padding-block:var(--sec-y);position:relative;overflow:hidden;
  background:var(--ink);color:var(--tx-d);
}
.form-sec::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(156,176,124,.10) 1px, transparent 1px);
  background-size:26px 26px;opacity:.5;
}
.form-sec .container{position:relative;z-index:2}

.formcard{
  display:grid;grid-template-columns:1fr .82fr;gap:0;
  background:var(--bone);color:var(--tx-l);border-radius:var(--r-xl);
  box-shadow:0 50px 100px -40px rgba(13,17,12,.85);
  overflow:visible;
}
.formcard__left{padding:64px 48px 64px 64px;display:flex;flex-direction:column}
.formcard__left .tag{margin-bottom:16px;align-self:flex-start}
.formcard__left .lead{margin-top:24px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-l-2)}

.trust{margin-top:40px;display:grid;gap:14px}
.trust li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-apoio);color:var(--tx-l-2);font-weight:300}
.trust svg{width:18px;height:18px;flex:0 0 18px;margin-top:4px;color:var(--green)}

.consultor{
  margin-top:auto;padding-top:40px;display:flex;align-items:center;gap:16px;
}
/* o logo da incorporadora no lugar da bolinha */
.consultor__ava,.asidecard__ava{
  height:68px;width:auto;flex:0 0 auto;display:block;
}
.consultor strong{display:block;font-family:var(--ff-t);font-size:var(--fs-apoio);font-weight:600;letter-spacing:-.02em}
.consultor span{display:block;font-size:var(--fs-peq);color:var(--tx-l-3);font-weight:300}

.formcard__right{
  margin:24px 24px 24px -32px;
  background:var(--ink);border-radius:var(--r-lg);
  padding:48px 40px;color:var(--tx-d);
  border:1px solid rgba(244,243,238,.10);
  box-shadow:0 30px 60px -30px rgba(13,17,12,.7);
  align-self:stretch;
}

.field{margin-bottom:20px}
.field label{
  display:block;margin-bottom:10px;
  font-size:var(--fs-tag);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-d-3);
}
.field__wrap{position:relative;display:flex;align-items:center}
.field__ico{
  position:absolute;left:18px;width:19px;height:19px;color:var(--tx-d-3);
  pointer-events:none;transition:color .25s ease;
}
.field__caret{position:absolute;right:18px;width:18px;height:18px;color:var(--tx-d-3);pointer-events:none}
.field input,.field select{
  width:100%;height:56px;padding:0 20px 0 50px;
  background:rgba(244,243,238,.05);
  border:1px solid rgba(244,243,238,.13);
  border-radius:var(--r-sm);
  font-size:var(--fs-apoio);font-weight:400;color:var(--tx-d);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  appearance:none;-webkit-appearance:none;
}
.field select{padding-right:46px;cursor:pointer}
.field select option{background:var(--ink-3);color:var(--tx-d)}
.field input::placeholder{color:rgba(244,243,238,.32)}
.field input:focus,.field select:focus{
  outline:none;border-color:rgba(214,180,115,.62);
  background:rgba(244,243,238,.08);
  box-shadow:0 0 0 4px rgba(214,180,115,.14);
}
.field__wrap:focus-within .field__ico{color:var(--gold-2)}
.field.has-error input,.field.has-error select{border-color:#C46B5A;box-shadow:0 0 0 4px rgba(196,107,90,.14)}

.form__error{
  max-height:0;overflow:hidden;opacity:0;
  font-size:var(--fs-peq);color:#E29A8B;
  transition:max-height .3s ease,opacity .3s ease,margin .3s ease;
}
.form__error.is-on{max-height:60px;opacity:1;margin-bottom:16px}
.form .btn{margin-top:8px}
.form__legal{margin-top:20px;font-size:var(--fs-peq);line-height:1.55;color:var(--tx-d-3);font-weight:300}
.form__legal a{color:var(--gold-2);border-bottom:1px solid rgba(214,180,115,.35);transition:color .25s ease}
.form__legal a:hover{color:var(--gold-1)}
.form__ok{
  display:flex;align-items:center;gap:10px;
  max-height:0;overflow:hidden;opacity:0;
  margin-top:0;padding:0 16px;border-radius:var(--r-sm);
  background:rgba(156,176,124,.14);border:1px solid rgba(156,176,124,0);
  font-size:var(--fs-peq);color:var(--green-200);
  transition:max-height .35s ease,opacity .35s ease,margin .35s ease,padding .35s ease,border-color .35s ease;
}
.form__ok svg{width:18px;height:18px;flex:0 0 18px}
.form__ok.is-on{max-height:80px;opacity:1;margin-top:20px;padding:14px 16px;border-color:rgba(156,176,124,.3)}

/* =========================================================
   FAQ
   ========================================================= */
.faq__grid{display:grid;grid-template-columns:.82fr 1fr;gap:64px;align-items:start}
.faq__aside{position:sticky;top:64px}
.faq__aside .tag{margin-bottom:16px}
.faq__aside > p{margin-top:24px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-l-2)}
.asidecard{
  margin-top:40px;padding:32px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line-l);
  box-shadow:0 24px 48px -32px rgba(22,28,19,.36);
}
.asidecard__ava{margin-bottom:20px}
.asidecard strong{display:block;font-family:var(--ff-t);font-size:var(--fs-corpo);font-weight:600;letter-spacing:-.02em}
.asidecard > span{display:block;font-size:var(--fs-peq);color:var(--tx-l-3);font-weight:300}
.asidecard__tel{
  display:flex !important;align-items:center;gap:10px;margin-top:16px;
  font-size:var(--fs-apoio) !important;font-weight:600 !important;color:var(--green-700) !important;
}
.asidecard__tel svg{width:18px;height:18px;flex:0 0 18px}
.asidecard .btn{margin-top:24px}

.faq__item{
  border:1px solid var(--line-l);border-radius:var(--r-md);
  background:#fff;margin-bottom:16px;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.faq__item[open]{border-color:rgba(89,108,71,.3);box-shadow:0 20px 40px -30px rgba(22,28,19,.38)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 28px;
  font-family:var(--ff-t);font-size:var(--fs-corpo);font-weight:600;letter-spacing:-.02em;line-height:1.35;
  transition:color .25s ease;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green-700)}
.faq__chev{
  width:36px;height:36px;flex:0 0 36px;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(89,108,71,.09);color:var(--green-600);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s ease;
}
.faq__chev svg{width:18px;height:18px}
.faq__item[open] .faq__chev{transform:rotate(180deg);background:var(--green);color:#fff}
.faq__body{padding:0 28px 28px;overflow:hidden}
.faq__body p{font-size:var(--fs-corpo);font-weight:300;line-height:1.62;color:var(--tx-l-2);max-width:62ch}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{position:relative;padding-block:var(--sec-y);color:var(--tx-d);overflow:hidden;text-align:center}
.cta__bg{position:absolute;inset:0}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,17,12,.84) 0%, rgba(13,17,12,.88) 100%);
}
/* Marca d'água do CTA.
   O -webkit-text-stroke contorna cada traço do glifo separadamente, e letras
   como A, R e K são montadas com traços sobrepostos, o que fazia aparecer
   risco dentro delas. Preenchendo no tom do fundo e pintando o contorno por
   baixo (paint-order), o preenchimento cobre as emendas internas e sobra só
   o contorno externo. Tracking positivo para as letras não se cruzarem. */
.cta__ghost{
  position:absolute;left:50%;top:auto;bottom:-.10em;transform:translateX(-50%);
  font-family:var(--ff-t);font-weight:600;font-size:var(--fs-ghost);
  letter-spacing:.03em;line-height:1;white-space:nowrap;
  color:var(--ink);
  -webkit-text-stroke:2px rgba(214,180,115,.30);
  paint-order:stroke fill;
  opacity:.4;
  pointer-events:none;user-select:none;
}
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta__star{height:104px;width:auto;aspect-ratio:704/745;opacity:.95;margin-bottom:24px}
.cta__title{max-width:none;text-wrap:normal}
.cta__title em{display:block}
.cta__sub{margin-top:24px;max-width:820px;font-size:var(--fs-corpo);font-weight:300;color:var(--tx-d-2)}
.cta .btn--lg{margin-top:48px}
.cta__second{margin-top:24px}

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot{background:var(--ink);color:var(--tx-d);padding-block:96px 40px;border-top:1px solid var(--line-d)}
.foot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:48px}
.foot__logo{height:124px;width:auto;opacity:.95;margin-bottom:24px}
.foot__brand p{font-size:var(--fs-apoio);font-weight:300;color:var(--tx-d-2);max-width:38ch;line-height:1.6}
.foot__col h4{
  font-family:var(--ff-b);font-size:var(--fs-tag);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tx-d-3);margin-bottom:16px;
}
.foot__col p{font-size:var(--fs-apoio);font-weight:300;color:var(--tx-d-2);line-height:1.7}
.foot__col a{color:var(--gold-2);transition:color .25s ease}
.foot__col a:hover{color:var(--gold-1)}
.foot__legal{font-size:var(--fs-peq) !important;line-height:1.6 !important;color:var(--tx-d-3) !important}
.foot__disclaimer{
  margin-top:64px;padding-top:32px;border-top:1px solid var(--line-d);
  font-size:var(--fs-peq);line-height:1.6;color:var(--tx-d-3);font-weight:300;
}
.foot__bottom{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:var(--fs-peq);color:var(--tx-d-3);font-weight:300;
}
.foot__bottom a{color:var(--tx-d-2);border-bottom:1px solid rgba(244,243,238,.18);transition:color .25s ease,border-color .25s ease}
.foot__bottom a:hover{color:var(--gold-2);border-color:rgba(214,180,115,.5)}

/* =========================================================
   REVELAÇÃO
   ========================================================= */
/* O estado escondido só existe quando o JS está vivo. Sem JS, ou se o
   observer não disparar, o conteúdo aparece normalmente. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* =========================================================
   PÁGINA DE POLÍTICA
   ========================================================= */
.doc{background:var(--bone);color:var(--tx-l);padding-block:96px}
.doc__inner{width:min(820px,92%);margin-inline:auto}
.doc__back{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-peq);font-weight:600;color:var(--green-700);margin-bottom:40px}
.doc__back svg{width:16px;height:16px}
.doc h1{font-size:var(--fs-h2);line-height:1.2;letter-spacing:var(--ls-h2)}
.doc h2{font-size:var(--fs-h4);line-height:1.3;letter-spacing:-.03em;margin-top:48px}
.doc p,.doc li{font-size:var(--fs-corpo);font-weight:300;line-height:1.7;color:var(--tx-l-2);margin-top:16px}
.doc ul{list-style:disc;padding-left:22px;margin-top:8px}
.doc li{margin-top:8px}
.doc__date{margin-top:16px;font-size:var(--fs-peq);color:var(--tx-l-3)}

/* =========================================================
   1366, notebook
   ========================================================= */
@media (max-width:1366px){
  :root{--sec-y:112px;--fs-display:46px}
  .problema__grid{gap:64px}
  .problema__media img{height:460px}
  .floatcard{right:-24px;bottom:-28px}
  .sanfona{height:520px}
  .obra__inner{margin-left:48px;width:min(520px, calc(100% - 96px))}
  .formcard__left{padding:56px 40px 56px 48px}
  .formcard__right{padding:40px 32px}
}

/* =========================================================
   1200, notebook menor: o titulo em uma linha so encostaria
   nas bordas, entao desce um degrau, ainda dentro de 56 a 64
   ========================================================= */
@media (max-width:1200px){
  :root{--fs-h1:56px}
}

/* =========================================================
   1024, tablet
   ========================================================= */
@media (max-width:1024px){
  :root{--sec-y:96px;--fs-h1:44px;--fs-h2:34px;--fs-h3:22px;--fs-titulo-md:28px}

  .hero{min-height:auto}
  .hero__content{padding-block:56px 40px;max-width:none}
  .credbar__list{flex-wrap:wrap;gap:16px 32px;justify-content:space-between}

  .problema__grid{grid-template-columns:1fr;gap:64px}
  .problema__media img{height:400px}
  .floatcard{right:24px;bottom:-32px}
  .specs{grid-template-columns:repeat(2,1fr);margin-top:80px}
  .metrics__grid{grid-template-columns:repeat(2,1fr)}

  /* altura minima, nao fixa: com 230px travados o card mais
     comprido cortava o texto no tablet */
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(230px,auto)}
  .bento__card--hero{grid-column:span 2;grid-row:span 2}
  .bento__card--photo{grid-column:span 2}
  .selo{flex-wrap:wrap}
  .selo p{flex:1 1 100%;order:2}
  .selo .btn{order:3;width:100%;justify-content:space-between}

  .sanfona{height:460px;padding-inline:4%}
  .pane__open{left:28px;right:auto;width:calc((100vw - 100px) * .55 - 56px);bottom:28px}
  .unidades__foot{grid-template-columns:1fr;gap:40px}
  .unidades__plantas-grid{flex:none;height:520px}
  .unidades__note .btn{align-self:stretch}

  .obra{grid-template-columns:1fr}
  .obra__media{height:420px}
  .obra__badge{right:24px;top:auto;bottom:-24px}
  .obra__inner{width:92%;margin-inline:auto}
  .obra__panel{padding-block:80px}

  .gal{grid-template-columns:repeat(2,1fr)}
  .local__list{grid-template-columns:repeat(2,1fr)}
  .local__card{padding:32px}
  .local__addr{flex-wrap:wrap}
  .local__addr .btn{width:100%;justify-content:space-between;margin-top:8px}

  .formcard{grid-template-columns:1fr}
  .formcard__left{padding:48px 40px 32px}
  .formcard__right{margin:0 24px 24px;padding:40px 32px}

  .faq__grid{grid-template-columns:1fr;gap:48px}
  .faq__aside{position:static}

  .foot__top{grid-template-columns:repeat(2,1fr);gap:40px}
}

/* =========================================================
   767, mobile, TUDO empilha
   ========================================================= */
@media (max-width:767px){
  :root{
    --sec-y:64px;
    --fs-h1:34px;--fs-h2:28px;--fs-h3:20px;--fs-h4:20px;
    --fs-titulo-md:24px;--fs-display:44px;
    --fs-corpo:18px;   /* 20px fica grande demais em tela pequena */
  }
  .container{width:90%}

  .btn{width:100%;justify-content:space-between;gap:10px;padding:16px 12px 16px 18px}
  .btn__ico{width:34px;height:34px;flex:0 0 34px}
  .btn__ico svg{width:16px;height:16px}
  .btn--lg{padding:17px 13px 17px 20px}
  .btn--lg .btn__ico{width:36px;height:36px;flex:0 0 36px}
  .btn span{white-space:nowrap}

  /* tracking menor em TODAS as tags: com .13em a maior delas mede 325px e
     quebra em duas linhas em telas de 360px. Com .06em cai para 298px. */
  .tag{letter-spacing:.06em}
  .btn--compacto .btn__longo{display:none}
  .btn--compacto .btn__curto{display:inline}
  .selo .btn,.local__addr .btn,.asidecard .btn{width:100%}

  .hero__inner{padding-block:28px 40px}
  .hero__marcas{gap:18px;margin-bottom:20px}
  .hero__marcas-divisor{height:48px}
  .hero__marca--cp{width:132px}
  .hero__marca--vp{height:72px}
  .hero__content{padding-block:44px 32px}
  .hero__title{margin-top:14px;line-height:1.18}
  .hero__sub{margin-top:14px}
  .hero__content .btn{margin-top:32px}
  .hero__micro{;line-height:1.6}
  .credbar{margin-top:40px}
  .credbar__list{display:grid;grid-template-columns:1fr;gap:14px;padding-top:20px;justify-items:center}
  .credbar__list li{white-space:normal;text-align:left}

  .marquee{padding-block:14px}
  .marquee__row span{font-size:var(--fs-peq)}
  .marquee__row{gap:20px;padding-right:20px}
  .marquee__row b{width:7px;height:7px;flex:0 0 7px}

  .problema__grid{gap:56px}
  .problema__media img{height:280px;border-radius:var(--r-lg)}
  .floatcard{
    position:relative;z-index:2;
    inset:auto;margin-top:-40px;margin-inline:16px;width:auto;min-width:0;
  }
  .problema__text .lead{;margin-top:20px}
  .specs{grid-template-columns:1fr;gap:16px;margin-top:64px}
  .spec{padding:24px}

  .metrics__grid{grid-template-columns:1fr;gap:16px}
  .metric{padding:24px}
  .metrics__head{margin-bottom:32px}

  .sechead{margin-bottom:40px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .bento__card,
  .bento__card--hero,
  .bento__card--photo{grid-column:auto;grid-row:auto;min-height:280px;padding:24px}
  .bento__card--hero{min-height:360px}
  .bento__num{top:20px;right:22px}
  .selo{flex-direction:column;align-items:flex-start;gap:16px;padding:24px;margin-top:24px}

  .sanfona{
    display:grid;grid-template-columns:1fr;gap:16px;height:auto;
    padding-inline:5%;margin-bottom:64px;
  }
  .pane{flex:none;height:400px;border-radius:var(--r-lg)}
  .pane.is-open{flex-grow:0}
  .pane__idx,.pane__vert{display:none}
  .pane__open{
    opacity:1;transform:none;pointer-events:auto;
    left:24px;right:24px;width:auto;bottom:24px;
  }
  .pane__specs{gap:8px;margin-top:16px}
  .pane__specs li{padding:7px 12px;font-size:var(--fs-tag)}
  .unidades__foot{padding-top:64px;gap:32px}
  .unidades__plantas,.unidades__implant{padding:16px}
  .unidades__plantas-grid{flex:none;height:340px;gap:12px}
  .unidades__implant img{height:170px}

  .obra__media{height:300px}
  .obra__badge{right:auto;left:5%;bottom:-22px;padding:12px 18px}
  .obra__panel{padding-block:64px}
  .obra__carrossel{margin-top:32px}
  .obra__thumbs{margin-inline:-5%;padding-inline:5%}
  .obra__thumbs img{flex:0 0 84%;width:84%;height:220px}
  .obra__thumbs img:last-child{margin-right:5%}
  .timeline{margin-top:32px}

  .gal{grid-template-columns:1fr;gap:16px}
  .gal__img img{height:230px}
  .gal__bar{padding:18px 20px}

  .local__head{margin-bottom:32px}
  .local__card{padding:24px;border-radius:var(--r-lg)}
  .local__addr{gap:16px;padding-bottom:24px}
  .local__list{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .local__intro{margin-top:24px}

  .formcard{border-radius:var(--r-lg)}
  .formcard__left{padding:32px 24px 24px}
  .formcard__right{margin:0 16px 16px;padding:32px 24px}
  .trust{margin-top:32px}
  .consultor{padding-top:32px}
  .field input,.field select{height:52px}

  .faq__item summary{padding:20px 20px;gap:16px}
  .faq__chev{width:32px;height:32px;flex:0 0 32px}
  .faq__body{padding:0 20px 22px}
  .asidecard{padding:24px;margin-top:32px}

  .cta__star{height:80px;width:auto}
  .cta__ghost{-webkit-text-stroke-width:1px}
  .cta__title{max-width:none}
  .cta .btn--lg{margin-top:32px}

  .foot{padding-block:64px 32px}
  .foot__top{grid-template-columns:1fr;gap:32px}
  .foot__logo{height:100px;width:auto}
  .foot__disclaimer{margin-top:40px}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:12px;text-align:left}

  .doc{padding-block:64px}
  .doc h2{margin-top:36px}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.js .reveal{opacity:1;transform:none}
  .obra__thumbs{scroll-behavior:auto}
  .marquee__track{animation:none}
  .btn--gold::after{display:none}
}