/* Variáveis CSS para o Design System */
:root {

   font-family: "Wix Madefor Text", sans-serif;
   font-optical-sizing: auto;
   font-weight: 16PX;
   font-style: normal;

   --color-primary: #141413;
   --color-secondary: #6c757d;
   --color-success: #2de187;
   --color-warning: #f8a54f;
   --color-danger: #ec5c6a;
   --color-info: #17a2b8;
   --color-light: #f8f9fa;
   --color-dark: #343a40;
   --color-background-primary: #fff;
   --color-background-secondary: #f2f4f8;
   --color-text-dark: #222222;
   --color-text-dark: #222222;
   --color-text-gray: #666666;
   --color-text-light: #ffffff;

   --gradient-success: linear-gradient(45deg, #2de187, #218838);
   --gradient-warning: linear-gradient(45deg, #ffc107, #e0a800);
   --gradient-danger: linear-gradient(45deg, #dc3545, #c82333);
   --gradient-primary: linear-gradient(45deg, #141413, #000000);

   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
   --spacing-2xl: 80px;

   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
   --border-radius-xl: 20px;

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 0 10px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

   --color-primary-rgb: 20, 20, 19;
   --color-danger-rgb: 220, 53, 69;
   --color-success-rgb: 40, 167, 69;

}

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

html,
body {
   width: 100%;
   overflow-x: hidden;
}

body.modal-open {
   overflow: hidden;
   position: fixed;
   width: 100%;
   height: 100%;
}

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

ul {
   list-style: none;
}

/* Utility Classes */
.container {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 var(--spacing-md);
   overflow: hidden;
}

.container-fluid {
   width: 100%;
   margin: 0 auto;
   overflow: hidden;
}

.btn {
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-md);
   border: none;
   cursor: pointer;
   font-size: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   transition: background-color 0.3s ease;
}

.btn-primary {
   background-color: var(--color-primary);
   color: var(--color-text-light);
   border-radius: 100px;
}

.btn-primary:hover {
   background-color: var(--color-text-dark);
}

.btn-secondary {
   background-color: var(--color-secondary);
   color: var(--color-text-light);
}

.btn-secondary:hover {
   background-color: #5a6268;
}

/* Header (Público) */
/* Menu Sanduiche (sidebar) */
.sidebar {
   background-color: #ffffff;
   color: var(--color-text-light);
   width: 300px;
   height: 100%;
   position: fixed;
   top: 0;
   right: -300px;
   z-index: 1003;
   box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
   padding: var(--spacing-md) 0;
   transition: right 0.4s ease-in-out;
   border-top-left-radius: 32px;
   border-bottom-left-radius: 32px;
}

.sidebar.active {
   right: 0;
}

.sidebar-header {
   padding: var(--spacing-md);
   text-align: center;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
   margin-bottom: var(--spacing-lg);
}

.sidebar-header .logo-link img {
   display: none;
}

.sidebar-header .close-dashboard-menu {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: var(--color-text-dark);
   display: block;
   z-index: 1004;
   padding: var(--spacing-xs);
}

/* Links da Navegação da Sidebar (Estilo de Texto e Interação) */
.sidebar-nav ul {
   list-style: none;
   padding: 0;
}

.sidebar-nav li a {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-md) var(--spacing-lg);
   color: var(--color-text-dark);
   transition: background-color 0.2s ease, color 0.2s ease;
   white-space: nowrap;
   font-size: 1.5rem;
}

.sidebar-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: 1002;
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
   backdrop-filter: blur(5px);
   /* Ajuste a intensidade do blur conforme necessário */
   -webkit-backdrop-filter: blur(5px);
   /* Suporte para navegadores WebKit */
}


.sidebar-overlay.active {
   display: block;
   opacity: 1;
}

.public-header {
   background-color: #ffffff;
   padding: var(--spacing-md) var(--spacing-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: sticky;
   top: 0;
   z-index: 999;
}

/* Logo e Título no Header */
.public-header-logo-title {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
}

.public-header-logo-title .header-logo-link img {
   height: 35px;
   width: auto;
   display: block;
   /* Visível por padrão */
}

.public-header-logo-title h1 {
   font-size: 1.4rem;
   color: var(--color-text-dark);
   margin: 0;
}

/* Botão sanduíche no Header */
.public-menu-toggle {
   background: none;
   border: none;
   font-size: 1.6rem;
   cursor: pointer;
   color: var(--color-text-dark);
   display: block;
   /* Sempre visível para abrir o menu off-canvas */
}

.status-badge.status-documentos_solicitados {
   background-color: var(--color-info);
   /* Ou um azul mais claro, para indicar "em andamento/info" */
   color: var(--color-text-light);
}

/* Info de Usuário e Alertas no Header */
.public-header-right {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
}

/* Hero Section (Contador e Filtro) */
.hero-section {
   padding: var(--spacing-xl) 0;
   text-align: center;

   .hero-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-md);
   }
}

.empreendimentos-counter p {
   font-size: 1.2rem;
   font-weight: bold;
   color: var(--color-primary);
   display: flex;
   align-items: center;
}

.empreendimentos-counter .counter-value {
   font-size: 2.5rem;
   color: var(--color-primary);
   margin-right: var(--spacing-sm);
}

.filter-area {
   margin-top: var(--spacing-md);
}

/* Empreendimento Cards (Mobile-First) */
.empreendimentos-list {
   padding: var(--spacing-md);
}

.grid-layout {
   display: grid;
   gap: var(--spacing-lg);
}

.empreendimento-card {
   border-radius: var(--border-radius-xl);
   overflow: hidden;
   position: relative;
   margin-bottom: var(--spacing-lg);
   cursor: pointer;
}

/* Mobile Card Specifics */
.empreendimento-card.desktop {
   display: none;
}

.empreendimento-card.mobile {
   display: block;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.empreendimento-card .status {
   background: var(--gradient-success);
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: 0.8rem;
   color: var(--color-text-light);
}

.card-image-overlay {
   position: relative;
   width: 100%;
   padding-top: 56.25%;
   overflow: hidden;
}

.card-image-overlay img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.card-bottom-content {
   background-color: var(--color-background-primary);
   padding: var(--spacing-md);
   padding-top: 0;
}

.card-bottom-content h2 {
   font-size: 1.5rem;
   margin-bottom: var(--spacing-sm);
   color: var(--color-text-dark);
}

.card-bottom-content .endereco {
   font-size: 0.9rem;
   opacity: 0.9;
   color: var(--color-text-dark);
   margin-bottom: var(--spacing-sm);
}

.card-bottom-content .caracteristicas {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
}

.card-bottom-content .caracteristicas li {
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   color: var(--color-text-dark);
}

.card-bottom-content .metragem {
   font-size: 0.9rem;
   color: var(--color-text-dark);
   margin-bottom: var(--spacing-md);
}

.card-bottom-content .preco {
   font-size: 1.2rem;
   font-weight: bold;
   color: var(--color-primary);
}

.status-flag {
   position: absolute;
   top: var(--spacing-md);
   left: var(--spacing-md);
   right: auto;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: 0.8rem;
   color: var(--color-text-light);
   z-index: 10;
}

/* Footer */
.main-footer {
   background-color: var(--color-dark);
   color: var(--color-text-light);
   padding: var(--spacing-xl) 0;
   text-align: center;
}

.footer-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-lg);
}

