/* =========================================================================
   CASA DE CAMPO — Vila Magdalena, Campos do Jordão
   Editorial cinematográfico · quiet luxury / mountain retreat
   ========================================================================= */

:root {
  /* Paleta oficial */
  --carvao:   #141414;
  --grafite:  #1f1f1f;
  --madeira:  #C4A05A;   /* ouro — acento único (CTA, números, labels) */
  --ouro-claro: #D9BE83; /* brilho do ouro (hover / realce) */
  --bronze:   #6f5138;   /* tom quente profundo p/ degradês */
  --areia:    #DED8CF;
  --concreto: #7c766c;
  --branco:   #F7F4EE;

  /* Derivadas */
  --carvao-90: rgba(20,20,20,.90);
  --carvao-70: rgba(20,20,20,.70);
  --carvao-40: rgba(20,20,20,.40);
  --areia-60:  rgba(222,216,207,.60);
  --ouro-14:   rgba(196,160,90,.14);
  --ouro-30:   rgba(196,160,90,.30);
  --linha:     rgba(222,216,207,.12);

  /* Tipografia */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --maxw: 1440px;
}

/* ---------- Reset base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carvao);
  color: var(--areia);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--madeira); color: var(--branco); }

/* ---------- Tipos utilitários ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--branco);
}
.overline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--madeira);
}
.lede {
  font-weight: 300;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.75;
  color: var(--areia);
  max-width: 44ch;
}
.muted { color: var(--concreto); }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.4vw,1.9rem) var(--gutter);
  transition: background .6s var(--ease), backdrop-filter .6s var(--ease), padding .6s var(--ease);
}
.nav.is-scrolled {
  /* fundo sólido em vez de backdrop-filter: blur em elemento fixo repinta a
     tela inteira a cada frame de scroll e trava a rolagem */
  background: rgba(23,23,23,.94);
  border-bottom: 1px solid var(--linha);
  padding-top: clamp(.7rem,1.6vw,1.1rem);
  padding-bottom: clamp(.7rem,1.6vw,1.1rem);
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--serif); font-size: 1.32rem; color: var(--branco);
  letter-spacing: .02em;
}
.brand__loc {
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--concreto); margin-top: .35rem;
}
.nav__cta {
  border: 1px solid var(--areia-60);
  color: var(--branco);
  background: transparent;
  padding: .82em 1.6em;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  border-radius: 999px;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.nav__cta:hover { background: var(--branco); color: var(--carvao); border-color: var(--branco); }
@media (max-width: 640px){ .nav__cta { display: none; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.hero__stage { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.015);
  transition: opacity 2.4s var(--ease);
  will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; animation: kenburns 16s linear forwards; }
@keyframes kenburns { from { transform: scale(1.015); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce){
  .hero__slide.is-active { animation: none; transform: scale(1.015); }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    /* painel escuro à esquerda — degradê longo e suave, sem emenda visível */
    linear-gradient(100deg,
      rgba(8,8,8,.97) 0%,
      rgba(9,9,9,.93) 24%,
      rgba(10,10,10,.78) 42%,
      rgba(11,11,11,.54) 58%,
      rgba(13,13,13,.28) 74%,
      rgba(14,14,14,.08) 90%,
      transparent 100%),
    /* âncora inferior */
    linear-gradient(0deg, rgba(10,10,10,.9) 0%, rgba(12,12,12,.5) 24%, transparent 52%),
    /* topo suave */
    linear-gradient(180deg, rgba(16,16,16,.5) 0%, transparent 20%);
}
/* reforço extra atrás do bloco de texto, garante contraste sobre qualquer slide */
.hero__anchor {
  position: absolute; left: 0; bottom: 0; width: 80%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, rgba(8,8,8,.5) 0%, rgba(10,10,10,.24) 45%, rgba(10,10,10,.06) 78%, transparent 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) 0;
  max-width: var(--maxw); margin: 0 auto;
}

.hero__title {
  font-size: clamp(2.8rem, 7vw, 6.6rem);
  max-width: 15ch;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero__sub {
  margin: 1.4rem 0 0;
  max-width: 40ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  color: var(--areia);
  font-weight: 400;
  text-shadow: 0 1px 24px rgba(0,0,0,.5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* wordmark discreto no rodapé da hero */
.hero__mark {
  display: flex; flex-direction: column; gap: .35rem; margin-top: 2.6rem;
  padding-top: 1.6rem; border-top: 1px solid var(--linha); max-width: max-content;
}
.hero__mark-name { font-family: var(--serif); font-size: 1.5rem; color: var(--branco); letter-spacing: .01em; }
.hero__mark-loc { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--madeira); }

/* faixa de métricas na base — âncora informativa e peso visual */
.hero__facts {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  gap: clamp(1.4rem, 4vw, 3.4rem); margin: 2rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}
.hero__facts dt {
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--concreto); margin-bottom: .5rem;
}
.hero__facts dd {
  margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  color: var(--madeira); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.hero__facts dd span {
  font-family: var(--sans); font-size: .62rem; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--areia); margin-left: .35rem; vertical-align: middle;
}
@media (max-width: 720px){
  .hero__facts { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem; }
  .hero__facts dd { font-size: 1.5rem; }
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 2.1em;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px;
  transition: transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--solid {
  background: linear-gradient(145deg, var(--ouro-claro), var(--madeira));
  color: #201a10; border: 1px solid var(--ouro-claro); font-weight: 500;
  box-shadow: 0 10px 30px rgba(196,160,90,.22);
}
.btn--solid:hover { filter: brightness(1.06); box-shadow: 0 14px 40px rgba(196,160,90,.32); }
.btn--ghost { background: transparent; color: var(--branco); border: 1px solid var(--areia-60); }
.btn--ghost:hover { border-color: var(--branco); background: rgba(245,243,239,.06); }
.btn__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity:.7; }

.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap:.7rem;
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--concreto);
}
.hero__scroll span::after {
  content:""; display:block; width:1px; height:44px; margin: .7rem auto 0;
  background: linear-gradient(var(--concreto), transparent);
  animation: scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse { 0%,100%{ opacity:.3; transform: scaleY(.6);} 50%{opacity:1; transform: scaleY(1);} }

/* =========================================================================
   ESTRUTURA / SEÇÕES
   ========================================================================= */
.section { position: relative; padding: clamp(5rem, 12vh, 11rem) 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 980px; }

/* ---- Respiro claro: inverte a paleta dentro da seção (device deliberado) ---- */
.section--light {
  background: #F1ECE3;   /* cream literal (não usar var, é remapeada abaixo) */
  color: #2c2822;
  /* re-mapeia os tokens usados pelos componentes internos */
  --branco:   #16130d;   /* displays viram quase-preto */
  --areia:    #4a443a;   /* corpo de texto escuro */
  --concreto: #8c857a;
  --madeira:  #8a6a2e;   /* ouro mais profundo p/ contraste no claro */
  --ouro-claro: #a5823a;
  --linha:    rgba(20,18,14,.14);
  --carvao-40: rgba(255,255,255,.4);
}
.section--light .overline { color: var(--madeira); }

.chapter-tag { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.2rem; }
.chapter-tag::before {
  content:""; width: 44px; height:1px; background: var(--madeira); opacity:.7;
}

/* Frase de respiro (cap. 02) full-bleed */
.breath {
  position: relative; min-height: 92svh;
  display: grid; place-items: center; text-align: center;
  overflow: hidden;
}
.breath__bg { position: absolute; inset:0; background-size: cover; background-position: center; }
.breath__scrim { position:absolute; inset:0; background: var(--carvao-70); }
.breath__text {
  position: relative; z-index:2; padding: 0 var(--gutter);
  font-family: var(--serif); font-weight: 400; color: var(--branco);
  font-size: clamp(1.9rem, 4.6vw, 4.2rem); line-height: 1.12; max-width: 20ch;
}

/* =========================================================================
   CENA IMERSIVA — pinned reel (cap. 02)
   ========================================================================= */
.reel { position: relative; height: 400vh; background: var(--carvao); }
.reel__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.reel__imgs { position: absolute; inset: 0; }
.reel__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.2s var(--ease), transform 7s var(--ease-out);
  will-change: opacity, transform;
}
.reel__img.is-on { opacity: 1; transform: scale(1.13); }
@media (prefers-reduced-motion: reduce){
  .reel__img { transition: opacity .4s var(--ease); transform: none; }
  .reel__img.is-on { transform: none; }
}
.reel__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(8,8,8,.5), rgba(6,6,6,.9)),
    linear-gradient(0deg, rgba(6,6,6,.85), rgba(6,6,6,.35) 50%, rgba(6,6,6,.6));
}
.reel__lines {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); padding: 0 var(--gutter); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
}
.reel__lead {
  margin: 0; font-family: var(--serif); font-weight: 400; color: var(--branco);
  font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em;
  text-shadow: 0 2px 60px rgba(0,0,0,.6);
}
.reel__rot { position: relative; display: grid; place-items: center; min-height: 2.6em; }
.reel__line {
  grid-area: 1 / 1; margin: 0;
  font-family: var(--serif); font-style: normal; font-weight: 500; color: var(--branco);
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.05; letter-spacing: -.02em;
  max-width: 18ch; text-wrap: balance; text-shadow: 0 2px 60px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(24px); filter: blur(7px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}
.reel__line.is-on { opacity: 1; transform: none; filter: blur(0); }
/* fecho: recebe o realce dourado no "esse" via ênfase natural do serif */
.reel__line--payoff { color: var(--branco); }
.reel__line--payoff::after {
  content: ""; display: block; width: 54px; height: 2px; margin: 1.4rem auto 0;
  background: var(--madeira); opacity: 0; transform: scaleX(0); transform-origin: center;
  transition: opacity .8s var(--ease-out) .3s, transform .8s var(--ease-out) .3s;
}
.reel__line--payoff.is-on::after { opacity: 1; transform: scaleX(1); }
.reel__progress {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.6rem,5vh,3rem);
  z-index: 3; height: 1px; background: var(--linha);
}
.reel__progress span {
  display: block; height: 100%; background: var(--madeira);
  transform: scaleX(0); transform-origin: left; will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .reel { height: auto; }
  .reel__stage { position: relative; height: 82svh; }
  .reel__line { transition: none; filter: none; }
  .reel__progress { display: none; }
}

