:root{
  --navy-950:#05070c;
  --navy-900:#0a0e17;
  --navy-800:#0f1622;
  --navy-700:#161f2f;
  --steel-400:#9aa4b4;
  --steel-300:#c3cad6;
  --chrome-100:#eef1f5;
  --gold-400:#c9a769;
  --gold-300:#dcc189;
  --gold-600:#a3874f;
  --cream-50:#f7f2e9;
  --cream-100:#f0e8da;
  --cream-200:#e6dac4;
  --cream-ink:#241f16;
  --olive-500:#6b7a3f;
  --line-dark: rgba(238,241,245,0.16);
  --line-light: rgba(36,31,22,0.14);
  --ease-muva: cubic-bezier(.65,0,.15,1);
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.4s;
  --nav-h: 84px;
  --nav-h-mobile: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--navy-950); }
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }
body{
  margin:0;
  background:var(--navy-950);
  color:var(--chrome-100);
  font-family:'Inter', -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:auto;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:'Fraunces', Georgia, serif; font-weight:400; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

::selection{ background:var(--gold-400); color:var(--navy-950); }

/* ---------- layout helpers ---------- */
/* scroll-margin-top keeps the fixed nav from covering headings when a section
   is jumped to directly (nav links, anchor navigation, browser back/forward) */
.section{ position:relative; width:100%; scroll-margin-top:var(--nav-h); }
.section-dark{ background:var(--navy-950); color:var(--chrome-100); }
.section-cream{ background:var(--cream-50); color:var(--cream-ink); }
.wrap{ max-width:1360px; margin:0 auto; padding-left:6vw; padding-right:6vw; }
@media (max-width:900px){ .section{ scroll-margin-top:var(--nav-h-mobile); } }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Inter'; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-300);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold-400); display:inline-block; }
.section-cream .eyebrow{ color:var(--gold-600); }
.section-cream .eyebrow::before{ background:var(--gold-600); }

.reveal-mask{ overflow:hidden; }
.reveal-mask > *{ will-change:transform; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7em;
  padding:1.05em 2.1em; border:1px solid var(--line-dark); border-radius:100px;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chrome-100); background:transparent; overflow:hidden; isolation:isolate;
  transition: color var(--dur-s) var(--ease-muva), border-color var(--dur-s) var(--ease-muva);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold-400);
  transform:translateY(101%); transition:transform var(--dur-m) var(--ease-muva);
}
.btn:hover{ color:var(--navy-950); border-color:var(--gold-400); }
.btn:hover::before{ transform:translateY(0); }
.btn-solid{ background:var(--gold-400); color:var(--navy-950); border-color:var(--gold-400); }
.btn-solid::before{ background:var(--navy-950); }
.btn-solid:hover{ color:var(--chrome-100); }
.section-cream .btn{ color:var(--cream-ink); border-color:var(--line-light); }
.section-cream .btn:hover{ color:var(--cream-50); }

/* ---------- grain / vignette ---------- */
.grain{
  pointer-events:none; position:fixed; inset:0; z-index:998; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:999; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--gold-400); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(201,167,105,.55); transition:width .25s var(--ease-muva), height .25s var(--ease-muva), border-color .25s; }
.cursor-ring.is-active{ width:64px; height:64px; border-color:var(--gold-400); background:rgba(201,167,105,.08); }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:1000; background:var(--navy-950);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
#preloader .pl-word{ font-family:'Fraunces'; font-weight:400; font-size:clamp(30px,6vw,58px); letter-spacing:.03em; color:var(--chrome-100); }
#preloader .pl-bar-row{ display:flex; align-items:center; gap:16px; }
#preloader .pl-bar{ width:220px; height:1px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; }
#preloader .pl-bar i{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--gold-400); display:block; }
#preloader .pl-pct{ font-family:'Fraunces'; font-style:italic; font-size:13px; color:var(--gold-300); width:34px; }
#preloader .pl-tag{ font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--steel-400); }