.footer-nav ul {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.footer-nav a {
   color: var(--color-text-light);
   font-size: 0.9rem;
}

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

.developer-info {
   font-size: 0.8rem;
   opacity: 0.8;
}

/* Desktop Styles (Media Queries) */
@media (min-width: 768px) {
   .hero-section {
      max-width: 1280px;
      margin: 0 auto;

      .hero-content {
         flex-direction: row;
         justify-content: space-between;
      }
   }

   .empreendimentos-counter {
      text-align: left;
   }

   .filter-area {
      margin-top: 0;
   }

   .empreendimento-card.mobile {
      display: none;
   }

   .empreendimento-card.desktop {
      display: flex;
      gap: var(--spacing-sm);
      width: 100%;
      height: 400px;
      max-width: 1440px;
      margin: var(--spacing-2xl) auto;
      text-align: left;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
   }

   .empreendimento-card.desktop:hover {
      transform: scale(1.01);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   }

   .empreendimento-card.desktop .card-text-content {
      flex: 1.5;
      padding: var(--spacing-lg);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      position: relative;
      background-color: var(--color-background-secondary);
   }

   .empreendimento-card.desktop .card-thumbnail-content {
      flex: 2;
      display: flex;
      justify-content: flex-end;
      align-items: center;
   }

   .empreendimento-card.desktop .card-image-content {
      flex: 1;
      display: flex;
      gap: var(--spacing-sm);
      flex-direction: column;
      align-items: center;
   }

   .empreendimento-card.desktop .card-thumbnail-content img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .empreendimento-card.desktop .card-image-content img {
      width: 100%;
      height: 50%;
      object-fit: cover;
   }

   .empreendimento-card.desktop .caracteristicas-compactas-wrapper {
      display: flex;
      align-items: center;
      gap: var(--spacing-lg);
   }

   .empreendimento-card.desktop .caracteristicas-compactas {
      /* position: absolute;
      top: var(--spacing-md);
      left: calc(var(--spacing-md) + 110px); */
      /* 10px depois da flag (~100px de largura) */
      background-color: #fff;
      padding: 6px 12px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.85rem;
      color: var(--color-text-dark);
      border: 1px solid #ddd;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      z-index: 9;
   }

   .empreendimento-card.desktop .caracteristicas-compactas span {
      display: flex;
      align-items: center;
      gap: 4px;
   }

   .empreendimento-card.desktop .endereco-wrapper {
      font-size: 1.5rem;
      /* font-weight: bold; */
   }

   .empreendimento-card.desktop .metragem,
   .empreendimento-card.desktop .preco {
      font-size: 1.5rem;
      /* font-weight: bold; */
   }

   .empreendimento-card.desktop h2 {
      font-size: 1.8rem;
   }

   .empreendimento-card.desktop .caracteristicas {
      justify-content: flex-start;
   }

   .footer-content {
      flex-direction: row;
      justify-content: space-between;
   }

   .footer-nav ul {
      flex-direction: row;
   }
}

/* ========================================= */
/* Estilos Específicos da Página Empreendimento */
/* ========================================= */

.empreendimento-details-header {
   position: relative;
   margin-bottom: var(--spacing-xl);
}

.banner-empreendimento {
   width: 100%;
   height: 250px;
   /* Altura do banner */
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: flex-end;
   /* Alinha o overlay na parte inferior */
   justify-content: center;
   color: var(--color-text-light);
   overflow: hidden;
   /* Garante que a imagem do banner não vaze */
}

.banner-overlay {
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg) var(--spacing-md);
   width: 100%;
   text-align: center;
}

.header-info-overlay {
   text-align: center;
}

.header-info-overlay .status-flag {
   position: static;
   /* Anula o position: absolute do .status-flag genérico */
   display: inline-block;
   margin-bottom: var(--spacing-sm);
}

.header-info-overlay .type-info {
   font-size: 0.9rem;
   opacity: 0.8;
   margin-bottom: var(--spacing-xs);
}

.header-info-overlay h1 {
   font-size: 2rem;
   margin: 0;
}

.header-summary {
   position: relative;
   background-color: var(--color-background-primary);
   padding: var(--spacing-md) 0;
   /* Padding vertical, horizontal é do container */
   box-shadow: var(--shadow-sm);
   text-align: center;
   transform: translateY(-20px);
   /* Move ligeiramente para cima do banner */
   z-index: 1;
   /* Garante que ele fique acima do banner */
   border-radius: var(--border-radius-md);
}

.summary-details .price-start {
   font-size: 1.5rem;
   color: var(--color-primary);
   font-weight: bold;
   margin-bottom: var(--spacing-sm);
}

.summary-details .location-address {
   font-size: 0.9rem;
   color: var(--color-secondary);
}

/* Seção de Galeria de Mídias */
.media-gallery-section {
   padding: var(--spacing-lg) 0;
   margin-bottom: var(--spacing-xl);
}

.media-gallery-section h2,
.action-pills-section h2,
.description-section h2,
.availability-cards-section h2,
.secao-ficha-tecnica h2,
.secao-explore h2 {
   font-size: 1.8rem;
   color: var(--color-primary);
   margin-bottom: var(--spacing-lg);
   text-align: center;
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   /* Colunas flexíveis */
   gap: var(--spacing-sm);
   overflow-x: hidden;
}

.gallery-thumbnail {
   width: 100%;
   height: 100px;
   /* Altura fixa para miniaturas */
   object-fit: cover;
   border-radius: var(--border-radius-md);
   cursor: pointer;
   transition: transform 0.2s ease;
}

/* Modais (Genérico) */
.modal {
   display: none;
   /* Escondido por padrão */
   position: fixed;
   /* Posição fixa sobre todo o conteúdo */
   z-index: 2000;
   /* Z-index alto para ficar acima de tudo */
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   padding: 20px;
   /* overflow: auto; */
   /* Habilita rolagem se o conteúdo for maior que a tela */
   background-color: rgba(0, 0, 0, 0.8);
   /* Fundo escuro semi-transparente */
   justify-content: safe center;
   align-items: safe center;
}

.modal.active {
   display: flex;
   /* Exibe o modal como flexbox quando aberto */
}

.modal-content {
   background-color: var(--color-background-primary);
   /* margin: auto; */
   padding: var(--spacing-lg);
   border-radius: var(--border-radius-lg);
   position: relative;
   width: 90%;
   /* Largura padrão para mobile */
   max-width: 800px;
   /* Largura máxima para desktop */
   box-shadow: var(--shadow-lg);
   animation-name: animatemodal;
   animation-duration: 0.4s;
   display: flex;
   flex-direction: column;
   align-items: center;
}


/* Animação para o modal */
@keyframes animatemodal {
   from {
      top: -300px;
      opacity: 0
   }

   to {
      top: 0;
      opacity: 1
   }
}

