/* Casa Bela Vista — página de vendas
   Linguagem de página de produto: preto nas partes imersivas, off-white quente
   (a cor das paredes) nas informativas, e o terracota da fachada só na ação. */

:root {
  --preto: #000;
  --carvao: #161412;
  --tinta: #1D1B19;
  --cinza: #6E6A65;
  --cinza-claro: #A8A29B;
  --nevoa: #F5F3EF;
  --branco: #FFFFFF;
  --claro: #F2F0EC;
  --terracota: #7A2C1E;
  --terracota-escura: #63231A;
  --linha: rgba(29, 27, 25, .12);

  --fonte: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --margem: clamp(1.25rem, 5vw, 3rem);
  --raio: 28px;
  --secao: clamp(5.5rem, 13vw, 10rem);
  /* espaço reservado para o botão flutuante no rodapé da tela */
  --folga: calc(env(safe-area-inset-bottom) + 5.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--preto); color: var(--tinta);
  font: 400 1.0625rem/1.47 var(--fonte); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

.pular { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--branco); color: var(--tinta); padding: .7rem 1rem; border-radius: 10px; }
.pular:focus { top: 1rem; }

/* ---------- tipografia comum ---------- */
.cabeca { max-width: 50rem; margin: 0 auto; padding: 0 var(--margem); text-align: center; }
.sobre { font-size: clamp(1rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -.01em; color: var(--terracota); }
.titulo {
  margin-top: .35rem;
  font-size: clamp(2.5rem, 7.4vw, 5rem); font-weight: 600; line-height: 1.04; letter-spacing: -.045em;
  text-wrap: balance;
}
.intro { margin: 1.1rem auto 0; max-width: 38rem; font-size: clamp(1.0625rem, 2.1vw, 1.3125rem); line-height: 1.42; color: var(--cinza); text-wrap: pretty; }

/* ---------- botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.75rem; padding: .7rem 1.4rem; border-radius: 999px;
  background: var(--terracota); color: var(--branco);
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em;
  transition: background-color .2s, transform .2s;
}
.botao:hover { background: var(--terracota-escura); }
.botao:active { transform: scale(.98); }
.botao--grande { min-height: 3.25rem; padding: .9rem 1.9rem; font-size: 1.125rem; }
.icone { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.link { color: var(--terracota); font-weight: 500; }
.link::after { content: " ›"; }
.link:hover { text-decoration: underline; }
.link--claro { color: rgba(255, 255, 255, .88); }
.nota-cta { margin-top: .9rem; font-size: .875rem; color: var(--cinza); }

/* ---------- botão flutuante de visita ---------- */
.flutua {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: flex; opacity: 0; transform: translateY(calc(100% + 28px)); pointer-events: none;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.flutua.is-on { opacity: 1; transform: none; pointer-events: auto; }
.flutua .botao { flex: 1; min-height: 3.25rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .32); }
.flutua__info { display: none; }
@media (min-width: 900px) {
  .flutua {
    left: auto; right: 24px; bottom: 24px; align-items: center; gap: 1.1rem;
    padding: 7px 7px 7px 22px; border-radius: 999px; color: var(--claro);
    background: rgba(22, 20, 18, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08);
  }
  .flutua__info { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -.015em; }
  .flutua .botao { flex: none; min-height: 2.75rem; box-shadow: none; }
}

/* ---------- 1. capa ---------- */
.capa { position: relative; height: 360vh; background: var(--preto); color: var(--claro); }
.capa__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.capa__cena {
  position: absolute; inset: 0; z-index: 0;
  transform: translate3d(0, var(--ty, 0vh), 0) scale(var(--s, 1));
  will-change: transform;
}
.capa__cena picture, .capa__foto { width: 100%; height: 100%; }
.capa__foto { object-fit: cover; }
.capa__palco::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 32%);
}
.capa__texto {
  position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 7vh); z-index: 4;
  padding: 0 var(--margem); text-align: center;
  opacity: var(--t, 1); transform: translateY(calc((1 - var(--t, 1)) * -24px));
}
.capa__local { font-size: .9375rem; font-weight: 500; color: rgba(242, 240, 236, .72); }
.capa__titulo { margin-top: .5rem; font-size: clamp(3.25rem, 13vw, 8rem); font-weight: 600; line-height: .98; letter-spacing: -.055em; }
.capa__frase { margin-top: .8rem; font-size: clamp(1.25rem, 3.8vw, 2rem); font-weight: 500; letter-spacing: -.025em; color: rgba(242, 240, 236, .86); }
.capa__legenda {
  position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 8vh); z-index: 4; padding: 0 var(--margem);
  text-align: center; font-size: clamp(1.625rem, 4.4vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance;
  opacity: var(--leg, 0); transform: translateY(calc((1 - var(--leg, 0)) * 16px));
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.capa__rolar {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 2.2rem); z-index: 4; transform: translateX(-50%);
  font-size: .8125rem; color: rgba(242, 240, 236, .7); opacity: var(--r, 1);
}
.capa__rolar::after {
  content: ""; display: block; width: 8px; height: 8px; margin: .55rem auto 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  animation: desce 1.8s ease-in-out infinite;
}
@keyframes desce { 50% { transform: translateY(5px) rotate(45deg); } }
@media (min-aspect-ratio: 4/5) {
  /* a fachada começa como um quadro com cantos arredondados */
  .capa__cena { overflow: hidden; border-radius: calc((1 - var(--z, 0)) * 36px); }
}

