/* =========================================================================
   Portal dos Ipês — Design System
   Verde principal #0F3D33 · Dourado #E8C063 · Off-white para texto sobre verde
   ========================================================================= */

:root {
  --verde: #0F3D33;
  --verde-escuro: #0b2b24;
  --dourado: #E8C063;
  --dourado-escuro: #A87B2E;
  --off-white: #F7F4EC;

  /* O vídeo-fonte tem uma legenda queimada na imagem, perto da borda
     inferior, que não pode ser removida na edição. Este fator escala o
     vídeo (uniformemente, sem distorcer) para além do que object-fit:cover
     já cobre, empurrando essa faixa para fora da área visível. É um valor
     relativo — funciona em qualquer proporção de tela, sem cálculo em JS.
     Aumente se a legenda ainda aparecer; diminua se o corte lateral ficar
     apertado demais em telas estreitas. */
  --video-safe-scale: 1.22;

  /* Montserrat: sans-serif geométrica e elegante, com uma pitada de Art
     Déco — mais sóbria que a Fredoka (arredondada/lúdica demais) e sem
     a serifada clássica da Fraunces, que destoava do wordmark da marca.
     Usada agora tanto nos títulos quanto no corpo do texto (site inteiro
     numa família só). */
  --font-display: 'Montserrat', 'Century Gothic', sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* O conteúdo (texto + foto) ocupa 100% do container; o vídeo fica só
     como um fundo ambiente, uniformemente escurecido por trás de tudo. */
  --panel-overlay: rgba(15, 61, 51, 1.66);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--verde);
  color: var(--off-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------------------------- Loading screen ---------------------------- */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--verde);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-logo {
  width: 110px;
  height: auto;
  animation: pulseLogo 2.2s ease-in-out infinite;
}

.loading-bar {
  width: 200px;
  height: 2px;
  background: rgba(232, 192, 99, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  width: 10%;
  background: var(--dourado);
  transition: width 0.4s ease;
}

.loading-text {
  color: rgba(247, 244, 236, 0.6);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes pulseLogo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ------------------------------ Skip link -------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dourado);
  color: var(--verde);
  padding: 12px 20px;
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------ Scroll track ----------------------------- */

.scroll-track {
  position: relative;
  width: 100%;
}

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--verde);
}

/* Truque de "blur barato": em vez de desfocar o vídeo no tamanho real da
   tela (custo de filter escala com a quantidade de pixels processados),
   o <video> é renderizado numa caixa na METADE do tamanho (25% da área)
   e depois ampliado de volta via transform — o blur incide sobre uma
   imagem bem menor (~4x menos pixels pra processar a cada frame) e o
   compositor só faz um upscale barato por cima. Como o blur já suaviza
   detalhe fino, o resultado visual fica idêntico (até mais forte, já
   que o raio do blur também é ampliado), só que muito mais leve pra
   GPU recalcular durante o scrub do vídeo.
   A matemática do scale(): a caixa é 50% da tela, então
   scale(var(--video-safe-scale) * 2) devolve o mesmo tamanho final de
   antes (50% * 2.44 ≈ 122%, igual ao 100% * 1.22 do zoom original que
   empurra a legenda queimada pra fora da área visível). left:25% com
   width:50% mantém o centro horizontal alinhado com o centro da tela,
   pro transform-origin:50% 0% ancorar exatamente no mesmo ponto de
   antes (centro-topo). */
.bg-video {
  position: absolute;
  top: 0;
  left: 25%;
  z-index: 1;
  width: 50%;
  height: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--verde);
  transform-origin: 50% 0%;
  transform: scale(calc(var(--video-safe-scale) * 2));
  filter: blur(2px);
}

.video-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #0F3D33 0%, #163f3500 45%, #0b2b2400 100%);
}

.video-fallback img {
  width: 160px;
  opacity: 0.9;
}

/* --------------------- Faixas fixas do palco do vídeo --------------------- */
/* Ficam DENTRO de .sticky-stage (que é position:sticky) — por isso somem
   sozinhas, junto com o vídeo, assim que o scroll passa da última cena
   pras seções estáticas (masterplan/obra/rodapé). Não precisa de JS. */

.video-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 2vw;
  background: linear-gradient(to right, rgba(15,61,51,1) 0%,rgba(15,61,51,1) 100%);
  border-radius: 0 0 20px 20px;
}

.video-topbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 16px 26px;
}

.video-topbar-nav a {
  color: rgba(247, 244, 236, 0.8);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: color 0.2s ease;
}

.video-topbar-nav a:hover {
  color: var(--dourado);
}

.video-topbar-nav a.active {
  color: var(--dourado);
}