/* .close-button {
   position: absolute;
   top: var(--spacing-sm);
   right: var(--spacing-md);
}

.close-button:hover,
.close-button:focus {
   color: var(--color-primary);
   text-decoration: none;
} */

/* ========================================= */
/* Estilos Específicos para o Modal de Detalhes da Unidade */
/* ========================================= */
#unitDetailsModal .modal-content {
   display: flex;
   flex-direction: column;
   /* MOBILE PADRÃO: Conteúdo empilhado (planta em cima, detalhes embaixo) */
   align-items: stretch;
   /* Remover max-width: 800px; daqui para deixar o flex-basis controlar melhor */
   max-width: 900px;
   /* Aumentado para acomodar 2 colunas confortavelmente */
   padding: var(--spacing-lg);
   /* Padding ajustado */
}

#unitDetailsModal h2 {
   text-align: center;
   margin-bottom: var(--spacing-lg);
}

#unitDetailsModal .modal-unit-details {
   display: flex;
   flex-direction: column;
   /* Mobile-First: planta (unit-details-right) em cima, detalhes (unit-details-left) embaixo */
   gap: var(--spacing-lg);
   /* Espaçamento entre planta e detalhes */
   flex-wrap: nowrap;
   /* Impede quebras de linha que poderiam atrapalhar a ordem */
}

#unitDetailsModal .unit-details-left {
   order: 2;
   /* No mobile, fica em segundo lugar (abaixo da planta) */
   flex: 1 1 100%;
   /* Ocupa a largura total no mobile */
   min-width: auto;
}

#unitDetailsModal .unit-details-right {
   order: 1;
   /* No mobile, fica em primeiro lugar (acima dos detalhes) */
   flex: 1 1 100%;
   /* Ocupa a largura total no mobile */
   display: flex;
   justify-content: center;
   /* Centraliza a imagem da planta horizontalmente no mobile */
   align-items: center;
   /* Centraliza verticalmente a planta no mobile */
   min-width: auto;
}

#unitDetailsModal .unit-details-right img {
   max-width: 100%;
   height: auto;
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-sm);
}

#unitDetailsModal .modal-unit-details>*:not(img) {
   /* Aplica margem inferior aos elementos de texto à esquerda */
   margin-bottom: var(--spacing-md);
}

#unitDetailsModal #modalPaymentInfoTable {
   margin-bottom: var(--spacing-lg);
}

#unitDetailsModal #solicitarReservaBtn {
   width: 100%;
   /* Botão ocupa a largura total no mobile */
   margin-top: var(--spacing-lg);
}

/* Estilos para Desktop (Media Query) */
@media (min-width: 768px) {
   #unitDetailsModal .modal-content {
      /* No desktop, o modal-content pode ter padding lateral maior se necessário */
      padding: var(--spacing-xl);
      /* Mais padding no desktop */
   }

   #unitDetailsModal .modal-unit-details {
      flex-direction: row-reverse;
      /* Desktop: INVERTE A ORDEM. Planta (right) vai para a direita, Detalhes (left) vai para a esquerda */
      flex-wrap: nowrap;
      /* Garante que fiquem lado a lado */
      gap: var(--spacing-2xl);
      /* Mais espaçamento entre as colunas no desktop */
   }

   #unitDetailsModal .unit-details-left {
      order: unset;
      /* Reseta a ordem no desktop (segue a ordem do HTML, que agora é o segundo) */
      flex: 1 1 50%;
      /* Ocupa 50% da largura disponível */
      min-width: 350px;
      /* Largura mínima para a coluna de detalhes */
      padding-right: var(--spacing-md);
      /* Adiciona padding à direita da coluna de detalhes */
   }

   #unitDetailsModal .unit-details-right {
      order: unset;
      /* Reseta a ordem no desktop (segue a ordem do HTML, que agora é o primeiro) */
      flex: 1 1 50%;
      /* Ocupa 50% da largura disponível */
      min-width: 350px;
      /* Largura mínima para a coluna da planta */
      align-items: flex-start;
      /* Alinha o topo da planta com o topo dos detalhes */
      margin-top: 0;
      /* Remove margem superior se houver de mobile */
   }

   #unitDetailsModal #solicitarReservaBtn {
      width: auto;
      /* Volta para largura automática no desktop */
      display: inline-block;
      /* Garante que fique inline com outros elementos se houver */
   }
}

/* Estilos para Mobile */
@media (max-width: 767px) {
   #unitDetailsModal .modal-unit-details {
      flex-direction: column;
   }

   #unitDetailsModal .unit-details-left,
   #unitDetailsModal .unit-details-right {
      flex: 1 1 100%;
      min-width: auto;
   }

   #unitDetailsModal .unit-details-right {
      margin-top: var(--spacing-lg);
      align-items: center;
   }

   #unitDetailsModal #solicitarReservaBtn {
      width: 100%;
      margin-top: var(--spacing-lg);
   }
}


/* Estilos específicos para o modal de imagem */
#modalImage {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
}

.gallery-nav {
   display: flex;
   justify-content: space-between;
   width: 100%;
   margin-top: var(--spacing-md);
}

.gallery-nav .nav-button {
   font-size: 2rem;
   padding: var(--spacing-xs) var(--spacing-md);
   background-color: rgba(255, 255, 255, 0.2);
   border: none;
   color: var(--color-text-light);
   cursor: pointer;
   border-radius: var(--border-radius-md);
}

/* Estilos específicos para o modal de vídeo */
#video-player-container {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
}

#video-player-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

/* Seção de Pílulas de Ação */
.action-pills-section {
   margin-bottom: var(--spacing-xl);
}

.pills-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: var(--spacing-md);
   justify-content: center;
   overflow-x: hidden;
}

.action-pill {
   padding: var(--spacing-md) var(--spacing-lg);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   font-size: 0.9rem;
}

.action-pill i {
   font-size: 1.5rem;
   margin-bottom: var(--spacing-sm);
}

/* ========================
     SEÇÃO SUITE PLACE
     ======================== */
.secao-suite-place {
   margin: var(--spacing-2xl) auto;
   width: 100%;
   padding: 0 20px;
}

.suite-place-container {
   background-color: #e6fa41;
   border-radius: 24px;
   padding: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   text-align: left;
   gap: 20px;
}

.suite-place-texto h2 {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   font-size: 20px;
   color: #242e2c;
   line-height: 24px;
   margin-bottom: 10px;
}

.suite-place-texto p {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: #242e2c;
   line-height: 24px;
}

.suite-place-botao-wrapper {
   /* width: 100%; */
   display: flex;
   justify-content: center;
}

.btn-suite-place {
   display: inline-block;
   background-color: #ffffff;
   border: 1px solid #242e2c;
   color: #242e2c;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 600;
   font-size: 17px;
   text-decoration: none;
   height: 48px;
   line-height: 46px;
   padding: 0 35px;
   border-radius: 24px;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
   width: 100%;
   max-width: 320px;
}

.btn-suite-place:hover {
   background-color: #f8f9fa;
   border-color: #000;
   color: #000;
}


