@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');

/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ===== ESTILOS PARA O HERO COM VÍDEO (VERSÃO 2) ===== */

/* --- 1. AJUSTES NO CONTAINER PRINCIPAL DO VÍDEO --- */
#video-hero-container {
    position: relative; /* MUITO IMPORTANTE: Mudar para absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh; /* Altura da seção */
    overflow: hidden;
    
background-color: #1a1a1a; 
}

#hero-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
    object-fit: cover;
}

#video-hero-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px; /* Altura da área do gradiente */
  z-index: 3; /* Acima do vídeo e da sobreposição escura */
  /* O gradiente que cria o efeito de sombra */
  /* 1. ALTURA: Aumente este valor para a sombra ficar mais espalhada/dispersa */
  height: 200px; 
  
  /* 2. GRADIENTE: Ajuste a cor e a opacidade para deixá-la mais forte ou mais amena */
  background-image: linear-gradient(to bottom, 
    rgba(20, 20, 20, 0.7) 0%, /* Sombra superior um pouco mais escura */
    transparent 100%
  );
}

/* Sobreposição escura geral para legibilidade */
#video-hero-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 16.53%), linear-gradient(0deg, rgba(0, 30, 98, .5) 90%, rgba(0, 154, 206, 0) 108.81%); */
  background-image: linear-gradient(to bottom, 
    rgba(20, 20, 20, 0.35) 0%, /* Sombra superior um pouco mais escura */
    rgba(20, 20, 20, 0.35) 100%
  );
  z-index: 2; /* Fica acima do vídeo, mas abaixo da sombra do menu */
}

/* --- 4. CONTEÚDO DE TEXTO SOBRE O VÍDEO --- */
#hero-content-overlay {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* Joga para a parte de BAIXO */
  align-items: flex-start;  /* Joga para a ESQUERDA */
  padding: 60px 60px 30px;            /* Cria o deslocamento de 60px da borda */
}

/* --- ESTILOS PARA OS TEXTOS DENTRO DO HERO --- */
#hero-content-overlay h1,
#hero-content-overlay h2,
#hero-content-overlay p {
  color: #ffffff;
  text-align: left; /* Garante que o texto dentro de cada linha alinhe à esquerda */
  padding: 0;
  margin: 0;
}

#hero-content-overlay h1 {
  font-size: 35px; /* Tamanho da fonte do título. Ajuste se precisar. */
  font-weight: bold;
  margin-bottom: 10px; /* Cria um espaço entre o título e o parágrafo */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

#hero-content-overlay p {
    font-size: 16px; /* Tamanho da fonte do parágrafo. Ajuste se precisar. */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

/* Estilo para a Tag "Lançamento" */
.tag-lancamento {
    display: inline-block;
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 6px 15px;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 20px;
    backdrop-filter: blur(5px); /* Efeito de vidro fosco (opcional) */
    background-color: rgba(255,255,255,0.1); /* Fundo levemente branco (opcional) */
}

/* ===== SEÇÃO DE LOCALIZAÇÃO ===== */
.location-section {
    display: flex; /* Define o layout de duas colunas */
    padding: 60px;
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores */
    align-items: center;
    gap: 20px;
    padding: 3em 5em; /* Espaçamento vertical da seção */
    background-color: #e7e6e7;
}

.location-content,
.location-image {
    text-align: center;
    flex: 1; /* Faz cada coluna ocupar 50% do espaço */
    min-width: 300px; /* Largura mínima antes de quebrar a linha */
}

.location-image {
    text-align: center;
}

.location-image img {
    width: auto;
    max-height: 500px;
    border-radius: 8px;
}