/* No cartão inferior do mobile essa faixa colidiria com o próprio
   conteúdo (que já tem seu chrome de tela cheia) — escondida ali. */
@media (max-width: 767px) {
  .video-topbar {
    display: none;
  }
}

/* ------------------------------ Gradient panel --------------------------- */

.gradient-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 6vw;
  background: linear-gradient(to right, rgb(15 61 51 / 1) 0%, rgba(15, 61, 51, 0) 100%);
  pointer-events: none;
}

.panel-content {
  pointer-events: auto;
  max-width: 640px;
  width: 100%;
  /* evita que o item flex recuse encolher abaixo do conteúdo (mesma
     causa do bug de "foto gigante" no grid interno das cenas) */
  min-width: 0;
  /* Rede de segurança: se o conteúdo de alguma cena ainda assim for mais
     alto que a tela, rola dentro do painel em vez de vazar/cortar por
     trás do overflow:hidden do palco do vídeo. A barra de rolagem nativa
     fica escondida (o scroll continua funcionando por toque/wheel) —
     assim não pisca uma barra visível enquanto o texto reflow por causa
     do carregamento das fontes. */
  max-height: 100vh;
  /* overflow-y: auto; */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.panel-content::-webkit-scrollbar {
  display: none;
}

/* Cabeçalho (texto) + foto lado a lado a partir do desktop; no mobile/
   tablet tudo empilha na ordem natural do DOM (header, foto, sub-conteúdo). */

.scene-photo {
  position: relative;
  margin: 24px 0 28px;
  overflow: hidden;
  border-radius: 300px 300px 10px 10px;
  
  border: 1px solid rgba(247, 244, 236, 0.08);
  /* Teto de altura pra foto nunca dominar a cena inteira, não importa a
     proporção (ex.: a vertical do Hero) nem a largura da coluna. */
  max-height: 62vh;
}

/* Cena Localização: iframe do Google Maps no lugar da foto, preenchendo
   o mesmo quadro (aspecto, cantos arredondados, sombra). */
.scene-photo--map {
  height: 300px;
}

.scene-photo--map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Cena Entregas: o carrossel tem sombra/cantos próprios em cada card, não
   precisa do "quadro" padrão de foto (que cortaria as setas, que ficam
   levemente pra fora da borda). Agora ocupa a linha cheia (ver
   .scene-inner--full), então os cards usam o tamanho padrão. */
.scene-photo--entregas {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  border: none;
  max-height: none;
}

/* Cena Credibilidade: marcas do grupo em cards claros lado a lado, em
   vez de uma foto — cada logo tem seu próprio fundo (contain, não
   cover) pra nunca cortar o desenho da marca. */
.scene-photo--marcas {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  border: none;
  max-height: none;
}

/* Quem Somos: um único card claro com todas as marcas do grupo já
   diagramadas na própria imagem — sem cortar (contain), já que é uma
   peça informativa (logos + texto), não uma foto. */
.marcas-single {
  background: #FFF;
  border-top: 0px solid var(--dourado);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(11, 43, 36, 0.25);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marcas-single img {
  width: 100%;
  height: auto;
  display: block;
}

.lead-form select {
margin-bottom: 30px;
}

/* No Hero, .scene-photo vira o wrapper da coluna inteira (foto + carrossel
   empilhados) — o "quadro" arredondado/sombra da foto em si passa a viver
   em .scene-photo-frame, e o carrossel fica como um bloco normal logo
   abaixo, com a mesma largura (bordas alinhadas). */
.scene-photo--hero {
  display: flex;
  flex-direction: column;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  border: none;
  max-height: none;
}

.scene-photo-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 300px 300px 10px 10px;
  border: 1px solid rgba(247, 244, 236, 0.08);
  max-height: 62vh;
}

/* Vídeo (item principal por padrão) e foto ficam empilhados por cima um
   do outro — só um visível por vez (.is-active), trocado ao clicar numa
   miniatura ou pelo avanço automático do scroll. */
.hero-main-video,
.hero-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.hero-main-video.is-active,
.hero-main-img.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Enquanto o vídeo do Hero ainda não tem frame suficiente pra tocar, a
   miniatura (poster) já aparece no lugar da tela escura, com um spinner
   por cima avisando que ainda está carregando. */
.hero-video-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scene-photo-frame.is-video-loading .hero-video-loader {
  display: flex;
}

.hero-video-loader::before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(247, 244, 236, 0.35);
  border-top-color: var(--dourado);
  animation: heroVideoSpin 0.8s linear infinite;
}

@keyframes heroVideoSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-loader::before { animation: none; }
}

/* Carrossel de miniaturas do Hero: bloco normal depois da foto principal,
   separado por margem, com as bordas laterais alinhadas à foto (ambos
   esticam para 100% da largura da coluna flex). */
