/* ==========================================================================
   PANORAMA SKYLINE IBIRAPUERA — ATELIER ARCHITECTURAL LUXURY DESIGN SYSTEM
   Inspiração: Monografias de Arquitetura, Studio MK27, Arthur Casas, Aman Resorts
   ========================================================================== */

/* --- Custom Variables --- */
:root {
  --color-forest-deep: #0D1714;
  --color-forest-base: #14221D;
  --color-forest-surface: #1A2C26;
  --color-cream: #F5F2EB;
  --color-bronze: #C2A682;
  --color-bronze-light: #D9C4A7;
  --color-terracotta: #B85D3B;
  --color-terracotta-hover: #9E4E30;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Base Typography & Reset --- */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
  position: relative;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-forest-deep);
  color: var(--color-cream);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* ==========================================================================
   OCULTAÇÃO TOTAL E DEFINITIVA DE SCROLLBARS (WINDOWS / CHROME / EDGE / FIREFOX)
   ========================================================================== */
* {
  box-sizing: border-box;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

html, body {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  overflow-x: hidden !important;
  width: 100%;
}

/* Chrome, Edge, Safari, Opera (Regras individuais para não quebrar o parser) */
::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
}

::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

#lazer-slider::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
}

.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
}

/* --- Minimalist Nav Link Interaction --- */
.nav-link {
  position: relative;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 6px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-bronze);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* --- Header Glassmorphic Scrolled State --- */
.header-glass-scrolled {
  background-color: rgba(13, 23, 20, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  border-left-color: rgba(255, 255, 255, 0.08) !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

/* --- Architectural Buttons --- */
.btn-architectural,
.btn-nav-hero,
.btn-nav-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 1.1rem 2.2rem;
  border: 1px solid rgba(194, 166, 130, 0.4);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  backdrop-filter: blur(8px);
}

.btn-architectural:hover,
.btn-nav-hero:hover,
.btn-nav-header:hover {
  border-color: var(--color-bronze);
  color: var(--color-bronze-light);
  background-color: rgba(194, 166, 130, 0.1);
  transform: translateY(-1px);
}

.btn-architectural-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-forest-surface);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 1px solid rgba(194, 166, 130, 0.6);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.btn-architectural-solid:hover {
  background-color: rgba(194, 166, 130, 0.15);
  border-color: var(--color-bronze);
  color: var(--color-cream);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(194, 166, 130, 0.2);
}

.btn-architectural-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-architectural-cta:hover:not(:disabled) {
  transform: translateY(-1.5px);
  box-shadow: 0 14px 38px rgba(184, 93, 59, 0.35);
}

/* --- Clean Focus State for Accessibility --- */
:focus-visible {
  outline: 1px solid var(--color-bronze);
  outline-offset: 3px;
}

/* ==========================================================================
   SISTEMA DE PARALLAX PROFUNDO & REVELAÇÃO EM MÁSCARA ASCENDENTE (OPÇÃO 3)
   Awwwards / Ultra-Luxury Scroll Experience (60fps)
   ========================================================================== */

/* Suavização de rolagem do Lenis */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* 1. Revelação de Títulos e Textos em Máscara Ascendente */
.lux-reveal-mask {
  overflow: hidden;
  display: block;
}

.lux-reveal-text {
  opacity: 0;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease-out;
  will-change: transform, opacity;
}

.lux-reveal-text.is-revealed {
  opacity: 1;
  transform: translateY(0%);
}

/* 2. Fade Up Editorial Suave */
.lux-fade-up {
  opacity: 1;
  transform: translateY(0);
}

#hero .lux-fade-up,
#hero .lux-stagger {
  opacity: 1 !important;
  transform: none !important;
}

/* 3. Escala Suave de Imagens */
.lux-img-scale {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0px);
}

.lux-img-scale.is-revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0px);
}

/* 4. Linhas Arquitetônicas em Desenho Vivo */
.lux-line-draw-x {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.lux-line-draw-x.is-revealed {
  transform: scaleX(1);
}

.lux-line-draw-y {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.lux-line-draw-y.is-revealed {
  transform: scaleY(1);
}

/* 5. Stagger de Elementos em Cascata */
.lux-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out;
  will-change: transform, opacity;
}

.lux-stagger.is-revealed > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.lux-stagger.is-revealed > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.lux-stagger.is-revealed > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.lux-stagger.is-revealed > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.lux-stagger.is-revealed > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.lux-stagger.is-revealed > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }

/* 6. Camada Atmosférica de Parallax Arquitetônico (60fps Nativo) */
.lux-parallax-bg {
  position: absolute;
  top: -12%;
  left: 0;
  right: 0;
  bottom: -12%;
  height: 124%;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* --- Luxury Architectural Animations (Awwwards 60fps) --- */
.planta-option-row {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.planta-option-row.active {
  opacity: 1 !important;
}

.planta-option-row:not(.active) {
  opacity: 0.38;
}

.planta-option-row:hover {
  opacity: 0.85;
}

.planta-img-transition {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.planta-img-active {
  opacity: 1;
  transform: scale(1);
}

.planta-img-enter {
  opacity: 0.2;
  transform: scale(0.98);
}

/* --- Hotspots Animados na Planta --- */
.planta-hotspot {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.planta-hotspot:hover {
  transform: scale(1.18);
}



/* ==========================================================================
   BRISE-SOLEIL PRELOADER & REVEAL (Abertura Arquitetônica de Entrada 2.5s)
   ========================================================================== */
.is-audit-bot #brise-preloader {
  display: none !important;
}

#brise-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  pointer-events: auto;
  perspective: 1400px;
  transform-style: preserve-3d;
  background-color: transparent;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#brise-preloader.brise-fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.brise-blade {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, #0A1411 0%, #0D1714 50%, #14221D 100%);
  border-right: 1px solid rgba(194, 166, 130, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.03);
  transform-origin: center right;
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.8s ease, filter 0.8s ease;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}

.brise-blade:last-child {
  border-right: none;
}

/* Estado de abertura do Brise: cada lâmina gira no eixo Y como uma persiana */
#brise-preloader.brise-opened .brise-blade {
  transform: rotateY(-90deg) scaleX(0.05);
  opacity: 0;
  filter: brightness(1.4);
}

/* Tipografia Central de Abertura */
#brise-title-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#brise-preloader.brise-opened #brise-title-wrap {
  opacity: 0;
  transform: translate(-50%, -65%) scale(0.96);
}

/* ==========================================================================
   QUADRO CINEMATOGRÁFICO DA FACHADA — REVEAL DE BRISES & LOOP SUTIL (6-8s)
   ========================================================================== */
.fachada-cinematic-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* Loop sutil de 7 segundos (quase imperceptível) simulando luz ambiente, brisa e nuvens */
.fachada-cinematic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  animation: subtleAtmosphereLoop 7s ease-in-out infinite alternate;
  will-change: transform, filter;
}

@keyframes subtleAtmosphereLoop {
  0% {
    transform: scale(1) translate(0, 0);
    filter: brightness(0.96) contrast(1.03) saturate(1.01);
  }
  50% {
    transform: scale(1.012) translate(-0.15%, -0.2%);
    filter: brightness(1.01) contrast(1.05) saturate(1.05);
  }
  100% {
    transform: scale(1.008) translate(0.1%, -0.1%);
    filter: brightness(0.97) contrast(1.04) saturate(1.02);
  }
}

/* Gradiente dinâmico de luz filtrada e brisa sutil sobre a vegetação */
.fachada-light-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 65% 25%, rgba(255, 235, 205, 0.08) 0%, transparent 60%),
              linear-gradient(180deg, transparent 40%, rgba(13, 23, 20, 0.65) 100%);
  animation: subtleSunlightSway 7s ease-in-out infinite alternate;
  mix-blend-mode: soft-light;
}

@keyframes subtleSunlightSway {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* Cortina de Linhas Verticais inspiradas nos Brises para Revelação ao entrar no Viewport */
.fachada-brise-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 10;
  transition: visibility 0.8s ease;
}

.fachada-brise-slat {
  flex: 1;
  height: 100%;
  background-color: #0D1714;
  border-right: 1px solid rgba(194, 166, 130, 0.22);
  transform-origin: top;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.8s ease;
  will-change: transform, opacity;
}

.fachada-brise-slat:last-child {
  border-right: none;
}

/* Quando entra no viewport (ou por padrão ativo), as lâminas deslizam para cima e revelam a fachada */
.fachada-revealed .fachada-brise-slat {
  transform: translateY(-101%);
  opacity: 0;
}


/* ==========================================================================
   SISTEMA DE FUNDOS: ATELIER DOS BRISES & RITMO ARQUITETÔNICO (OPÇÃO 1)
   Linhas em Fio de Cabelo (≤ 1px) | Cruzamentos de Prancheta (+) | Brises e Cotas
   Opacidade Estrita: 2.5% a 5% | 100% Autoral e Conectado ao Panorama Skyline
   ========================================================================== */

/* 1. Dobra Contexto: Cadência vertical de brises assimétricos + linhas de eixo */
.bg-contexto-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-contexto-silhouette {
  position: absolute;
  top: 0;
  right: 6%;
  width: 380px;
  height: 100%;
  opacity: 0.035;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-bronze) 0,
    var(--color-bronze) 1px,
    transparent 1px,
    transparent 24px
  );
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, transparent 100%);
}

.bg-contexto-line-1 {
  position: absolute;
  left: 12%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(194, 166, 130, 0.05) 25%, rgba(194, 166, 130, 0.05) 75%, transparent);
}