.location-content h2 {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.location-content p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.location-content .ler-mais {
    display: inline-block;
    margin-top: 15px;
    text-decoration: underline;
    color: #555;
    font-weight: bold;
}

/* ===== SEÇÃO DE LOCALIZAÇÃO (AJUSTE DO ÍCONE) ===== */

.location-address {
	margin-top: 30px;
	font-size: 15px;
	color: #333;
	/* As 4 linhas abaixo são a correção */
	display: flex;
	/* Alinha o ícone e o texto na mesma linha */
	align-items: center;
	/* Centraliza os dois verticalmente */
	justify-content: center;
	/* Centraliza o conjunto (ícone + texto) */
	gap: 8px;
	/* Cria um pequeno espaço entre o ícone e o texto */
}

.location-address::before {
	content: '';
	/* A posição absoluta foi removida */
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	/* Impede que o ícone seja esmagado */
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}
/*
================================================
SOBREPOSIÇÃO DE LAYOUT DO TEMA ASTRA
================================================
*/

/* Força a página a ter um layout de coluna única em todas as telas */
body.page-template-home-villa .ast-container {
    display: flex;
    flex-direction: column;
}

/* --- ESTILOS PARA O BOTÃO "SAIBA MAIS" NO HERO --- */
.hero-button-container {
    margin-top: 30px; /* Espaço entre o texto e o botão */
}

.hero-button {
    display: inline-block;
    border: 1px solid #ffffff;
    border-radius: 3px;
    padding: 6px 15px;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 20px;
    backdrop-filter: blur(5px); /* Efeito de vidro fosco (opcional) */
    background-color: rgba(255,255,255,0.1); /* Fundo levemente branco (opcional) */
}

.hero-button:hover {
    background-color: #F4F2EC; /* Cor um pouco mais clara ao passar o mouse */
    transform: translateY(-2px); /* Efeito sutil de elevação */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    color: #555;
}

/* --- TAG NO CANTO INFERIOR DIREITO DO HERO --- */
.hero-tag-bottom-right {
    position: absolute;
    bottom: 25px; /* Distância da borda inferior */
    right: 30px;  /* Distância da borda direita */
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* Sombra para legibilidade no vídeo */
    z-index: 4; /* Garante que fique na mesma camada do texto principal */
}

/*
================================================
FAIXA DE INFORMAÇÕES (ESTILO CAIXAS COM BORDAS) - V2
================================================
*/
.info-bar {
    background-color: #F4F2EC;
    padding: 1em 2em;
    padding-top: 3em;
}

.info-bar .ast-container {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; 
    gap: 20px;
}

.info-item {
    flex: 1;
    max-width: 340px;
    min-width: 280px;
    text-align: center;
    border: 1px solid #001F40; /* #5d4a44; */
    padding: 1em .5em; /* Aumenta o espaçamento interno */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilo para o texto principal (maior e em destaque) */
.info-main-text {
    font-size: 3em; /* Tamanho maior para os números/texto principal */
    font-weight: 700; /* Negrito */
    color: #001F40; /* #5d4a44; */
    line-height: 1.2;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Estilo para o texto secundário (menor e mais leve) */
.info-sub-text {
    font-size: 0.9em;
    font-weight: 400; /* Peso normal */
    color: #6c6c6c; /* #5d4a44; */
    text-transform: uppercase; /* Caixa alta como na referência */
    letter-spacing: 0.5px; /* Leve espaçamento entre as letras */
    line-height: 1.5;
}

.info-sub-text-2 {
    font-weight: 900;
}

/* Ordena o texto na terceira caixa para o sub-texto vir depois */
.info-item:nth-child(3) {
    flex-direction: column-reverse;
}

/*
================================================
BARRA DE INFORMAÇÕES INFERIOR
================================================
*/
.info-bottom-bar {
    background-color: #F4F2EC;
    padding: 1em 2em;
    padding-top: 1em; /* Mais espaço no topo */
    padding-bottom: 4em;
    text-align: center;
    color: #6c6c6c; /* #5d4a44; */
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 10.5px;
}

.info-bottom-bar .info-second {
    padding: 1.5em 0.5em;
    border-top: 1px solid #dcd1c1; /* Linha divisória acima do texto */
    border-bottom: 1px solid #dcd1c1;
    display: inline-block; /* Faz o container se ajustar ao conteúdo */
}

.info-bottom-bar strong {
    font-weight: 700; /* Garante que o negrito seja aplicado */
}

/*
================================================
ESTILOS PARA A CAIXA COM LAYOUT DIVIDIDO
================================================
*/

/* Adiciona um espaçamento superior para o texto "Condomínio Completo" */
.info-item-divided .info-sub-text {
    margin-bottom: 10px; 
}

/* Container que segura as duas colunas */
.info-columns-wrapper {
    display: flex;
    align-items: center; /* Alinha as colunas verticalmente */
    justify-content: center;
    width: 100%;
    gap: 15px; /* Espaço geral entre as colunas */
}

/* Coluna da Esquerda */
.info-left-column {
    text-align: right; /* Alinha o texto à direita */
    font-size: 0.9em;
    text-transform: uppercase;
    color: #6c6c6c; /* #5d4a44; */
    line-height: 1.4;
}

/* Coluna da Direita (que tem a linha divisória) */
.info-right-column {
    padding-left: 15px; /* Espaço à esquerda da linha */
    border-left: 1px solid #dcd1c1; /* Cria a linha divisória vertical */
    display: flex;
    flex-direction: column; /* Organiza os textos um embaixo do outro */
    align-items: center; /* Alinha os textos à esquerda dentro da coluna */
}

/* Texto grande (ex: 21º) */
.info-large-text {
    font-size: 2em;
    font-weight: 900;
    color: #001F40; /* #5d4a44; */
    line-height: 1;
    margin: 0.4em 0;
}

/* Texto pequeno (ex: pavimento) */
.info-small-text {
    font-size: 0.8em;
    text-transform: uppercase;
    color: #6c6c6c; /* #5d4a44; */
}

/*
================================================
SEÇÃO GALERIA DE IMAGENS
================================================
*/
.gallery-section {
    padding: 5em 5em; /* Espaçamento vertical da seção */
    background-color: #eee;
}

.gallery-header {
    text-align: center;
    margin-bottom: 30px;
    padding-left: 3em;
    padding-right: 3em;
}

.gallery-header h2, .perspectives-area h2 {
    font-size: 42px;
    font-weight: bold;
    color: #333;
    margin: 0;
    margin-bottom: 0.3em;
}

.gallery-header span, .perspectives-area span {
    font-size: 18px;
    color: #888;
    margin-top: 5px;
}

.gallery-scroll-container {
    display: flex; /* Alinha os itens lado a lado */
    overflow-x: auto; /* ATIVA A ROLAGEM HORIZONTAL */
    gap: 20px; /* Espaço entre as imagens */
    padding-bottom: 20px; /* Espaço para a barra de rolagem não cobrir as imagens */
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #3d52a0 #f0f0f0; /* Para Firefox */
}

/* Estilizando a barra de rolagem para Chrome/Safari/Edge */
.gallery-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.gallery-scroll-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}
.gallery-scroll-container::-webkit-scrollbar-thumb {
    background-color: #3d52a0;
    border-radius: 10px;
}

.gallery-item {
    position: relative; /* Base para a legenda */
    flex: 0 0 450px; /* Define a largura de cada item. Não encolhe, não estica, base de 450px. Altere a largura aqui se desejar. */
    border-radius: 8px;
    overflow: hidden;
}

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

.gallery-caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
}

/*
================================================
AJUSTES NA GALERIA DE IMAGENS (COM SETAS)
================================================
*/

/* Adiciona um container para posicionar as setas */
.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Esconde a barra de rolagem e ajusta o padding */
.gallery-scroll-container, .slider-wrapper {
    overflow-x: auto; /* Mantém a rolagem */
    scroll-snap-type: x mandatory; /* Efeito de "trava" ao rolar */
    scroll-behavior: smooth; /* Rolagem suave via JS */
}

.gallery-scroll-container,
.slider-wrapper,
.common-areas-slider-container {
    /* Esconde a barra de rolagem em todos os navegadores */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE e Edge */
}

.gallery-scroll-container::-webkit-scrollbar,
.slider-wrapper::-webkit-scrollbar,
.common-areas-slider-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

/* Ajusta os itens para o efeito de "trava" */
.gallery-item {
    scroll-snap-align: center; /* Centraliza o item ao rolar */
}

/* Estilo e posicionamento das setas (VERSÃO CORRIGIDA) */
.gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 45px;        /* Largura fixa */
    height: 45px;       /* Altura fixa, igual à largura */
    padding: 0;         /* Remove qualquer padding interno */
    font-size: 28px;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    
    /* Usando Flexbox para uma centralização precisa */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Correção inicial da posição e da forma */
    transform: translateY(-50%); 
}