/* Seção de Descrição */
.description-section {
   margin: var(--spacing-2xl) auto;
}

.description-section p {
   text-align: justify;
   line-height: 1.8;
}

/* ========================================= */
/* Seção de Disponibilidade (Cards de Unidades Individuais) */
/* ========================================= */
.availability-cards-section {
   margin-top: var(--spacing-xl);
   overflow-x: hidden;

   .status-legend {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 var(--spacing-md);

      .legend-item {
         display: flex;
         gap: var(--spacing-md);
         align-items: center;
         justify-content: start;
      }
   }
}

.andares-wrapper {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   margin-bottom: var(--spacing-md);
   scrollbar-width: thin;
   scrollbar-color: var(--color-secondary) var(--color-background-secondary);

   /* width: 100vw; */
   /* margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw); */
   /* padding-left: var(--spacing-md); */
   /* padding-right: var(--spacing-md); */
   padding: var(--spacing-md) 0;

   display: flex;
   align-items: safe start;
   justify-content: safe start;
   flex-direction: column;
   gap: var(--spacing-sm);

   /* Configurações para scroll por clique */
   cursor: grab;
   user-select: none;

   /* Estilos da barra de rolagem para andares-wrapper (visível) */
   &::-webkit-scrollbar {
      height: 8px;
      background-color: var(--color-background-secondary);
   }

   &::-webkit-scrollbar-thumb {
      background-color: var(--color-secondary);
      border-radius: 4px;
      border: 1px solid var(--color-background-primary);
   }

   &::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-primary);
   }

}

.andares-wrapper.grabbing {
   cursor: grabbing;
}

.border-red {
   border: 3px solid red;
}

.andar-row {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   flex-wrap: nowrap;
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 var(--spacing-md);
}

.andar-info-card {
   position: relative;
   flex-shrink: 0;
   width: 70px;
   height: 145px;
   background-color: var(--color-primary);
   color: var(--color-text-light);
   border-radius: var(--border-radius-xl);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 1rem;
   box-shadow: var(--shadow-sm);
   text-align: center;
   padding: var(--spacing-xs);
   white-space: nowrap;
   line-height: 1.2;
   overflow: hidden;
}

.unidades-por-final-grid {
   display: flex;
   gap: var(--spacing-sm);
   flex-wrap: nowrap;
   min-width: fit-content;
   flex-grow: 1;
}