/* Bloco editorial dividido (texto + imagem) */
.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.split--reverse .split__media { order: -1; }
@media (max-width: 900px){
  .split { grid-template-columns: 1fr; gap: 2.6rem; }
  .split--reverse .split__media { order: 0; }
}
.split__title { font-size: clamp(2rem, 4.4vw, 3.6rem); margin: 1.4rem 0 1.6rem; }
.split__media { position: relative; overflow: hidden; border-radius: 2px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.split--wide .split__media img { aspect-ratio: 3/4; }

/* Imagem full-bleed com legenda */
.plate { position: relative; overflow: hidden; }
.plate img { width: 100%; height: 82svh; object-fit: cover; }
.plate__cap {
  position: absolute; left: var(--gutter); bottom: clamp(1.4rem,4vh,3rem);
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--areia);
  background: var(--carvao-40); backdrop-filter: blur(4px);
  padding: .6em 1.1em; border: 1px solid var(--linha); border-radius: 2px;
}

/* Lista de experiências (cap. 05/06) */
.feature-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.feature-list li {
  display: flex; gap: 1rem; padding: 1.05rem 0;
  border-top: 1px solid var(--linha); font-weight: 300;
}
.feature-list li:last-child { border-bottom: 1px solid var(--linha); }
.feature-list b { color: var(--branco); font-weight: 400; }
.feature-list .idx { color: var(--madeira); font-family: var(--serif); font-size: 1.05rem; min-width: 2ch; }

