/* ==========================================================================
   VILLAGGIO TREVISO - STYLESHEET
   Color Palette:
   - Primary Burgundy: #57090a
   - Accent Orange:   #f47721
   - White:           #FFFFFF
   Font: Plus Jakarta Sans
   ========================================================================== */

/* Tipografia 100% local — os arquivos estao em assets/Plus_Jakarta_Sans/.
   Sem Google Fonts: evita request externo e mantem a fonte disponivel offline. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --burgundy: #57090a;
  --burgundy-dark: #3f0506;
  --orange: #f47721;
  --orange-hover: #e06612;
  --white: #ffffff;
  --off-white: #f2f2f2; /* amostrado do fundo do layout/7.png */
  --gray-light: #eaeaea;
  --gray-text: #4a4a4a;
  --dark-overlay: rgba(0, 0, 0, 0.45);
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --container-max-width: 1320px;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --border-radius-card: 24px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Compensa a altura da barra fixa ao pular para uma ancora. */
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-family);
  color: #222;
  background-color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: var(--transition);
}

.container-width {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Quebra de linha manual que so vale do tablet para cima. Abaixo disso o texto
   ja quebra sozinho e o <br> deixaria linhas curtas soltas. */
@media (max-width: 768px) {
  .br-desktop {
    display: none;
  }
}

/* Acessivel para leitor de tela, invisivel na tela.
   Usado no h1 do hero: o titulo esta rasterizado dentro de _01.webp. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Garante que o atributo hidden vença qualquer display de classe/id. E o que
   mantem a secao do tour fora do ar sem precisar comentar o HTML. */
[hidden] {
  display: none !important;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
  text-align: center;
}

.btn-orange {
  background-color: var(--orange);
  color: var(--white);
}

.btn-orange:hover {
  background-color: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 119, 33, 0.35);
}

/* Botao apenas informativo: nao leva a lugar nenhum, entao nao reage ao mouse. */
.btn-estatico {
  cursor: default;
  pointer-events: none;
}

/* Chamada no lugar dos antigos botoes de acao: mantem o destaque, sem cara de
   botao. O seletor com .map-text-box so existe para vencer a regra
   ".map-text-box p", que e mais especifica que a classe sozinha. */
.chamada-corretor,
.map-text-box .chamada-corretor {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin-bottom: 0;
}

.btn-white {
  background-color: var(--white);
  color: var(--burgundy);
}

.btn-white:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.btn-white-orange-text {
  background-color: var(--white);
  color: var(--orange);
}

.btn-white-orange-text:hover {
  background-color: var(--burgundy);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-white {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* ==========================================================================
   #inicio — HERO & NAVBAR & STATS BAR
   ========================================================================== */
#inicio {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--white);
}

/* A capa toma a primeira tela inteira; a barra de destaques fica logo abaixo,
   aparecendo na rolagem.

   O teto de altura evita o caso ruim: em telas altas e estreitas (tablet em pe),
   esticar a imagem ate 100vh comeria quase um terco de cada lateral e levaria
   junto o lockup Villaggio Treviso. 0.536 = proporcao da imagem (1003/1922)
   com folga de 3%, entao o corte lateral nunca passa de ~1,5% por lado. */
.hero-cover {
  position: relative;
  height: min(100vh, calc(100vw * 0.536));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: var(--burgundy);
}

/* A imagem entra com a largura toda e ancorada pela base:
   - mais alta que a tela  -> o excedente e cortado no topo (nada corta nas
     laterais, entao o lockup Villaggio Treviso fica preservado);
   - mais baixa que a tela -> min-height estica ate preencher e o object-fit
     apara as laterais de leve, evitando faixa vazia no topo. */
.hero-cover-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: center bottom;
  flex-shrink: 0;
}

/* Gradiente de leitura: escurece topo (navbar) e rodape (botoes). */
.hero-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Navbar — fixa no topo, acompanha a rolagem.
   Comeca transparente sobre a capa e ganha fundo laranja ao rolar (.scrolled). */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 24px 0;
  background-color: transparent;
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.main-header.scrolled,
.main-header.menu-open {
  background-color: var(--orange);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.main-header.scrolled {
  padding: 12px 0;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.6vw, 32px);
}