/* ---------- nav ---------- */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:500; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6vw; transition:background var(--dur-m) var(--ease-muva), border-color var(--dur-m) var(--ease-muva), transform .5s var(--ease-muva);
  border-bottom:1px solid transparent;
}
#nav.is-solid{ background:rgba(5,7,12,.72); backdrop-filter:blur(14px) saturate(140%); border-color:var(--line-dark); }
#nav.nav-hide{ transform:translateY(-100%); }
#nav .nav-logo{ font-family:'Fraunces'; font-size:22px; letter-spacing:.06em; color:var(--chrome-100); display:flex; align-items:center; gap:10px;}
#nav .nav-logo small{ font-family:'Inter'; font-size:9px; letter-spacing:.2em; color:var(--steel-400); font-style:normal; text-transform:uppercase; }
#nav-links{ display:flex; align-items:center; gap:2.4vw; }
#nav-links a{
  position:relative; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-300);
  padding:6px 0; transition:color .3s;
}
#nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-400); transition:width .35s var(--ease-muva); }
#nav-links a:hover,#nav-links a.is-active{ color:var(--chrome-100); }
#nav-links a:hover::after,#nav-links a.is-active::after{ width:100%; }
#nav .nav-cta{ display:flex; align-items:center; gap:22px; }
#nav .btn{ padding:.8em 1.6em; font-size:10.5px; }
#nav-burger{ display:none; width:26px; height:18px; position:relative; background:none; border:none; }
#nav-burger span{ position:absolute; left:0; right:0; height:1px; background:var(--chrome-100); transition:transform .35s var(--ease-muva), opacity .3s; }
#nav-burger span:nth-child(1){ top:0; }
#nav-burger span:nth-child(2){ top:50%; margin-top:-.5px; }
#nav-burger span:nth-child(3){ bottom:0; }

/* progress rail */
#scroll-rail{ position:fixed; right:22px; top:0; bottom:0; width:2px; z-index:480; display:flex; align-items:center; }
#scroll-rail .rail-track{ position:relative; width:1px; height:34vh; background:var(--line-dark); }
#scroll-rail .rail-fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--gold-400); }
@media (max-width:900px){ #scroll-rail{ display:none; } }

/* section index counter — sits above the scroll rail, ticks as sections pass */
#section-counter{
  position:fixed; right:20px; top:50%; margin-top:-19vh; z-index:480;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Fraunces'; font-style:italic; color:var(--steel-300); opacity:0; transition:opacity .5s var(--ease-muva);
}
#section-counter.is-visible{ opacity:.8; }
#section-counter .sc-cur{ font-size:15px; }
#section-counter .sc-total{ font-size:9px; font-family:'Inter'; font-style:normal; letter-spacing:.1em; color:var(--steel-400); }
@media (max-width:900px){ #section-counter{ display:none; } }

/* ---------- marquee ticker ---------- */
.marquee{ position:relative; overflow:hidden; background:var(--navy-900); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:22px 0; }
.marquee .mq-track{ display:flex; width:max-content; white-space:nowrap; will-change:transform; }
.marquee .mq-item{
  display:inline-flex; align-items:center; gap:28px; padding:0 28px;
  font-family:'Fraunces'; font-style:italic; font-weight:400; font-size:clamp(18px,2.6vw,30px); color:var(--steel-300);
}
.marquee .mq-item b{ font-style:normal; font-weight:400; color:var(--gold-300); }
.marquee .mq-item .mq-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-400); display:inline-block; font-style:normal; }

/* ============ HERO — pinned, bubble-mask reveal into the tower ============ */
/* #hero-wrap supplies the scroll runway; GSAP pins #hero itself for that
   distance while scrubbing a growing transparent "bubble" through hero-bg-a
   (the campaign portrait, on top) to expose hero-bg-b (the full tower, behind)
   — a circular mask driven by a --hole custom property, not a second image
   swapped in, so it stays one continuous, GPU-cheap transform+mask animation. */
#hero-wrap{ position:relative; }
#hero{ height:100vh; height:100dvh; min-height:640px; overflow:hidden; }
#hero .hero-bg{ position:absolute; inset:-2%; background-size:cover; will-change:transform; }
#hero .hero-bg-a{
  z-index:2; background-position:38% 22%; filter:blur(3px) saturate(1.05);
  --hole:0;
  -webkit-mask-image: radial-gradient(circle at 50% 64%, transparent 0%, transparent calc(var(--hole) * 1% - 2%), #000 calc(var(--hole) * 1%));
          mask-image: radial-gradient(circle at 50% 64%, transparent 0%, transparent calc(var(--hole) * 1% - 2%), #000 calc(var(--hole) * 1%));
}
#hero .hero-bg-b{ z-index:1; background-position:38% 42%; background-color:#0b0f1a; }
#hero .hero-scrim{ position:absolute; inset:0; z-index:3; background:
  linear-gradient(180deg, rgba(5,7,12,.74) 0%, rgba(5,7,12,.6) 30%, rgba(5,7,12,.68) 68%, rgba(5,7,12,.97) 100%); }