.photo-carousel {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.photo-carousel-thumb {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 0px solid rgba(247, 244, 236, 0.85);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  background: none;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.photo-carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: none;
}

.photo-carousel-thumb:hover {
  transform: translateY(-5px);
  border-color: var(--dourado);
  border: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

.photo-carousel-thumb.is-active {
  border-color: var(--dourado);
  box-shadow: 0 0 0 2px rgba(232, 192, 99, 0.5), 0 12px 26px rgba(0, 0, 0, 0.5);
}

/* Miniaturas do escritório (Stand de Vendas): só abrem o modal de zoom
   no clique, mesmo padrão do carrossel do Hero. */
.office-thumbs {
  display: flex;
  gap: 10px;
  margin: 4px 0 20px;
}

.office-thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.office-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

.office-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scene-photo--fachada {
  border-radius: 10px;
}

.scene-photo img {
  width: 100%;
  height: 100%;
  /* aspect-ratio: 4 / 3; */
  object-fit: cover;
  display: block;
  /* Zoom lento e contínuo (efeito "Ken Burns"): a foto respira sozinha
     enquanto a cena está na tela, sem precisar de hover do mouse. */
  animation: photoZoom 16s ease-in-out infinite alternate;
  will-change: transform;
}

/* Vídeo de cena (ex: hero): mesmo enquadramento da foto, mas sem o Ken
   Burns (não faz sentido animar zoom num vídeo que já se move sozinho). */
.scene-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

@keyframes photoZoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-photo img { animation: none; }
}

/* Miniatura do vídeo do escritório: ícone de play sobreposto, pra
   distinguir das miniaturas de foto no carrossel do Hero. */
.photo-carousel-thumb {
  position: relative;
}

.photo-carousel-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 61, 51, 0.75);
  color: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  pointer-events: none;
}

/* A partir de 768px (tablet e desktop, sem distinção): conteúdo à
   esquerda, foto à direita, 50%/50%. Abaixo disso (mobile de verdade)
   tudo empilha no cartão inferior. Antes esse corte era em 1024px, faixa
   em que muitas janelas de desktop "normais" (não maximizadas, notebook
   menor, zoom do navegador) ainda caem — por isso o corte foi reduzido. */
@media (min-width: 768px) {
  .scene-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header photo"
      "sub    sub";
    column-gap: 56px;
    row-gap: 44px;
    align-items: center;
  }

  .scene-header {
    grid-area: header;
    /* min-width:0 evita que o item de grid "recuse" encolher abaixo do
       conteúdo (comportamento padrão do Grid), o que empurraria a coluna
       da foto pra fora de proporção. */
    min-width: 0;
  }

  .scene-photo {
    grid-area: photo;
    margin: 0;
    min-width: 0;
  }

  .scene-inner > .scene-stats,
  .scene-inner > .highlight-cards,
  .scene-inner > .distance-cards {
    grid-area: sub;
  }

  /* Entregas: cabeçalho e carrossel empilhados em linha cheia (1 coluna),
     em vez do padrão 2 colunas — o carrossel precisa da largura toda. */
  .scene-inner.scene-inner--full {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "photo";
  }

  /* Números (Uma nova referência urbana em Espinosa): 3 colunas fixas
     (2 linhas de 3), em vez do auto-fit que espremia os 6 stats numa
     linha só em telas largas. */
  .scene-stats--3col {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Etapas de obra ("O desenho do bairro"): os 6 cards sempre numa
     linha só no desktop, em vez do auto-fit que quebrava em 3-4
     colunas dependendo da largura disponível. */
  .highlight-cards--stages {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Lançamento: bloco de preço/condições empilhado ACIMA da foto, dentro
     da própria coluna direita (em vez de ocupar a linha "sub" de largura
     total). .scene-photo, aninhado aqui, não é mais filho direto do
     grid — a regra ".scene-photo { grid-area:photo }" acima vira inerte
     nele (sem efeito, não é item de grid), e usamos gap pro espaçamento. */
  .scene-photo-col {
    grid-area: photo;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Quem Somos: colunas invertidas só no desktop — foto/marcas à
     esquerda, texto à direita. No mobile continua na ordem do HTML
     (texto primeiro, depois a imagem), sem mudança. */
  .scene-inner.scene-inner--reverse {
    grid-template-columns: 1fr 1.7fr;
    grid-template-areas:
      "photo header"
      "sub    sub";
  }
}

.badge {
  display: inline-block;
  background: rgba(232, 192, 99, 0.15);
  border: 1px solid rgba(232, 192, 99, 0.5);
  color: var(--dourado);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.overline {
  color: var(--dourado);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* Logo dentro da cena Hero (substitui a antiga logo fixa no topo) */

.hero-logo {
  width: 350px;
  height: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
}

.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(247, 244, 236, 0.75);
  margin: 0 0 16px;
}

.scene-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--off-white);
  /* text-transform:uppercase ; */
letter-spacing: 1px;
  line-height: 1.3;
  font-size: clamp(2rem, 4vw, 2.0rem);
  margin: 0 0 18px;
}

.scene-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  color: var(--dourado);
  margin: 0 0 20px;
}