/* Pequeno ajuste para a seta '‹' e '›' que ficam um pouco baixas */
.gallery-arrow {
    padding-bottom: 8px; /* Empurra a seta um pouco para cima */
}

.gallery-arrow:hover {
    background-color: #ffffff;
    /* Mantém o transform original e adiciona o zoom */
    transform: translateY(-50%) scale(1.1);
}

.prev-arrow {
    left: 15px;
}

.next-arrow {
    right: 15px;
}

/* Ajuste no espaçamento da seção para não cortar as setas */
.gallery-section {
    padding-left: 0;
    padding-right: 0;
}

/*
================================================
SEÇÃO DE CONTATO
================================================
*/
.contact-section {
    background-color: #f7f7f7; /* Fundo cinza claro */
    padding: 6em 8em;
    padding-bottom: 6em;
}

.contact-section .contact-area {
    display: flex;
    flex-direction: row; /* Garante o layout lado a lado em telas grandes */
    align-items: center;
    gap: 60px;
    flex-wrap: wrap; /* Permite que as colunas fiquem uma embaixo da outra em telas menores */
}

.contact-image,
.contact-content {
    flex: 1; /* Cria as duas colunas de 50% */
    min-width: 300px;
    text-align: center;
}

.contact-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* Bordas arredondadas da imagem */
}

.contact-content h2 {
    font-size: 38px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.contact-content p {
    font-size: 18px;
    color: #666;
    line-height: 0;
    max-width: 450px; /* Limita a largura do parágrafo */
    margin-bottom: 0;
}

.cta-button {
    display: inline-block;
    margin-top: 25px;
    background-color: #2c3a5e; /* Cor azul escuro do botão */
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #3d52a0; /* Um tom mais claro no hover */
}

/*
================================================
SEÇÃO CTA DOWNLOAD DO BOOK
================================================
*/
.cta-book-section {
    margin: 0;
    position: relative; /* Base para a sobreposição escura */
    padding: 2.5em 8em;
    background-image: url('https://villachacarainglesa.com.br/wp-content/uploads/2025/08/areas_7.webp');
    background-size: cover;
    background-position: center;
}

/* Camada de escurecimento para legibilidade */
.cta-book-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Sobreposição escura */
    z-index: 1;
}

.cta-book-section .book-area {
    position: relative; /* Para ficar acima da sobreposição */
    z-index: 2;
    margin-right: auto;
    margin-left: auto;
    max-width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cta-text h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
    margin: 0;
}

/* Estilo do botão "fantasma" (vazado) */
.ghost-button {
    display: inline-flex; /* Alinha o ícone e o texto corretamente */
    align-items: center;
    gap: 10px; /* Espaço entre o ícone e o texto */
    padding: 15px 30px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: normal;
    transition: all 0.3s ease;
}

.ghost-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff !important;
}

.ghost-button:hover a {
    border-color: #ffffff !important;
}

.ghost-button svg {
    stroke: #ffffff; /* Cor do ícone */
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
    .cta-book-section .ast-container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

/*
================================================
SEÇÃO PERSPECTIVAS (SLIDER TELA CHEIA)
================================================
*/
.perspectives-section {
    padding: 6em 0; /* Espaçamento apenas no topo, antes do título */
    background-color: #f7f7f7; /* Um fundo para a área do título */
}

.perspectives-section .section-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 5em;
}

.perspectives-section .section-header h2 {
    font-size: 42px;
    font-weight: bold;
    color: #333;
}

.full-width-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.slider-wrapper {
    display: flex;
    /* A mágica acontece aqui: movemos o wrapper para a esquerda com base no slide ativo */
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%; /* Cada slide ocupa 100% da largura do container */
    height: 70vh; /* Altura de cada slide. Ajuste se precisar */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o slide sem distorcer */
}

/* Navegação por pontos */
.slider-nav {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 5;
}

.slider-nav a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.slider-nav a:hover {
    opacity: 1;
}

.slider-nav a.active {
    opacity: 1;
    transform: scale(1.2);
}

/*
================================================
SEÇÃO PLANTAS (COM ABAS) - V3 (BOTÕES ESTILIZADOS)
================================================
*/
.floorplan-section-tabs {
    padding: 6em 2em;
    background-color: #3a3431; /* Cor de fundo escura da seção */
}

.floorplan-section-tabs .section-header {
    text-align: center; /* Centraliza o título "Plantas" */
    margin-bottom: 40px;
}

.floorplan-section-tabs .section-header h2 {
    font-size: 42px;
    font-weight: bold;
    color: #edeae4; /* Cor clara para o título */
}

/* Esconde os botões de rádio originais */
.floorplan-tabs-nav input[type="radio"] {
    display: none;
}

.floorplan-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Espaço entre os botões */
    border-bottom: none; /* Remove a linha de borda antiga */
    margin-bottom: 1em;
}

/* Container do botão clicável */
.floorplan-tabs-nav label {
    cursor: pointer;
}