.brand-logo img {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: height 0.3s ease;
}

.main-header.scrolled .brand-logo img {
  height: 32px;
}

/* Tudo em uma linha so: nada de quebra entre itens nem dentro de um item. */
.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.15vw, 18px);
  list-style: none;
}

.nav-links a {
  font-size: clamp(0.66rem, 0.55vw + 0.26rem, 0.74rem);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--orange);
}

/* Sobre o laranja da barra rolada, o hover laranja sumiria. */
.main-header.scrolled .nav-links a:hover {
  color: var(--burgundy);
}

/* Precisa da especificidade de .nav-links a, senao o branco daquela regra
   vence e o texto do botao fica branco sobre fundo branco (invisivel). */
.nav-links .btn-nav-contact {
  background-color: var(--white);
  color: var(--burgundy);
  padding: 10px clamp(14px, 1.1vw, 20px);
  border-radius: 0;
  font-weight: 700;
}

.nav-links .btn-nav-contact:hover {
  background-color: var(--burgundy);
  color: var(--white);
}

.main-header.scrolled .nav-links .btn-nav-contact:hover {
  background-color: var(--burgundy);
  color: var(--white);
}

.mobile-toggle {
  display: none;
  background: none;
  color: var(--white);
  font-size: 1.8rem;
}

/* Conteudo sobreposto: ocupa a capa inteira, do topo ao rodape */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 90px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

/* Os filhos voltam a ser clicaveis (o container so deixa o clique passar
   para nao bloquear a imagem atras). */
.hero-content a,
.hero-content button {
  pointer-events: auto;
}

.hero-flex-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.hero-registration-badge {
  text-align: right;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.hero-cta-bottom-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 60px;
}

.hero-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

/* Bottom Stats Bar */
.hero-stats-bar {
  position: relative;
  z-index: 5;
  background-color: var(--burgundy);
  padding: 24px 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.stats-bar-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.stat-diamond {
  color: var(--orange);
  font-size: 1rem;
}

.stat-item-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item-text .main-num {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
}

.stat-item-text .sub-lbl {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Espaco no topo com a altura exata de uma linha de rotulo, para o numero
   deste item ficar na mesma altura dos vizinhos que tem rotulo em cima. */
.stat-bar-item--sem-rotulo .stat-item-text::before {
  content: '\00a0';
  font-size: 0.85rem;
  font-weight: 500;
}

.stat-single-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
}

/* ==========================================================================
   #nova-fase — CHEGOU A FASE DA VIDA...
   ========================================================================== */
#nova-fase {
  padding: 100px 0;
  background-color: var(--white);
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.content-heading-burgundy {
  color: var(--burgundy);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 28px;
}

.text-paragraph {
  color: var(--gray-text);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.text-col-action {
  margin-top: 36px;
}

.card-img-wrapper {
  border-radius: var(--border-radius-card);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-img-wrapper:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   #novo-estilo — DESCUBRA UM NOVO ESTILO DE VIVER (FULL BANNER)
   ========================================================================== */
#novo-estilo {
  position: relative;
  background-image: url('../assets/image/_04.webp');
  background-size: cover;
  /* Recorte em 76% da altura: mostra a praca, o playground e a grama do
     primeiro plano, descartando o ceu no topo.
     A altura minima e necessaria — na faixa curta de antes o recorte pegava
     so a grama (embaixo) ou so a copa das arvores (centralizado). */
  background-position: 1% 76%;
  min-height: clamp(280px, 34vw, 640px);
  display: flex;
  align-items: center;
  padding: clamp(56px, 6vw, 110px) 0;
  color: var(--white);
  text-align: center;
}

#novo-estilo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.banner-center-box {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
}

/* Titulo sempre em uma linha: nao quebra, e o corpo acompanha a largura da
   tela (vw) para nunca estourar. O letter-spacing e proporcional em vez de
   fixo em px, senao nas telas pequenas ele sozinho ja passaria da largura. */
.banner-title {
  font-size: clamp(0.75rem, 3.7vw, 3.3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.banner-subtitle {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  opacity: 0.95;
}

/* ==========================================================================
   #o-lar — O LAR QUE VOCÊ CONSTRUIU...
   ========================================================================== */
#o-lar {
  padding: 100px 0;
  background-color: var(--white);
}

/* A partir do desktop a coluna da imagem fica mais estreita (como no
   layout/4.png) e as duas colunas passam a ter a mesma altura, entao o topo do
   titulo e a base do botao encostam exatamente nas bordas da imagem.
   Fica em min-width para nao atropelar o empilhamento de <=1024px. */
@media (min-width: 1025px) {
  #o-lar .two-col-grid {
    grid-template-columns: 0.78fr 1.22fr;
    align-items: stretch;
  }

  #o-lar .content-text-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* O botao encosta na base da imagem em vez de ficar solto no meio. */
  #o-lar .text-col-action {
    margin-top: auto;
    padding-top: 36px;
  }
}