/* =========================================================================
   INFRAESTRUTURA (cap. 08) — grid técnico
   ========================================================================= */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.specs__cell { background: var(--carvao); padding: clamp(1.6rem,3vw,2.4rem); }
.specs__cell dt { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--concreto); margin-bottom:.9rem; }
.specs__cell dd { margin:0; font-family: var(--serif); font-size: clamp(1.3rem,2.4vw,2rem); color: var(--branco); line-height:1.15; }
.specs__cell dd small { display:block; font-family: var(--sans); font-size:.8rem; color: var(--areia); margin-top:.5rem; font-weight:300; letter-spacing:0; text-transform:none; }
@media (max-width: 900px){ .specs { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .specs { grid-template-columns: 1fr; } }

/* =========================================================================
   TOUR IMERSIVO (cap. 09)
   ========================================================================= */
.tour { background: var(--grafite); }
.tour__lead { text-align: center; max-width: 24ch; margin: 0 auto 3rem; }
.tour__frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border: 1px solid var(--linha); border-radius: 6px; overflow: hidden;
  background: var(--carvao);
  box-shadow: 0 40px 120px rgba(0,0,0,.5), inset 0 0 0 1px rgba(245,243,239,.04);
}
.tour__frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }

/* poster + overlay (estado antes do clique) */
.tour__poster {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.04); transition: transform 8s var(--ease);
}
.tour__frame:hover .tour__poster { transform: scale(1.09); }
.tour__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(15,15,15,.28), rgba(12,12,12,.82)),
    linear-gradient(0deg, rgba(12,12,12,.7), transparent 60%);
}
.tour__ui {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.3rem; text-align: center; padding: var(--gutter);
}
.tour__badge {
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--areia);
  border: 1px solid var(--linha); border-radius: 999px; padding: .5em 1.1em;
  background: rgba(23,23,23,.4);
}
.tour__enter {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: none; border: none; color: var(--branco);
}
.tour__enter-ring {
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245,243,239,.06); border: 1px solid var(--areia-60);
  backdrop-filter: blur(4px);
  transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.tour__enter-ring svg { width: 34%; margin-left: 8%; color: var(--branco); }
.tour__enter:hover .tour__enter-ring { transform: scale(1.08); background: var(--madeira); border-color: var(--madeira); }
.tour__enter-label {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--branco);
}
.tour__meta { margin: 0; font-size: .8rem; color: var(--areia); font-weight: 300; max-width: 34ch; }

/* spinner (durante o load do iframe) */
.tour__spinner { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; background: var(--carvao); }
.tour__spinner span {
  width: 34px; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--linha); border-top-color: var(--madeira);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tour__frame.is-live .tour__poster,
.tour__frame.is-live .tour__veil,
.tour__frame.is-live .tour__ui { opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.tour__frame.is-loading .tour__spinner { display: grid; }

.tour__hint { text-align:center; margin-top:1.4rem; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color: var(--concreto); }
@media (max-width: 760px){ .tour__frame { aspect-ratio: 3/4; } }

/* Carrossel de todas as imagens (abaixo do tour) */
.filmstrip {
  display: flex; gap: clamp(.7rem, 1.2vw, 1.1rem); margin-top: clamp(2rem, 4vw, 3.4rem);
  padding: .4rem calc(var(--gutter)) 1.4rem; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--madeira) transparent;
}
.filmstrip::-webkit-scrollbar { height: 6px; }
.filmstrip::-webkit-scrollbar-thumb { background: var(--ouro-30); border-radius: 999px; }
.filmstrip::-webkit-scrollbar-track { background: transparent; }
.filmstrip figure {
  margin: 0; flex: 0 0 clamp(240px, 32vw, 420px); aspect-ratio: 3/2;
  scroll-snap-align: start; overflow: hidden; border-radius: 8px; border: 1px solid var(--linha);
  position: relative;
}
.filmstrip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.filmstrip figure:hover img { transform: scale(1.05); }

/* =========================================================================
   BENTO EDITORIAL (cap. 10)
   ========================================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 210px);
  gap: clamp(.7rem, 1.1vw, 1.1rem);
}
.bento__tile {
  position: relative; margin: 0; overflow: hidden; border-radius: 6px;
  border: 1px solid var(--linha);
}

/* tiles de imagem */
.bento__tile--img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento__tile--img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,12,12,.72) 0%, transparent 46%);
  opacity: .9; transition: opacity .5s var(--ease);
}
.bento__tile--img:hover img { transform: scale(1.05); }
.bento__tile--img figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--areia);
  transform: translateY(4px); opacity: .85; transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.bento__tile--img:hover figcaption { transform: translateY(0); opacity: 1; }

/* tiles de dado */
.bento__tile--stat {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.2rem, 1.8vw, 1.7rem);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(139,103,72,.12), transparent 60%),
    linear-gradient(180deg, var(--grafite), #1c1c1c);
}
.bento__kicker {
  font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--madeira);
}
.bento__num {
  font-family: var(--serif); font-weight: 500; color: var(--madeira);
  font-size: clamp(2.6rem, 5vw, 4rem); line-height: .95; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: auto;
}
.bento__unit {
  font-family: var(--sans); font-weight: 400; font-size: .3em; letter-spacing: .08em;
  text-transform: uppercase; color: var(--areia); margin-left: .4em; vertical-align: baseline;
}
.bento__cap {
  margin: .8rem 0 0; font-size: .78rem; line-height: 1.55; color: var(--areia); font-weight: 300;
  max-width: 32ch;
}