.unit-card-item {
   flex: 0 0 180px;
   height: 145px;
   border-radius: var(--border-radius-xl);
   border: none;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s ease;
   /* text-align: center; */
   color: var(--color-text-dark);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   padding: var(--spacing-md);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

.unit-card-item:last-of-type {
   margin-right: var(--spacing-lg);
}

.unit-card-item:hover:not([disabled]) {
   transform: translateY(-3px);
   background: var(--color-success);
}

.unit-card-item[disabled] {
   opacity: 0.9;
   cursor: not-allowed;
}

/* Cores de Status para os Cards de Unidade */
.unit-card-item.status-available {
   background: var(--color-success);
}

.unit-card-item.status-reserved {
   background: var(--color-warning);
}

.unit-card-item.status-sold {
   background: #ec1072;
}

.unit-card-item.status-empty,
.unit-card-item.status-paused {
   background-color: var(--color-background-secondary);
   border: 1px dashed var(--color-secondary);
   color: var(--color-secondary);
   opacity: 0.5;
}

.unit-card-content {
   display: flex;
   flex-direction: column;
   text-align: left;
   /* align-items: center; */
   justify-content: center;
   gap: var(--spacing-xs);
   width: 100%;
   height: 100%;
}

.unit-card-number {
   font-size: 1.5rem;
   line-height: 1.2;
   font-weight: 400;
}

.unit-card-type {
   font-size: 0.9rem;
   font-weight: normal;
   opacity: 0.9;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 90%;
}

.unit-card-status-text {
   font-size: 0.6rem;
   font-weight: normal;
   opacity: 0.7;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 90%;
}

.unit-card-details {
   display: flex;
   gap: var(--spacing-md);
}

.unit-card-detail {
   display: flex;
   align-items: flex-end;
   /* gap: var(--spacing-xs); */
}

.unit-card-detail .material-icons {
   font-size: 1.3rem;
}

.unit-card-detail-text {
   font-size: 1.3rem;
   font-weight: normal;
   line-height: 1;
}

.unit-card-valor-value {
   font-size: 1.3rem;
   font-weight: 400;
}

@media (min-width: 768px) {
   .suite-place-container {
      flex-direction: row;
   }

   /* .andar-info-card {
      width: 80px;
      height: 155px;
   } */


   /* .unit-card-item {
      flex: 0 0 180px;
      height: 145px;
   } */
}

/* ========================
    Seção Plantas (Valores & Fluxos)
    ======================== */
.secao-plantas {
   background-color: var(--color-background-primary);
   padding: 0 var(--spacing-md);
   margin-top: var(--spacing-xl);
}

.plantas-container-principal {
   max-width: 1280px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   /* MOBILE PADRÃO: COLUNAS */
   gap: 20px;
}

.plantas-bloco {
   width: 100%;
   border-radius: 24px;
   box-sizing: border-box;
}

.plantas-bloco-valores {
   background-color: var(--color-background-secondary);
}

.plantas-bloco-valores .plantas-conteudo-interno {
   padding: 50px 30px 30px 30px;
}


.plantas-bloco-imagem {
   background-color: var(--color-background-primary);
   border: 2px solid var(--color-background-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 300px;
   padding: 20px;
}

.imagem-planta {
   max-width: 100%;
   max-height: 100%;
   height: auto;
   border-radius: 12px;
   cursor: pointer;
   display: block;
}


.valores-titulo {
   font-size: 24px;
   font-weight: 600;
   color: var(--color-primary);
   margin-bottom: 50px;
   text-align: left;
}

.valores-fluxo-item {
   margin-bottom: 20px;
}

.valores-fluxo-item:last-of-type {
   margin-bottom: 0;
}

.fluxo-linha {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.fluxo-rotulo {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-text-dark);
   text-align: left;
}

.fluxo-valor {
   font-size: 16px;
   font-weight: 400;
   color: var(--color-text-dark);
   text-align: right;
}

.fluxo-divisor {
   border: none;
   height: 1px;
   background-color: #b8b8b8;
   margin-top: 20px;
}

.valores-observacao {
   font-size: 14px;
   font-weight: 400;
   color: var(--color-text-dark);
   line-height: 1.5;
   margin-top: 40px;
   margin-bottom: 40px;
   text-align: left;
}

.btn-valores-reservar {
   display: block;
   width: 100%;
   height: 40px;
   line-height: 38px;
   background-color: #ffffff;
   border: 1px solid var(--color-text-dark);
   border-radius: 20px;
   color: var(--color-text-dark);
   font-size: 16px;
   font-weight: 600;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   margin-top: 30px;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-valores-reservar:hover {
   background-color: var(--color-text-dark);
   color: #ffffff;
}

/* Modal da Planta */
.modal-planta {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.85);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2000;
   padding: 20px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-planta:not(.hidden) {
   opacity: 1;
   visibility: visible;
}

.modal-planta-content {
   background-color: var(--color-background-primary);
   padding: 10px;
   border-radius: 8px;
   max-width: 90vw;
   max-height: 90vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.modal-planta-content img {
   max-width: 90%;
   max-height: 90%;
   display: block;
   border-radius: 4px;
}

.modal-planta-close {
   position: absolute;
   top: -15px;
   right: -15px;
   width: 30px;
   height: 30px;
   background-color: #333;
   color: #fff;
   border-radius: 50%;
   border: 2px solid #fff;
   font-size: 18px;
   line-height: 26px;
   text-align: center;
   cursor: pointer;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.modal-planta-close:hover {
   background-color: #555;
}


/* Estilos Desktop para a Seção Plantas */
@media (min-width: 768px) {
   .secao-plantas {
      padding: 0;
   }

   .plantas-container-principal {
      flex-direction: row;
      /* DESKTOP: LADO A LADO */
      justify-content: space-between;
      align-items: stretch;
   }

   .plantas-bloco {
      flex: 1;
   }

   .plantas-bloco-valores,
   .plantas-bloco-imagem {
      min-height: 500px;
   }

   .valores-titulo {
      font-size: 30px;
   }

   .fluxo-rotulo {
      font-size: 20px;
   }

   .fluxo-valor {
      font-size: 18px;
   }
}


/* ========================
    SEÇÃO LOCALIZAÇÃO
    ======================== */
.secao-localizacao {
   margin-top: 100px;
   width: 100%;
}

.localizacao-container {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 var(--spacing-md);
}

.localizacao-card {
   background-color: #004132;
   border-radius: 30px;
   width: 100%;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   overflow: hidden;
}

.localizacao-texto {
   padding: 50px 0 50px 30px;
   width: 100%;
   box-sizing: border-box;
}

.localizacao-titulo {
   font-size: 40px;
   font-weight: 600;
   color: #ffffff;
   line-height: 56px;
   margin-bottom: 20px;
   text-align: left;
}

.localizacao-endereco {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.endereco-linha1 {
   font-size: 24px;
   font-weight: 600;
   color: #e6fa41;
   line-height: 20px;
}

.endereco-linha2 {
   font-size: 16px;
   font-weight: 400;
   color: #e6fa41;
   line-height: 20px;
}

.localizacao-mapa {
   width: 100%;
   height: 300px;
   overflow: hidden;
}

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

/* Desktop - Layout duas colunas */
@media (min-width: 768px) {
   .localizacao-card {
      flex-direction: row;
   }

   .localizacao-texto {
      width: 40%;
      padding-bottom: 50px;
   }

   .localizacao-mapa {
      width: 60%;
      height: auto;
      border-radius: 0 30px 30px 0;
   }
}

/* Mobile - Ajustes de texto */
@media (max-width: 767px) {
   .localizacao-titulo {
      font-size: 28px;
      line-height: 36px;
   }

   .endereco-linha1 {
      font-size: 20px;
   }

   .localizacao-mapa {
      height: 250px;
   }
}


/* ========================
    SEÇÃO EXPLORE
    ======================== */
.secao-explore {
   margin-top: 100px;
   width: 100%;
}

.explore-container {
   max-width: 1280px;
   margin: 0 auto;
}

.explore-titulo {
   font-size: 48px;
   font-weight: 600;
   color: var(--color-primary);
   text-align: left;
   margin-bottom: 50px;
}

.explore-cards {
   display: flex;
   gap: 20px;
   width: auto;
   flex-wrap: wrap;
}

.explore-card {
   background-color: var(--color-background-secondary);
   border-radius: 24px;
   cursor: pointer;
   overflow: hidden;
   display: inline-flex;
   flex-shrink: 0;
}

.card-conteudo {
   display: flex;
   align-items: center;
   padding: 20px;
   position: relative;
   padding-right: 120px;
}

.card-imagem {
   width: 135px;
   height: 120px;
   border-radius: 16px;
   object-fit: cover;
   margin-right: 30px;
}

.card-texto {
   font-size: 30px;
   font-weight: 600;
   color: var(--color-text-dark);
   white-space: nowrap;
   position: relative;
}

/* Responsividade */
@media (max-width: 1024px) {
   .explore-titulo {
      font-size: 36px;
   }

   .card-texto {
      font-size: 24px;
   }

   .card-imagem {
      width: 100px;
      height: 112px;
      margin-right: 20px;
   }

   .card-conteudo {
      padding-right: 90px;
   }
}

@media (max-width: 768px) {
   .explore-cards {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
      overflow-x: hidden;
      width: 100%;
   }

   .explore-titulo {
      font-size: 32px;
      margin-bottom: 30px;
   }

   .explore-card {
      width: 100%;
   }

   .card-texto {
      font-size: 22px;
   }

   .card-conteudo {
      padding-right: 70px;
   }
}

@media (max-width: 480px) {
   .explore-titulo {
      font-size: 28px;
   }

   .card-conteudo {
      flex-direction: column;
      align-items: flex-start;
      padding: 20px;
   }

   .card-imagem {
      width: 80px;
      height: 90px;
      margin: 0 0 15px 0;
   }

   .card-texto {
      white-space: normal;
      font-size: 20px;
   }

   .card-conteudo {
      padding-right: 20px;
   }
}


/* ========================
    SEÇÃO FICHA TÉCNICA
    ======================== */
.secao-ficha-tecnica {
   margin-top: 100px;
   width: 100%;
}

.ficha-container {
   max-width: 1280px;
   margin: 0 auto;
}

.ficha-card {
   background-color: var(--color-background-secondary);
   border-radius: 24px;
   width: 100%;
   padding: 50px 30px;
}

.ficha-titulo {
   font-size: 48px;
   font-weight: 600;
   color: var(--color-primary);
   line-height: 60px;
   margin-bottom: 20px;
}

.ficha-descricao {
   font-size: 16px;
   font-weight: 400;
   color: var(--color-text-dark);
   line-height: 24px;
   margin-bottom: 60px;
}

.ficha-bloco-informacoes {
   display: flex;
   gap: 20px;
}

.ficha-coluna {
   flex: 1;
}

.ficha-item {
   margin-bottom: 24px;
}

.ficha-item:last-child {
   margin-bottom: 0;
}

.ficha-item-titulo {
   font-size: 16px;
   font-weight: 400;
   color: var(--color-text-dark);
}

.ficha-item-valor {
   font-size: 20px;
   font-weight: 600;
   line-height: 26px;
   color: var(--color-text-dark);
   margin-top: 4px;
}

/* Responsividade */
@media (max-width: 768px) {
   .ficha-titulo {
      font-size: 36px;
      line-height: 48px;
   }

   .ficha-bloco-informacoes {
      flex-direction: column;
      gap: 0;
   }

   .ficha-coluna {
      margin-bottom: 20px;
   }

   .ficha-coluna:last-child {
      margin-bottom: 0;
   }
}

@media (max-width: 480px) {
   .ficha-titulo {
      font-size: 28px;
      line-height: 36px;
   }

   .ficha-card {
      padding: 30px 20px;
   }

   .ficha-descricao {
      margin-bottom: 40px;
   }
}


/* ========================
    SEÇÃO CHAMADA
    ======================== */
.secao-chamada {
   margin: var(--spacing-xl) auto;
   width: 100%;
}

.chamada-container {
   max-width: 1280px;
   margin: 0 auto;
}

.chamada-card {
   background-color: #004132;
   border-radius: 24px;
   width: 100%;
   min-height: 415px;
   display: flex;
   align-items: center;
   overflow: hidden;
}

.chamada-conteudo {
   flex: 1;
   padding: 50px 30px;
   color: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
}

.chamada-titulo {
   font-size: 1.8rem;
   margin-bottom: var(--spacing-lg);
   text-align: center;
   font-weight: 700;
   color: #ffffff;
}

.chamada-intro {
   font-size: 16px;
   font-weight: 600;
   color: #ffffff;
   margin-bottom: 24px;
}

.chamada-lista {
   font-size: 16px;
   line-height: 24px;
   color: #ffffff;
   margin-bottom: 24px;
}

.chamada-lista p {
   margin-bottom: 8px;
}

.chamada-destaque {
   font-weight: 600;
   color: #e6fa41;
}

.chamada-final {
   font-size: 16px;
   font-weight: 400;
   color: #ffffff;
   line-height: 24px;
}

.chamada-imagem {
   width: 370px;
   height: 415px;
   padding: 30px;
   display: flex;
   align-items: center;
}

.imagem-chamada {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 24px;
}

/* Responsividade */
@media (max-width: 1024px) {
   .chamada-imagem {
      width: 300px;
      height: 360px;
   }
}

@media (max-width: 768px) {
   .chamada-card {
      flex-direction: column;
      min-height: auto;
   }

   .chamada-conteudo {
      padding: 40px 30px 30px;
      justify-content: flex-start;
   }

   .chamada-imagem {
      width: 100%;
      height: 350px;
      padding: 0 30px 40px;
   }
}

@media (max-width: 480px) {
   .chamada-titulo {
      font-size: 36px;
      line-height: 48px;
   }

   .chamada-conteudo {
      padding: 30px 25px 25px;
   }

   .chamada-imagem {
      height: 300px;
      padding: 0 25px 30px;
   }
}


/* --- Estilos para o Modal de Reserva Multi-Etapas --- */

/* Esconde todas as etapas por padrão */
.reserva-step {
   display: none;
   width: 100%;
}

/* Mostra a etapa ativa */
.reserva-step:not(.hidden) {
   display: block;
}

/* Layout da Etapa 1 (informações e pagamento) */
.info-section-split {
   display: flex;
   gap: var(--spacing-lg);
   /* Espaçamento entre as colunas */
   margin-bottom: var(--spacing-lg);
   flex-wrap: wrap;
   /* Permite quebras de linha em telas menores */
}

.info-section-split .info-text-column {
   flex: 2;
   /* Ocupa 2/3 do espaço */
   padding-right: var(--spacing-md);
   /* Espaçamento interno */
   border-right: 1px solid var(--color-border);
   /* Linha divisória */
   /* Remover max-height se existir */
}

.info-section-split .info-image-column {
   flex: 1;
   /* Ocupa 1/3 do espaço */
   display: flex;
   /* Para centralizar a imagem */
   align-items: center;
   justify-content: center;
   padding-left: var(--spacing-md);
   /* Espaçamento interno */
   /* Remover max-height se existir */
}


.info-section-split h3 {
   margin-top: 0;
   margin-bottom: var(--spacing-md);
   color: var(--color-primary-dark);
}

.info-section-split .info-grid p {
   margin-bottom: var(--spacing-xs);
   font-size: var(--font-size-sm);
}

.info-section-split .info-grid strong {
   color: var(--color-text-dark);
}

/* Estilos para a tabela de informações de pagamento */
.payment-info-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: var(--spacing-md);
   margin-bottom: var(--spacing-md);
   /* Espaçamento antes do total */
}

.payment-info-table th,
.payment-info-table td {
   border: 1px solid var(--color-border);
   padding: var(--spacing-xs);
   text-align: left;
   font-size: var(--font-size-xs);
   /* Menor fonte para a tabela de pagamento */
}

.payment-info-table th {
   background-color: var(--color-background-tertiary);
   color: var(--color-text-dark);
   font-weight: var(--font-weight-semibold);
}

/* Estilo para o valor total da unidade */
.total-unidade {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
   color: var(--color-primary-dark);
   text-align: right;
   margin-top: var(--spacing-md);
   padding-top: var(--spacing-sm);
   border-top: 1px dashed var(--color-border);
}


/* Estilo para a imagem da planta no modal de reserva (Etapa 1) */
.planta-preview {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0;
   /* Remover margens automáticas para o flexbox */
   border-radius: var(--border-radius-sm);
   box-shadow: var(--shadow-sm);
   cursor: zoom-in;
   /* Indica que é clicável */
}

/* Estilos para a Etapa 2 (formulário) */
.reservation-form .form-section {
   margin-bottom: var(--spacing-lg);
   padding: var(--spacing-md);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-sm);
   background-color: var(--color-background-secondary);
}

.reservation-form .form-section h3,
/* Ajuste para h3 também na Etapa 2 */
.reservation-form .form-section h4 {
   margin-top: 0;
   margin-bottom: var(--spacing-md);
   color: var(--color-primary-dark);
}

.reservation-form .form-row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
}

.reservation-form .form-group {
   flex: 1;
   min-width: 180px;
   /* Largura mínima para campos */
}

.reservation-form .form-group.flex-2 {
   flex: 2;
   /* Campo de endereço mais largo */
}

.reservation-form label {
   display: block;
   margin-bottom: var(--spacing-xs);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-dark);
}

.reservation-form input[type="text"],
.reservation-form input[type="email"],
.reservation-form input[type="file"],
.reservation-form textarea {
   width: 100%;
   padding: var(--spacing-sm);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-base);
}

.reservation-form input[readonly] {
   background-color: var(--color-background-tertiary);
   cursor: not-allowed;
}

/* Estilos para a Etapa 3 (Parabéns) */
.success-message-container {
   text-align: center;
   padding: var(--spacing-xl);
   background-color: var(--color-background-secondary);
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-md);
}