.bg-contexto-line-2 {
  position: absolute;
  left: 88%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(194, 166, 130, 0.04) 35%, rgba(194, 166, 130, 0.04) 65%, transparent);
}

/* 2. Dobra Grandes Assinaturas: Fios de prancheta editorial + marcadores em cruz (+) */
.bg-assinaturas-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-assinaturas-grid {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: 
    linear-gradient(to right, rgba(194, 166, 130, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(194, 166, 130, 0.4) 1px, transparent 1px);
  background-size: 140px 140px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, transparent 85%);
}

/* 3. Dobra 6 Decisões: Eixos estruturais em fio de cabelo + réguas de cota técnica */
.bg-decisoes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-decisoes-grid {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: 
    linear-gradient(90deg, transparent 49.9%, rgba(194, 166, 130, 0.5) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 49.9%, rgba(194, 166, 130, 0.5) 50%, transparent 50.1%);
  background-size: 200px 200px;
}

/* 4. Dobra Plantas: Traçado de cota arquitetônica fina (espessuras de parede e alinhamentos) */
.bg-plantas-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-plantas-blueprint {
  position: absolute;
  left: 2%;
  top: 5%;
  width: 400px;
  height: 80%;
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(194, 166, 130, 0.6) 0,
    rgba(194, 166, 130, 0.6) 1px,
    transparent 1px,
    transparent 40px
  );
}

.bg-plantas-dimension-line {
  position: absolute;
  right: 5%;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(194, 166, 130, 0.05) 20%, rgba(194, 166, 130, 0.05) 80%, transparent);
}

/* 5. Dobra Lazer: Cadência sutil de brises horizontais e verticais em diálogo com o tênis */
.bg-lazer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-lazer-shadow-1 {
  position: absolute;
  top: 0;
  left: 15%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(194, 166, 130, 0.04) 20%, rgba(194, 166, 130, 0.04) 80%, transparent);
}

.bg-lazer-shadow-2 {
  position: absolute;
  top: 0;
  right: 15%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(194, 166, 130, 0.04) 20%, rgba(194, 166, 130, 0.04) 80%, transparent);
}

/* 6. Dobra Localização: Quadrícula técnica de alinhamento com Moema */
.bg-localizacao-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-localizacao-map-lines {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: 
    linear-gradient(to right, rgba(194, 166, 130, 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(194, 166, 130, 0.3) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, transparent 100%);
}

/* 7. Dobra FAQ: Fio de prancheta central e alinhamento milimétrico */
.bg-faq-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-faq-grid {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-size: 100px 100px;
  background-image: linear-gradient(to bottom, rgba(245, 242, 235, 0.2) 1px, transparent 1px);
}

.bg-faq-line {
  position: absolute;
  left: 20%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(194, 166, 130, 0.04) 20%, rgba(194, 166, 130, 0.04) 80%, transparent);
}

/* 8. Dobra Contato: Brises verticais de fechamento no canto superior */
.bg-contato-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.bg-contato-horizon {
  position: absolute;
  bottom: 8%;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 166, 130, 0.06) 30%, rgba(194, 166, 130, 0.06) 70%, transparent);
}

.bg-contato-brise-rhythm {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5%;
  width: 200px;
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-bronze) 0,
    var(--color-bronze) 1px,
    transparent 1px,
    transparent 28px
  );
}

/* 9. Footer: Textura fina e minimalista */
.bg-footer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.015;
  background-image: radial-gradient(rgba(245, 242, 235, 0.5) 0.5px, transparent 0.5px);
  background-size: 16px 16px;
}



/* ============================================================
   RESPONSIVIDADE & MOBILE-FIRST TOUCH EXPERIENCE
   ============================================================ */
@media (max-width: 768px) {
  /* Cards de lazer no celular com imagem nítida no topo e texto elegante na base */
  .lazer-card {
    width: 290px !important;
    height: 500px !important;
  }
  
  .lazer-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: linear-gradient(180deg, transparent 38%, rgba(13, 24, 20, 0.82) 58%, rgba(13, 24, 20, 0.98) 82%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 1.25rem 1.15rem !important;
  }

  .lazer-overlay p {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .lazer-overlay .flex-wrap {
    display: flex !important;
    gap: 0.3rem !important;
  }

  .lazer-overlay .flex-wrap span {
    font-size: 8px !important;
    padding: 0.15rem 0.45rem !important;
  }

  .lazer-idle-label {
    display: none !important;
  }

  /* Ajuste refinado de tamanho de botões para caber em telas estreitas */
  .btn-architectural,
  .btn-architectural-solid,
  .btn-nav-hero,
  .btn-nav-header {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Timeline mobile conectora com linha bronze visível */
  #location-progress-line-mobile {
    box-shadow: 0 0 10px rgba(194, 166, 130, 0.8) !important;
  }

  /* Modal de Lazer no Mobile */
  #lazer-modal .relative.max-w-5xl {
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #lazer-modal .md\:col-span-7 {
    height: 220px !important;
    min-height: 220px !important;
    flex-shrink: 0 !important;
  }

  #lazer-modal .md\:col-span-7 img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* ============================================================
   VARIANTE B: REDUÇÃO DE CUSTO DE LAYOUT INICIAL ABAIXO DA DOBRA
   ============================================================ */
#plantas {
  content-visibility: auto;
  contain-intrinsic-size: auto 1780px;
}