.scene-description {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.75rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color:#FFF;
  /* max-width: 48ch; */
  margin: 0 0 8px;
}

/* Quem Somos: texto mais denso (5 parágrafos) — reduz um pouco o
   tamanho pra caber melhor sem dominar a cena. */
.scene-inner--reverse .scene-description {
  font-size: 0.9rem;
}

/* Stats grid — auto-fit: se equilibra ao número de itens (3, 4 ou 6),
   sem colunas órfãs nem espremidas. */

.scene-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 28px 32px;
  margin: 12px 0 0;
}

.scene-stats.price-highlight {
  /* background: rgba(232, 192, 99, 0.1); */
  border: 0px solid rgba(232, 192, 99, 0.3);
  border-radius: 18px;
  /* padding: 30px 28px; */
  margin-top: 8px;
}

/* Fundo transparente (o vídeo/overlay escuro aparece atrás) — por isso o
   texto usa tons claros (dourado/branco), que contrastam bem com esse
   fundo escuro, em vez dos tons escuros usados quando havia cartão branco. */
.stat-item {
  background: rgba(15, 61, 51, 1);
  border-radius: 14px;
  padding: 20px 18px;
  border-top: 3px solid var(--dourado);
  box-shadow: 0 10px 28px rgba(11, 43, 36, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(11, 43, 36, 0.32);
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
  font-weight: 600;
  color: var(--dourado);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(247, 244, 236, 0.65);
}

/* Highlights */

.highlight-title {
  display: block;
  font-family: var(--font-display);
  color: var(--dourado);
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.highlight-text {
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(247, 244, 236, 0.8);
}

/* Distances */

.distance-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* align-items:start (em vez do stretch padrão do grid): cada card
     assume só a própria altura de conteúdo — sem isso, o grid esticava
     todos os cards até a altura do mais alto da linha, sobrando espaço
     vazio e desigual no rodapé verde dos cards mais curtos. */
  align-items: start;
  gap: 20px;
  margin: 0;
}

.distance-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 61, 51, 1);
  border-top: 3px solid var(--dourado);
  box-shadow: 0 10px 28px rgba(11, 43, 36, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.distance-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(11, 43, 36, 0.32);
}

.distance-card-body {
  display: block;
  justify-content: space-between;
  align-items: baseline;
  min-height: 90px;
  padding: 14px 18px 16px;
}

.distance-place {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--off-white);
}

.distance-time {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dourado);
  white-space: nowrap;
  margin-left: 16px;
}

/* Buttons */

.scene-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-icon {
  flex-shrink: 0;
}

.btn-primary {
  background: var(--dourado);
  color: var(--verde);
  box-shadow: 0 6px 20px rgba(232, 192, 99, 0.25);
}

.btn-primary:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(232, 192, 99, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--dourado);
  border: 1.5px solid var(--dourado);
}

.btn-outline:hover {
  transform: scale(1.03);
  background: rgba(232, 192, 99, 0.1);
}

/* Destaque pulsante: um halo dourado que "respira" ao redor do botão,
   pra chamar atenção sem gritar — usado no CTA de assistir o vídeo. */
.btn-spotlight {
  margin-bottom: 28px;
  animation: btnSpotlightPulse 2.4s ease-in-out infinite;
}

.btn-spotlight:hover {
  animation-play-state: paused;
}