/* ---------- anotações: ponto na imagem, linha fina e rótulo ---------- */
.notas__linhas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55));
}
.notas__linhas path {
  fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease-in;
}
.notas__linhas path.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .2, 1); }
.notas__pontos { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nota__ponto {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  transform: scale(0); transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.nota__ponto::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); }
.nota__ponto::after { content: ""; position: absolute; inset: 6.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); }
.nota__ponto.is-on { transform: scale(1); }
.nota__ponto.is-ativa::before { animation: pulso 1.8s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

.notas__rotulos { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.nota__rotulo {
  position: absolute; left: 0; top: 0; color: var(--claro);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.nota__rotulo.is-on { opacity: 1; transform: none; transition: opacity .55s .3s, transform .55s .3s cubic-bezier(.2, .7, .2, 1); }
.nota__rotulo strong { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 22px; letter-spacing: -.015em; }
.nota__rotulo span { display: block; margin-top: .15rem; font-size: .875rem; line-height: 1.4; color: rgba(242, 240, 236, .62); text-wrap: balance; }
[data-modo="colunas"] .nota__rotulo[data-lado="esq"] { text-align: right; }

/* celular: um destaque por vez, numa legenda no rodapé da tela */
[data-modo="passo"] .notas__rotulos { inset: auto var(--margem) var(--folga) var(--margem); height: 4.6rem; }
[data-modo="passo"] .notas__rotulos::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 1px; background: rgba(255, 255, 255, .26);
  opacity: var(--nota, 0); transition: opacity .3s;
}
[data-modo="passo"] .nota__rotulo { right: 0; }
[data-modo="passo"] .nota__rotulo strong { font-size: 1.1875rem; }
[data-modo="passo"] .nota__rotulo span { font-size: .9375rem; color: rgba(242, 240, 236, .74); }
[data-modo="passo"] .nota__ponto.is-on:not(.is-ativa) { opacity: .6; }

/* lista numerada abaixo da imagem (fora de seções presas na tela) */
[data-modo="lista"] .notas__linhas { display: none; }
[data-modo="lista"] .nota__ponto::before { display: none; }
[data-modo="lista"] .nota__ponto::after {
  inset: 0; content: attr(data-n); display: grid; place-items: center;
  color: var(--tinta); font: 600 .75rem/1 var(--fonte); box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
[data-modo="lista"] .notas__rotulos { position: static; display: grid; gap: 1.1rem; margin-top: 1.75rem; counter-reset: nota; }
[data-modo="lista"] .nota__rotulo { position: relative; padding-left: 2.4rem; opacity: 1; transform: none; }
[data-modo="lista"] .nota__rotulo::before {
  counter-increment: nota; content: counter(nota);
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--claro); color: var(--tinta); font-size: .75rem; font-weight: 600;
}

/* ---------- seções claras ---------- */
.claro { background: var(--nevoa); }
.estilos, .decor, .jardim, .numeros, .acabamento, .hoje, .local, .faq { padding: var(--secao) 0; }
.numeros, .hoje, .faq { background: var(--branco); }
.acabamento { background: var(--nevoa); }

/* ---------- 2 e 4. configuradores ---------- */
.config { max-width: 1180px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--margem); }
.config__quadro { position: relative; aspect-ratio: 3 / 2; border-radius: var(--raio); overflow: hidden; background: #E7E2DA; }
/* no celular a imagem fica presa no topo enquanto a pessoa escolhe as opções */
@media (max-width: 899px) {
  .config__quadro { position: sticky; top: calc(env(safe-area-inset-top) + .75rem); z-index: 3; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
}
.config__quadro--43 { aspect-ratio: 4 / 3; }
.config__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.config__img.is-atual { opacity: 1; }
.config__legenda {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%);
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: .8125rem; font-weight: 500; color: var(--tinta);
}
.config__controles { display: grid; gap: 1.6rem; justify-items: center; margin-top: 2rem; }
.grupo { display: grid; gap: .8rem; justify-items: center; }
.grupo__nome { font-size: .875rem; font-weight: 600; color: var(--cinza); }
.amostras { display: flex; gap: clamp(1rem, 4vw, 1.75rem); }
.amostra { display: grid; justify-items: center; gap: .5rem; padding: 0; border: 0; background: none; cursor: pointer; font-size: .8125rem; font-weight: 500; color: var(--cinza); }
.amostra span {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s;
}
.amostra.is-ativa { color: var(--tinta); }
.amostra.is-ativa span { outline-color: var(--tinta); }
.segmentos { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; border-radius: 999px; background: #E6E1DA; }
.segmento {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.25rem; padding: .45rem .95rem; border: 0; border-radius: 999px; background: transparent;
  font-size: .875rem; font-weight: 500; color: var(--tinta); cursor: pointer; transition: background-color .25s, box-shadow .25s;
}
.segmento.is-ativo, .segmento:has(input:checked) { background: var(--branco); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.segmento input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmento:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 520px) {
  .segmentos { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; width: 100%; max-width: 22rem; }
  .segmento { border-radius: 14px; }
}

/* ---------- 3 e 5. filmes controlados pela rolagem ---------- */
.filme { position: relative; height: 480vh; background: var(--preto); color: var(--claro); }
.filme__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.filme__janela { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.filme__tela { width: 100%; height: 100%; object-fit: cover; background: var(--carvao); }
.filme__texto {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  padding: calc(env(safe-area-inset-top) + 7vh) var(--margem) 18vh; text-align: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .66) 62%, rgba(0, 0, 0, 0) 100%);
  opacity: var(--txt, 1); transform: translateY(calc((1 - var(--txt, 1)) * -20px));
}
.filme .sobre { color: rgba(242, 240, 236, .72); }
.filme .intro { color: rgba(242, 240, 236, .78); }
.filme__palco[data-modo="passo"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%);
  opacity: var(--nota, 0); transition: opacity .4s;
}
@media (min-width: 900px) {
  /* janela 9:16 no centro; título à esquerda e texto à direita, que dão lugar às anotações */
  .filme__palco {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    column-gap: clamp(2rem, 4.5vw, 4.5rem); padding: 0 var(--margem);
  }
  .filme__texto { display: contents; }
  .filme__titulo, .filme__intro { position: relative; z-index: 5; opacity: var(--txt, 1); transform: translateY(calc((1 - var(--txt, 1)) * 14px)); }
  .filme__titulo { grid-column: 1; grid-row: 1; justify-self: end; max-width: 26rem; text-align: right; }
  .filme__titulo .titulo { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
  .filme__intro { grid-column: 3; grid-row: 1; justify-self: start; max-width: 21rem; margin: 0; text-align: left; }
  .filme__janela {
    position: relative; inset: auto; grid-column: 2; grid-row: 1;
    height: min(calc(100svh - 10vh), 900px); aspect-ratio: 9 / 16; border-radius: var(--raio);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
  }
}

/* ---------- 6. destaque (suíte) ---------- */
.destaque { background: var(--preto); color: var(--claro); padding: var(--secao) 0; }
.destaque .sobre { color: rgba(242, 240, 236, .72); }
.destaque .intro { color: rgba(242, 240, 236, .74); }
.anota { position: relative; max-width: 1180px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--margem); }
.anota__quadro { position: relative; aspect-ratio: 4 / 5; border-radius: var(--raio); overflow: hidden; background: var(--carvao); }
.anota__quadro img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1100px) { .anota__quadro { width: 56%; margin: 0 auto; aspect-ratio: 4 / 3; } }