.success-message-container .success-icon {
   font-size: 4em;
   color: var(--color-success);
   margin-bottom: var(--spacing-lg);
}

.success-message-container h3 {
   color: var(--color-success-dark);
   margin-bottom: var(--spacing-md);
}

.success-message-container p {
   font-size: var(--font-size-lg);
   color: var(--color-text);
   margin-bottom: var(--spacing-lg);
}

.success-message-container .small-text-info {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin-bottom: var(--spacing-xl);
}

/* Responsividade para modais em telas pequenas */
@media (max-width: 768px) {
   .modal-content-reserva {
      max-width: 95%;
      padding: var(--spacing-md);
   }

   .info-section-split {
      flex-direction: column;
      /* Colunas em pilha para mobile */
      gap: var(--spacing-md);
   }

   .info-section-split .info-text-column {
      border-right: none;
      /* Remove linha divisória */
      padding-right: 0;
      border-bottom: 1px solid var(--color-border);
      /* Adiciona linha na parte inferior */
      padding-bottom: var(--spacing-md);
   }

   .info-section-split .info-image-column {
      padding-left: 0;
   }

   .info-section-grid .info-section {
      /* Se esta classe ainda for usada, ajuste */
      min-width: auto;
      /* Remove largura mínima */
   }

   .reservation-form .form-row {
      flex-direction: column;
      /* Pilha campos em mobile */
      gap: var(--spacing-xs);
   }

   .reservation-form .form-group {
      min-width: auto;
   }

   .reservation-form .form-group.flex-2 {
      flex: auto;
      /* Reset flex-2 */
   }

   .form-actions {
      flex-direction: column;
      gap: var(--spacing-sm);
   }

   .form-actions .btn {
      width: 100%;
   }
}