@keyframes btnSpotlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 192, 99, 0.5); }
  50% { box-shadow: 0 0 0 14px rgba(232, 192, 99, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-spotlight { animation: none; }
}

/* ------------------------------ Progress dots ---------------------------- */

.progress-indicator {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.progress-dot {
  width: auto;
  height: auto;
  padding: 10px;
  border-radius: 30px 30px 0 0;
  background: #0f3d33;
  border: none;
  cursor: pointer;
  transform-origin: bottom center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.progress-dot.active {
  background: var(--dourado);
  transform: scaleY(1.25);
}

/* ------------------------------ Footer ----------------------------------- */

.site-footer {
  background: var(--verde-escuro);
  color: rgba(247, 244, 236, 0.85);
  padding: 80px 24px 40px;
  text-align: center;
  border-top: 1px solid rgba(232, 192, 99, 0.15);
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.footer-logo {
  height: 244px;
  width: auto;
  margin: 0 auto 28px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 24px;
}

.footer-nav a {
  text-decoration: none;
  font-size: 0.85rem;
  color: rgba(247, 244, 236, 0.75);
  letter-spacing: 0.03em;
}

.footer-nav a:hover { color: var(--dourado); }

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}

.footer-social a {
  text-decoration: none;
  color: var(--dourado);
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-realizacao {
  font-size: 0.85rem;
  margin: 0 0 10px;
  color: rgba(247, 244, 236, 0.8);
}

.footer-registro,
.footer-disclaimer {
  font-size: 0.72rem;
  color: rgba(247, 244, 236, 0.45);
  margin: 0 0 6px;
  line-height: 1.5;
}

/* Lead form (opt-in component, hidden by default via HTML comment) */

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  max-width: 520px;
  margin-top: 20px;
}

/* Nome e WhatsApp dividem a linha; select, LGPD e botão ocupam as 2 colunas */
.lead-form select,
.lead-form-lgpd,
.lead-form button {
  grid-column: 1 / -1;
}

.lead-form input,
.lead-form select {
  padding: 12px 16px;
  border-radius: 8px;
  border: 0px solid rgba(232, 192, 99, 0.4);
  background: rgb(15 61 51);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.lead-form input::placeholder {
  color: rgba(247, 244, 236, 0.75);
  opacity: 1;
}

.lead-form-lgpd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(247, 244, 236, 0.7);
}

/* Highlight cards (Lazer) — grid com thumb placeholder no lugar de fotos reais */

.highlight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
  gap: 20px;
  margin: 0;
}

.highlight-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(15, 61, 51, 1);
  border-top: 0px solid var(--dourado);
  box-shadow: 0 10px 28px rgba(11, 43, 36, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(11, 43, 36, 0.32);
}

/* Sinaliza que a foto do card abre o modal de zoom ao clicar. */
.highlight-card .card-photo-43 img {
  cursor: zoom-in;
}

/* Padrão de foto usado em qualquer card (highlight, distância etc.):
   altura sempre proporcional à largura (4:3), imagem centralizada e
   cortada (cover) — funciona igual não importa o tamanho/orientação
   da foto original. */
.card-photo-43 {
  width: 100%;
  aspect-ratio: 4 / 2;
  /* trava o tamanho da moldura — a imagem sempre é cortada (object-fit:
     cover) pra caber nela, nunca o contrário, mesmo se a proporção
     original da foto for bem diferente de 4:3. */
  overflow: hidden;
}

.card-photo-43 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.highlight-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 20px;
  min-height: 130px;
}

/* Cards de etapas de obra (dobra "O desenho do bairro"): selo de status
   sobreposto à foto, mesma leitura rápida do checklist da seção estática
   de infraestrutura, só que por card. */
/* Fotos reais das etapas são em retrato (celular) — o corte 2:1 padrão
   dos highlight-cards cortaria quase tudo. Um quadrado preserva bem
   mais da foto (a máquina/obra sempre fica visível). */
.stage-card .card-photo-43 {
  position: relative;
  aspect-ratio: 1 / 1;
}

.stage-card .highlight-card-body {
  min-height: 190px;
}

.stage-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stage-badge--done {
  background: var(--dourado);
  color: var(--verde);
}

.stage-badge--progress {
  background: rgba(15, 61, 51, 0.9);
  color: var(--dourado);
  border: 1px solid var(--dourado);
}

.stage-badge--progress::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dourado);
  animation: stageBadgePulse 1.6s ease-in-out infinite;
}

@keyframes stageBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-badge--progress::before { animation: none; }
}

/* =========================================================================
   Seções estáticas (fora do vídeo scrubado): masterplan, obra
   ========================================================================= */