#hero .hero-inner{ position:relative; z-index:4; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 6vw; }
#hero .hero-eyebrow{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--steel-300); margin-bottom:26px; opacity:.9; }
#hero .hero-word{ font-family:'Fraunces'; font-weight:300; font-size:clamp(64px,15vw,190px); line-height:.92; color:var(--chrome-100); letter-spacing:.01em; }
#hero .hero-word .char{ display:inline-block; }
#hero .hero-tag{ margin-top:18px; font-family:'Fraunces'; font-style:italic; font-weight:400; font-size:clamp(18px,2.6vw,30px); color:var(--gold-300); }
#hero .hero-sub{ margin-top:30px; max-width:640px; font-size:15px; line-height:1.9; color:var(--steel-300); }
#hero .hero-scroll{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:4; }
#hero .hero-scroll span{ font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--steel-400); }
#hero .hero-scroll .line{ width:1px; height:44px; background:linear-gradient(180deg, var(--gold-400), transparent); position:relative; overflow:hidden; }
#hero .hero-scroll .line i{ position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--chrome-100); animation:scrollDrip 1.8s var(--ease-muva) infinite; }
@keyframes scrollDrip{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%;} }
#hero .hero-reveal-cap{
  position:absolute; left:50%; bottom:9vh; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; text-align:center;
}
#hero .hero-reveal-cap .eyebrow{ justify-content:center; }
#hero .hero-reveal-cap .hero-reveal-word{ font-family:'Fraunces'; font-style:italic; font-size:clamp(20px,2.6vw,28px); color:#fff; }

/* ============ STATEMENT ============ */
#statement{ min-height:100vh; display:flex; align-items:center; padding:16vh 0; }
#statement .st-lines{ max-width:1000px; margin:0 auto; padding:0 6vw; }
#statement .st-line{
  font-family:'Fraunces'; font-weight:300; font-size:clamp(22px,4vw,44px); line-height:1.35;
  color:rgba(238,241,245,.22); margin-bottom:.25em;
}
#statement .st-line em{ font-style:italic; color:var(--gold-300); font-weight:400; }
#statement .st-line.is-lit{ color:var(--chrome-100); }

/* ============ ENDERECO (parallax) ============ */
.parallax-section{ height:100vh; height:100dvh; min-height:560px; overflow:hidden; }
.parallax-section.parallax-short{ height:72vh; height:72dvh; min-height:420px; }
.parallax-section .pl-bg-wrap{ position:absolute; inset:-8% ; overflow:hidden; }
.parallax-section .pl-bg{ position:absolute; inset:0; background-size:cover; background-position:50% 50%; width:100%; height:116%; }
.parallax-section .pl-scrim{ position:absolute; inset:0; }
.parallax-section .pl-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; }
#endereco .pl-scrim{ background:linear-gradient(0deg, var(--navy-950) 0%, rgba(5,7,12,.35) 38%, rgba(5,7,12,.15) 60%, rgba(5,7,12,.7) 100%); }
#endereco .addr-kicker{ font-family:'Fraunces'; font-style:italic; color:var(--steel-300); font-size:15px; margin-bottom:14px; }
#endereco h2{ font-size:clamp(34px,6.4vw,84px); font-weight:300; line-height:1; }
#endereco h2 b{ font-weight:600; color:var(--gold-300); }
#endereco .addr-sub{ margin-top:22px; max-width:520px; color:var(--steel-300); font-size:15px; line-height:1.85; }
#endereco .addr-pin{ margin-top:34px; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-300); }
#endereco .addr-pin .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-400); box-shadow:0 0 0 5px rgba(201,167,105,.18); }