/* posições (desktop) — mosaico assimétrico */
.b-hero    { grid-column: span 3; grid-row: span 2; }
.b-parrilla{ grid-column: span 3; grid-row: span 1; }
.b-suite   { grid-column: span 2; grid-row: span 2; }
.b-sauna   { grid-column: span 1; grid-row: span 1; }
.b-gourmet { grid-column: span 3; grid-row: span 1; }
.b-roof    { grid-column: span 2; grid-row: span 1; }
.b-terraco { grid-column: span 4; grid-row: span 1; }
.b-net     { grid-column: span 2; grid-row: span 1; }
.b-estar   { grid-column: span 3; grid-row: span 1; }

@media (max-width: 900px){
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 30vw, 190px); }
  .b-hero    { grid-column: span 4; grid-row: span 2; }
  .b-parrilla{ grid-column: span 2; }
  .b-suite   { grid-column: span 2; grid-row: span 2; }
  .b-sauna   { grid-column: span 2; }
  .b-gourmet { grid-column: span 2; }
  .b-roof    { grid-column: span 2; }
  .b-terraco { grid-column: span 4; }
  .b-net     { grid-column: span 2; }
  .b-estar   { grid-column: span 2; }
}
@media (max-width: 560px){
  /* coluna única com altura natural — evita corte de texto e cards apertados */
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .8rem; }
  .bento__tile { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .bento__tile--img { aspect-ratio: 3 / 2; }
  .bento__tile--stat { padding: 1.6rem 1.5rem; }
  .bento__num { font-size: 3rem; }
  .bento__cap { max-width: none; font-size: .85rem; }
}

/* =========================================================================
   LOCALIZAÇÃO (cap. 11)
   ========================================================================= */
.loc__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 900px){ .loc__grid { grid-template-columns: 1fr; } }
.loc__map {
  position: relative; aspect-ratio: 4/3; border:1px solid var(--linha); border-radius:10px;
  overflow: hidden; box-shadow: 0 30px 70px rgba(20,18,14,.14);
}
.loc__map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.loc__badge {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(20,18,14,.9); color: #F7F4EE;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .6em 1em; border-radius: 999px; backdrop-filter: blur(6px);
}
.loc__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--madeira); box-shadow: 0 0 0 4px rgba(196,160,90,.25); }
.loc__points { list-style:none; margin: 1.8rem 0 0; padding:0; }
.loc__points li { display:flex; align-items:baseline; gap:1rem; padding:1rem 0; border-top:1px solid var(--linha); }
.loc__points li:last-child { border-bottom:1px solid var(--linha); }
.loc__points b { color: var(--branco); font-weight:400; }
.loc__points .dist { margin-left:auto; font-family: var(--serif); color: var(--madeira); font-size:1.05rem; white-space:nowrap; }

/* =========================================================================
   ENTREGUE PRONTA (cap. 12)
   ========================================================================= */
.turnkey { text-align:center; }
.turnkey__title { font-size: clamp(2rem,4.6vw,3.8rem); margin: 1.4rem auto 1.6rem; max-width: 18ch; }

/* =========================================================================
   CTA FINAL (cap. 13)
   ========================================================================= */