.static-section {
  padding: 100px 6vw;
  /* Essas seções ficam bem abaixo da dobra (depois do vídeo scrubado, que
     já tem ~870vh de scroll sozinho) — content-visibility evita o custo de
     layout/pintura delas até que estejam perto de entrar na tela. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.static-section.bg-light {
  background: var(--off-white);
  color: var(--verde);
}

.static-section.bg-dark {
  background: var(--verde-escuro);
  color: var(--off-white);
}

.static-section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.static-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.static-section-grid > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .static-section-grid { grid-template-columns: 1fr 1fr; }
}

.static-overline {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.bg-light .static-overline { color: var(--dourado-escuro); }
.bg-dark .static-overline { color: var(--dourado); }

.static-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 18px;
  max-width: 640px;
}

.static-desc {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  font-size: 1rem;
  max-width: 60ch;
  margin: 0 0 36px;
  opacity: 0.85;
}

/* FAQ (seção "sobre"): accordion nativo via <details>/<summary>, sem
   precisar de JS — o conteúdo já existe no HTML independente de estar
   aberto ou fechado, então buscadores/IAs sempre conseguem ler tudo. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.faq-item {
  border: 1px solid rgba(15, 61, 51, 0.15);
  border-radius: 12px;
  padding: 4px 20px;
}

.faq-item summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  float: right;
  color: var(--dourado-escuro);
  font-size: 1.2rem;
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item p {
  margin: 0 0 18px;
  line-height: 1.6;
  opacity: 0.85;
}

/* Dobra final (FAQ/"sobre"): conteúdo centralizado, já que aqui não tem
   foto do lado — texto sozinho ocupando a largura toda fica melhor
   equilibrado centralizado do que alinhado à esquerda. */
#sobre .static-section-inner {
  text-align: center;
}

#sobre .static-title,
#sobre .static-desc {
  margin-left: auto;
  margin-right: auto;
}

#sobre .faq-list {
  margin: 0 auto;
  text-align: left;
}

/* Obra ("Etapas de infraestrutura concluídas"): mesmo tratamento do
   #sobre — conteúdo centralizado, já que aqui também não tem foto do
   lado. A linha do tempo em si (marcador + texto) continua alinhada à
   esquerda internamente, só o bloco como um todo fica centralizado. */
#obra .static-section-inner {
  text-align: center;
}

#obra .static-title,
#obra .static-desc,
#obra .construction-timeline {
  margin-left: auto;
  margin-right: auto;
}

#obra .timeline-item {
  text-align: left;
}

/* Masterplan */

.masterplan-visual {
  position: relative;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 61, 51, 1.25);
}

.masterplan-visual img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.masterplan-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px 28px;
}

.masterplan-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dourado-escuro);
  flex-shrink: 0;
}

/* Obra / andamento — linha do tempo vertical: a linha dourada "cresce"
   e cada etapa desliza pra dentro conforme a seção entra na tela (ver
   scroll-video.js), passando a sensação de evolução/progresso real, em
   vez de uma lista estática de cards já prontos. */

.construction-timeline {
  position: relative;
  max-width: 640px;
}

.timeline-line {
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom, var(--dourado), rgba(232, 192, 99, 0.35));
  transform-origin: top center;
  transform: scaleY(0);
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 36px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dourado);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 0 0 4px var(--verde-escuro);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 7px;
}

.timeline-status {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dourado);
}

.timeline-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.timeline-text {
  font-size: 0.85rem;
  color: rgba(247, 244, 236, 0.65);
  line-height: 1.5;
}

/* Entregas: carrossel horizontal de fotos reais de clientes com o lote
   entregue — prova social, colocado logo após a etapa de obra. */

.entregas-carousel {
  position: relative;
}

.entregas-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.entregas-track::-webkit-scrollbar {
  display: none;
}

.entregas-item {
  flex: 0 0 auto;
  width: 160px;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  padding: 0;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.entregas-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(11, 43, 36, 0.35);
}