/* O botão em si */
.tab-button {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #edeae4; /* Cor do botão INATIVO (claro) */
    color: #3a3431; /* Cor do texto do botão INATIVO (escuro) */
    padding: 1em;
    border-radius: 8px;
    min-width: 180px; /* Garante uma largura mínima para os botões */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-icon svg {
    width: 20px;
    height: 20px;
    stroke: #3a3431; /* Cor do ícone INATIVO (escuro) */
    transition: stroke 0.3s ease;
}

.tab-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.tab-title {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tab-main {
    font-size: 1.2em;
    font-weight: 700;
}

/* --- ESTILO DA ABA ATIVA --- */
/* Quando o input está checado, o label ao lado dele muda o estilo do botão */
.floorplan-tabs-nav input[type="radio"]:checked + label .tab-button {
    background-color: #5c5551; /* Cor do botão ATIVO (escuro) */
    color: #edeae4; /* Cor do texto ATIVO (claro) */
}

.floorplan-tabs-nav input[type="radio"]:checked + label .tab-button .tab-icon svg {
    stroke: #edeae4; /* Cor do ícone ATIVO (claro) */
}

/* --- ESTILOS DO CONTEÚDO (PAINEL BRANCO) --- */
.floorplan-tabs-content {
    background-color: #ffffff; /* Fundo branco para a área de conteúdo */
    padding: 1em;
    margin-top: -1px; /* Leve sobreposição para conectar visualmente com as abas */
    border-radius: 8px; 
    margin: 1em 5em;
}

/* Garante que o layout interno de cada planta seja de duas colunas */
.floorplan-tab-panel .floorplan-details,
.floorplan-tab-panel .floorplan-image {
    flex: 1;
    min-width: 300px;
}

.floorplan-tab-panel .floorplan-details {
    margin-bottom:1em;
    padding: 2em;
}

.floorplan-tab-panel {
    display: none;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap; /* Adicionado para responsividade */
}

/* MOSTRA o painel que tem a classe .active (adicionada pelo JS) */
.floorplan-tab-panel.active {
    display: flex;
}

.floorplan-image img {
    display: block;
    width: 100%;       /* A imagem ocupa 100% da LARGURA do seu container */
    height: auto;
    max-height: 300px;        /* A ALTURA se ajusta automaticamente para manter a proporção */
    max-width: 100%;   /* Garante que a imagem não ultrapasse o container */
    object-fit: contain; /* Garante que a imagem inteira caiba no espaço, sem distorcer */
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid #e1c9bd;
}

/*
================================================
ESTILOS DO CONTEÚDO INTERNO DAS PLANTAS
================================================
*/

.floorplan-title-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.floorplan-icon svg {
    width: 28px;
    height: 28px;
    fill: #3d52a0; /* Usando o azul que definimos anteriormente */
}

.floorplan-details h2 {
    font-size: 28px;
    font-weight: bold;
    color: #5f3f2f;
    margin: 0;
    font-family: 'Tenor Sans', sans-serif !important;
}

.floorplan-subtitle {
    font-size: 14px;
    color: #5f3f2f;
    font-weight: 500;
    margin-bottom: 25px;
}

.floorplan-divider {
    border: none;
    border-top: 1px solid #5f3f2f;
    margin-bottom: 25px;
}

.floorplan-description {
    font-size: 15px;
    color: #5f3f2f;
    line-height: 0;
}

.floorplan-footnote {
    font-size: 13px;
    color: #5f3f2f;
    margin-top: 0;
}

p.floorplan-footnote {
    margin: 0.5em 0;
}

/*
================================================
SEÇÃO ÁREAS COMUNS
================================================
*/
.common-areas-section {
    padding: 6em 0;
    background-color: #f7f7f7;
}

.common-areas-section .section-header {
    padding: 0 5em;
    text-align: right;
    margin-bottom: 40px;
}

.common-areas-section .section-header h2 {
    font-size: 42px;
    font-weight: bold;
    color: #333;
}

.common-areas-section .section-header span {
    font-size: 18px;
    color: #888;
    margin-top: 5px;
    display: block;
}

.common-areas-slider-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Para rolagem suave em iOS */
    scrollbar-width: none; /* Esconde a barra de rolagem no Firefox */
    -ms-overflow-style: none; /* Esconde a barra de rolagem no IE e Edge */
    padding-bottom: 20px; /* Espaço para a barra de rolagem não cortar as imagens */
}

.common-areas-slider-container::-webkit-scrollbar {
    display: none; /* Esconde a barra de rolagem em navegadores WebKit */
}

.common-areas-slider {
    display: flex;
    gap: 20px;
    padding: 20px; /* Espaço interno para as imagens não grudarem nas bordas */
}

.common-areas-slider a {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 400px; /* Largura de cada card */
    height: 250px; /* ALTURA FIXA para todos os cards */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.common-areas-slider img {
    width: 100%;
    height: 100%; /* IMAGEM OCUPA 100% DA ALTURA DO CARD */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    display: block;
    transition: transform 0.3s ease-in-out;
}

.common-areas-slider a:hover img {
    transform: scale(1.05);
}

/* Estilo para o cursor do mouse ao arrastar o slider */
.common-areas-slider-container.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/*
================================================
ESTILOS PARA O FORMULÁRIO DE CONTATO SIMPLES
================================================
*/
.simple-contact-form-wrapper {
    margin-top: 30px;
}

.simple-contact-form .form-input {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.simple-contact-form .form-submit {
    width: 100%;
    background-color: #2c3a5e;
    color: #ffffff;
    border: none;
    border-radius: 0;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.simple-contact-form .form-submit:hover {
    background-color: #3d52a0;
}

/* Estilos para as mensagens de sucesso/erro */
.form-success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    margin-bottom: 20px;
}

.form-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
}

.wp-block-image img {
    max-width: 150px;
}

/*
================================================
CORREÇÃO FINAL PARA BOTÃO NÃO CLICÁVEL (HERO)
================================================
*/

/*
Passo 1: Faz com que a camada de conteúdo principal seja "transparente" para cliques,
impedindo que ela bloqueie os elementos que estão dentro dela.
*/
#hero-content-overlay {
    pointer-events: none;
}

/*
Passo 2: Diz explicitamente ao botão (e seus pais dentro da camada) para
ACEITAREM cliques, tornando-os os únicos alvos interativos na área.
*/
#hero-content-overlay > * {
    pointer-events: auto;
}

/*
================================================
BOTÃO DE CONTATO FLUTUANTE (FAB)
================================================
*/
.floating-action-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-main-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #ED3500; /* #25d466 - #2c3a5e - Azul escuro */ 
    color: white;
    border: none;
    border-radius: 50px; /* Formato de pílula */
    padding: 12px 20px;
    font-size: 20px;
    font-weight: normal;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fab-main-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.fab-main-button svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
}