/* ==========================================================================
   #villaggio-treviso — MAIS QUE UMA MUDANÇA DE ENDEREÇO...
   ========================================================================== */
#villaggio-treviso {
  position: relative;
  background-image: url('../assets/image/_06.webp');
  background-size: cover;
  background-position: center;
  padding: 140px 0;
  color: var(--white);
}

#villaggio-treviso::before {
  content: '';
  position: absolute;
  inset: 0;
  /* _06.webp ja vem escurecida (brilho medio 20%) — overlay leve so para firmar
     o texto, que termina por volta de 63% da largura. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%);
}

/* Sem max-width proprio: o de 680px sobrepunha o do .container-width (mesma
   especificidade, declarado depois) e, com o margin: 0 auto herdado, o bloco
   ficava centralizado na tela em vez de alinhado a esquerda do container. */
.villaggio-treviso-content {
  position: relative;
  z-index: 2;
}

/* Os paragrafos nao passam da largura da 1a linha do titulo.
   "Mais que uma mudança de endereço." mede ~16.9em na Plus Jakarta Sans
   ExtraBold, entao o limite acompanha o mesmo clamp do titulo multiplicado por
   16.9 (2.2rem -> 37.2rem | 4vw -> 68vw | 3.2rem -> 54.2rem). Se a fonte
   renderizar um pouco diferente do calculado, ajustar estes tres valores. */
.villaggio-treviso-content .text-paragraph {
  max-width: clamp(37.2rem, 68vw, 54.2rem);
}

.section-tag-orange {
  color: var(--orange);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  display: block;
}

.banner-heading-white {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
}

/* ==========================================================================
   #lazer — DESFRUTE A VIDA SEM HORA MARCADA (LEISURE + PRIVATE)
   ========================================================================== */
#lazer {
  padding: 100px 0;
  background-color: var(--white);
}

.section-intro-header {
  max-width: 760px;
  margin-bottom: 48px;
}

/* Galeria de lazer — faixa de largura total.
   O truque de 100vw + margem negativa tira o bloco do .container-width para
   ele sangrar ate as bordas da tela (o body ja tem overflow-x: hidden). */
.leisure-carousel-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 70px;
}

/* Rolagem horizontal por arraste/swipe — sem setas, conforme o layout/6.png. */
.leisure-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.leisure-viewport::-webkit-scrollbar {
  display: none;
}

.leisure-viewport.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* Sem padding lateral: a primeira imagem encosta na borda esquerda da tela
   (e a ultima na direita, quando a faixa chega ao fim da rolagem). */
.leisure-grid {
  display: flex;
  gap: 32px;
  width: max-content;
}

/* Proporcao e largura tiradas do layout/6.png: card de ~740px por ~574px
   em uma tela de 1920px. */
.leisure-card {
  position: relative;
  flex: 0 0 clamp(280px, 38vw, 760px);
  aspect-ratio: 1.29;
  border-radius: var(--border-radius-card);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  /* start, nao center: com snap "center" e mandatory o navegador centralizaria
     o primeiro card ja no carregamento, e ele nao encostaria na borda. */
  scroll-snap-align: start;
}

.leisure-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  transition: transform 0.5s ease;
}