.entregas-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.entregas-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--verde);
  color: var(--off-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.entregas-nav:hover {
  background: var(--dourado);
  color: var(--verde);
  transform: translateY(-50%) scale(1.06);
}

.entregas-prev { left: -8px; }
.entregas-next { right: -8px; }


/* Checklist simples (recap de infraestrutura) */

/* =========================================================================
   Responsive layout
   ========================================================================= */

/* A partir de 768px: conteúdo preenche o container (o vídeo fica só como
   fundo ambiente atrás de tudo, sem "vazar" por nenhuma borda). Um teto em
   px (bem generoso) só entra em ação em monitores ultrawide, pra evitar
   colunas de texto absurdamente largas — centraliza sozinho via auto-margin. */
@media (min-width: 768px) {
  .panel-content { max-width: 1280px; margin: 0 auto; }
  .gradient-panel { padding: 0 5vw; }
  
}

/* Mobile <768px: cartão inferior */
@media (max-width: 767px) {
  
  /* Se sobrar um card sozinho na última linha (número ímpar de itens,
     caso do Lazer com 5 cards, ou o bloco de preço do Lançamento com 3),
     ele preenche as 2 colunas inteiras em vez de ficar só na metade da
     largura com um vão vazio ao lado. */
  .highlight-card:last-child:nth-child(odd),
  .distance-card:last-child:nth-child(odd),
  .stat-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .gradient-panel {
    background: none;
    align-items: flex-end;
    padding: 0;
    pointer-events: none;
  }

  .panel-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    /* max-height: 52vh; */
    overflow-y: auto;
    /* backdrop-filter:blur(9px) removido — recalcular esse blur em tela
       cheia a cada frame da animação de troca de cena (que já acontece
       durante o scroll ativo) é um dos maiores custos de fluidez no
       mobile. Compensa com mais opacidade no gradiente, sem precisar
       desfocar o vídeo por baixo pra manter o texto legível. */
    background: linear-gradient(to bottom, rgb(15 61 51 / 88%) 0%, rgb(15 61 51 / 55%) 100%);
    /* border-radius: 24px 24px 0 0; */
    padding: 26px 22px calc(24px + env(safe-area-inset-bottom));
  }

  .scene-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .scene-description { font-size: 0.9rem; }
  .scene-photo { margin: 16px 0 20px; }
  .scene-photo img,
  .scene-photo--hero img {
     /* aspect-ratio: 16 / 9;  */
     border-radius: 14px; }
  .scene-stats { gap: 18px 20px; }
  .highlight-cards { gap: 14px; }

  .office-thumbs {
    justify-content: center;
  }

  /* Dobras 2 (Lazer), 5 (Infraestrutura) e 6 (Localização): no mobile
     os cards ficam em 2 colunas fixas, em vez do auto-fit (que no
     desktop se ajusta livremente ao espaço disponível). */
  .highlight-cards,
  .distance-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Card de distância (Localização): em 2 colunas o card fica estreito
     demais pra nome do lugar + selo de tempo lado a lado — o selo
     "nowrap" acabava vazando pra fora da caixa. Empilha um embaixo do
     outro em vez de espremer na mesma linha. */
  .distance-card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .distance-time {
    /* margin-left: 0; */
  }


  /* Bloco de preço do Lançamento: respiro maior antes do badge/título
     que vêm logo abaixo, pra não parecer que tudo está colado. */
  .scene-stats.price-highlight {
    margin-bottom: 28px;
  }

  /* Dobras Qualidade de Vida (números), Infraestrutura completa e Cada
     espaço é uma extensão da sua casa (lazer): no mobile a foto some, o
     texto/cards já contam a história sozinhos e sobra mais espaço na
     tela. */
  .scene-photo--numeros,
  .scene-photo--infraestrutura,
  .scene-photo--lazer {
    display: none;
  }
  .scene-actions { gap: 10px; }
  .btn { padding: 12px 22px; font-size: 0.85rem; }
  .lead-form { grid-template-columns: 1fr; }
  .lead-form input { grid-column: 1 / -1; }

  /* Centraliza o conteúdo de texto de cada cena no mobile (título,
     subtítulo, descrição, badge) — no desktop fica alinhado à esquerda
     por causa do grid 2 colunas, mas no mobile tudo empilha e fica mais
     equilibrado centralizado. */
  .scene-header {
    text-align: center;
  }

  .hero-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .scene-actions {
    justify-content: center;
  }

  .lead-form {
    margin-left: auto;
    margin-right: auto;
  }

  /* Entregas: no mobile o carrossel horizontal vira uma grade de 2
     colunas — mais fácil de rolar na vertical (junto com o resto da
     página) do que arrastar de lado num carrinho estreito. */
  .entregas-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .entregas-item {
    width: auto;
  }

  .entregas-nav {
    display: none;
  }

  .progress-indicator {
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
  }

  /* Dots maiores no mobile — mais fáceis de mirar/tocar com o dedo.
     padding-bottom:0 deixa a aba rente à borda inferior da tela. */
  .progress-dot {
    padding: 16px 16px 0;
  }

  .static-section { padding: 64px 6vw; }
}

/* =========================================================================
   Modo estático (fallback sem scrub): usado tanto pra
   prefers-reduced-motion quanto pro mobile — no mobile o vídeo nunca
   roda (sem a dinâmica de scroll-scrub não faz sentido baixar/decodar
   vídeo nenhum), então a página vira uma rolagem normal e contínua,
   com as cenas empilhadas em blocos e uma imagem estática no lugar do
   vídeo. Mesma classe/mecanismo pros dois casos, já que o resultado é
   idêntico (JS: prefersReducedMotion || isMobileViewport).
   ========================================================================= */

html.reduced-motion .progress-indicator,
html.reduced-motion .gradient-panel {
  display: none;
}

html.reduced-motion .scroll-track {
  height: auto !important;
}

/* .sticky-stage inteira some — sem vídeo, ela não tem mais função (era só
   o "palco" fixo por trás do texto). A foto vira um fundo fixo (parallax)
   por trás da página inteira, ver .mobile-parallax-bg abaixo. */
html.reduced-motion .sticky-stage {
  display: none;
}