/* ============ BAIRRO ============ */
#bairro{ padding:14vh 0 12vh; }
#bairro .bairro-copy h2{ font-size:clamp(30px,4.6vw,58px); font-weight:300; margin-top:16px; max-width:640px; }
#bairro .bairro-copy h2 i{ color:var(--gold-300); font-style:italic; }
#bairro .bairro-copy p{ margin-top:26px; max-width:640px; color:var(--steel-300); font-size:15px; line-height:1.9; }
#bairro .bairro-img{ position:relative; border-radius:2px; overflow:hidden; aspect-ratio:21/9; margin-top:7vh; }
#bairro .bairro-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
@media (max-width:760px){ #bairro .bairro-img{ aspect-ratio:4/5; } #bairro .bairro-img img{ object-position:15% 30%; } }
#bairro .cat-grid{ margin-top:9vh; display:grid; grid-template-columns:repeat(4,1fr); gap:2.4vw; border-top:1px solid var(--line-dark); padding-top:5vh; }
#bairro .cat-col h3{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-300); font-family:'Inter'; font-weight:700; margin-bottom:18px; }
#bairro .cat-col li{ font-size:13.5px; color:var(--steel-300); padding:7px 0; border-top:1px solid var(--line-dark); }
#bairro .cat-col li:first-child{ border-top:none; }
@media (max-width:1100px){ #bairro .cat-grid{ gap:5vw; } }
@media (max-width:900px){ #bairro .bairro-grid{ grid-template-columns:1fr; } #bairro .cat-grid{ grid-template-columns:1fr 1fr; row-gap:5vh; } }

/* ============ BOULEVARD (paisagismo — parallax bridge para a Fachada) ============ */
#boulevard .pl-scrim{ background:linear-gradient(0deg, var(--navy-950) 0%, rgba(5,7,12,.18) 32%, rgba(5,7,12,.1) 58%, rgba(5,7,12,.6) 100%); }
#boulevard .pl-content{ justify-content:flex-end; padding-bottom:8vh; }
#boulevard .blvd-quote{ font-family:'Fraunces'; font-style:italic; font-weight:300; font-size:clamp(20px,3.1vw,32px); max-width:640px; color:#fff; line-height:1.4; }

/* ============ FACHADA (pinned zoom) ============ */
/* No fixed wrapper height here on purpose: GSAP's ScrollTrigger pins .fach-pin
   directly and generates its own pin-spacer sized to the `end` distance we pass
   in JS. An earlier version gave #fachada a hardcoded 220vh AND had no pin:true —
   that left 120vh of dead, un-pinned scroll space (the section content scrolled
   away while the zoom timeline kept running out of view = a "cut" section). */
/* contain (not cover) + a matching dark ground so the full tower — base to
   roofline — is always inside frame, on every viewport ratio, exactly as
   asked ("apresentar ela inteira"); the old cover-crop was zoomed in enough
   that the top of the tower was permanently off-screen. contain:layout paint
   plus animating transform only (never background-position/size) keeps the
   pinned zoom cheap to repaint. */
#fachada .fach-pin{ position:relative; height:100vh; height:100dvh; overflow:hidden; background:#0b0f1a; contain:layout paint; }
#fachada .fach-pin::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 55% at 50% 78%, rgba(201,167,105,.10), transparent 70%);
}
#fachada .fach-img{
  position:absolute; inset:0; z-index:1; background-size:contain; background-repeat:no-repeat;
  background-position:50% 100%; background-color:#0b0f1a; will-change:transform; transform:scale(1);
}
#fachada .fach-scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.15) 40%, rgba(5,7,12,.05) 60%, rgba(5,7,12,.55) 100%); }
#fachada .fach-content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:9vh; }
#fachada h2{ font-size:clamp(30px,5.4vw,66px); font-weight:300; max-width:820px; line-height:1.1; }
#fachada .fach-credit{ margin-top:22px; font-size:12px; letter-spacing:.08em; color:var(--steel-400); }
#fachada .fach-credit b{ color:var(--gold-300); font-weight:600; }

/* ============ PORTARIA (split) ============ */
#portaria{ padding:14vh 0; }
#portaria .port-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:6vw; align-items:center; }
#portaria .port-img{ overflow:hidden; aspect-ratio:8/5; }
#portaria .port-img img{ width:100%; height:100%; object-fit:cover; }
#portaria h2{ margin-top:16px; font-size:clamp(26px,3.6vw,42px); font-weight:300; line-height:1.35; max-width:480px; }
#portaria p.detail{ margin-top:24px; color:var(--steel-300); font-size:14.5px; line-height:1.9; max-width:440px; }
@media (max-width:900px){ #portaria .port-grid{ grid-template-columns:1fr; } }

/* ============ HALL SOCIAL (parallax — fecha a lacuna chegada → lar) ============ */
#hall-social .pl-scrim{ background:linear-gradient(0deg, var(--navy-950) 0%, rgba(5,7,12,.4) 35%, rgba(5,7,12,.12) 58%, rgba(5,7,12,.75) 100%); }
#hall-social .addr-kicker{ font-family:'Fraunces'; font-style:italic; color:var(--steel-300); font-size:15px; margin-bottom:14px; }
#hall-social h2{ font-size:clamp(30px,4.8vw,58px); font-weight:300; line-height:1.15; max-width:760px; }
#hall-social h2 b{ font-weight:600; color:var(--gold-300); }
#hall-social .addr-sub{ margin-top:22px; max-width:520px; color:var(--steel-300); font-size:15px; line-height:1.85; }

/* ============ O LAR — pinned scroll sequence ============ */
#o-lar-track{ position:relative; }
#o-lar-pin{ position:relative; height:100vh; height:100dvh; overflow:hidden; }
#o-lar-pin .lar-frame{ position:absolute; inset:0; opacity:0; }
#o-lar-pin .lar-frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); will-change:transform,opacity; }
#o-lar-pin .lar-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(24,20,13,.65) 0%, rgba(24,20,13,.15) 32%, transparent 55%), linear-gradient(0deg, rgba(24,20,13,.55), transparent 32%); pointer-events:none; }
#o-lar-pin .lar-head{ position:absolute; top:12vh; left:6vw; z-index:3; max-width:480px; }
#o-lar-pin .lar-head .eyebrow{ color:var(--gold-300); }
#o-lar-pin .lar-head h2{ margin-top:16px; font-size:clamp(30px,4.6vw,54px); color:#fff; font-weight:300; }
#o-lar-pin .lar-head p{ margin-top:14px; color:#e8e0cf; font-size:14px; max-width:400px; line-height:1.8; }
#o-lar-pin .lar-index{ position:absolute; left:6vw; bottom:8vh; z-index:3; display:flex; align-items:baseline; gap:14px; }
#o-lar-pin .lar-index .cur{ font-family:'Fraunces'; font-style:italic; font-size:34px; color:#fff; }
#o-lar-pin .lar-index .tot{ font-size:12px; color:#c9c2ac; }
#o-lar-pin .lar-index .room-name{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-300); margin-left:8px; }
#o-lar-pin .lar-list{ position:absolute; right:6vw; bottom:8vh; z-index:3; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
#o-lar-pin .lar-list .li{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); transition:color .35s; }
#o-lar-pin .lar-list .li.is-active{ color:#fff; }
#o-lar-intro{ padding:16vh 0 10vh; text-align:center; }
#o-lar-intro h2{ font-size:clamp(32px,5.2vw,64px); font-weight:300; max-width:820px; margin:16px auto 0; }
#o-lar-intro h2 i{ font-style:italic; color:var(--gold-600); }
#o-lar-intro .book-shot{ margin:7vh auto 0; max-width:760px; overflow:hidden; aspect-ratio:16/8; }
#o-lar-intro .book-shot img{ width:100%; height:100%; object-fit:cover; }
#o-lar-intro .book-cap{ margin-top:16px; font-family:'Fraunces'; font-style:italic; color:var(--gold-600); font-size:15px; }

/* ============ PLANTA BAIXA ============ */
#planta{ padding:14vh 0 4vh; }
#planta .planta-head{ text-align:center; margin-bottom:6vh; }
#planta .planta-head h2{ font-size:clamp(30px,4.8vw,58px); font-weight:300; margin-top:16px; }
#planta .specs{ display:flex; justify-content:center; gap:6vw; margin-top:5vh; flex-wrap:wrap; }
#planta .spec{ text-align:center; }
#planta .spec .num{ font-family:'Fraunces'; font-weight:300; font-size:clamp(34px,4.4vw,54px); color:var(--gold-600); }
#planta .spec .lbl{ margin-top:6px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-400); }
#planta-pin-wrap{ height:280vh; position:relative; }
/* Sticky is the only pin mechanism here (no GSAP `pin:` on this element) — mixing
   both caused GSAP's pin-spacer to fight the CSS sticky box and jump/cut the section. */
#planta-pin{ position:sticky; top:0; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#planta-pin .planta-stage{ position:relative; width:min(92vw,1100px); }
#planta-pin .planta-stage img{ width:100%; display:block; filter:drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
#planta-pin .hotspot{ position:absolute; transform:translate(-50%,-50%); opacity:0; cursor:pointer; }
#planta-pin .hotspot .dot{ width:11px; height:11px; border-radius:50%; background:var(--gold-500,#c9a769); border:2px solid var(--cream-50); box-shadow:0 0 0 5px rgba(201,167,105,.28); position:relative; z-index:2; transition:transform .3s var(--ease-muva); }
#planta-pin .hotspot .pulse{ position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--gold-400); animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(.5); opacity:.9;} 100%{ transform:scale(2.4); opacity:0;} }
#planta-pin .hotspot .tag{
  position:absolute; top:50%; left:16px; transform:translateY(-50%); white-space:nowrap;
  background:var(--cream-ink); color:var(--cream-50); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border-radius:2px; transition:background .3s;
}
#planta-pin .hotspot.align-left .tag{ left:auto; right:16px; }
#planta-pin .hotspot.is-active .dot{ transform:scale(1.35); }
#planta-pin .hotspot.is-active .tag{ background:var(--gold-600); }
/* clicking a hotspot fills this shared detail card instead of just a hover-style label —
   turns the floor plan from a decorative overlay into something you actually tap through */
#planta-pin .planta-detail{
  position:absolute; left:50%; bottom:-6vh; transform:translateX(-50%); z-index:4;
  min-width:260px; max-width:88vw; text-align:center; padding:14px 26px;
  background:var(--cream-ink); color:var(--cream-50); border-radius:3px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease-muva), bottom .35s var(--ease-muva);
}
#planta-pin .planta-detail.is-open{ opacity:1; bottom:-9vh; pointer-events:auto; }
#planta-pin .planta-detail .pd-room{ font-family:'Fraunces'; font-style:italic; color:var(--gold-300); font-size:16px; }
#planta-pin .planta-detail .pd-desc{ display:block; margin-top:4px; font-size:12.5px; color:#d9d3c2; line-height:1.6; }
@media (max-width:760px){ #planta-pin .planta-detail{ bottom:-9vh; } #planta-pin .planta-detail.is-open{ bottom:-11vh; } }
#planta .planta-foot{ text-align:center; padding:2vh 0 6vh; font-size:12px; color:var(--steel-400); }

/* ---------- floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:490; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
  transition:opacity .4s var(--ease-muva), transform .4s var(--ease-muva);
}
.wa-float.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.wa-float svg{ width:27px; height:27px; fill:#fff; }
@media (max-width:760px){ .wa-float{ width:50px; height:50px; right:16px; bottom:16px; } .wa-float svg{ width:24px; height:24px; } }
@media (max-width:760px){
  #planta-pin-wrap{ height:340vh; }
  #planta-pin .planta-stage{ width:96vw; }
  #planta-pin .hotspot .tag{ font-size:8px; padding:4px 6px; letter-spacing:.08em; }
  #planta-pin .hotspot .dot{ width:8px; height:8px; }
}

/* ============ LAZER — horizontal gallery ============ */
#lazer-wrap{ position:relative; }
#lazer-head{ padding:14vh 0 6vh; text-align:center; }
#lazer-head h2{ font-size:clamp(30px,4.8vw,58px); font-weight:300; margin-top:16px; }
#lazer-pin{ position:relative; height:100vh; height:100dvh; overflow:hidden; }
#lazer-track{ position:absolute; top:0; left:0; height:100%; display:flex; will-change:transform; }
#lazer-track .slide{ position:relative; width:100vw; height:100%; flex:0 0 auto; overflow:hidden; }
/* These campaign photos carried a small caption badge baked in near the top
   (and sometimes bottom) edge — a book design element, redundant with our own
   .slide-cap text — that a centered cover-crop sliced through on wide/short
   viewports. Trimmed those bands off the source images directly (see the
   image pipeline notes) rather than fighting it with object-position, since
   badges sit on different edges across the 11 photos and no single offset
   hid all of them. */
#lazer-track .slide img{ width:100%; height:100%; object-fit:cover; }
#lazer-track .slide .slide-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,7,12,.85) 0%, rgba(5,7,12,.05) 42%, rgba(5,7,12,.35) 100%); }
#lazer-track .slide .slide-cap{ position:absolute; left:6vw; bottom:9vh; right:6vw; max-width:640px; z-index:2; }
#lazer-track .slide .slide-num{ font-family:'Fraunces'; font-style:italic; color:var(--gold-300); font-size:14px; }
#lazer-track .slide h3{ margin-top:10px; font-size:clamp(24px,3.4vw,40px); font-weight:300; color:#fff; }
#lazer-track .slide p{ margin-top:12px; color:#d9d3c2; font-size:14px; line-height:1.8; max-width:480px; }
/* category quick-nav — click jumps the pinned horizontal scroll to that slide;
   the active pill also syncs back from scroll position (see JS) so it reads
   both as navigation and as a progress indicator. */
#lazer-pin .lazer-pills{ position:absolute; top:6vh; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:90vw; }
#lazer-pin .lazer-pills .lp{
  padding:.65em 1.4em; border:1px solid rgba(255,255,255,.25); border-radius:100px;
  background:rgba(5,7,12,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--steel-300); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:background .3s, color .3s, border-color .3s;
}
#lazer-pin .lazer-pills .lp.is-active{ background:var(--gold-400); color:var(--navy-950); border-color:var(--gold-400); }
/* Stays top-anchored on mobile too (not bottom) — the slide caption's height
   varies with copy length, so a bottom offset that clears it on a short slide
   collides with it on a longer one; the top edge is always just ceiling/sky. */