.leisure-card:hover img {
  transform: scale(1.06);
}

/* Sem card: no layout/6.png o bloco fica direto sobre o branco — como card, o
   fundo branco sobre fundo branco deixaria so a sombra flutuando.
   Botao abaixo do texto e alinhado a esquerda, nao ao lado. */
.privacy-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/* ==========================================================================
   #casa-dos-sonhos — TRANSFORME A CASA DOS SEUS SONHOS (TABS & GALLERY)
   ========================================================================== */
#casa-dos-sonhos {
  padding: 100px 0;
  background-color: var(--off-white);
}

.residence-tabs {
  display: flex;
  gap: 16px;
  margin: 36px 0 40px;
  flex-wrap: wrap;
}

/* Branca sobre o cinza da secao, como no layout/7.png. O #ededed de antes
   sumia sobre o fundo #f2f2f2. */
.tab-btn {
  padding: 14px 28px;
  border-radius: 0;
  font-weight: 700;
  font-size: 1rem;
  background-color: var(--white);
  color: var(--gray-text);
  border: 1px solid #ddd;
}

.tab-btn.active, .tab-btn:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}

/* Cantos retos e sem fundo proprio, como no layout/7.png — atras das
   miniaturas aparece o cinza da secao. */
.residence-display-box {
  position: relative;
}

/* A sombra fica na foto, nao no wrapper: no wrapper ela contornaria tambem a
   faixa de miniaturas, que agora e transparente.
   A caixa usa a mesma proporcao dos arquivos (7:5 — as 29 imagens ficam entre
   1.392 e 1.403), entao a foto aparece inteira e ainda assim preenche tudo,
   sem corte e sem tarja. A altura fixa de 520px de antes cortava. */
.main-residence-photo {
  width: 100%;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.main-residence-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}

/* Rola na horizontal, mas com a barra escondida (continua funcionando por
   roda, trackpad e swipe). Fundo transparente: o branco destoava do cinza. */
.residence-thumbnails-strip {
  display: flex;
  gap: 16px;
  padding: 20px 0 0;
  background-color: transparent;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.residence-thumbnails-strip::-webkit-scrollbar {
  display: none;
}

.residence-thumb {
  width: 130px;
  height: 93px;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  flex-shrink: 0;
  opacity: 0.7;
  transition: var(--transition);
}

.residence-thumb.active, .residence-thumb:hover {
  border-color: var(--orange);
  opacity: 1;
}

.residence-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Miniatura do video: escurece a capa e marca com o play laranja, para nao
   passar por mais uma foto no meio da fita. */
.residence-thumb--video {
  position: relative;
}

.residence-thumb--video img {
  filter: brightness(0.7);
}

.residence-thumb--video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--orange);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* O video e vertical (9:16) dentro de um palco 7:5, entao sobra faixa dos dois
   lados. O vinho assume essa sobra como moldura — em transparente ela virava
   um rasgo do cinza da secao. */
.main-residence-photo video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--burgundy);
  display: block;
}

.main-residence-photo img[hidden],
.main-residence-photo video[hidden] {
  display: none;
}

/* ==========================================================================
   #localizacao — LOCALIZAÇÃO IDEAL (ORANGE MAP SECTION)
   ========================================================================== */
#localizacao {
  background-color: var(--orange);
  color: var(--white);
  padding: 90px 0;
}

.map-section-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
}

.map-text-box p {
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 36px;
}

.map-graphic-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-graphic-box img {
  max-height: 480px;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Sem filtro de cor: o SVG ja traz as cores certas (rio e rotulos em #580b0d,
     pinos em #fff). Forcar branco achatava os dois tons em um so. */
}

/* ==========================================================================
   #alfablu-urbanismo — ALFABLU URBANISMO (HERITAGE & STATS)
   ========================================================================== */
#alfablu-urbanismo {
  position: relative;
  background-image: url('../assets/image/_10.webp');
  background-size: cover;
  background-position: center;
  padding: 120px 0 80px;
  color: var(--white);
}

