/*
        *************************************************
        * ESTILOS GERAIS E VARIÁVEIS *
        *************************************************
        */
        :root {
              --primary-color: #084BA0; /* Marrom Médio (Destaque) */
            --primary-dark: #084BA0;  /* Marrom Escuro (Fundo/Rodapé) */
            --bg-light: #f7f7f7;      /* Cinza Claro Quase Branco */
            --text-dark: #333;
            --text-gray: #666;     /* Cinza Claro para Texto Secundário */
            --dark-gray: #5C5C5C;     /* Cinza Escuro (Principal) */
            --card-gray: #959595; 
            --max-width: 1280px;
        }

        /* Reset Básico e Fonte */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            /* Garante que o corpo não cause rolagem horizontal */
            width: 100%; 
            overflow-x: hidden; 
        }

        .container {
            width: 100%;
            max-width: var(--max-width);
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
        }
        
        /*
        *************************************************
        * ESTILOS DO CABEÇALHO E NAVEGAÇÃO *
        *************************************************
        */
        header {
            position: absolute;
            top: 0;
            z-index: 50;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            padding-left: 2rem;
            padding-bottom: 1rem;
        }

        .header-content img{
            width:160px;
        }

        /* Menu Desktop */
        .nav-desktop a {
            color: #4b5563; /* Gray-600 */
            text-decoration: none;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            transition: color 150ms ease-in-out;
        }
        .nav-desktop a:hover {
            color: var(--primary-color);
        }
        .nav-desktop .cta-button {
            background-color: var(--primary-color);
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            transition: background-color 150ms ease-in-out;
        }
        .nav-desktop .cta-button:hover {
            background-color: var(--primary-dark);
        }

        /* Menu Mobile Toggle */
        .menu-toggle {
            display: block;
            background: none;
            border: none;
            cursor: poMontserrat;
            padding: 0.5rem;
            border-radius: 0.5rem;
            color: #4b5563;
        }

        /* Esconde elementos do desktop no mobile (padrão) */
        .nav-desktop {
            display: none;
        }
        .menu-toggle {
            display: block;
        }
        
        /* Media Query para Desktop/Tablet (sm: e md:) */
        @media (min-width: 768px) {
            .nav-desktop {
                display: flex;
                gap: 0.5rem;
            }
            .menu-toggle, .nav-mobile {
                display: none !important;
            }
        }

        /* Menu Mobile */
        .nav-mobile {
            display: none; /* Controlado via JS */
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        .nav-mobile a {
            display: block;
            color: #374151;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            text-decoration: none;
        }
        .nav-mobile a:hover {
            background-color: #eff6ff;
            color: var(--primary-color);
        }

       /*
 *************************************************
 * SEÇÃO HERO - REVISADA PARA INFERIOR ESQUERDO *
 *************************************************
 */
.hero-section {
    /* POSICIONAMENTO: Permite que o conteúdo filho use 'position: absolute;' */
    position: relative; 
    
    /* REMOVIDO: display: flex; align-items: center; justify-content: center; (Eles centralizavam o conteúdo) */
    
    /* Altura e Background (MANTIDOS) */
    height: 400px; /* Altura padrão para mobile */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('imagens/L_3ae256cd-6ee1-441b-9ab6-1466b50fbd6c.jpg') center center / cover;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem; 
    text-align: left; /* Alinha o texto da seção à esquerda */
}

.hero-content {
    /* CHAVE DO POSICIONAMENTO: Fixa o conteúdo no canto inferior esquerdo */
    position: absolute; 
    bottom: 0; 
    left: 0; 

    /* Estilização do Conteúdo para o Mobile (Para proteger o texto) */
    display: block; 
    text-align: left;
    
    /* Padding e Limite para Mobile: */
    padding: 1rem 1.5rem 1rem 1.5rem; /* Padding em volta do texto no mobile */
    max-width: 80%; /* Limita a largura em telas pequenas */
    width: auto; 
    height: auto; 

    /* Gradiente sutil para garantir contraste no canto inferior esquerdo (elegância) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    padding-top: 4rem; /* Aumenta o padding superior para o gradiente suavizar mais */
}

/* --------------------------------------
   ESTILIZAÇÃO DE TEXTO (MANTIDA)
   -------------------------------------- */
.hero-content h2 {
    font-size: 1rem; /* text-2xl (mobile) */
    font-weight:800;
    line-height:1;
    margin-bottom: 1rem; /* Reduzida para mobile */
    margin-top: 0;
}
.hero-content p {
    font-size: 0.8rem; /* text-base (mobile) */
    font-weight: 300; 
}
.hero-content .feat{
    margin-top:1rem;
    margin-bottom:1rem; /* Reduzida para mobile */
    font-weight: 600;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
}

/* --------------------------------------
   RESPONSIVIDADE (Desktop - Acima de 640px)
   -------------------------------------- */
@media (min-width: 640px) { 
    .hero-section {
        height: 600px;
    }
    
    .hero-content {
        /* Aumenta a distância da borda para desktop (elegância e visibilidade da imagem) */
        bottom: 3rem; 
        left: 3rem;   
        max-width: 45%; /* Limita a largura do texto para melhor leitura */
        
        /* Retorna a um background transparente, confiando no linear-gradient do .hero-section */
        background: transparent;
        padding: 0; /* Remove padding desnecessário após remover o background-gradient */
    }

    /* Aumenta o tamanho das fontes no desktop */
    .hero-content h2 {
        font-size: 2rem; /* sm:text-5xl */
    }
    .hero-content p {
        font-size: 1rem; /* sm:text-xl - Mantenha a font-size que desejar */
    }
}
@media (min-width: 1024px) { 
    .hero-content h2 {
        font-size: 2rem; /* lg:text-6xl */
    }
}

        /*
        *************************************************
        * SEÇÃO DE INTRODUÇÃO E VANTAGENS *
        *************************************************
        */
        .mb-12{
            padding-bottom: 6rem;
        }

        .section-padding {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }

        .intro-title {
            text-align: center;
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .intro-text {
            text-align: center;
            color: #4b5563;
            max-width: 56rem;
            margin: 0 auto 3rem;
            font-size: 1.125rem; /* text-lg */
        }
        
        .destaque-block {
            display: grid;
            gap: 2.5rem; /* gap-10 */
            align-items: center;
            background-color: #fff;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        @media (min-width: 768px) { /* md: */
            .destaque-block {
                grid-template-columns: repeat(2, 1fr);
            }
            .destaque-block .text-content {
                order: 2; /* order-2 md:order-1 */
            }
            .destaque-block .image-content {
                order: 1; /* order-1 md:order-2 */
            }
        }

        .destaque-block img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: box-shadow 300ms ease-in-out;
        }
        .destaque-block img:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .destaque-block ul {
            list-style: none;
            padding: 0;
            margin-top: 1rem;
        }
       .destaque-block ul li {
            display: flex;
            align-items: flex-start; /* CORREÇÃO: Alinha o ícone (SVG) ao topo */
            color: var(--dark-gray);
            line-height: 1.625; /* Usei 1.625 para melhor leitura em blocos de destaque */
            margin-bottom: 0.75rem;
        }
        
        .destaque-block ul li svg {
            min-width: 1.5rem; /* Mantém o tamanho mínimo */
            width: 1.5rem; 
            height: 1.5rem;
            color: var(--primary-color); /* Cor Marrom da Paleta */
            margin-right: 0.5rem;
            flex-shrink: 0; /* Garante que o ícone não encolha */
        }

        /*
        ************************************************
        *GALERIA *
        ************************************************
        */

      /* Estilos para o Bloco de Imagens (A "Sangria") */
        .galeria-responsiva {
            /* 1. Define a largura para 100% da largura da tela */
            width: 100vw; 
            
            /* 2. Move o bloco para a esquerda para compensar a margem do contêiner pai.
                  Isto é o coração da técnica, garantindo que o bloco comece na borda esquerda. */
            margin-left: calc(50% - 50vw);
            
            /* 3. Garante que não haja barra de rolagem horizontal */
            margin-right: calc(50% - 50vw);
            margin-bottom: 4rem;

            /* 4. Estilos Flexbox para a linha horizontal sem gaps */
            display: flex;
            flex-wrap: nowrap;
            padding: 0; /* Remove padding */
            line-height: 0; /* Ajuda a remover micro-gaps verticais */
        }

        /* Estilos para as Imagens (A Distribuição) */
        .galeria-responsiva img {
            /* Flexbox: Divide o 100vw em 4 partes iguais (25% cada) */
            flex: 1 1 0%; 
            width: 25%; /* Confirma a largura de 25% */
            height: auto; /* Mantém a responsividade vertical */
            display: block; /* Remove o espaçamento extra da imagem como elemento inline */
        }


        @media screen and (max-width: 768px) {

    .galeria-responsiva {
        /* Desfaz o full-width bleed para evitar problemas em mobile: */
        width: 100%; /* Volta a 100% da largura do contêiner pai, não da tela */
        margin-left: 0;
        margin-right: 0; 

        /* Regras para Empilhar (que você já tinha) */
        flex-direction: column; 
        
        /* Para centralizar e ter o gap que você pediu:
        - Os itens (imagens) são centralizados dentro do contêiner.
        */
        align-items: center; 
    }

    .etapa-titulo {
    /* Estilização para o background colorido */
    padding: 4rem;
   
}

    .galeria-responsiva img {
        /* Reduz o tamanho e adiciona o gap */
        width: 90%; /* Deixa a imagem um pouco menor que o contêiner (o 10% restante é o 'gap') */
        height: auto; 
        border-radius: 5px; /* Radius */
        margin-bottom: 10px; /* Cria um pequeno gap entre as imagens */
    }
}


/*
 *************************************************
 * SEÇÃO DE ETAPAS SEQUENCIAIS - COMPLETA *
 *************************************************
 */

/* --------------------------------------
   ESTRUTURA GRID E ALINHAMENTO GERAL
   -------------------------------------- */
.etapa {
    display: grid;
    /* 3 COLUNAS: Título (1.5fr) | Seta (auto - fixa) | Conteúdo (4fr) */
    grid-template-columns: 2.5fr auto 4fr; 
    gap: 1.5rem; 
    padding: 1.5rem 0; 
    border-bottom: 1px solid #eee; /* Separador sutil entre os itens */
    align-items: center; /* Alinha o conteúdo verticalmente ao centro da linha */
}

/* Remove o separador da última etapa para melhor visualização */
.etapas-sequenciais .etapa:last-child {
    border-bottom: none;
}

/* --------------------------------------
   COLUNA 1: TÍTULO DESTAQUE
   -------------------------------------- */
.etapa-titulo {
    /* Estilização para o background colorido */
    padding: 2rem;
    border-radius: 6px;
    color: #fff; /* Cor do texto no bloco colorido */
    text-align: right; /* Alinha o texto à direita, criando espaço antes da seta */
}

.etapa-titulo h4 {
    margin: 0;
    font-size: 1.15rem;
    padding:1.5%;
}

/* CORES DE BACKGROUND (Baseadas na sua paleta original) */
.etapa-cor-1 { background-color: #084BA0; } /* Marrom Claro */
.etapa-cor-2 { background-color: #084BA0; } /* Cinza Neutro */
.etapa-cor-3 { background-color: #084BA0; } /* Marrom Escuro */
.etapa-cor-4 { background-color: #084BA0; } /* Cinza Escuro */
.etapa-cor-5 { background-color: #084BA0; } /* Marrom Médio */


/* --------------------------------------
   COLUNA 2: SETA INDICADORA
   -------------------------------------- */
.seta-indicadora {
    display: flex; 
    align-items: center;
    justify-content: center;
    color: #084BA0; /* Cor da seta (Marrom Claro) */
}
.seta-indicadora svg {
    width: 20px; 
    height: 20px;
}



/* --------------------------------------
   COLUNA 3: CONTEÚDO
   -------------------------------------- */
.etapa-conteudo p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-gray);
}


/* --------------------------------------
   RESPONSIVIDADE (Mobile)
   -------------------------------------- */
@media (max-width: 768px) {
    .etapa {
        /* Altera para layout de coluna única */
        grid-template-columns: 1fr; 
        gap: 0.5rem; 
        padding: 1rem 0;
    }
    
    /* Oculta a seta no mobile */
    .seta-indicadora {
        display: none; 
    }

    /* Ajusta o alinhamento do título no mobile */
    .etapa-titulo {
        text-align: left; /* Título volta a alinhar à esquerda em telas pequenas */
        padding: 0.5rem 0; /* Remove o padding lateral extra que não é necessário no mobile */
    }
    
    /* Mantém o padding inferior da etapa no mobile */
    .etapa-titulo h4 {
        margin-bottom: 0.5rem; 
    }
}

        /*
        *************************************************
        * SEÇÃO GALERIA (SLIDER E DETALHES) *
        *************************************************
        */
        .gallery-section {
            background-color: #f3f4f6;
        }
        
        .gallery-layout {
            display: flex;
            flex-direction: column; /* Stack on mobile */
            gap: 3rem;
            align-items: flex-start;
        }

        @media (min-width: 1024px) { /* lg: 50%/50% split */
            .gallery-layout {
                flex-direction: row;
                gap: 4rem;
            }
        }

        .image-viewer-container {
            width: 100%;
        }
        @media (min-width: 1024px) {
            .image-viewer-container {
                width: 50%; /* 50% of the container */
            }
        }

        .main-image-wrapper {
            margin-bottom: 1rem;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .main-image-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            min-height: 250px;
            object-fit: cover;
            transition: opacity 0.3s ease-in-out;
        }

        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }

        .thumbnail-grid img {
            width: 100%;
            aspect-ratio: 4/3; /* Proportional thumbs */
            object-fit: cover;
            border-radius: 0.5rem;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.3s, border 0.3s;
            border: 2px solid transparent;
        }

        .thumbnail-grid img.active,
        .thumbnail-grid img:hover {
            opacity: 1;
            border-color: var(--primary-color);
        }

        /* Elegant UL/Details */
        .property-details-list {
            width: 100%;
            background-color: #fff;
            padding: 2rem;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        @media (min-width: 1024px) {
            .property-details-list {
                width: 50%;
                padding: 3rem;
            }
        }

        .property-details-list h4 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            border-bottom: 2px solid var(--bg-light);
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .property-details-list ul {
            list-style: none;
            padding: 0;
            margin-bottom: 2rem;
        }

        .property-details-list ul li {
            padding: 0.75rem 0;
            color: var(--dark-gray);
            display: flex;
            align-items: center;
            border-bottom: 1px dashed #e0e0e0;
            font-size: 1rem;
        }
        .property-details-list ul li:last-child {
            border-bottom: none;
        }
        .property-details-list ul li svg {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.75rem;
            color: var(--primary-color);
            flex-shrink: 0;
        } 
       

        /*
        *************************************************
        * SEÇÃO CTA *
        *************************************************
        */
        .cta-section {
            background-color: var(--primary-color);
            padding-top: 4rem;
            padding-bottom: 4rem;
            box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .cta-section h3 {
            font-size: 2rem; /* text-3xl */
            font-weight: 800;
            color: #fff;
            margin-bottom: 1rem;
        }
        .cta-section p {
            color: #c7d2fe; /* Indigo-200 */
            margin-bottom: 2rem;
            font-size: 1.125rem; /* text-lg */
        }
        @media (min-width: 640px) { /* sm: */
            .cta-section h3 {
                font-size: 2.25rem; /* sm:text-4xl */
            }
        }

        .cta-button-lg {
            display: block;
            text-align: center;
            margin:auto;
            max-width:700px; 
            background-color: #fff;
            color: var(--primary-color);
            font-weight: 700;
            padding: 0.75rem 2rem;
            border-radius: 9999px; /* rounded-full */
            font-size: 1.125rem; /* text-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            text-decoration: none;
            transition: background-color 300ms, transform 300ms;
        }
        .cta-button-lg:hover {
            background-color: #eef2ff; /* Indigo-50 */
            transform: scale(1.05);
        }

        /*
        *************************************************
        * RODAPÉ *
        *************************************************
        */
        footer {
            background-color: #333; /* Gray-800 */
            color: #fff;
            padding-top: 2rem;
            padding-bottom: 2rem;
            text-align: center;
            font-size: 0.875rem; /* text-sm */
        }
        footer p {
            margin-top: 0.5rem;
            color: #9ca3af; /* Gray-400 */
        }