/* ONDE MORAR · módulo secoes/onde-morar — só tokens do site (DESIGN.md "Tokens"); todo seletor começa com .s-onde-morar */

.s-onde-morar{position:relative;background:var(--noite);color:var(--creme);padding-top:var(--secao);overflow:hidden}
.s-onde-morar svg{width:1em;height:1em;flex:none}

/* ---------- cabeça ---------- */
.s-onde-morar-cabeca{display:grid;gap:clamp(22px,3vw,40px);padding:0 var(--lado);margin-bottom:clamp(48px,6vw,96px)}
.s-onde-morar-titulo{margin:0;font-weight:400}
.s-onde-morar-caps{display:block;overflow:hidden;padding-bottom:.04em}
.s-onde-morar-caps>span{display:block;font:400 var(--t-mega)/.92 var(--serif);font-stretch:82%;text-transform:uppercase;letter-spacing:-.005em;color:var(--creme)}
.s-onde-morar-gigante{display:block;margin:-.04em 0 0 .32em;font:italic 300 min(var(--t-gigante),12.6vw)/.84 var(--serif);font-stretch:100%;letter-spacing:-.02em;color:var(--bronze-claro);white-space:nowrap;transform-origin:0 70%}
.s-onde-morar-intro{margin:0;max-width:34rem;color:var(--creme-2);font-size:1.0625rem;line-height:1.65}
@media (min-width:1000px){
  .s-onde-morar-intro{justify-self:end;margin-top:.4em}
}

/* ---------- rótulos estendidos ---------- */
.s-onde-morar-lugar,.s-onde-morar-legenda,.s-onde-morar-ver span,.s-onde-morar-hud-n,.s-onde-morar-hud-nome,.s-onde-morar-hud-dica{font-family:var(--sans);font-stretch:125%;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-rotulo)}

/* ---------- palco + trilho (sem GSAP/movimento: deslize nativo para o lado) ---------- */
.s-onde-morar-palco{position:relative}
.s-onde-morar-trilho{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.s-onde-morar-trilho::-webkit-scrollbar{display:none}
.s-onde-morar-cap{position:relative;flex:0 0 100%;width:100%;scroll-snap-align:start;display:grid;grid-template-rows:auto auto;align-content:start;gap:clamp(16px,2.4svh,26px);padding:8px var(--lado) 28px;box-sizing:border-box}

/* ---------- capítulo ---------- */
.s-onde-morar-foto{position:relative;margin:0;height:clamp(220px,34svh,380px);overflow:hidden;background:var(--noite-2)}
.s-onde-morar-foto img{position:absolute;top:0;left:-6%;width:112%;max-width:none;height:100%;object-fit:cover;will-change:transform}
.s-onde-morar-foto::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--noite) 66%,transparent) 100%);pointer-events:none}
.s-onde-morar-foto::after{content:"";position:absolute;inset:var(--moldura-in);z-index:1;border:1px solid var(--moldura);border-bottom:0;pointer-events:none}
.s-onde-morar-legenda{position:absolute;left:var(--moldura-in);right:var(--moldura-in);bottom:var(--moldura-in);z-index:2;display:flex;align-items:center;gap:10px;transform:translateY(50%);font-size:.72rem;letter-spacing:.12em;color:var(--creme)}
@media (max-width:599px){.s-onde-morar-legenda{letter-spacing:.06em}.s-onde-morar-cidade{display:none}}
.s-onde-morar-legenda i{flex:0 0 14px;height:1px;background:var(--moldura)}
.s-onde-morar-legenda i:last-child{flex:1 1 auto}
.s-onde-morar-legenda a,.s-onde-morar-legenda span{color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s-onde-morar-legenda a:hover{color:var(--ouro-claro)}

.s-onde-morar-texto{position:relative;z-index:2;display:grid;gap:clamp(10px,1.6svh,18px);align-content:start;justify-items:start;min-width:0}
.s-onde-morar-lugar{display:flex;flex-wrap:wrap;align-items:center;margin:0;color:var(--ouro-claro)}
.s-onde-morar-num{display:inline-flex;align-items:center;gap:12px;margin-right:12px;font-variant-numeric:tabular-nums}
.s-onde-morar-num::after{content:"";width:clamp(22px,4vw,56px);height:1px;background:var(--moldura)}
.s-onde-morar-frase{margin:0;font-weight:400;line-height:.9}
.s-onde-morar-frase span{display:block;font:400 clamp(1.9rem,4.2vw,4.1rem)/.95 var(--serif);font-stretch:82%;text-transform:uppercase;letter-spacing:-.005em;color:var(--creme)}
.s-onde-morar-frase em{display:block;margin:-.02em 0 0 .18em;padding-bottom:.16em;font:italic 300 var(--t-gigante)/.86 var(--serif);font-stretch:100%;letter-spacing:-.025em;color:var(--bronze-claro);white-space:nowrap}
.s-onde-morar-fatos{list-style:none;margin:0;padding:0;display:grid;max-width:31rem;width:100%}
.s-onde-morar-fatos li{display:flex;gap:14px;align-items:baseline;padding:clamp(7px,1.1svh,12px) 0;border-top:1px solid var(--linha-clara);color:var(--creme-2);font-size:.98rem;line-height:1.45}
.s-onde-morar-fatos li::before{content:"";flex:none;width:14px;height:1px;background:var(--bronze-claro);transform:translateY(-4px)}
.s-onde-morar-ver{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 20px 0 18px;border:1px solid var(--moldura);border-radius:2px;color:var(--creme);text-decoration:none;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.s-onde-morar-ver b{font:400 2rem/1 var(--serif);font-variant-numeric:lining-nums proportional-nums;color:var(--ouro-claro);transition:color .35s var(--ease)}
.s-onde-morar-ver svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.s-onde-morar-ver:hover{background:var(--ouro-claro);border-color:var(--ouro-claro);color:var(--noite)}
.s-onde-morar-ver:hover b{color:var(--noite)}
.s-onde-morar-ver:hover svg{transform:translateX(4px)}

/* ---------- HUD 01 / 04 ---------- */
.s-onde-morar-hud{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:6px var(--lado) clamp(56px,8vw,96px)}
.s-onde-morar-hud-seta{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linha-clara);border-radius:50%;background:transparent;color:var(--creme);cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease),opacity .3s}
.s-onde-morar-hud-seta svg{width:18px;height:18px}
.s-onde-morar-hud-seta:hover{border-color:var(--ouro-claro);color:var(--ouro-claro)}
.s-onde-morar-hud-seta:disabled{opacity:.3;cursor:default;border-color:var(--linha-clara);color:var(--creme)}
.s-onde-morar-hud-n{min-width:5.6em;text-align:center;color:var(--creme-2);font-variant-numeric:tabular-nums}
.s-onde-morar-hud-n b{font-weight:600;color:var(--creme)}
.s-onde-morar-hud-barra{display:flex;gap:6px;margin-left:6px}
.s-onde-morar-hud-barra i{display:block;width:clamp(18px,3vw,44px);height:1px;background:var(--linha-clara);transition:background-color .4s var(--ease)}
.s-onde-morar-hud-barra i.s-onde-morar-on{background:var(--bronze-claro)}
.s-onde-morar-hud-nome{display:none;margin-left:10px;color:var(--creme)}
.s-onde-morar-hud-dica{display:none;margin-left:auto;color:var(--creme-2)}
@media (min-width:900px){.s-onde-morar-hud-nome{display:block}}