#alfablu-urbanismo::before {
  content: '';
  position: absolute;
  inset: 0;
  /* _10.webp ja vem escurecida (brilho medio 18%) — overlay leve, senao a aerea some */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.alfablu-urbanismo-content {
  position: relative;
  z-index: 2;
}

.company-top-text {
  max-width: 800px;
  margin-bottom: 50px;
}

.company-divider-line {
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
  margin: 50px 0;
}

/* Colunas de texto com os losangos em colunas proprias (auto) no meio.
   Antes o losango era o primeiro filho da coluna, entao ficava colado no texto
   e comia largura dele; agora o gap de 48px o afasta dos dois lados.

   Duas linhas na grade — titulos e descricoes — para o losango poder se
   centralizar so na linha do titulo, e nao no bloco titulo+descricao. */
.company-stats-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 48px;
  row-gap: 10px;
  align-items: start;
}

/* subgrid: a coluna ocupa as duas linhas da grade mae e repassa essas linhas
   aos filhos, entao todos os titulos dividem a linha 1 e todas as descricoes
   comecam juntas na linha 2. */
.company-stat-col {
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: subgrid;
  row-gap: 10px;
  text-align: center;
}

.company-stats-grid > .stat-diamond {
  grid-row: 1;
  font-size: 1.4rem;
  align-self: center;
  line-height: 1;
}

/* Sem subgrid o losango cai no topo da linha; este recuo o deixa na altura da
   primeira linha do titulo. */
@supports not (grid-template-rows: subgrid) {
  .company-stat-col {
    display: block;
  }

  .company-stats-grid > .stat-diamond {
    align-self: start;
    margin-top: 0.6em;
  }
}

.stat-big-title {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
}

/* "47 anos" e o numero de destaque da faixa, como no layout/9.png. */
.stat-big-title--destaque {
  font-size: 2.6rem;
  line-height: 1.1;
}

.stat-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   #tour-virtual — DESCUBRA ESSA NOVA FORMA DE VIVER (TOUR VIRTUAL)
   ========================================================================== */
#tour-virtual {
  padding: 100px 0;
  background-color: var(--white);
}

.tour-card-trigger {
  position: relative;
  border-radius: var(--border-radius-card);
  overflow: hidden;
  height: 480px;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  margin-top: 40px;
}

.tour-card-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tour-card-trigger:hover img {
  transform: scale(1.04);
}

.tour-overlay-content {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: var(--transition);
}

.tour-card-trigger:hover .tour-overlay-content {
  background: rgba(0, 0, 0, 0.2);
}

.tour-big-text {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  opacity: 0.9;
}

.play-icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-top: 20px;
  box-shadow: 0 8px 25px rgba(244, 119, 33, 0.5);
  transition: var(--transition);
}

.tour-card-trigger:hover .play-icon-circle {
  transform: scale(1.15);
}

/* ==========================================================================
   #proximo-capitulo — O PRÓXIMO CAPÍTULO DA SUA VIDA...
   ========================================================================== */
#proximo-capitulo {
  position: relative;
  background-image: url('../assets/image/_12.webp');
  background-size: cover;
  background-position: center;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--white);
}

#proximo-capitulo::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Amostrado do layout/11.png: o escurecimento la fica em ~0.14 no meio e
     ~0.21 na borda direita. O 0.65/0.85 de antes apagava a foto. */
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.32) 100%);
}

/* Bloco ancorado a direita; a largura define onde ele comeca.
   min(870px, 56vw) -> comeca por volta de 55% da largura da tela. */
.proximo-capitulo-content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  max-width: min(870px, 56vw);
  padding: 100px clamp(24px, 5.7vw, 110px) 60px;
}

/* Menor que no container 5: aqui a caixa tem 650px, e no tamanho compartilhado
   o titulo ocupava 5 linhas. Assim fica em 3, como no layout/11.png.
   Escopado por #proximo-capitulo para nao encolher o titulo do container 5. */
#proximo-capitulo .banner-heading-white {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
}

/* Sem fundo e sem blur: a barra fica direto sobre a foto. */
.proximo-capitulo-footer-bar {
  position: relative;
  z-index: 5;
  padding: 20px 0;
  font-size: 0.9rem;
}