@media (max-width:760px){ #lazer-pin .lazer-pills{ top:calc(var(--nav-h-mobile) + 12px); gap:6px; } #lazer-pin .lazer-pills .lp{ padding:.5em .9em; font-size:8.5px; } }

/* ============ LIFESTYLE (campanha — beat emocional antes do CTA) ============ */
#lifestyle .pl-scrim{ background:linear-gradient(0deg, rgba(5,7,12,.6) 0%, rgba(5,7,12,.15) 30%, rgba(5,7,12,.1) 65%, rgba(5,7,12,.8) 100%); }
#lifestyle .pl-content{ align-items:center; text-align:center; justify-content:flex-end; padding-bottom:11vh; }
#lifestyle .lifestyle-quote{ font-family:'Fraunces'; font-weight:300; font-size:clamp(26px,4.6vw,54px); line-height:1.3; color:#fff; max-width:820px; }
#lifestyle .lifestyle-quote i{ font-style:italic; color:var(--gold-300); }

/* ============ SOBRE / CREDENCIAIS ============ */
#sobre{ padding:14vh 0; position:relative; overflow:hidden; }
#sobre .sobre-bg{
  position:absolute; inset:0 auto 0 0; width:42%; z-index:0; pointer-events:none;
  background-size:cover; background-position:30% 50%; opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 35%,transparent 100%);
}
#sobre > .wrap{ position:relative; z-index:1; }
#sobre .sobre-top{ max-width:640px; }
#sobre .sobre-top h2{ font-size:clamp(28px,4.2vw,48px); font-weight:300; margin-top:16px; }
#sobre .sobre-top p{ margin-top:20px; color:var(--steel-300); font-size:14.5px; line-height:1.9; }
#sobre .cred-grid{ margin-top:9vh; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark); }
#sobre .cred{ padding:5vh 2vw 5vh 0; border-right:1px solid var(--line-dark); }
#sobre .cred:last-child{ border-right:none; }
#sobre .cred .role{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300); }
#sobre .cred .name{ margin-top:12px; font-family:'Fraunces'; font-size:20px; font-weight:400; }
#sobre .cred .desc{ margin-top:10px; font-size:12.5px; color:var(--steel-400); line-height:1.7; }
@media (max-width:1100px){ #sobre .cred-grid{ grid-template-columns:1fr 1fr; } #sobre .cred{ border-bottom:1px solid var(--line-dark); } #sobre .cred:nth-child(2n){ border-right:none; } }
@media (max-width:900px){ #sobre .cred-grid{ grid-template-columns:1fr 1fr; } #sobre .cred{ border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:4vh 2vw; } }

/* ============ MICRO-CTA (soft asks scattered through the long scroll) ============ */
/* Always its own dark-navy band regardless of the surrounding section (cream
   or dark) — a consistent "punctuation mark" the visitor learns to recognize,
   contextual copy tied to whatever they just saw, all funneling to the one
   main #cta section rather than fragmenting into separate WhatsApp jumps. */
.micro-cta{
  position:relative; background:var(--navy-900); overflow:hidden;
  padding:9vh 6vw; display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
.micro-cta::before{
  content:""; position:absolute; left:50%; top:50%; width:560px; height:560px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(201,167,105,.11), transparent 70%); pointer-events:none;
}
.micro-cta p{ position:relative; font-family:'Fraunces'; font-style:italic; font-weight:300; font-size:clamp(19px,2.5vw,27px); color:var(--chrome-100); max-width:620px; line-height:1.5; }
.micro-cta p b{ font-style:normal; font-weight:600; color:var(--gold-300); }
.micro-cta .btn{ position:relative; }

/* ============ CTA ============ */
#cta{ padding:18vh 0 12vh; text-align:center; position:relative; overflow:hidden; }
#cta::before{ content:""; position:absolute; left:50%; top:-10%; width:900px; height:900px; transform:translateX(-50%); background:radial-gradient(circle, rgba(201,167,105,.12), transparent 65%); pointer-events:none; }
#cta h2{ position:relative; font-size:clamp(38px,7vw,96px); font-weight:300; line-height:1.02; }
#cta h2 i{ font-style:italic; color:var(--gold-300); }
#cta .cta-sub{ position:relative; margin:26px auto 0; max-width:480px; color:var(--steel-300); font-size:15px; line-height:1.8; }
#cta .cta-actions{ position:relative; margin-top:48px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
#cta .cta-contacts{ position:relative; margin-top:60px; display:flex; gap:40px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--steel-400); }
#cta .cta-contacts a{ color:var(--steel-300); border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
#cta .cta-contacts a:hover{ color:var(--gold-300); border-color:var(--gold-400); }

/* ============ FOOTER ============ */
#footer{ padding:8vh 0 5vh; border-top:1px solid var(--line-dark); }
#footer .foot-grid{ display:flex; justify-content:space-between; align-items:flex-end; gap:4vw; flex-wrap:wrap; }
#footer .foot-logos{ display:flex; align-items:center; gap:26px; }
#footer .foot-logos img{ height:30px; width:auto; opacity:.92; }
#footer .foot-word{ font-family:'Fraunces'; font-size:20px; }
#footer .foot-meta{ text-align:right; font-size:11px; color:var(--steel-400); line-height:1.9; max-width:420px; }
@media (max-width:760px){ #footer .foot-grid{ flex-direction:column; align-items:flex-start; } #footer .foot-meta{ text-align:left; } }

/* generic reveal utility applied via JS */
.js-reveal{ opacity:0; transform:translateY(46px); }
.js-fade{ opacity:0; }
.js-scale{ opacity:0; transform:scale(1.08); }
/* curtain wipe for headlines: clip-path driven (not yPercent transforms —
   those cache against the element's box height, and webfont swap reflow
   after load quietly desyncs the cached value from the real one, leaving
   the reveal stuck even though GSAP reports the tween as complete). */
.js-clip{ overflow:hidden; clip-path: inset(0 0 100% 0); }

/* magnetic interactive elements (buttons, hotspots) — JS sets --mx/--my via mousemove */
.magnetic{ --mx:0px; --my:0px; transition:transform .4s var(--ease-muva); }
.magnetic.is-near{ transition:transform .12s linear; transform:translate(var(--mx), var(--my)); }

@media (max-width:900px){
  #nav-links{ display:none; }
  #nav-burger{ display:block; }
  .wrap{ padding-left:7vw; padding-right:7vw; }
  #o-lar-pin .lar-list{ display:none; }
}

/* mobile full menu */
#mobile-menu{
  position:fixed; inset:0; z-index:600; background:var(--navy-950);
  display:flex; flex-direction:column; justify-content:center; padding:0 10vw;
  transform:translateY(-100%); transition:transform .55s var(--ease-muva);
}
#mobile-menu.is-open{ transform:translateY(0); }
#mobile-menu a{ font-family:'Fraunces'; font-size:32px; font-weight:300; padding:14px 0; border-bottom:1px solid var(--line-dark); }
#mobile-menu .mm-close{ position:absolute; top:26px; right:6vw; background:none; border:none; color:#fff; font-size:14px; letter-spacing:.2em; text-transform:uppercase; }