.finale { position: relative; min-height: 100svh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.finale__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.finale__scrim { position:absolute; inset:0; background: linear-gradient(180deg, var(--carvao-70), var(--carvao-90)); }
.finale__inner { position:relative; z-index:2; padding: 0 var(--gutter); }
.finale__title { font-size: clamp(2.2rem,5.2vw,4.6rem); max-width: 20ch; margin: 1.6rem auto 1.6rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { padding: clamp(3rem,6vw,5rem) 0 3rem; border-top:1px solid var(--linha); }
.footer__grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.4rem; align-items:flex-end; }
.footer small { color: var(--concreto); font-size:.72rem; letter-spacing:.06em; }
.footer__legal { font-size:.66rem; color: var(--concreto); margin-top:2.6rem; line-height:1.7; max-width:70ch; }

.footer__broker { display:flex; flex-direction:column; gap:.7rem; }
.footer__broker-label {
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color: var(--madeira);
}
.footer__broker-links { display:flex; flex-direction:column; gap:.35rem; }
.footer__broker-links a {
  font-size:.88rem; color: var(--areia); letter-spacing:.01em;
  transition: color .35s var(--ease);
}
.footer__broker-links a:hover { color: var(--branco); }
@media (max-width: 640px){ .footer__broker { order: 3; width: 100%; } }

/* =========================================================================
   CONCIERGE DIGITAL
   ========================================================================= */
.concierge { position: fixed; right: clamp(1rem,2.4vw,2rem); bottom: clamp(1rem,2.4vw,2rem); z-index: 80; }
.concierge__toggle {
  display:flex; align-items:center; gap:.8rem;
  /* toggle fica fixo sobre o conteúdo rolando — sem backdrop-filter pra não repintar */
  background: rgba(30,30,30,.92);
  border:1px solid var(--linha); border-radius: 999px;
  padding: .7rem 1.3rem .7rem .8rem; color: var(--branco);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.concierge__toggle:hover { transform: translateY(-2px); border-color: var(--areia-60); }
.concierge__avatar {
  width: 38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(145deg, var(--madeira), #6f5138); color: var(--branco);
  font-family: var(--serif); font-size:1.1rem; flex:none;
}
.concierge__label { display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.concierge__label small { font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color: var(--madeira); }
.concierge__label span { font-size:.86rem; }
.concierge__pulse { width:7px; height:7px; border-radius:50%; background:#7fae7f; box-shadow:0 0 0 0 rgba(127,174,127,.6); animation: pulse 2.4s infinite; margin-left:.2rem; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(127,174,127,.55);} 70%{box-shadow:0 0 0 9px rgba(127,174,127,0);} 100%{box-shadow:0 0 0 0 rgba(127,174,127,0);} }

.concierge__panel {
  position: absolute; right:0; bottom: calc(100% + 14px);
  width: min(360px, calc(100vw - 2rem));
  background: rgba(23,23,23,.82); backdrop-filter: blur(26px) saturate(150%);
  border:1px solid var(--linha); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  padding: 1.5rem 1.4rem 1.3rem;
  opacity:0; transform: translateY(14px) scale(.98); pointer-events:none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transform-origin: bottom right;
}
.concierge.is-open .concierge__panel { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.concierge__head { display:flex; align-items:center; gap:.8rem; padding-bottom:1.1rem; border-bottom:1px solid var(--linha); }
.concierge__head h4 { margin:0; font-family: var(--serif); font-weight:400; color: var(--branco); font-size:1.2rem; }
.concierge__head small { font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color: var(--madeira); }
.concierge__msg { font-size:.86rem; line-height:1.6; color: var(--areia); margin: 1.1rem 0 1.2rem; }
.concierge__chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.concierge__chip {
  background: rgba(245,243,239,.05); border:1px solid var(--linha); color: var(--areia);
  padding:.5em 1em; border-radius:999px; font-size:.72rem; letter-spacing:.04em;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.concierge__chip:hover { background: var(--branco); color: var(--carvao); border-color: var(--branco); }
.concierge__send {
  width:100%; justify-content:center; background: var(--madeira); color: var(--branco);
  border:none; padding:1em; border-radius:12px; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; display:flex; align-items:center; gap:.6rem;
  transition: background .4s var(--ease);
}
.concierge__send:hover { background:#79573a; }
.concierge__ig {
  display:block; text-align:center; margin-top:.9rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--concreto);
  transition: color .35s var(--ease);
}
.concierge__ig:hover { color: var(--madeira); }
.concierge__close {
  position:absolute; top:1rem; right:1rem; background:none; border:none; color: var(--concreto);
  font-size:1.1rem; line-height:1; padding:.3rem;
}
.concierge__close:hover { color: var(--branco); }

/* --- painel em modo conversa --- */
.concierge__panel { width: min(390px, calc(100vw - 2rem)); }
.concierge__panel--chat { padding-bottom: .9rem; }

.concierge__log {
  display: flex; flex-direction: column; gap: .6rem;
  max-height: min(52vh, 420px); overflow-y: auto;
  margin: 1rem -.4rem .8rem; padding: .2rem .4rem;
  scrollbar-width: thin; scrollbar-color: var(--ouro-30) transparent;
  scroll-behavior: smooth;
}
.concierge__log::-webkit-scrollbar { width: 5px; }
.concierge__log::-webkit-scrollbar-thumb { background: var(--ouro-30); border-radius: 999px; }

.bubble {
  max-width: 84%; padding: .7em .95em; font-size: .85rem; line-height: 1.55;
  border-radius: 14px; white-space: pre-wrap;
  opacity: 0; transform: translateY(8px) scale(.98); filter: blur(3px);
  animation: bubble-in .5s var(--ease-out) forwards;
}
@keyframes bubble-in { to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce){ .bubble { animation: none; opacity: 1; transform: none; filter: none; } }
.bubble--bot {
  align-self: flex-start; background: rgba(245,243,239,.055);
  border: 1px solid var(--linha); color: var(--areia); border-bottom-left-radius: 4px;
}
.bubble--bot b { color: var(--branco); font-weight: 500; }
.bubble--bot a { color: var(--madeira); text-decoration: underline; text-underline-offset: 3px; }
.bubble--user {
  align-self: flex-end; color: #201a10; border-bottom-right-radius: 4px;
  background: linear-gradient(145deg, var(--ouro-claro), var(--madeira));
}

/* digitando */
.bubble--typing { display: inline-flex; gap: 4px; padding: .85em 1em; }
.bubble--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--concreto);
  animation: typing 1.3s var(--ease) infinite;
}
.bubble--typing span:nth-child(2){ animation-delay: .18s; }
.bubble--typing span:nth-child(3){ animation-delay: .36s; }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:.4; } 30%{ transform: translateY(-4px); opacity:1; } }

/* sugestões contextuais (chips que mudam conforme a conversa) */
.concierge__suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.concierge__suggest button {
  background: rgba(245,243,239,.05); border: 1px solid var(--linha); color: var(--areia);
  padding: .45em .85em; border-radius: 999px; font-size: .7rem; letter-spacing: .01em;
  opacity: 0; transform: translateY(6px); animation: bubble-in .4s var(--ease-out) forwards;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.concierge__suggest button:hover { background: var(--branco); color: var(--carvao); border-color: var(--branco); }
.concierge__suggest button:active { transform: scale(.96); }

/* barra de input */
.concierge__form { display: flex; align-items: center; gap: .5rem; }
.concierge__input {
  flex: 1; background: rgba(245,243,239,.04); border: 1px solid var(--linha);
  color: var(--branco); border-radius: 999px; padding: .8em 1.1em; font-size: .85rem;
  font-family: inherit; outline: none;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.concierge__input::placeholder { color: var(--concreto); }
.concierge__input:focus-visible { border-color: var(--ouro-30); background: rgba(245,243,239,.06); }
.concierge__submit {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: none;
  background: linear-gradient(145deg, var(--ouro-claro), var(--madeira));
  color: #201a10; display: grid; place-items: center;
  transition: transform .4s var(--ease-out), filter .4s var(--ease);
}
.concierge__submit:hover { filter: brightness(1.06); }
.concierge__submit:active { transform: scale(.94); }
.concierge__submit svg { width: 17px; height: 17px; }
.concierge__disclaimer {
  margin: .7rem 0 0; text-align: center; font-size: .58rem; letter-spacing: .06em;
  color: var(--concreto); line-height: 1.5;
}

/* chip de ação primária (agendar) destaca-se dos demais */
.concierge__suggest button.is-primary {
  background: rgba(196,160,90,.14); border-color: var(--ouro-30); color: var(--ouro-claro);
}
.concierge__suggest button.is-primary:hover { background: var(--madeira); color: #201a10; border-color: var(--madeira); }

/* pré-formulário de contato dentro do chat */
.leadform {
  align-self: stretch; display: flex; flex-direction: column; gap: .55rem;
  background: rgba(245,243,239,.04); border: 1px solid var(--ouro-30);
  border-radius: 14px; padding: 1rem;
  opacity: 0; transform: translateY(8px) scale(.98); filter: blur(3px);
  animation: bubble-in .5s var(--ease-out) forwards;
}
.leadform__t { margin: 0 0 .2rem; font-size: .82rem; line-height: 1.5; color: var(--areia); }
.leadform__i {
  background: rgba(20,20,20,.5); border: 1px solid var(--linha); color: var(--branco);
  border-radius: 10px; padding: .75em .9em; font-size: .85rem; font-family: inherit; outline: none;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.leadform__i::placeholder { color: var(--concreto); }
.leadform__i:focus-visible { border-color: var(--ouro-30); background: rgba(20,20,20,.7); }
.leadform__b {
  margin-top: .3rem; border: none; border-radius: 10px; padding: .85em;
  background: linear-gradient(145deg, var(--ouro-claro), var(--madeira)); color: #201a10;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  transition: transform .4s var(--ease-out), filter .4s var(--ease);
}
.leadform__b:hover:not(:disabled) { filter: brightness(1.06); }
.leadform__b:active:not(:disabled) { transform: scale(.98); }
.leadform__b:disabled { background: rgba(127,174,127,.85); cursor: default; }
.leadform__err { display: none; font-size: .68rem; color: #d98a6a; letter-spacing: .02em; }
.leadform.is-err .leadform__err { display: block; }
.leadform.is-err .leadform__i:placeholder-shown { border-color: rgba(217,138,106,.6); }

/* =========================================================================
   O TERRENO — mapa interativo da propriedade
   ========================================================================= */
.estate__head { max-width: 640px; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.estate__grid {
  display: grid; grid-template-columns: 1.35fr .85fr;
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: stretch;
}
@media (max-width: 940px){ .estate__grid { grid-template-columns: 1fr; } }

/* --- palco do mapa (SVG) --- */
.estate__stage {
  position: relative; border: 1px solid var(--linha); border-radius: 12px;
  overflow: hidden; background:
    radial-gradient(120% 90% at 30% 0%, rgba(139,103,72,.14), transparent 55%),
    linear-gradient(180deg, #191919, #131313);
  box-shadow: inset 0 0 0 1px rgba(245,243,239,.03), 0 40px 90px rgba(0,0,0,.4);
  aspect-ratio: 3/2;
}
.estate__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.estate__svg .lot { fill: rgba(245,243,239,.02); stroke: var(--ouro-30); stroke-width: 1.2; stroke-dasharray: 5 6; }
.estate__svg .contour { fill: none; stroke: rgba(245,243,239,.055); stroke-width: 1; }
.estate__svg .bldg { fill: rgba(196,160,90,.07); stroke: var(--ouro-30); stroke-width: 1.4; }
.estate__svg .bldg--solid { fill: rgba(196,160,90,.12); }
.estate__svg .zone { fill: rgba(245,243,239,.028); stroke: rgba(245,243,239,.10); stroke-width: 1; }
.estate__svg .path { fill: none; stroke: rgba(245,243,239,.13); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.estate__svg .lbl {
  fill: var(--concreto); font-family: var(--sans); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
}
.estate__svg .lbl--vista { fill: var(--madeira); }

/* --- hotspots --- */
.hotspot { cursor: pointer; }
.hotspot__hit { fill: transparent; }
.hotspot__ring {
  fill: none; stroke: var(--madeira); stroke-width: 1.3;
  transform-box: fill-box; transform-origin: center;
  opacity: .5; transform: scale(1);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hotspot__core {
  fill: var(--madeira);
  transform-box: fill-box; transform-origin: center;
  transition: transform .4s var(--ease-out), fill .4s var(--ease);
}
.hotspot__pulse {
  fill: none; stroke: var(--madeira); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation: hs-pulse 3s var(--ease-out) infinite;
}
@keyframes hs-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.hotspot__num {
  fill: #201a10; font-family: var(--serif); font-size: 11px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.hotspot:hover .hotspot__core,
.hotspot.is-active .hotspot__core { transform: scale(1.35); }
.hotspot:hover .hotspot__ring,
.hotspot.is-active .hotspot__ring { opacity: 1; transform: scale(1.5); }
.hotspot.is-active .hotspot__pulse { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce){ .hotspot__pulse { animation: none; opacity: .3; } }

.estate__hint {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; pointer-events: none;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--concreto);
  display: flex; align-items: center; gap: .5rem;
}
.estate__hint::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--madeira); box-shadow: 0 0 0 4px rgba(196,160,90,.2); }

/* --- painel de detalhe --- */
.estate__panel {
  position: relative; border: 1px solid var(--linha); border-radius: 12px;
  background: linear-gradient(180deg, var(--grafite), #171717);
  overflow: hidden; min-height: 340px; display: flex; flex-direction: column;
}
.estate__panel-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--carvao); }
.estate__panel-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); filter: blur(6px);
  transition: opacity .6s var(--ease-out), transform 1.2s var(--ease-out), filter .6s var(--ease-out);
}
.estate__panel-media img.is-shown { opacity: 1; transform: scale(1); filter: blur(0); }
.estate__panel-media::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(15,15,15,.72), transparent 55%); pointer-events:none; }
.estate__panel-noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 2.4rem; color: var(--ouro-30);
}
.estate__panel-body { padding: clamp(1.3rem, 2vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
.estate__panel-kicker { font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--madeira); }
.estate__panel-title { font-family: var(--serif); font-weight: 400; color: var(--branco); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: .5rem 0 .7rem; line-height: 1.1; }
.estate__panel-desc { font-size: .88rem; line-height: 1.65; color: var(--areia); font-weight: 300; margin: 0 0 1.3rem; }
.estate__panel-cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent; color: var(--branco);
  border: 1px solid var(--areia-60); border-radius: 999px;
  padding: .7em 1.3em; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.estate__panel-cta:hover { background: var(--madeira); border-color: var(--madeira); color: #201a10; transform: translateY(-2px); }
.estate__panel-cta:active { transform: scale(.97); }
.estate__panel-cta svg { width: 12px; height: 12px; }
/* fade do conteúdo do painel ao trocar de ponto */
.estate__panel-body.is-swapping .estate__panel-kicker,
.estate__panel-body.is-swapping .estate__panel-title,
.estate__panel-body.is-swapping .estate__panel-desc { opacity: 0; filter: blur(3px); }
.estate__panel-kicker, .estate__panel-title, .estate__panel-desc {
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}

/* trilha de miniaturas / índice dos pontos (mobile-friendly) */
.estate__index { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.estate__index button {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(245,243,239,.04); border: 1px solid var(--linha); color: var(--areia);
  padding: .5em .9em; border-radius: 999px; font-size: .72rem; letter-spacing: .02em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.estate__index button .n { font-family: var(--serif); color: var(--madeira); font-size: .9rem; }
.estate__index button:hover { border-color: var(--areia-60); }
.estate__index button.is-active { background: var(--madeira); border-color: var(--madeira); color: #201a10; }
.estate__index button.is-active .n { color: #201a10; }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox {
  position: fixed; inset:0; z-index:100; background: rgba(10,10,10,.94);
  display:grid; place-items:center; padding: 4vw;
  opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
}
.lightbox.is-open { opacity:1; pointer-events:auto; }
.lightbox img { max-width:100%; max-height:88vh; object-fit:contain; border-radius:2px; }
.lightbox__close { position:absolute; top:1.6rem; right:1.8rem; background:none; border:none; color: var(--areia); font-size:2rem; }

/* =========================================================================
   REVEAL (scroll)
   ========================================================================= */
.reveal { opacity:0; transform: translateY(46px); transition: opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out); }
.reveal.is-in { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.12s; }
.reveal[data-delay="2"] { transition-delay:.24s; }
.reveal[data-delay="3"] { transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* Parallax media — só promove a camada de GPU no desktop (onde o efeito roda) */
@media (min-width: 901px) and (hover: hover) {
  .parallax { will-change: transform; }
}

/* =========================================================================
   TRANSIÇÃO SCROLL-EXPAND (seção 2 → 3)
   ========================================================================= */
.expand { position: relative; height: 240vh; background: var(--carvao); }
.expand__track { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.expand__sticky { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.expand__frame {
  position: relative; width: 42vw; height: 56vh; border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.5); will-change: width, height, border-radius;
}
.expand__media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.expand__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,8,.55), rgba(8,8,8,.12)); }
.expand__title {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; text-align: center;
}
.expand__word {
  font-family: var(--serif); color: var(--branco); line-height: 1.02; letter-spacing: -.02em;
  font-size: clamp(2rem, 6vw, 5rem); text-shadow: 0 2px 40px rgba(0,0,0,.6); will-change: transform;
}
@media (max-width: 900px){ .expand__frame { width: 78vw; } }
@media (prefers-reduced-motion: reduce){
  .expand { height: auto; }
  .expand__track { position: relative; height: 80svh; }
  .expand__frame { width: 88vw; height: 68vh; border-radius: 10px; }
}

/* =========================================================================
   OS AMBIENTES (índice com fotos reais)
   ========================================================================= */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 900px){ .rooms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .rooms { grid-template-columns: 1fr; } }
.room {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 10px;
  background: linear-gradient(180deg, var(--grafite), #171717);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.room:hover { transform: translateY(-4px); border-color: var(--ouro-30); }
.room__img { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.room__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.room:hover .room__img img { transform: scale(1.06); }
.room__n {
  position: absolute; top: .8rem; left: .9rem; z-index: 2;
  font-family: var(--serif); font-size: 1.05rem; color: var(--branco);
  width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 50%;
  background: var(--carvao-70); border: 1px solid var(--linha); backdrop-filter: blur(4px);
}
.room__body { padding: clamp(1.1rem, 1.6vw, 1.5rem); display: flex; flex-direction: column; gap: .5rem; }
.room__kicker { font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--madeira); }
.room__title { font-family: var(--serif); font-weight: 400; color: var(--branco); font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0; line-height: 1.1; }
.room__desc { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--areia); font-weight: 300; }
.room::after {
  content: "Ver no tour \2192"; padding: 0 clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.1rem, 1.6vw, 1.5rem);
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--concreto);
  transition: color .4s var(--ease);
}
.room:hover::after { color: var(--madeira); }

/* =========================================================================
   GALERIA ZOOM-PARALLAX
   ========================================================================= */
.zoomgal { position: relative; background: var(--carvao); }
.zoomgal__intro { height: 62vh; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); will-change: opacity; }
.zoomgal__lead { font-size: clamp(1.8rem, 4.4vw, 3.6rem); max-width: 16ch; margin: 0; }
.zoomgal__track { position: relative; height: 300vh; }
.zoomgal__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.zoomgal__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: scale(1); will-change: transform; }
.zoomgal__item img { object-fit: cover; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.4); position: relative; }
.zi-0 img { width: 25vw; height: 25vh; }
.zi-1 img { width: 35vw; height: 30vh; top: -30vh; left: 5vw; }
.zi-2 img { width: 20vw; height: 45vh; top: -10vh; left: -25vw; }
.zi-3 img { width: 25vw; height: 25vh; left: 27.5vw; }
.zi-4 img { width: 20vw; height: 25vh; top: 27.5vh; left: 5vw; }
.zi-5 img { width: 30vw; height: 25vh; top: 27.5vh; left: -22.5vw; }
.zi-6 img { width: 15vw; height: 15vh; top: 22.5vh; left: 25vw; }
/* fallback: grade simples no mobile / reduced-motion (o JS do efeito nao roda) */
@media (max-width: 700px), (prefers-reduced-motion: reduce){
  .zoomgal__intro { height: auto; padding: clamp(3.5rem, 9vh, 6rem) var(--gutter) 1.6rem; }
  .zoomgal__track { height: auto; }
  .zoomgal__sticky { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: 0 var(--gutter) clamp(3.5rem, 8vh, 6rem); }
  .zoomgal__item { position: relative; inset: auto; display: block; transform: none !important; }
  .zoomgal__item img { position: static; width: 100%; height: 30vh; top: auto; left: auto; }
}

/* =========================================================================
   O ENTORNO
   ========================================================================= */
.surround__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 4px; overflow: hidden; }
@media (max-width: 820px){ .surround__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .surround__grid { grid-template-columns: 1fr; } }
.surround__cell { background: var(--carvao); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .45rem; }
.surround__k { font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--madeira); }
.surround__v { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--branco); line-height: 1.1; }
.surround__d { margin: .3rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--areia); font-weight: 300; }