/* Logo e descricao juntas a esquerda; so a matricula vai para a direita.
   O space-between de antes espalhava os tres pela largura toda. */
.proximo-capitulo-bar-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.proximo-capitulo-bar-flex > :last-child {
  margin-left: auto;
}

.proximo-capitulo-bar-logo img {
  height: 28px;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   #contato — FOOTER
   ========================================================================== */
#contato {
  background-color: var(--orange);
  color: var(--white);
  padding: 70px 0 30px;
  position: relative;
}

.footer-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

/* Rotulo em cima, formulario no meio, redes sociais embaixo e a direita. */
.footer-signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
}

.newsletter-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.newsletter-form input {
  padding: 12px 18px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

/* Vazado com borda fina, nao em vinho solido. */
.newsletter-form button {
  width: 46px;
  align-self: stretch;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: transparent;
  color: var(--white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-form button:hover {
  background-color: var(--white);
  color: var(--orange);
}

.social-icons-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.social-icon-btn:hover {
  background-color: var(--burgundy);
  color: var(--white);
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.footer-col-contato {
  text-align: right;
}

.footer-col-contato .footer-col-list {
  align-items: flex-end;
}

.footer-col-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.footer-col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
}

.footer-col-list a:hover {
  text-decoration: underline;
}

/* 1fr auto 1fr: a linha legal fica no centro real da pagina e a assinatura
   da agencia encosta na direita, sem puxar o texto para o lado. */
.footer-subline {
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: 0.82rem;
}

.footer-legal {
  grid-column: 2;
  text-align: center;
  opacity: 0.9;
}

.footer-subline > .agency {
  grid-column: 3;
}

/* Flutua sobre a pagina e, ao alcancar a linha legal do rodape, ancora logo
   acima dela (classe .parado, aplicada pelo JS) em vez de passar por cima. */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float.parado {
  position: absolute;
  bottom: var(--parada, 90px);
}

/* Lightbox Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

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

.modal-container {
  width: 90%;
  max-width: 900px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 10;
}

.modal-content-box {
  padding: 40px;
  color: #fff;
  text-align: center;
}

/* Responsive Breakpoints */
/* Abaixo de ~1120px os 8 itens do menu nao cabem em uma linha so,
   entao a navegacao vira menu sanfona no botao hamburguer. */
@media (max-width: 1120px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--orange);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px;
    gap: 16px;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 0.9rem;
  }

  .nav-links .btn-nav-contact {
    text-align: center;
  }

  .mobile-toggle {
    display: block;
  }
}

@media (max-width: 1024px) {
  .hero-main-grid,
  .two-col-grid,
  .map-section-grid,
  .privacy-box {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .hero-subbrand-box {
    align-items: flex-start;
    text-align: left;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Empilhado, o losango separador nao faz sentido e a subgrid nao se aplica. */
  .company-stats-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 40px;
  }

  .company-stat-col {
    display: block;
    grid-row: auto;
  }

  .company-stats-grid > .stat-diamond {
    display: none;
  }

}

@media (max-width: 768px) {
  /* Na capa a imagem fica curta demais (largura / 1,92) para caber navbar e
     botoes por cima. Entao eles saem da sobreposicao e viram blocos vinho:
     navbar acima da imagem, matricula e botoes abaixo dela. */
  .hero-cover {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }

  .hero-cover::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%);
  }

  .main-header {
    padding: 16px 0;
  }

  .hero-content {
    position: static;
    order: 1;
    padding: 20px 0 24px;
    background-color: var(--burgundy);
  }

  .hero-cta-bottom-row {
    padding-top: 20px;
  }

  /* Sem espaco para a composicao lateral: o texto ocupa a largura toda. */
  .proximo-capitulo-content {
    max-width: none;
    padding: 60px 24px 40px;
  }

  .company-stats-grid,
  .footer-columns-grid {
    grid-template-columns: 1fr;
  }


  /* A faixa vinho empilhava os 5 blocos em 5 linhas. Agora sao tres zonas:
     titulo / os tres numeros lado a lado / bairro. Em duas colunas o terceiro
     numero sobrava sozinho numa linha torta, por isso sao tres colunas. */
  .hero-stats-bar {
    padding: 22px 0;
    box-shadow: none;
  }

  .stats-bar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 18px 10px;
  }

  .stat-bar-item {
    justify-content: center;
  }

  /* "Condominio Fechado" e "Vorstadt" ocupam a linha inteira, com um fio
     separando as tres zonas — sem isso tudo lia como um bloco so. */
  .stat-bar-item:first-child,
  .stat-bar-item:last-child {
    grid-column: 1 / -1;
  }

  .stat-bar-item:first-child {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .stat-bar-item:last-child {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .stat-single-title {
    font-size: 1.15rem;
  }

  /* As tres linhas de cada numero (rotulo / valor / rotulo) vinham coladas
     pelo line-height de 1.6 do body. */
  .stat-item-text {
    gap: 3px;
    line-height: 1.2;
  }

  .stat-item-text .main-num {
    font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  }

  .stat-item-text .sub-lbl,
  .stat-bar-item--sem-rotulo .stat-item-text::before {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  /* Miniaturas mais coladas na foto. */
  .residence-thumbnails-strip {
    padding-top: 10px;
    gap: 10px;
  }

  .residence-thumb {
    width: 104px;
    height: 74px;
  }

  /* 80px de circulo com icone de 2rem dominavam o card do tour. */
  .play-icon-circle {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    margin-top: 12px;
  }

  /* Empilhados e ocupando a largura toda. Antes viravam uma coluna estreita
     centralizada dentro de uma caixa alinhada a direita. */
  .hero-cta-bottom-row {
    justify-content: stretch;
  }

  .hero-cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* Tres abas nao cabem lado a lado numa tela estreita. */
  .tab-btn {
    padding: 12px 18px;
    font-size: 0.9rem;
  }

  .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* O bloco de inscricao ocupa a largura toda para os campos respirarem. */
  .footer-signup {
    width: 100%;
  }

  .newsletter-form {
    flex-direction: column;
    width: 100%;
  }

  /* Empilhado, o botao da seta ficava um quadradinho de 46px solto embaixo
     (o width fixo vencia o align-self: stretch). */
  .newsletter-form button {
    width: 100%;
    height: 46px;
    align-self: auto;
  }

  /* Alinhadas com o resto da coluna, nao empurradas para a direita. */
  .social-icons-row {
    justify-content: flex-start;
  }

  /* Empilhada, a coluna Contato acompanha as outras duas. */
  .footer-col-contato {
    text-align: left;
  }

  .footer-col-contato .footer-col-list {
    align-items: flex-start;
  }

  /* Sem o empurrao para a direita depois da quebra de linha. */
  .proximo-capitulo-bar-flex > :last-child {
    margin-left: 0;
  }

  /* A grade de 3 colunas nao cabe: a coluna do meio (texto legal, longo)
     espremeria as laterais a zero e a assinatura estouraria para fora. */
  .footer-subline {
    grid-template-columns: 1fr;
  }

  .footer-legal,
  .footer-subline > .agency {
    grid-column: 1;
  }

  .agency {
    justify-content: center;
  }

  /* A assinatura e um credito discreto: gap curto, sem margem extra. */
  .footer-subline {
    gap: 8px;
    padding-top: 18px;
  }

  /* Empilhada, a barra de destaques nao precisa dos losangos separadores. */
  .stats-bar-grid .stat-diamond {
    display: none;
  }

  /* 480px fixos viram uma faixa alta demais numa tela estreita. */
  .tour-card-trigger {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================================
   MODAL DO TOUR VIRTUAL — area do embed 360
   ========================================================================== */
.tour-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #222;
}

.tour-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tour-embed-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   ASSINATURA AGENCIA MILLENNIUM (efeito rocket)
   Em repouso so a logo; no hover/foco ela decola, some no alto, volta no lugar
   e o nome e escrito a esquerda. CSS puro, sem JS.
   ========================================================================== */
.agency {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  color: #a9a2cd;
}

.agency__icon {
  display: inline-flex;
  height: 20px;
  flex: 0 0 auto;
}

/* Branca, como as demais logos deste rodape (a original e azul). */
.agency__icon img {
  height: 100%;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Nome a esquerda da logo: colapsado em repouso, revelado na interacao. */
.agency__name {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
  text-align: right;
  max-width: 0;
  opacity: 0;
  margin-right: 0;
  overflow: hidden;
  transition: max-width .6s ease-out .58s, opacity .5s ease-out .62s, margin-right .6s ease-out .58s;
}

.agency:hover,
.agency:focus-visible {
  outline: none;
}

/* O ease-in gasta o tempo no comeco (voo lento) e corre no fim (pop de volta).
   O atraso do nome (.58s) coincide com o pop, em ~85% da animacao. */
.agency:hover .agency__icon,
.agency:focus-visible .agency__icon {
  animation: rocket-launch .7s cubic-bezier(.5, 0, .9, .2);
}

.agency:hover .agency__name,
.agency:focus-visible .agency__name {
  max-width: 220px;
  opacity: 1;
  margin-right: 12px;
}

/* Voa visivel na diagonal, some no alto, reposiciona invisivel no proprio
   lugar e reaparece — nao sobe de baixo. */
@keyframes rocket-launch {
  0%   { transform: translate(0, 0) rotate(0);             opacity: 1; }
  58%  { transform: translate(90px, -70px) rotate(16deg);  opacity: 1; }
  72%  { transform: translate(150px, -118px) rotate(24deg); opacity: 0; }
  76%  { transform: translate(0, 0) rotate(0);             opacity: 0; }
  85%  { transform: translate(0, 0) rotate(0);             opacity: 1; }
  100% { transform: translate(0, 0);                       opacity: 1; }
}

/* Quem desliga animacao nao ve o voo; o nome ainda aparece no hover. */
@media (prefers-reduced-motion: reduce) {
  .agency:hover .agency__icon,
  .agency:focus-visible .agency__icon {
    animation: none;
  }
}

/* Touch: so o icone. Precisa fechar o nome inclusive sob :hover, porque o
   navegador movel gruda o :hover depois do toque. Quem credita a agencia ali
   e o aria-label do link. */
@media (hover: none) {
  .agency:hover .agency__name,
  .agency:focus-visible .agency__name {
    max-width: 0;
    opacity: 0;
    margin-right: 0;
  }
}

/* No celular a assinatura vira bloco proprio. O min-height sozinho ja da o
   alvo de toque de 44px — o padding vertical de antes somava a ele. */
@media (max-width: 600px) {
  .agency {
    min-height: 44px;
    padding: 0 10px;
  }

  .agency__icon {
    height: 16px;
  }
}

/* ==========================================================================
   ENTRADA NA ROLAGEM
   O JS marca [data-anima] com .visivel quando o bloco entra na tela, e
   desobserva em seguida — cada elemento anima uma vez so.

   O estado escondido depende de .anima-js no <html>, classe que o proprio
   main.js adiciona. Sem JS (ou se ele quebrar) nada fica invisivel.
   ========================================================================== */
.anima-js [data-anima] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}

.anima-js [data-anima].visivel {
  opacity: 1;
  transform: none;
}

/* Em "grupo" quem anima sao os filhos diretos, em cascata. */
.anima-js [data-anima="grupo"] {
  opacity: 1;
  transform: none;
}

.anima-js [data-anima="grupo"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}

.anima-js [data-anima="grupo"].visivel > * {
  opacity: 1;
  transform: none;
}

.anima-js [data-anima="grupo"] > *:nth-child(2) { transition-delay: .12s; }
.anima-js [data-anima="grupo"] > *:nth-child(3) { transition-delay: .24s; }
.anima-js [data-anima="grupo"] > *:nth-child(4) { transition-delay: .36s; }
.anima-js [data-anima="grupo"] > *:nth-child(5) { transition-delay: .48s; }
.anima-js [data-anima="grupo"] > *:nth-child(n+6) { transition-delay: .6s; }

/* Quem desliga animacao ve tudo no lugar, sem transicao nem atraso. */
@media (prefers-reduced-motion: reduce) {
  .anima-js [data-anima],
  .anima-js [data-anima="grupo"] > * {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}