/* ---------- computador: texto à esquerda, foto alta à direita ---------- */
@media (min-width:900px){
  .s-onde-morar-cap{grid-template-columns:minmax(0,40rem) auto;grid-template-rows:1fr;align-items:center;justify-content:center;column-gap:clamp(48px,7vw,128px);padding:8px var(--lado) 32px}
  .s-onde-morar-foto{grid-column:2;grid-row:1;height:min(calc(100svh - 230px),860px);min-height:420px;aspect-ratio:4/5}
  .s-onde-morar-frase span{font-size:clamp(2.4rem,4.4vw,4.6rem)}
  .s-onde-morar-texto{grid-column:1;grid-row:1}
}

/* ---------- modo preso (GSAP + ScrollTrigger): a rolagem vertical leva o trilho para o lado ---------- */
.s-onde-morar-fixo .s-onde-morar-palco{height:100vh;height:100svh;overflow:hidden}
.s-onde-morar-fixo .s-onde-morar-trilho{overflow:visible;height:100%;width:max-content;scroll-snap-type:none;will-change:transform}
.s-onde-morar-fixo .s-onde-morar-cap{flex:0 0 auto;height:100%;padding-top:clamp(72px,10svh,104px);padding-bottom:clamp(150px,19svh,176px)}
.s-onde-morar-fixo .s-onde-morar-hud{position:absolute;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));padding:0 var(--lado)}
.s-onde-morar-fixo .s-onde-morar-hud-dica{display:block}
@media (max-width:899px){.s-onde-morar-fixo .s-onde-morar-hud-dica{display:none}}
@media (min-width:900px){
  .s-onde-morar-fixo .s-onde-morar-cap{padding-top:clamp(84px,11svh,112px);padding-bottom:clamp(88px,11svh,112px)}
  .s-onde-morar-fixo .s-onde-morar-hud{bottom:clamp(26px,4svh,40px)}
  .s-onde-morar-fixo .s-onde-morar-foto{height:min(calc(100svh - 196px),880px)}
}
/* celular: duas linhas de fato (a 1ª e a do portfólio) */
@media (max-width:899px){
  .s-onde-morar-fixo .s-onde-morar-foto{height:clamp(200px,30svh,340px)}
  .s-onde-morar-fatos li:nth-child(2){display:none}
}
/* telas baixas: menos texto para caber */
@media (max-width:899px) and (max-height:760px){
  .s-onde-morar-foto{height:clamp(170px,27svh,260px)}
  .s-onde-morar-fatos li:nth-child(n+2){display:none}
  .s-onde-morar-frase em{font-size:min(var(--t-gigante),13vw)}
}
@media (min-width:900px) and (max-height:760px){
  .s-onde-morar-fatos li:nth-child(3){display:none}
}