/* =========================================================================
   LIGHTBOX — navegação
   ========================================================================= */
.lightbox__stage { position: relative; margin: 0; display: grid; place-items: center; max-width: 92vw; }
.lightbox__count { position: absolute; bottom: -2.3rem; left: 50%; transform: translateX(-50%); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--areia); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,20,20,.55); border: 1px solid var(--areia-60); color: var(--branco);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.lightbox__nav:hover { background: var(--madeira); border-color: var(--madeira); color: #201a10; }
.lightbox__nav:active { transform: translateY(-50%) scale(.94); }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: clamp(.6rem, 3vw, 2.4rem); }
.lightbox__nav--next { right: clamp(.6rem, 3vw, 2.4rem); }
@media (max-width: 560px){ .lightbox__nav { width: 44px; height: 44px; } .lightbox__nav svg { width: 18px; height: 18px; } }

/* =========================================================================
   FORMULÁRIO — Apresentação privada (LGPD)
   ========================================================================= */
.formmodal {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(8,8,8,.7); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.formmodal.is-open { opacity: 1; pointer-events: auto; }
.formmodal__panel {
  position: relative; width: min(440px, 100%);
  background: #191919; border: 1px solid var(--linha); border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 40px 120px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.98); transition: transform .45s var(--ease);
}
.formmodal.is-open .formmodal__panel { transform: none; }
.formmodal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--concreto); font-size: 1.2rem; line-height: 1; }
.formmodal__close:hover { color: var(--branco); }
.formmodal__title { font-family: var(--serif); font-weight: 400; color: var(--branco); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .5rem 0 .4rem; }
.formmodal__sub { margin: 0 0 1.4rem; font-size: .86rem; line-height: 1.6; color: var(--areia); font-weight: 300; }
.formmodal__form { display: flex; flex-direction: column; gap: .9rem; }
.formmodal__field { display: flex; flex-direction: column; gap: .35rem; }
.formmodal__field span { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--concreto); }
.formmodal__field input {
  background: rgba(20,20,20,.6); border: 1px solid var(--linha); color: var(--branco);
  border-radius: 10px; padding: .85em 1em; font-size: .9rem; font-family: inherit; outline: none;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.formmodal__field input::placeholder { color: var(--concreto); }
.formmodal__field input:focus-visible { border-color: var(--ouro-30); background: rgba(20,20,20,.85); }
.formmodal__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .76rem; line-height: 1.5; color: var(--areia); cursor: pointer; }
.formmodal__consent input { margin-top: .15rem; accent-color: var(--madeira); width: 16px; height: 16px; flex: none; }
.formmodal__consent b { color: var(--branco); font-weight: 500; }
.formmodal__submit {
  margin-top: .3rem; border: none; border-radius: 10px; padding: .95em;
  background: linear-gradient(145deg, var(--ouro-claro), var(--madeira)); color: #201a10;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  transition: filter .4s var(--ease), transform .3s var(--ease);
}
.formmodal__submit:hover:not(:disabled) { filter: brightness(1.06); }
.formmodal__submit:active:not(:disabled) { transform: scale(.99); }
.formmodal__submit:disabled { background: rgba(127,174,127,.85); cursor: default; }
.formmodal__err { display: none; font-size: .72rem; color: #d98a6a; }
.formmodal__form.is-err .formmodal__err { display: block; }
.formmodal__legal { margin: .4rem 0 0; font-size: .64rem; line-height: 1.5; color: var(--concreto); }

/* =========================================================================
   STACK — empilhamento de seções (a de cima fica atrás)
   ========================================================================= */
.stack { position: relative; }
.stack > .is-stuck { position: sticky; top: 0; }
/* fundos opacos p/ sobreposição limpa (claras e tour mantêm os seus) */
.stack > .section:not(.section--light):not(.tour) { background: var(--carvao); }
.stack > .plate { background: var(--carvao); }

/* =========================================================================
   GALERIA — mosaico (tamanhos variados)
   ========================================================================= */
.mgal__grid { columns: 3 300px; column-gap: clamp(.7rem, 1.2vw, 1.1rem); }
.mgal__grid figure {
  break-inside: avoid; margin: 0 0 clamp(.7rem, 1.2vw, 1.1rem);
  overflow: hidden; border-radius: 8px; border: 1px solid var(--linha);
  position: relative; cursor: zoom-in;
}
.mgal__grid img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
.mgal__grid figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,12,12,.35) 0%, transparent 42%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.mgal__grid figure:hover img { transform: scale(1.05); }
.mgal__grid figure:hover::after { opacity: 1; }
@media (max-width: 640px){ .mgal__grid { columns: 2 150px; } }