.fab-popup {
    position: absolute;
    bottom: 100%; /* Posiciona acima do botão principal */
    right: 0;
    margin-bottom: 15px;
    width: 320px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    padding: 20px;
    font-family: sans-serif;

    /* Animação e estado inicial (escondido) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Mostra o popup quando o container tem a classe 'is-open' */
.floating-action-button.is-open .fab-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.fab-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px}
.fab-popup-header h3 { font-size: 22px; color: #333; margin: 0; font-family: Helvetica, Arial, sans-serif }
.fab-popup-subtitle { font-size: 15px; color: #666; margin: 10px 0 20px 0; }

.fab-close-button { background: none; border: none; font-size: 28px; cursor: pointer; color: #888; }

.fab-popup ul { list-style: none; margin: 0; padding: 0; }
.fab-popup li { margin-bottom: 10px; }
.fab-popup a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: #555;
    font-weight: 500;
    border-radius: 6px;
}
.fab-popup a:hover { background-color: #f5f5f5; }
.fab-popup svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }

/*
================================================
AJUSTES FINAIS - FORMULÁRIO E RODAPÉ
================================================
*/

/* --- 2. CORREÇÃO DO ESPAÇAMENTO DO RODAPÉ (FOOTER) --- */
/* Força o contêiner do rodapé a se centralizar e ter espaçamentos laterais iguais */
.footer-widget-area {
    width: 100%;
    max-width: 1240px; /* Largura máxima comum para conteúdo de site */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

.site-primary-footer-wrap {
    padding: 1.5em !important;
}

/*
================================================
AJUSTES PARA OTIMIZAÇÃO MOBILE (VERSÃO ATUALIZADA)
================================================
*/

/* Aplica estes estilos para telas com largura máxima de 768px (tablets e celulares) */
@media (max-width: 768px) {

    /* --- 1. CORREÇÃO GERAL DO ESPAÇAMENTO (PADDING) --- */
    /* Reduz o espaçamento lateral das seções para evitar o transbordamento */
    .location-section,
    .gallery-section,
    .contact-section,
    .perspectives-section .section-header,
    .floorplan-section-tabs,
    .common-areas-section .section-header,
    .cta-book-section {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .contact-section {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    /* --- 2. AJUSTE NO HEADER E MENU MOBILE (REGRA ATUALIZADA) --- */
    /* Força a cor do ícone do menu "burger" para branco, usando !important para garantir a prioridade */
    .ast-header-stick-active .ast-mobile-menu-trigger .ast-mobile-svg,
    .ast-mobile-menu-trigger .ast-mobile-svg {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* Garante que o ícone tenha um bom contraste */
    .ast-mobile-menu-trigger {
        color: #ffffff !important;
    }
    
    /* --- (NOVO) AJUSTE DE ESPAÇAMENTO DO TEXTO DO BANNER --- */
    #hero-content-overlay {
        padding-left: 1.5em;   /* Reduz o espaçamento esquerdo */
        padding-right: 1.5em;  /* Reduz o espaçamento direito */
    }

    /* --- 3. AJUSTE DE TAMANHO DAS FONTES --- */
    /* Reduz o tamanho dos títulos principais para caberem melhor na tela */
    .location-content h2,
    .gallery-header h2,
    .perspectives-section .section-header h2,
    .floorplan-section-tabs .section-header h2,
    .common-areas-section .section-header h2,
    .contact-content h2 {
        font-size: 32px;
    }

    /* --- 4. AJUSTE NA SEÇÃO DE PLANTAS --- */
    /* Permite que as abas das plantas quebrem para a linha de baixo se não couberem */
    .floorplan-tabs-nav {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .floorplan-tabs-nav label {
        font-size: 16px;
    }

    /* --- 5. AJUSTE NA SEÇÃO "CALL TO ACTION" DO BOOK --- */
    .cta-book-section .book-area {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
}

/*
================================================
AJUSTES RESPONSIVOS PARA MOBILE
================================================
*/

/* Todas as regras dentro deste bloco só serão aplicadas em telas com largura de até 768px */
@media (max-width: 768px) {

    /* --- Ajustes na Seção de Plantas --- */

    .floorplan-tabs-content {
        padding: 1em;
        margin: 0 1em;
    }

    .floorplan-image img {
        max-height: 200px;
        max-width: 100%;
        object-fit: contain;
        padding: 0.5em;
        border-radius: 4px;
        border: 1px solid #e1c9bd;
    }

    /* 1. Faz as abas de navegação rolarem para o lado */
    .floorplan-tabs-nav {
        flex-wrap: nowrap; /* Impede que as abas quebrem a linha */
        overflow-x: auto;  /* Adiciona a rolagem horizontal */
        -webkit-overflow-scrolling: touch; /* Melhora a experiência de rolagem em iOS */
        padding-bottom: 15px; /* Cria um espaço para a barra de rolagem não ficar colada */
        justify-content: flex-start !important;
        margin: 0 1em;
    }

    /* Garante que o texto de cada aba não quebre em duas linhas */
    .floorplan-tabs-nav label {
        white-space: nowrap;
    }

    /* Opcional: Esconde a barra de rolagem visualmente, mas mantém a funcionalidade */
    .floorplan-tabs-nav::-webkit-scrollbar {
        display: none;
    }
    .floorplan-tabs-nav {
        scrollbar-width: none;  /* Para Firefox */
    }

    /* 2. Faz o conteúdo da planta (texto e imagem) ficar um embaixo do outro */
    .floorplan-tab-panel.active {
        flex-direction: column; /* Empilha as colunas verticalmente */
        gap: 40px; /* Reduz o espaço entre o texto e a imagem */
    }

    /* Faz as abas de navegação das PLANTAS rolarem para o lado no mobile */
    .floorplan-tabs-nav {
        flex-wrap: nowrap; /* Impede que as abas quebrem a linha */
        overflow-x: auto;  /* Adiciona a rolagem horizontal */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px;
    }

    .floorplan-tabs-nav label {
        white-space: nowrap; /* Garante que o texto da aba não quebre a linha */
    }
    
    /* --- Ajustes na Seção de Plantas para Mobile --- */
    .floorplan-section-tabs {
        /* Reduz o espaçamento lateral excessivo em telas pequenas */
        padding-left: 0;
        padding-right: 0;
    }

    /* Garante que o container da imagem da planta se ajuste corretamente */
    .floorplan-image {
        /* Remove a largura mínima que pode causar problemas no mobile */
        min-width: 0;
        width: 100%;
    }
}

/*
================================================
ANIMAÇÃO E AJUSTES PARA BOTÃO FLUTUANTE DO WHATSAPP
================================================
*/

/* 1. Define a animação de "piscar" (na verdade, uma pulsação sutil na opacidade) */
@keyframes fab-blink {
  50% {
    opacity: 0.1;
  }
}

/* 2. Aplica a animação APENAS no texto do botão */
.fab-main-button .fab-text {
  animation: fab-blink 1.2s infinite; /* A animação dura 1.5s e repete infinitamente */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* Sombra para legibilidade no vídeo */
  font-weight: bold
}

/* 3. Ajusta o ícone SVG para ser preenchido, como o do WhatsApp */
.fab-main-button svg {
    fill: currentColor; /* Preenche o ícone com a cor do texto (branco) */
    stroke: none;       /* Remove a linha de contorno */
}

/*
================================================
SEÇÃO QUEM CONSTRÓI (VERSÃO FINAL)
================================================
*/
.builder-section {
    background-color: #0d1f3a;
    padding: 5em;
    color: #ffffff;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.builder-section .info-p3 {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
}

/* --- Coluna da Esquerda (Textos e Infos) --- */
.builder-info-column {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
}

.builder-info-column h2 {
    font-size: 2.4em;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2em;
    color: #fff;
}

.builder-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-bottom: 2.5em;
}

.builder-stats .stat-item {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.builder-stats .stat-item .stat-number {
    font-size: 4em;
    font-weight: 700;
    line-height: 1;
}

.builder-stats .stat-item .stat-label {
    font-size: 1em;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 120px;
}

.builder-logos-container {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.5em;
    margin-top: auto;
}

.builder-logos {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 1.5em;
}

.builder-logos img {
    max-height: 35px;
    width: auto;
}

.builder-description {
    font-size: 0.85em;
    line-height: 1.6;
    color: #ccc;
}

/* --- Coluna da Direita (Galeria de Projetos) --- */
.builder-gallery-column {
    flex: 1.2;
    min-width: 320px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* --- O CONTAINER DE CADA PROJETO --- */
/* Cada "caixinha" da imagem terá uma altura fixa e um fundo sutil */
.project-item {
    position: relative;
    display: flex; /* Essencial para centralizar a imagem */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 180px; /* ALTURA FIXA PARA TODAS AS CAIXAS */
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil caso a imagem seja menor que a caixa */
    overflow: hidden;
}

/* --- A IMAGEM EM SI (A PARTE MAIS IMPORTANTE) --- */
/* Esta regra garante que a imagem NUNCA seja esticada */
.project-item img {
    max-width: 100%;   /* A imagem nunca será mais larga que a "caixa" */
    max-height: 100%;  /* A imagem nunca será mais alta que a "caixa" */
    width: auto;       /* A largura se ajusta para manter a proporção */
    height: auto;      /* A altura se ajusta para manter a proporção */
    object-fit: contain; /* Garante que a imagem inteira apareça, sem cortes */
}

.project-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    font-size: 0.8em;
    text-align: left;
    transition: opacity 0.3s ease;
}

.project-caption span {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
}

.project-caption small {
    font-size: 0.9em;
    opacity: 0.8;
}

/* --- Ajustes para Mobile --- */
@media (max-width: 992px) {
    .builder-info-column { order: 2; }
    .builder-gallery-column { order: 1; }
    .builder-info-column h2 { font-size: 1.8em; }
}

/*
================================================
SEÇÃO CREDIBILIDADE (LAYOUT CENTRALIZADO) - V3
================================================
*/

/* --- ESTRUTURA GERAL --- */
.credibility-section {

    /* Cor de fundo sólida que aparecerá por baixo de tudo e na parte opaca do degradê */
    background-color: #0d1f3a;

    /* A MÁGICA DO DEGRADÊ: */
    background-image:
        /* Camada 1 (topo): O degradê que vai do transparente ao azul sólido */
        linear-gradient(to right, rgba(13, 31, 58, 0) 20%, rgba(13, 31, 58, 1) 40%),
        /* Camada 2 (fundo): A sua textura */
        url('https://villachacarainglesa.com.br/wp-content/uploads/2025/08/TEXTURA-villa-2-scaled.png');

    background-repeat: no-repeat, repeat;

    /* O degradê cobre toda a área, e CADA "AZULEJO" da textura tem 400px */
    background-size: cover, 400px;

    color: #ffffff;
    padding: 5em 2em;
}

.credibility-wrapper {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    /* Usamos flexbox para centralizar os blocos verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza todos os blocos */
    gap: 3.5em; /* Espaçamento padrão entre os blocos */
}


/* --- 1. TÍTULO PRINCIPAL --- */
.credibility-headline {
    font-size: 1.8em;
    font-family: 'Tenor Sans', sans-serif;
    font-weight: 300;
    max-width: 600px;
    text-transform: uppercase;
    line-height: 1.8;
    letter-spacing: 1px;
    text-align: left; /* Garante a centralização do texto */
    margin: 0;
    color: #fff;
}


/* --- 2. BLOCO DE ESTATÍSTICAS --- */
.stats-block {
    display: flex;
    justify-content: center; /* Centraliza os itens de stats */
    flex-wrap: wrap;
    gap: 5em;
}

.stat-item {
    display: flex;
    flex-direction: column; /* MUITO IMPORTANTE: Empilha os itens verticalmente */
    align-items: flex-start; /* Alinha os itens à esquerda dentro da coluna */
    gap: 5px; /* Reduz o espaço entre o número e o texto para ficarem mais próximos */
}

.stat-number {
    font-size: 3em;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 1em;
    font-weight: 300;
    text-transform: uppercase;
}


/* --- 3. GALERIA DE PROJETOS --- */
.projects-gallery-full {
    display: grid;
    /* 4 colunas em telas grandes */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px;
    width: 100%; /* Ocupa toda a largura do wrapper */
}

/* Estilo unificado para cada item da galeria */
.project-item {
    position: relative;
    overflow: hidden;
    height: 190px;
    background-color: #0d1f3a;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-item:hover img {
    transform: scale(1.05);
}

.project-caption {
    background-color: #ffffff;
    color: #0d1f3a;
    padding: 8px;
    font-size: 0.75em;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    box-sizing: border-box; 
}


/* --- 4. QUADRO DE INFORMAÇÕES DAS EMPRESAS --- */
.company-info-block {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 2em;
    border-radius: 8px; /* Bordas levemente arredondadas */
    max-width: 800px; /* Limita a largura do quadro para melhor leitura */
    width: 100%;
    margin-top: 1em; /* Espaço extra no topo */
}

.company-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    margin-bottom: 1.5em;
}

.company-logos img {
    max-height: 80px;
    width: auto;
}

.company-descriptions {
    text-align: left; /* Centraliza o texto de descrição */
}

.company-descriptions p {
    font-size: 0.75em;
    line-height: 1.6;
    color: #cccccc;
    margin: 0 0 0.5em 0;
}

.company-descriptions p:first-child {
    border-bottom: 1px solid #fff;
    padding-bottom: 0.5em;
}

.company-descriptions p strong {
    color: #ffffff;
}

/*
================================================
SEÇÃO ANDAMENTO DA OBRA
================================================
*/
.construction-progress-section {
    padding: 4em 0; /* Removemos o padding lateral daqui */
    background-color: #ffffff;
}

/* ESTILO PARA NOSSO NOVO CONTAINER */
.progress-content-wrapper {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin-left: auto; /* Centraliza na página */
    margin-right: auto;
    padding-left: 2em; /* Espaçamento para não colar nas bordas */
    padding-right: 2em;
}

.construction-progress-section .section-header-obra {
    text-align: center;
    margin-bottom: 2em;
}

.construction-progress-section .section-header-obra h2 {
    font-size: 1.2em;
    font-weight: 500;
    color: #0d1f3a;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Grid das barras de progresso */
.progress-bars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em 3em; /* Espaço vertical e horizontal */
    max-width: 1000px;
    margin: 0 auto 3em auto; /* Centraliza o grid */
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
}

.progress-label {
    font-size: 0.9em;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}

.progress-percentage {
    font-size: 0.9em;
    font-weight: 700;
    color: #008fbf;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: #00a2d3; /* Cor azul da barra */
    border-radius: 10px;
}

.update-date {
    text-align: center;
    font-size: 0.8em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3em;
}

/* Ajustes para a galeria de fotos da obra */
.construction-progress-section .gallery-wrapper {
    max-width: 1000px; /* Mesma largura do grid de progresso */
    margin: 0 auto; /* Centraliza a galeria */
}

/*
================================================
ESTILOS PARA NOVOS BLOCOS (STATUS GERAL E DATA)
================================================
*/

/* Bloco da Data de Entrega */
.delivery-date-block {
    max-width: 450px;
    margin: 2em auto 2em auto; /* Centraliza e adiciona espaçamento */
    padding: 1.5em;
    border: 2px solid #00a2d3; /* Borda com o azul das barras */
    border-radius: 8px;
    text-align: center;
}

.delivery-date-label {
    font-size: 1em;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5em;
}

.delivery-date-label-minor {
    font-size: 0.85em;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0em;
}

.delivery-date-text {
    font-size: 2.8em;
    font-weight: 700;
    color: #00a2d3;
    line-height: 1.2;
}

/* Bloco do Status Geral */
.overall-progress-block {
    max-width: 1000px;
    margin: 0 auto 3em auto; /* Centraliza e adiciona espaçamento */
}

/* Modificador para deixar a barra de progresso geral mais grossa */
.progress-bar-container.large-bar {
    height: 20px;
}

/* Ajuste responsivo para as barras de progresso */
@media (max-width: 768px) {
    .progress-bars-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas pequenas */
    }
}

/* --- AJUSTES PARA TELAS MENORES (MOBILE) --- */
@media (max-width: 992px) {
    .projects-gallery-full {
        /* 3 colunas em telas de tablet */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .credibility-headline {
        font-size: 1.8em;
    }

    .stat-number {
        font-size: 3em;
    }
    
    .projects-gallery-full {
        /* 2 colunas em telas de celular */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Em telas de tablet/celular, ajustamos o layout */
    .credibility-wrapper {
        gap: 40px; /* Diminui o espaço quando as colunas empilham */
    }
    
    .credibility-headline {
        font-size: 1.8em; /* Diminui o título principal */
    }

    .projects-gallery-right {
        grid-template-columns: repeat(2, 1fr); /* Galeria da direita vira 2 colunas */
    }

    .stats-block {
        flex-direction: column; /* Estatísticas ficam uma embaixo da outra */
        gap: 30px;
    }

    .stat-number {
        font-size: 3em; /* Diminui os números das estatísticas */
    }
}

/*
================================================
ÁREAS COMUNS (V3 - ESTILO PINTEREST/MASONRY)
================================================
*/

/* Container da seção inteira */
.common-areas-grid-section {
    padding-top: 5em;
    padding-bottom: 5em;
    background-color: #f7f7f7;
}

/* Container que limita a largura */
.custom-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
}

/* Cabeçalho da seção com fonte fina */
.common-areas-header {
    text-align: center;
    margin-bottom: 50px;
}

.common-areas-header span {
    font-size: 16px;
    color: #888;
    font-family: 'Tenor Sans', sans-serif;
}

/* A grade estilo Pinterest/Masonry */
.areas-grid {
    /* A mágica acontece aqui: definimos o número de colunas */
    column-count: 3; /* 3 colunas para telas grandes */
    column-gap: 20px; /* Espaço entre as colunas */
}

/* Cada item da grade (o link <a>) */
.area-item {
    display: inline-block; /* Necessário para o layout de colunas */
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px; /* Espaço vertical entre as imagens */
    break-inside: avoid; /* Impede que uma imagem seja cortada entre colunas */
    border: 1px solid #eee; /* Borda sutil como na referência */
    /* Removemos o border-radius para cantos retos */
}

/* A imagem dentro do item */
.area-item img {
    width: 100%;
    height: auto; /* A altura agora é automática para manter a proporção */
    display: block;
    transition: transform 0.4s ease;
}

/* Legenda da imagem */
.area-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff;
    padding: 30px 20px 15px 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    transition: opacity 0.3s ease-in-out;
    opacity: 0; /* A legenda começa escondida */
}

/* Efeito ao passar o mouse */
.area-item:hover .area-caption {
    opacity: 1; /* Mostra a legenda */
}

.area-item:hover img {
    transform: scale(1.03); /* Mantém o leve zoom na imagem */
}


/* --- AJUSTES PARA TELAS MENORES (RESPONSIVIDADE) --- */

@media (max-width: 992px) {
    .areas-grid {
        column-count: 2; /* 2 colunas para tablets */
    }
}

@media (max-width: 576px) {
    .areas-grid {
        column-count: 1; /* 1 coluna para celulares */
    }
    .common-areas-header h2 {
        font-size: 30px;
    }
}

/*
================================================
ESTILO UNIFICADO PARA TÍTULOS E SUBTÍTULOS DE SEÇÃO
================================================
*/

/* Estilo principal para todos os H2 das seções */
.location-content h2,
.gallery-header h2,
.perspectives-section .section-header h2,
.credibility-headline,
.construction-progress-section .section-header h2,
.contact-content h2,
.common-areas-header h2 {
    font-family: 'Tenor Sans', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 30px !important;
    color: #333 !important;
}

.floorplan-section-tabs .section-header h2 {
    font-family: 'Tenor Sans', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 30px !important;
    color: #ededed !important;
}

/* Estilo para todos os subtítulos (spans) */
.location-content p,
.gallery-header span,
.perspectives-section .section-header span,
.common-areas-header span {
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 16px !important;
    color: #888 !important;
}

/* Ajuste específico para o título da seção de credibilidade, que é um H2 direto */
.credibility-headline {
    color: #ffffff !important; /* Cor branca para o fundo escuro */
    font-size: 1.8em !important;
    text-align: center;
}

/* Ajuste específico para o título da seção de contato */
.contact-content h2 {
    margin-bottom: 25px; /* Adiciona um espaço antes do formulário */
}

.hfeed.site .post-278 {
    margin: 2em 3em;
}

/*
================================================
SEÇÃO PONTOS PRÓXIMOS
================================================
*/

.nearby-points-section {
    padding: 3em 5em;
    background-color: #f7f7f7; /* Fundo cinza claro, similar a outras seções */
}

.points-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px; /* Limita a largura do texto do cabeçalho */
    margin-left: auto;
    margin-right: auto;
}

.points-header h2 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 30px;
    color: #333;
    margin-bottom: 15px;
}

.points-header span {
    font-size: 16px;
    color: #666; /* Cor um pouco mais escura para melhor leitura em fundo claro */
    line-height: 1.6;
}

.points-scroll-container {
    display: flex;
    overflow-x: auto; /* Ativa a rolagem horizontal */
    gap: 25px; /* Espaço entre os itens */
    padding-bottom: 20px; /* Espaço para a barra de rolagem não cobrir o conteúdo */
    
    /* Esconde a barra de rolagem visualmente, mas mantém a funcionalidade */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE e Edge */
}

.points-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

.point-item {
    flex: 0 0 320px; /* Largura fixa de cada card. Ajuste se necessário */
    text-align: left;
    background-color: #ffffff; /* Fundo branco para cada card */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.point-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.point-item img {
    width: 100%;
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    display: block;
}

.point-caption {
    padding: 15px 20px;
}

.point-caption h3 {
    font-size: 18px;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.point-distance {
    display: flex;
    align-items: center; /* Alinha o ícone e o texto verticalmente */
    gap: 8px; /* Espaço entre o ícone e o texto */
    font-size: 15px;
    color: #555;
}

.point-distance svg {
    stroke: #ED3500; /* Colore o contorno dos ícones */
    flex-shrink: 0;  /* Impede que o ícone seja esmagado */
}

/* Ajustes para telas menores (Mobile) */
@media (max-width: 768px) {
    .nearby-points-section {
        padding: 2em 1.5em; /* Reduz o espaçamento em telas menores */
    }

    .point-item {
        flex-basis: 280px; /* Diminui a largura dos cards no mobile */
    }
}

.points-scroll-container .point-item img {
    pointer-events: none;
}

/* AJUSTE ESTRUTURAL: Garante o espaçamento correto do carrossel de pontos próximos */
.points-scroll-container {
    padding-left: 5em;
    padding-right: 5em;
    box-sizing: border-box;
    clip-path: inset(0); 
}
@media (max-width: 768px) {
    .points-scroll-container {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }
}

/* --- NOVO SISTEMA DE ÍCONES PARA PONTOS PRÓXIMOS --- */

/* 1. Estilo base para TODOS os ícones */
.point-distance::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle; /* Ajuda no alinhamento com o texto */
}

/* 2. Ícone específico para caminhada (usando a classe .is-walk) */
.point-distance.is-walk::before {
    /* Novo ícone de caminhada, mais simples e garantido que não será cortado */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><path d="M12 22v-6l-4 4"/><path d="m13.5 12-2-4l-3 3 2.5 5.5"/><path d="m10.5 12-1.5 4.5"/></svg>');
}

/* 3. Ícone específico para carro (usando a classe .is-car) */
.point-distance.is-car::before {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ED3500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>');
}

.location-content, 
.location-image img {
    will-change: transform, opacity; /* Otimização de performance */
    /* Removemos o transition do transform para não travar o scroll */
    transition: opacity 0.3s ease-out; 
    opacity: 0; /* Começa invisível */
}

/* Configuração Obrigatória para o Smooth Scroll (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; /* Melhora performance ao passar por vídeos/mapas */
}