/* Estilos de formulário genéricos (para modal de solicitação) */
/* Estes são os estilos para os formulários que usamos (ex: #solicitarReservaModal) */
.form-group {
   margin-bottom: var(--spacing-md);
}

.form-group label {
   display: block;
   margin-bottom: var(--spacing-sm);
   font-weight: bold;
   color: var(--color-text-dark);
   text-align: left;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
   height: 44px;
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius-md);
   font-size: 1rem;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
   transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
}

/* Melhorias para botões dentro de formulários, se aplicável */
.form-group .btn {
   width: 100%;
   margin-top: var(--spacing-md);
   height: 48px;
   font-size: 1.1rem;
}

/* Estilos para mensagens de erro/sucesso do formulário */
p#reservaMessageLead {
   font-size: 0.9rem;
   font-weight: bold;
   text-align: center;
   padding: var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   margin-top: var(--spacing-md);
}

p#reservaMessageLead[style*="red"] {
   background-color: rgba(var(--color-danger-rgb), 0.1);
   border: 1px solid var(--color-danger);
   color: var(--color-danger) !important;
}

p#reservaMessageLead[style*="green"] {
   background-color: rgba(var(--color-success-rgb), 0.1);
   border: 1px solid var(--color-success);
   color: var(--color-success) !important;
}

/* Estilos do Modal de Reserva */
/* .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
 } */

/* Mobile First - Estilos base para mobile */
.modal-content-reserva {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--color-background-primary);
   margin: 0;
   width: 90%;
   height: 80vh;
   border-radius: var(--border-radius-xl);
   /* Altura máxima da viewport */
   overflow: hidden;
   /* Permite scroll vertical se o conteúdo exceder a altura */
   display: flex;
   /* Para organizar header, body e footer */
   flex-direction: column;
   /* justify-content: safe center; */
}

.modal-content-reserva .modal-header {
   padding: 1.5rem;
   border-bottom: 1px solid #eee;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.modal-content-reserva .modal-header h2 {
   margin: 0;
   font-size: 1.5rem;
   color: var(--color-primary);
}

/* .modal-content-reserva .close-button {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: #666;
   padding: 0.5rem;
} */

.modal-content-reserva .modal-body {
   flex-grow: 1;
   padding: 1.5rem;
   height: 100%;
   width: 100%;
   overflow-y: auto;
}

/* Seções de Informação */
.modal-content-reserva .info-section {
   width: 100%;
   overflow-x: auto;
}

.modal-content-reserva .info-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
   margin-bottom: 1.5rem;
}

.modal-content-reserva .info-item {
   padding: 0.5rem;
   background-color: #f8f9fa;
   border-radius: 4px;
}

.modal-content-reserva .info-item strong {
   display: block;
   margin-bottom: 0.25rem;
   color: var(--color-primary);
}