/* ---------- 7. comparar + convite ---------- */
.compara {
  position: relative; width: calc(100% - 2 * var(--margem)); max-width: calc(1180px - 2 * var(--margem)); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: #E7E2DA;
}
.compara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compara__antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compara__rotulo {
  position: absolute; top: .9rem; z-index: 2; padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: .8125rem; font-weight: 600; color: var(--tinta);
}
.compara__rotulo--antes { left: .9rem; }
.compara__rotulo--depois { right: .9rem; }
.compara__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; z-index: 2; pointer-events: none; }
.compara__linha span {
  position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .92); box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.compara__linha span::before, .compara__linha span::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--tinta); border-left: 2px solid var(--tinta);
}
.compara__linha span::before { left: 11px; transform: translateY(-50%) rotate(-45deg); }
.compara__linha span::after { right: 11px; transform: translateY(-50%) rotate(135deg); }
.compara__controle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }

.chamada { max-width: 40rem; margin: clamp(5rem, 11vw, 8rem) auto 0; padding: 0 var(--margem); text-align: center; }
.chamada__titulo { font-size: clamp(2.25rem, 5.6vw, 3.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.chamada__texto { margin: 1rem auto 0; max-width: 32rem; font-size: clamp(1.0625rem, 1.9vw, 1.25rem); line-height: 1.45; color: var(--cinza); text-wrap: pretty; }
.chamada__texto strong { font-weight: 600; color: var(--tinta); }
.chamada .botao { margin-top: 2rem; }

/* ---------- 8. números ---------- */
.bento {
  max-width: 1180px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--margem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.bento__item { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--carvao); color: var(--branco); }
.bento__item--grande { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.bento__item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.bento__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .28) 42%, rgba(0, 0, 0, 0) 70%); }
.bento__item:hover img { transform: scale(1.04); }
.bento__info { position: absolute; left: 1rem; right: 1rem; bottom: .95rem; }
.bento__num { display: flex; align-items: baseline; gap: .3rem; font-size: clamp(2rem, 8vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.bento__num small { font-size: max(.42em, 1rem); font-weight: 500; letter-spacing: -.02em; }
.bento__num--palavra { font-size: clamp(1.625rem, 6vw, 2.25rem); }
.bento__txt { margin-top: .4rem; font-size: .875rem; line-height: 1.35; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.bento__item--grande .bento__num { font-size: clamp(3.5rem, 15vw, 7rem); }
.bento__item--grande .bento__txt { max-width: 22rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .bento__item { aspect-ratio: 1; }
  .bento__item--grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .bento__info { left: 1.4rem; right: 1.4rem; bottom: 1.3rem; }
  .bento__item--grande .bento__info { left: 2rem; bottom: 1.8rem; }
}

/* ---------- 9. acabamento ---------- */
.cartoes {
  max-width: 1180px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 20rem); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--margem); scroll-padding-inline: var(--margem);
}
.cartoes::-webkit-scrollbar { display: none; }
.cartao { scroll-snap-align: start; }
.cartao img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: #E7E2DA; }
.cartao h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.cartao p { margin-top: .3rem; font-size: .9375rem; line-height: 1.45; color: var(--cinza); text-wrap: pretty; }
@media (min-width: 760px) {
  .cartoes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 2.5rem 1.5rem; }
}
@media (min-width: 1040px) { .cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 10. galeria das fotos reais ---------- */
.galeria { --slide: min(86vw, 1000px); margin-top: clamp(2rem, 4vw, 3rem); }
.galeria__abas { display: flex; justify-content: center; padding: 0 var(--margem); }
.galeria__trilho {
  position: relative; margin-top: 1.75rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: calc((100% - var(--slide)) / 2);
}
.galeria__trilho::-webkit-scrollbar { display: none; }
.galeria__slide { scroll-snap-align: center; opacity: .4; transition: opacity .45s; }
.galeria__slide.is-atual { opacity: 1; }
.galeria__slide button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.galeria__slide.is-atual button { cursor: zoom-in; }
.galeria__slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; background: #EDE9E3; }
.galeria__barra { width: var(--slide); margin: 1.1rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.galeria__legenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; }
.galeria__conta { font-size: .875rem; font-weight: 400; color: var(--cinza); }
.setas { display: flex; gap: .5rem; flex: none; }
.seta {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; cursor: pointer;
  background: #ECE8E2; color: var(--tinta); font-size: 1.375rem; line-height: 1; transition: background-color .2s, opacity .2s;
}
.seta:hover { background: #DFD9D1; }
.seta:disabled { opacity: .35; cursor: default; }
.hoje__acao { margin-top: clamp(3.5rem, 7vw, 5rem); padding: 0 var(--margem); text-align: center; }

.lupa {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(0, 0, 0, .96); color: #fff;
}
.lupa[open] { display: grid; place-items: center; }
.lupa::backdrop { background: #000; }
.lupa img { max-width: 94vw; max-height: 78vh; object-fit: contain; border-radius: 12px; }
.lupa__conta { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 1.6rem); transform: translateX(-50%); width: max-content; max-width: 64vw; text-align: center; font-size: .875rem; color: rgba(255, 255, 255, .8); }
.lupa__btn { position: absolute; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem; line-height: 1; }
.lupa__fechar { top: calc(env(safe-area-inset-top) + 1rem); right: 1rem; }
.lupa__ant { left: 1rem; bottom: calc(env(safe-area-inset-bottom) + 1rem); }
.lupa__prox { right: 1rem; bottom: calc(env(safe-area-inset-bottom) + 1rem); }
@media (min-width: 900px) { .lupa__ant, .lupa__prox { top: 50%; bottom: auto; transform: translateY(-50%); } }

/* ---------- 11. parcelas ---------- */
.parcelas { background: var(--preto); color: var(--claro); padding: var(--secao) 0; }
.parcelas .sobre { color: rgba(242, 240, 236, .72); }
.parcelas .intro { color: rgba(242, 240, 236, .74); }
.simulador {
  max-width: 46rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.6rem, 5vw, 3rem);
  border-radius: var(--raio); background: var(--carvao); display: grid; gap: 2rem; justify-items: center;
}
@media (max-width: 780px) { .simulador { margin-inline: var(--margem); } }
.simulador__valor { text-align: center; }
.simulador__rotulo { font-size: .9375rem; color: var(--cinza-claro); }
.simulador__parcela { margin-top: .3rem; font-size: clamp(3.25rem, 11vw, 5.25rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.simulador__parcela small { font-size: .3em; font-weight: 500; letter-spacing: -.01em; color: var(--cinza-claro); margin-left: .3em; }
.simulador__det { margin-top: .9rem; font-size: .9375rem; color: var(--cinza-claro); }
.simulador__det span { color: var(--claro); }
.simulador__campos { width: 100%; display: grid; gap: 1.6rem; }
.campo { display: grid; gap: .7rem; justify-items: stretch; }
.campo__topo { display: flex; justify-content: space-between; align-items: baseline; font-size: .9375rem; color: var(--cinza-claro); }
.campo__topo output { color: var(--claro); font-weight: 600; font-size: 1.0625rem; }
.campo__nome { font-size: .9375rem; color: var(--cinza-claro); }
.campo input[type="range"] { width: 100%; accent-color: var(--claro); height: 1.75rem; }
.segmentos--escuro { background: #2A2724; border-radius: 16px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.segmentos--escuro .segmento { color: #D9D4CD; border-radius: 12px; font-size: .875rem; }
.segmentos--escuro .segmento:has(input:checked) { background: #4A4541; color: #fff; box-shadow: none; }
.simulador__acao { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.simulador__aviso { max-width: 30rem; font-size: .8125rem; line-height: 1.45; color: var(--cinza-claro); }

/* ---------- 12. localização ---------- */
.mapa {
  position: relative; width: calc(100% - 2 * var(--margem)); max-width: calc(1180px - 2 * var(--margem)); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #E7E2DA;
}
@media (max-width: 700px) { .mapa { aspect-ratio: 4 / 5; } }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.locais { margin-top: clamp(3.5rem, 7vw, 5rem); }
.locais__topo { max-width: 1180px; margin: 0 auto 1.25rem; padding: 0 var(--margem); display: flex; align-items: center; gap: 1rem; }
.locais__topo h3 { margin-right: auto; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -.035em; }
.locais__topo .setas { display: none; }
@media (min-width: 900px) { .locais__topo .setas { display: flex; } }
.locais__trilho {
  --borda: max(var(--margem), calc((100% - 1180px) / 2 + var(--margem)));
  display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 17rem); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--borda); scroll-padding-inline: var(--borda);
}
.locais__trilho::-webkit-scrollbar { display: none; }
.lugar {
  position: relative; isolation: isolate; overflow: hidden; scroll-snap-align: start;
  aspect-ratio: 4 / 5; border-radius: 22px; color: var(--branco);
  background: radial-gradient(120% 90% at 25% 15%, #4A2A20 0%, var(--tinta) 62%);
}
.lugar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lugar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 55%); }
.lugar__pino { position: absolute; left: 1.1rem; top: 1.1rem; width: 1.6rem; height: 1.6rem; fill: rgba(242, 240, 236, .9); display: none; }
.lugar.sem-foto img { display: none; }
.lugar.sem-foto .lugar__pino { display: block; }
.lugar__info { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; }
.lugar__info h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.lugar__info p { margin-top: .3rem; font-size: .875rem; color: rgba(255, 255, 255, .78); }

/* ---------- 13. dúvidas ---------- */
.faq__lista { max-width: 46rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: 0 var(--margem); }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0;
  list-style: none; cursor: pointer; font-size: clamp(1.125rem, 2vw, 1.3125rem); font-weight: 600; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.75rem; font-weight: 300; line-height: 1; color: var(--cinza); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.5rem 0; font-size: 1.0625rem; line-height: 1.55; color: var(--cinza); }

/* ---------- 14. visita ---------- */
.visita { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--preto); color: var(--claro); text-align: center; }
.visita__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.visita::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .85) 75%); }
.visita__texto { position: relative; z-index: 2; padding: 6rem var(--margem); }
.visita .intro { color: rgba(242, 240, 236, .82); }
.visita__acoes { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.visita__nota { margin-top: 1.4rem; font-size: .875rem; color: rgba(242, 240, 236, .7); }
.visita__corretor { margin-top: 2.25rem; font-size: .875rem; color: rgba(242, 240, 236, .6); }

/* ---------- rodapé ---------- */
.rodape { background: var(--nevoa); color: var(--cinza); padding: 2rem var(--margem) calc(2rem + env(safe-area-inset-bottom)); font-size: .75rem; line-height: 1.5; text-align: center; }
.rodape p + p { margin-top: .35rem; }

/* ---------- surgimento ao rolar ---------- */
.js:not(.calmo) [data-surge] { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js:not(.calmo) [data-surge].is-visivel { opacity: 1; transform: none; }

/* ---------- movimento reduzido ---------- */
.calmo .capa, .calmo .filme { height: auto; }
.calmo .capa__palco, .calmo .filme__palco { position: relative; height: 100svh; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}