/* Fundo fixo em tela cheia: fica parado enquanto o conteúdo rola por
   cima — como as dobras abaixo ficam translúcidas, a foto "aparece" por
   trás delas, criando o efeito parallax. position:fixed (em vez de
   background-attachment:fixed no body) tem suporte bem mais confiável
   em navegadores mobile. */
.mobile-parallax-bg {
  display: none;
}

html.reduced-motion .mobile-parallax-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('../img/foto-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* As dobras precisam de position+z-index pra empilhar ACIMA do fundo
   fixo (elemento position:fixed some por trás de conteúdo comum de
   fluxo normal, sem isso). O verde vira translúcido de propósito, pra
   deixar a foto de fundo aparecer através. */
html.reduced-motion .scene-def {
  position: relative;
  z-index: 1;
  display: block;
  padding: 80px 24px;
  background: rgba(15, 61, 51, 0.86);
  border-top: 1px solid rgba(232, 192, 99, 0.12);
}

html.reduced-motion .scene-def:nth-child(even) {
  background: rgba(11, 43, 36, 0.86);
}

html.reduced-motion .scene-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* O fundo fixo (position:fixed) fica atrás de conteúdo comum de fluxo
   normal por padrão — sem isso, masterplan/obra/FAQ/rodapé (que ficam
   fora do scroll-track) sumiriam atrás da foto fixa assim que o usuário
   rolasse além das dobras. Continuam com fundo sólido (sem
   transparência) — o efeito parallax é só nas dobras, aqui é só
   garantir que o conteúdo não desapareça. */
html.reduced-motion .static-section,
html.reduced-motion .site-footer {
  position: relative;
  z-index: 1;
}

/* =========================================================================
   Lupa circular no hover das fotos (JS: cursor "lens" que mostra uma
   versão ampliada da imagem embaixo do cursor, tipo lupa de galeria)
   ========================================================================= */

.cursor-lens {
  position: fixed;
  top: 0;
  left: 0;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(247, 244, 236, 0.25);
  background-color: var(--verde-escuro);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 9997;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.cursor-lens.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Some com o cursor padrão só nas fotos "lupáveis" — a lupa assume o
   lugar dele. Usa combinador direto (>) pra não afetar as miniaturas do
   carrossel, que ficam mais aninhadas e continuam clicáveis normalmente. */
.scene-photo > img,
.scene-photo-frame > img,
.masterplan-visual > img {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  .cursor-lens { display: none; }
}

/* =========================================================================
   Modal de galeria: abre ao clicar em qualquer foto, navega entre todas
   as imagens do site como um carrossel único (setas, teclado, clique fora).
   ========================================================================= */

html.modal-open {
  overflow: hidden;
}

.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 43, 36, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.photo-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.photo-modal-stage {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
}

.photo-modal-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.photo-modal-caption {
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: center;
  margin: 0;
  opacity: 0.85;
}

.photo-modal-close,
.photo-modal-nav {
  position: absolute;
  border: none;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.1);
  color: var(--off-white);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.photo-modal-close:hover,
.photo-modal-nav:hover {
  background: var(--dourado);
  color: var(--verde);
  transform: scale(1.06);
}

.photo-modal-close {
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
}

.photo-modal-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 1.8rem;
}

.photo-modal-nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.photo-modal-prev { left: 20px; }
.photo-modal-next { right: 20px; }

@media (max-width: 640px) {
  .photo-modal-nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .photo-modal-prev { left: 8px; }
  .photo-modal-next { right: 8px; }
  .photo-modal-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.3rem; }
  .photo-modal-caption { font-size: 0.85rem; }
}

/* =========================================================================
   Modal do vídeo de apresentação: mesmo arquivo do fundo, mas numa cópia
   independente, com controles e som — nunca mexe no <video> mudo que
   controla o scroll.
   ========================================================================= */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 43, 36, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal-stage {
  width: min(92vw, 1100px);
  padding: 0 24px;
}

.video-modal-stage video {
  width: 100%;
  max-height: 82vh;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}

.video-modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.1);
  color: var(--off-white);
  line-height: 1;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.video-modal-close:hover {
  background: var(--dourado);
  color: var(--verde);
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .video-modal-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.3rem; }
}

/* =========================================================================
   Botão flutuante do WhatsApp: fixo no canto inferior direito, visível em
   qualquer cena/seção da página. z-index abaixo dos modais (10000) de
   propósito — quando um modal abre, o fundo escuro dele cobre o botão
   normalmente, em vez dele ficar flutuando por cima do modal.
   ========================================================================= */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(11, 43, 36, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(11, 43, 36, 0.5);
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .whatsapp-float svg { width: 26px; height: 26px; }
}