.modal-content-reserva .planta-preview {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Formulário de Reserva */
.modal-content-reserva .reservation-form {
   max-width: 100%;
}

.modal-content-reserva .form-section {
   margin-bottom: 2rem;
}

.modal-content-reserva .form-section h3 {
   margin-bottom: 1.5rem;
   color: var(--color-primary);
}

.modal-content-reserva .form-row {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin-bottom: 1rem;
}

.modal-content-reserva .form-group {
   flex: 1;
}

.modal-content-reserva .form-group.flex-2 {
   flex: 2;
}

.modal-content-reserva .form-group label {
   display: block;
   margin-bottom: 0.5rem;
   color: #555;
   font-weight: 500;
}

.modal-content-reserva .form-group input,
.modal-content-reserva .form-group textarea {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 1rem;
}

.modal-content-reserva .form-group input:focus,
.modal-content-reserva .form-group textarea:focus {
   border-color: var(--color-primary);
   outline: none;
   box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

/* Ações do Formulário */
.modal-content-reserva .form-actions {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   /* margin-top: 2rem; */
   border-top: 1px solid #eee;
   padding: 1rem 0 0;
}

.modal-content-reserva .btn {
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: 4px;
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.2s ease;
   width: 100%;
}

.modal-content-reserva .btn-primary {
   background: var(--gradient-primary);
   color: white;
}

.modal-content-reserva .btn-secondary {
   background: #f8f9fa;
   color: #333;
   border: 1px solid #ddd;
}

.modal-content-reserva .btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================
      SEÇÃO TÍTULO
      ======================== */
.secao-titulo {
   background-color: var(--color-background-primary);
   width: 100%;
   padding: var(--spacing-md);
}

.secao-titulo-container {
   max-width: 1440px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.conteudo-esquerdo {
   display: flex;
   flex-direction: column;
}

.localizacao {
   font-weight: 600;
   font-size: 16px;
   color: #000;
}

.titulo-container {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
}

.titulo-principal {
   font-weight: 600;
   font-size: 30px;
   color: #242e2c;
   line-height: 36px;
}

.flag-lancamento {
   position: relative;
   height: 32px;
   display: flex;
   align-items: center;
   white-space: nowrap;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: 0.8rem;
   color: var(--color-text-light);
}

.flag-lancamento .super {
   font-weight: 700;
   margin-right: 4px;
}

.flag-lancamento .lancamento {
   font-weight: 600;
}

.conteudo-direito {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.preco-label {
   font-weight: 400;
   font-size: 14px;
   color: #242e2c;
   line-height: 36px;
   margin-bottom: 4px;
}

.preco-valor {
   font-weight: 600;
   font-size: 24px;
   color: #242e2c;
   line-height: 36px;
}

/* ========================
      SEÇÃO CARROSSEL
      ======================== */
.carousel-section {
   background-color: #ffffff;
}

.carousel-container {
   position: relative;
   width: 100%;
   overflow: hidden;
   max-width: 100vw;
   padding: 0 var(--spacing-md);
}

.carousel {
   padding: var(--spacing-md) 0;
}

.carousel img {
   width: 100%;
   /* Ocupa toda a largura do contêiner */
   max-width: 550px;
   /* Limita a largura a 465px */
   height: 100%;
   /* Mantém a altura proporcional */
   aspect-ratio: 530 / 570;
   object-fit: cover;
   /* Mantém a proporção de 465:540 */
   border-radius: 32px;
   /* Bordas arredondadas */
}

.carousel img:hover {
   transform: scale(1.01);
   transition: transform 0.3s ease;
   cursor: pointer;
}

@media (max-width: 768px) {
   .carousel img {
      max-width: 400px;
      /* Ocupa toda a largura do contêiner em telas menores */
      aspect-ratio: 530 / 570;
      /* Mantém a proporção de 1:1 */
   }
}

.carousel {
   display: flex;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
   gap: 6px;
}

.carousel::-webkit-scrollbar {
   display: none;
}

.carousel-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: #fff;
   border: none;
   cursor: pointer;
   z-index: 10;
   border-radius: 50%;
   height: 50px;
   width: 50px;
   display: none;
   align-items: center;
   justify-content: center;
   user-select: none;
   transition: background-color 0.2s ease;
}

.carousel-nav:hover {
   background-color: #f2f5f5;
}

.carousel-container:hover .carousel-nav {
   display: block;
}

.carousel-nav.prev {
   left: 10px;
}

.carousel-nav.prev span,
.modal-nav-galeria.modal-prev span {
   font-size: 2.5rem;
   margin: 0;
}

.carousel-nav.next {
   right: 10px;
}

.carousel-nav.next span,
.modal-nav-galeria.modal-next span {
   font-size: 2.5rem;
   margin: 0;
}

.content-desktop {
   display: none;
}

/* ========================
      MODAL DA GALERIA
      ======================== */
.modal-galeria {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.85);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   z-index: 1500;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-galeria:not(.hidden) {
   opacity: 1;
   visibility: visible;
}

.modal-content-galeria {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90vw;
   height: 80vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.modal-content-galeria img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 16px;
   display: block;
}

.modal-caption-galeria {
   color: #fff;
   margin-top: 15px;
   font-size: 1rem;
   line-height: 1.3;
}

.modal-close-galeria {
   position: absolute;
   top: 15px;
   right: 15px;
   font-size: 2.5rem;
   background: transparent;
   border: none;
   color: #fff;
   cursor: pointer;
   user-select: none;
   padding: 5px;
   line-height: 1;
   z-index: 20;
}

.modal-nav-galeria {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(30, 30, 30, 0.6);
   border: none;
   font-size: 2.5rem;
   color: #fff;
   cursor: pointer;
   border-radius: 50%;
   height: 50px;
   width: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   user-select: none;
   z-index: 20;
   transition: background-color 0.2s ease;
}

.modal-nav-galeria:hover {
   background: rgba(0, 0, 0, 0.8);
}

.modal-nav-galeria.modal-prev {
   left: 15px;
}

.modal-nav-galeria.modal-next {
   right: 15px;
}

/* ========================
      SEÇÃO MÍDIAS
      ======================== */
.secao-midias {
   background-color: var(--color-background-primary);
   padding: 24px 0 0;
   width: 100%;
}

.secao-midias-container {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 20px;
}

.midias-botoes-wrapper {
   display: flex;
   gap: 10px;
   overflow-x: auto;
   margin-left: -20px;
   padding-left: 20px;
   margin-right: -20px;
   padding-right: 20px;
   padding-bottom: 0;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.midias-botoes-wrapper {
   display: flex;
   gap: 10px;
   /* Espaço entre os botões */
}

.material-icons {
   font-size: 24px;
   /* Tamanho do ícone */
   margin-right: 8px;
   /* Espaço entre o ícone e o texto */
}

.midias-botoes-wrapper::-webkit-scrollbar {
   display: none;
}

.btn-midia {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: var(--color-background-primary);
   border: 1px solid #242e2c;
   height: 56px;
   border-radius: 28px;
   padding: 0 20px;
   color: #242e2c;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
   flex-shrink: 0;
}

.btn-midia:hover {
   transform: scale(1.01);
   border-color: #000;
}

.btn-midia:active {
   transform: scale(0.98);
}

.btn-midia-icon-img {
   margin-right: 8px;
   display: inline-flex;
   align-items: center;
   font-size: 1.5em;
   line-height: 1;
}

.btn-midia-texto {
   display: inline-block;
   line-height: 1;
}

/* ========================
         MODAL DAS MÍDIAS
         ======================== */
.modal-midia {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   padding: 1rem;
   display: flex !important;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-midia:not(.hidden) {
   opacity: 1;
   visibility: visible;
}

.modal-midia-content {
   background-color: var(--color-background-primary);
   padding: 1rem;
   border-radius: var(--border-radius-xl);
   /* max-width: 700px; */
   width: 100%;
   height: 85vh;
   /* overflow-y: auto; */
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   transition: transform 0.3s ease;
   display: flex;
   flex-direction: column;
   align-items: safe center;
   justify-content: safe center;
}


.modal-midia-close, .close-button {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 1200;
   /* transform: translate(0, -150%); */
}

.close-btn {
   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   font-weight: bold;
   border-radius: 50%;
   background: var(--color-background-primary);
   color: var(--color-text-primary);
   cursor: pointer;
   transition: all 0.2s ease;
   filter: brightness(0.9);
   border: none;
}

.close-btn span {
   margin-right: 0;
}

.close-btn:hover {
   filter: brightness(1);
}

.modal-midia-title {
   font-weight: 600;
   font-size: 24px;
   color: #242e2c;
   margin-bottom: 20px;
   padding-right: 30px;
}

.modal-midia-body {
   font-size: 16px;
   line-height: 1.6;
   color: #333;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   overflow-y: auto;
}

.modal-midia-body img {
   max-width: 100%;
   height: auto;
   width: 100%;
   height: 300px;
   object-fit: cover;
   cursor: pointer;
}

.modal-midia-body iframe {
   max-width: 100%;
   margin-top: 15px;
   margin-bottom: 15px;
   border: none;
   aspect-ratio: 16 / 9;
   width: 100%;
   height: 60vh;
}


/* Desktop - Estilos aplicados a partir de 769px */
@media (min-width: 769px) {
   .content-desktop {
      display: block;
   }

   .modal-midia-body img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      width: 300px;
      height: 300px;
   }

   .modal-content-reserva .modal-body {
      width: auto;
   }

   .modal-content-reserva .info-section {
      width: auto;
   }

   .modal-content-reserva .form-row {
      flex-direction: row;
      gap: 1rem;
   }

   .modal-content-reserva .info-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }

   .modal-content-reserva .form-actions {
      flex-direction: row;
      justify-content: flex-end;
   }

   .modal-content-reserva .btn {
      width: auto;
   }

   /* Seção Título */
   .secao-titulo {
      padding: 50px 40px;
   }

   .secao-titulo-container {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 40px;
   }

   .conteudo-direito {
      align-items: flex-end;
      text-align: right;
   }

   .titulo-principal {
      font-size: 48px;
   }

   .preco-label {
      font-size: 16px;
   }

   .preco-valor {
      font-size: 28px;
   }
}