#lazer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1680px;
}

#obra {
  content-visibility: auto;
  contain-intrinsic-size: auto 960px;
}

#faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 1480px;
}

@media (max-width: 1024px) {
  #plantas {
    contain-intrinsic-size: auto 2120px;
  }
  #lazer {
    contain-intrinsic-size: auto 2000px;
  }
  #obra {
    contain-intrinsic-size: auto 960px;
  }
  #faq {
    contain-intrinsic-size: auto 1750px;
  }
}

@media (max-width: 768px) {
  #plantas {
    contain-intrinsic-size: auto 2050px;
  }
  #lazer {
    contain-intrinsic-size: auto 1920px;
  }
  #obra {
    contain-intrinsic-size: auto 1000px;
  }
  #faq {
    contain-intrinsic-size: auto 1670px;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:self-center {
    align-self: center;
  }
}

/* ============================================================
   SELETOR DE PLANTAS DO FORMULÁRIO (#dossie-form)
   ============================================================ */
.planta-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .planta-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.planta-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(13, 23, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  min-height: 82px;
}

.planta-choice-card:hover {
  border-color: rgba(194, 166, 130, 0.5) !important;
  background: rgba(194, 166, 130, 0.08) !important;
  transform: translateY(-1px);
}

.planta-choice-card.active {
  border-color: #C2A682 !important;
  background: linear-gradient(135deg, rgba(194, 166, 130, 0.18) 0%, rgba(13, 23, 20, 0.95) 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(194, 166, 130, 0.45);
}

.choice-indicator {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.planta-choice-card.active .choice-indicator {
  border-color: #C2A682 !important;
  background-color: #C2A682 !important;
  color: #0D1714 !important;
}
.planta-card-opt {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: rgba(245, 242, 235, 0.45);
  transition: color 0.2s ease;
}

.planta-choice-card.active .planta-card-opt {
  color: #C2A682 !important;
  font-weight: 500;
}

.planta-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: #F5F2EB;
  font-weight: 500;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.planta-choice-card.active .planta-card-title {
  color: #FFFFFF;
}

.planta-card-sub {
  font-size: 0.72rem;
  color: rgba(245, 242, 235, 0.65);
  font-weight: 300;
  line-height: 1.35;
  margin-top: 0.2rem;
}

/* ============================================================
   DESKTOP NAVBAR SPACING & INTERACTION
   ============================================================ */
@media (min-width: 1024px) {
  nav.desktop-nav {
    display: flex !important;
    gap: 1.4rem;
  }
}

@media (min-width: 1280px) {
  nav.desktop-nav {
    gap: 2rem;
  }
}

nav.desktop-nav a {
  white-space: nowrap;
  position: relative;
  transition: color 0.25s ease;
}

nav.desktop-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #C2A682;
}

/* ============================================================
   HEADER CONTAINER DESKTOP CENTERING & BALANCED PROPORTIONS
   ============================================================ */
@media (min-width: 1024px) {
  #header-container {
    justify-content: center !important;
    gap: 2.75rem !important; /* Espaçamento refinado e harmônico com a logo */
  }
}

@media (min-width: 1280px) {
  #header-container {
    gap: 3.5rem !important;
  }
}

/* ============================================================
   TIMELINE ARQUITETÔNICA — ALINHAMENTO CO-AXIAL MOBILE & DESKTOP
   Garante nós 100% centralizados na linha dinâmica no mobile
   ============================================================ */
@media (max-width: 639px) {
  #location-timeline-wrap {
    position: relative !important;
  }
  #location-progress-line-mobile,
  #location-timeline-wrap > div.sm\:hidden {
    left: 1.5rem !important;
    transform: translateX(-50%) !important;
  }
  .location-timeline-item {
    padding-left: 3.5rem !important; /* 56px de respiro lateral para acomodar o nó e a linha */
    position: relative !important;
    width: 100% !important;
  }
  .location-timeline-item .timeline-node {
    left: 1.5rem !important; /* Exatamente 24px, idêntico à linha */
    top: 1.5rem !important;  /* Alinhado com o topo do card da imagem */
    transform: translate(-50%, -50%) !important;
  }
}