/* Lume Residências, conceito de lançamento. Direção em ../referencias/DIRECAO.md
   Uma família só (Archivo), esticada nos títulos e estreita nos números, como prancha de arquiteto. */
:root{
  --cal:#F2F1EE; --concreto:#E4E2DD; --concreto-escuro:#CFCCC5; --mata:#24372B; --mata-claro:#3F5A45; --folha:#A9B89C;
  --ferro:#1F2124; --grafite:#5F625F; --linha:#D3D0C9;
  --font:"Archivo",system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --gap:clamp(16px,2vw,32px);
  --space:clamp(96px,12vw,184px);
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--cal);color:var(--ferro);font-family:var(--font);font-size:17px;line-height:1.6;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
p,figure,dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--mata);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:#fff;color:#000;padding:10px 16px;z-index:200}
.skip:focus{top:12px}

.split .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.split .line > span{display:inline-block;will-change:transform}
.anim .split:not(.is-shown) .line > span{transform:translateY(110%)}
.split.is-shown .line > span{transform:none;transition:transform 1s var(--ease)}
.split.is-shown .line:nth-child(2) > span{transition-delay:.08s}
/* Títulos largos e pesados, como letreiro de prédio */
.title{font-size:clamp(40px,5.6vw,96px);line-height:.92;font-weight:800;font-variation-settings:"wdth" 118;letter-spacing:-.02em;text-transform:none}
/* Números estreitos, como cota em planta */
.num{font-variation-settings:"wdth" 62;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;text-decoration:none;font-weight:700;font-size:16px;font-variation-settings:"wdth" 108;transition:background-color .25s,color .25s}
.btn-light{background:#fff;color:var(--ferro)}
.btn-light:hover{background:var(--folha)}
.btn-dark{background:var(--mata);color:#fff}
.btn-dark:hover{background:var(--ferro)}

/* Cortina: oito faixas que sobem uma depois da outra */
.curtain{display:none}
.intro .curtain{display:flex;flex-direction:column;position:fixed;inset:0;z-index:150;pointer-events:none}
.curtain span{flex:1;background:var(--mata);margin-bottom:-1px;transform-origin:top;animation:floor-up .9s var(--ease-io) forwards}
.curtain span:nth-child(8){animation-delay:1.05s}.curtain span:nth-child(7){animation-delay:1.12s}.curtain span:nth-child(6){animation-delay:1.19s}
.curtain span:nth-child(5){animation-delay:1.26s}.curtain span:nth-child(4){animation-delay:1.33s}.curtain span:nth-child(3){animation-delay:1.4s}
.curtain span:nth-child(2){animation-delay:1.47s}.curtain span:nth-child(1){animation-delay:1.54s}
.curtain-word{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(64px,13vw,220px);font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:.02em;animation:word 1.9s var(--ease) forwards}
@keyframes floor-up{to{transform:scaleY(0)}}
@keyframes word{0%{opacity:0;letter-spacing:.3em}35%{opacity:1;letter-spacing:.02em}72%{opacity:1}100%{opacity:0}}
.intro .trck-banner{visibility:hidden}

.concept-bar{position:relative;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:9px var(--pad);background:var(--ferro);color:#BFC2BD;font-size:13px;text-align:center}
.concept-bar a{color:#fff;font-weight:600;text-underline-offset:3px}

.topbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 var(--pad);background:rgba(242,241,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);transform:translateY(-101%);transition:transform .5s var(--ease)}
.topbar.is-shown{transform:none}
.topbar-brand{font-size:24px;font-weight:900;font-variation-settings:"wdth" 125;text-decoration:none;letter-spacing:.02em}
.topbar-cta{display:flex;align-items:center;height:42px;padding:0 20px;background:var(--mata);color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.topbar-cta:hover{background:var(--ferro)}

/* Abertura: a fachada em vídeo, o texto à esquerda */
.hero{position:relative;min-height:calc(100svh - 38px);display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:var(--ferro);isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-1;background:url(/fotos/fachada.jpg) center/cover,linear-gradient(160deg,#4d5a4f,#1f2a22)}
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(20,24,21,.66) 0%,rgba(20,24,21,.3) 48%,rgba(20,24,21,0) 75%),
  linear-gradient(180deg,rgba(20,24,21,.45) 0%,rgba(20,24,21,0) 26%,rgba(20,24,21,0) 55%,rgba(20,24,21,.7) 100%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.nav{display:flex;align-items:center;gap:36px;padding:22px var(--pad)}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;font-size:30px;font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:.03em;margin-right:auto}
.brand small{margin-top:6px;font-size:12px;font-weight:500;font-variation-settings:"wdth" 100;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.nav-links{display:flex;gap:30px;font-size:15px}
.nav-links a{text-decoration:none;color:rgba(255,255,255,.82);transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;align-items:center;height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.6);text-decoration:none;font-weight:700;font-size:15px;transition:background-color .25s,color .25s}
.nav-cta:hover{background:#fff;color:var(--ferro)}
.hero-text{padding:0 var(--pad) clamp(40px,5vw,72px)}
.hero-kicker{font-size:16px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:18px}
.hero h1{font-size:clamp(54px,8.2vw,150px);line-height:.88;font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:-.025em}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 48px;margin-top:clamp(24px,3vw,40px);padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
.hero-foot p{max-width:44ch;font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.86)}
.js .hero h1 .line > span{transform:translateY(110%)}
.js .hero.is-in h1 .line > span{transform:none;transition:transform 1.15s var(--ease)}
.js .hero.is-in h1 .line:nth-child(2) > span{transition-delay:.1s}
.js .hero-kicker,.js .hero-foot{opacity:0}
.js .hero.is-in .hero-kicker,.js .hero.is-in .hero-foot{opacity:1;transition:opacity .9s ease .5s}
.intro .hero.is-in h1 .line > span{transition-delay:1.75s}
.intro .hero.is-in h1 .line:nth-child(2) > span{transition-delay:1.85s}
.intro .hero.is-in .hero-kicker,.intro .hero.is-in .hero-foot{transition-delay:2.2s}

/* Ficha */
.facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px var(--gap);padding:var(--space) var(--pad)}
.facts .title{grid-column:1 / span 7}
.facts-lead{grid-column:8 / span 5;align-self:end;color:var(--grafite);max-width:44ch}
.spec{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap);margin-top:clamp(40px,5vw,72px);border-top:2px solid var(--ferro)}
.spec div{padding-top:18px}
.spec dt{font-size:14px;font-weight:600;color:var(--grafite)}
.spec dd{font-size:clamp(44px,5.2vw,88px);line-height:1;font-weight:600;font-variation-settings:"wdth" 62;margin-top:10px;letter-spacing:-.01em}

/* A luz ao longo do dia */
.light{background:var(--ferro);color:#fff;padding:var(--space) 0}
.light-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap);padding:0 var(--pad)}
.light-head .title{grid-column:1 / span 7}
.light-head p{grid-column:8 / span 5;align-self:end;color:#C4C8C2;max-width:42ch}
.light-stage{position:relative;margin:clamp(48px,5vw,80px) var(--pad) 0;aspect-ratio:16/9;max-height:78vh;width:calc(100% - 2 * var(--pad));overflow:hidden;background:#2b2e2c url(/fotos/sala.jpg) center/cover}
.light-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.light-clock{position:absolute;left:clamp(16px,2.4vw,36px);bottom:clamp(14px,2vw,30px);display:flex;flex-direction:column;line-height:1;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.light-time{font-size:clamp(56px,8vw,140px);font-weight:600;font-variation-settings:"wdth" 62;letter-spacing:-.01em}
.light-moment{margin-top:8px;font-size:clamp(15px,1.3vw,19px);font-weight:600}
.light-control{padding:28px var(--pad) 0}
.light-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0}
.light-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#f3c46b,#f6efe0 45%,#e48a4a 78%,#2d3b6e)}
.light-range::-moz-range-track{height:2px;background:linear-gradient(90deg,#f3c46b,#f6efe0 45%,#e48a4a 78%,#2d3b6e)}
.light-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-14px;border-radius:50%;background:#fff;border:6px solid var(--ferro);box-shadow:0 0 0 1px #fff}
.light-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:6px solid var(--ferro);box-shadow:0 0 0 1px #fff}
.light-scale{display:flex;justify-content:space-between;font-size:13px;color:#9AA09A;font-variation-settings:"wdth" 80}

/* Escolha o andar */
.floors{background:var(--concreto);padding:var(--space) var(--pad)}
.floors-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--gap);margin-top:clamp(48px,5vw,80px);align-items:start}
.building{grid-column:1 / span 4;outline:none}
.building svg{display:block;width:100%;height:auto;max-height:78vh}
.floor{cursor:pointer;outline:none}
.floor .slab{fill:var(--cal);stroke:var(--ferro);stroke-width:1;transition:fill .25s}
.floor .glass{fill:none;stroke:var(--ferro);stroke-width:.5;opacity:.55}
.floor .plant{fill:var(--folha);transition:fill .25s}
.floor .label{font:600 9px var(--font);fill:var(--grafite);font-variation-settings:"wdth" 75}
.floor:hover .slab{fill:#fff}
.floor[aria-selected="true"] .slab{fill:var(--mata)}
.floor[aria-selected="true"] .glass{stroke:#fff;opacity:.4}
.floor[aria-selected="true"] .plant{fill:#7f9a6f}
.floor[aria-selected="true"] .label{fill:var(--mata);font-weight:800}
.floor:focus-visible .slab{stroke:var(--mata);stroke-width:2.5}
.ground .slab{fill:var(--concreto-escuro);stroke:var(--ferro)}
.ground .label{font:600 9px var(--font);fill:var(--grafite)}
.unit{grid-column:6 / span 7;position:sticky;top:96px}
.unit-floor{font-size:15px;font-weight:600;color:var(--mata)}
.unit-name{margin-top:6px;font-size:clamp(40px,4.6vw,76px);line-height:.95;font-weight:800;font-variation-settings:"wdth" 118;letter-spacing:-.02em}
.unit-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap);margin-top:28px;border-top:1px solid var(--ferro)}
.unit-spec div{padding-top:12px}
.unit-spec dt{font-size:13px;font-weight:600;color:var(--grafite)}
.unit-spec dd{margin-top:4px;font-size:clamp(22px,2vw,32px);line-height:1.1;font-weight:600;font-variation-settings:"wdth" 70}
.plan{margin-top:28px;background:var(--cal);padding:clamp(14px,2vw,28px)}
.plan svg{display:block;width:100%;height:auto}
.plan .room{fill:var(--cal);stroke:var(--ferro);stroke-width:.35}
.plan .green{fill:url(#hatch);stroke:var(--ferro);stroke-width:.35}
.plan .water{fill:#cfdfe0;stroke:var(--ferro);stroke-width:.35}
.plan .wall{fill:none;stroke:var(--ferro);stroke-width:1.6}
.plan text{font:600 2.6px var(--font);fill:var(--ferro);font-variation-settings:"wdth" 85}
.plan text.area{font-weight:400;fill:var(--grafite);font-size:2.2px}
.unit-note{margin-top:12px;font-size:13px;color:var(--grafite)}
.unit .btn{margin-top:28px}

/* Lazer: corre de lado */
.leisure{background:var(--mata);color:#fff;overflow:hidden}
/* No computador a seção fica presa na tela enquanto a faixa corre: tudo precisa caber numa tela só */
.leisure-track{display:flex;gap:var(--gap);align-items:stretch;padding:clamp(64px,9vh,110px) var(--pad);width:max-content}
.leisure-intro{width:min(32vw,500px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-right:var(--gap)}
.leisure-intro p{color:#CBD6C4;max-width:36ch}
.card{position:relative;width:min(28vw,46vh,440px);margin:0}
.card .img{position:relative;aspect-ratio:3/4;background-color:var(--mata-claro);background-size:cover;background-position:center}
.card figcaption{padding-top:16px;color:#CBD6C4;font-size:15px;max-width:36ch}
.card b{display:block;color:#fff;font-size:22px;font-weight:800;font-variation-settings:"wdth" 110;margin-bottom:4px}

/* O bairro */
.hood{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap);padding:var(--space) var(--pad)}
.hood .title{grid-column:1 / span 5;align-self:start}
.walk{grid-column:7 / span 6;list-style:none;margin:0;padding:0;border-top:2px solid var(--ferro)}
.walk li{display:grid;grid-template-columns:minmax(120px,30%) 1fr;align-items:baseline;gap:var(--gap);padding:18px 0;border-bottom:1px solid var(--linha);font-size:clamp(18px,1.6vw,24px);font-weight:500}
.walk-min{font-size:clamp(36px,3.6vw,60px);line-height:1;font-weight:600;font-variation-settings:"wdth" 62;color:var(--mata)}
.hood-note{grid-column:7 / span 6;margin-top:16px;font-size:13px;color:var(--grafite)}

.sales{background:var(--mata);color:#fff;padding:clamp(120px,14vw,220px) var(--pad)}
.sales h2{font-size:clamp(52px,8.6vw,156px);line-height:.88;font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:-.025em}
.sales p{margin:28px 0 36px;max-width:44ch;font-size:19px;color:#CBD6C4}

.footer{background:var(--ferro);color:#BFC2BD;padding:48px var(--pad) 64px;font-size:14px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--gap)}
.footer > p:nth-child(1){grid-column:span 3}
.footer > p:nth-child(2){grid-column:span 4}
.footer > p:nth-child(3){grid-column:span 4}
.footer > p:nth-child(4){grid-column:span 1;justify-self:end}
.footer-brand{font-size:24px;font-weight:900;font-variation-settings:"wdth" 125;color:#fff;line-height:1.1}
.footer-note{color:#8E928C}
.footer-cookies{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
  .nav-links{display:none}
  .facts,.light-head,.floors-grid,.hood,.footer{grid-template-columns:1fr}
  .facts .title,.facts-lead,.light-head .title,.light-head p,.building,.unit,.hood .title,.walk,.hood-note{grid-column:1}
  .spec,.unit-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec div,.unit-spec div{padding-bottom:16px}
  .light-stage{margin-left:0;margin-right:0;width:100%;aspect-ratio:4/5;max-height:none}
  .building svg{max-height:60vh;margin:0 auto}
  .unit{position:static}
  .leisure{overflow:visible}
  .leisure-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .leisure-track::-webkit-scrollbar{display:none}
  .leisure-intro{width:78vw;flex:none;scroll-snap-align:start}
  .spec dd{font-size:clamp(34px,9vw,56px)}
  .sales h2{font-size:clamp(40px,11.4vw,80px)}
  .card{width:72vw;flex:none;scroll-snap-align:start}
  .walk{margin-top:40px}
  .footer > p{grid-column:1 !important;justify-self:start !important}
}
@media (max-width:560px){
  .nav{padding:16px var(--pad)}
  .brand{font-size:24px}
  .nav-cta{height:40px;padding:0 14px;font-size:14px}
  .hero h1{font-size:clamp(46px,13.6vw,96px)}
}
@media (prefers-reduced-motion:reduce){
  .intro .curtain{display:none}
  .js .hero h1 .line > span,.anim .split:not(.is-shown) .line > span{transform:none}
  .js .hero-kicker,.js .hero-foot{opacity:1}
}