/* RESET ESSENCIAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CONFIGURAÇÃO DO FUNDO */
body {
    background-color: #4c5c4c; 
    min-height: 100vh;         
    font-family: sans-serif; /* Fonte padrão limpa */
}

/* CONTAINER DO LOGO E DO SUBMENU REUNIDOS */
.logo-menu-wrapper {
    position: relative; /* Essencial para o submenu flutuar exatamente abaixo dele */
    display: inline-block;
}

/* ÁREA DE CLIQUE DO LOGO */
.logo-click-area {
    cursor: pointer;    /* Transforma a seta do mouse na mãozinha de link */
    display: block;
}

/* ESCONDE A CAIXINHA DE SELEÇÃO DO NAVEGADOR */
.gatilho-checkbox {
    display: none;
}

/* ESTILIZAÇÃO DO SUBMENU (ESCONDIDO POR PADRÃO) */
.submenu {
    position: absolute;
    top: 110px;               /* Posiciona a caixa logo abaixo dos 100px de altura do logo */
    left: 0;
    background-color: #f4f4ec; /* Fundo na cor bege oficial */
    border: 1px solid #4c5c4c; /* Borda fina na cor verde oficial */
    border-radius: 4px;        /* Cantos sutilmente arredondados combinando com o botão */
    list-style: none;          /* Remove as bolinhas de lista */
    padding: 15px 0;
    min-width: 200px;          /* Largura mínima da caixinha suspensa */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* Sombra suave profissional */
    
    /* Estado inicial: invisível e recolhido */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease; /* Animação suave de descida e surgimento */
    z-index: 99;               /* Garante que fique acima da imagem do meio */
}

/* LINKS DE DENTRO DO SUBMENU */
.submenu li a {
    display: block;
    padding: 10px 25px;
    color: #4c5c4c;            /* Texto na cor verde oficial */
    text-decoration: none;     /* Remove sublinhado */
    font-size: 1rem;
    font-weight: 700;          /* Negrito marcante igual ao manifesto */
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
}

/* EFEITO AO PASSAR O MOUSE NOS LINKS DO SUBMENU */
.submenu li a:hover {
    background-color: rgba(76, 92, 76, 0.1); /* Destaca a linha com um verde bem clarinho */
}

/* 🪄 A MÁGICA DO CLIQUE SEM JAVASCRIPT 🪄 */
/* Quando a caixinha invisível for checada, exibe o submenu imediatamente */
.gatilho-checkbox:checked ~ .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* O menu desliza suavemente para a posição final */
}


/* ESTILIZAÇÃO DO MENU SUPERIOR */
.navbar-topo {
    width: 100%;
    padding: 30px 6% 10px 6%; /* Mantém o mesmo recuo lateral de 6% idêntico às seções de baixo */
    display: flex;
    justify-content: center;   /* Centraliza o bloco na horizontal */
}

/* CONTAINER INTERNO QUE ALINHA COM A IMAGEM */
.navbar-container {
    width: 100%;
    max-width: 1200px;         /* Limite máximo rígido idêntico ao da imagem e da frase */
    display: flex;
    justify-content: space-between; /* Cola o logo na esquerda extrema e o texto na direita extrema */
    align-items: center;       /* Alinha verticalmente pelo centro */
}

/* TAMANHO DO LOGO */
.logo-img {
    height: 120px;                 /* Limita a altura do logo para não quebrar a barra */
    width: auto;                  /* Mantém a proporção correta da largura */
    display: block;
}

/* TEXTO MANIFESTO DO TOPO */
.texto-manifesto p {
    color: #f4f4ec;               /* Sua cor bege oficial */
    font-size: 1.5rem;           /* Tamanho de leitura confortável e discreto */
    font-weight: 700;             /* Estilo de letra em negrito marcante */
    max-width: 750px;             /* Limita a largura para o texto quebrar em linhas harmoniosas */
    line-height: 1.4;             /* Espaçamento confortável entre as linhas do texto */
    text-align: right;            /* Alinha as linhas do texto à direita */
}

/* ADAPTAÇÃO PARA CELULAR (MENU) */
@media (max-width: 768px) {
    /* Alvo corrigido para o container interno */
    .navbar-container {
        flex-direction: column;   /* Empilha o logo acima e o texto abaixo */
        gap: 20px;                /* Cria um espaço de segurança entre eles */
        align-items: center;       /* Centraliza o logo e o bloco de texto na tela */
    }
    
    .texto-manifesto p {
        text-align: center;       /* Força o texto a ficar centralizado no celular */
        font-size: 1.2rem;        /* Reduz levemente para não quebrar muitas linhas em telas pequenas */
    }
}

/* SEÇÃO DA IMAGEM PRINCIPAL */
.conteudo-principal {
    width: 100%;
    padding: 20px 6% 60px 6%; 
    display: flex;
    justify-content: center;   
    align-items: center;
}

.imagem-destaque-container {
    width: 100%;
    max-width: 671px;          /* Mantém a largura máxima solicitada */
    height: auto;              /* Deixa a altura livre para o corte geométrico funcionar */
    margin-top: 20px;          /* Mantém o espaçamento superior de 0.5cm */
    margin-bottom: 20px;       /* Mantém o espaçamento inferior de 0.5cm */
    
    /* 👇 COLOQUE A LINHA DO EFEITO DEGRAU ABAIXO 👇 */
    clip-path: polygon(0% 10%, 50% 0%, 50% 8%, 100% 0%, 100% 90%, 50% 100%, 50% 92%, 0% 100%);
}

.img-modelo {
    width: 100%;               
    height: 100%;              /* Força a imagem a preencher a altura de 359px */
    display: block;
    object-fit: cover;         /* Recorta a imagem suavemente sem distorcer */
}

/* ADAPTAÇÃO PARA CELULAR (IMAGEM) */
@media (max-width: 768px) {
    .imagem-destaque-container {
        height: auto;          /* Libera a altura rígida no celular para escalar proporcionalmente */
        aspect-ratio: 671 / 359; /* Preserva as proporções exatas do design no mobile */
    }
}

/* SEÇÃO DA FRASE + BOTÃO (ALINHADOS LADO A LADO) */
.secao-frase {
    width: 100%;
    padding: 20px 6% 20px 6%; /* Alinhamento horizontal com a imagem */
    display: flex;
    justify-content: center;   /* Centraliza o bloco na tela */
}

.frase-container {
    width: 100%;
    max-width: 1200px;         /* Limite idêntico ao do menu superior */
    display: flex;
    justify-content: space-between; /* Empurra o texto para a esquerda e o botão para a direita */
    align-items: center;       /* Alinha verticalmente ambos pelo meio */
    gap: 40px;                 /* Espaço mínimo de segurança entre eles */
}

/* TEXTO CONCEITO TOTALMENTE EM NEGRITO */
.frase-negrito {
    color: #f4f4ec;            /* Sua cor bege oficial */
    font-size: 1.5rem;         /* Unificado para 1.5rem para combinar com o peso do topo */
    font-weight: 700;          /* Aplica o peso 700 em toda a frase */
    line-height: 1.5;          
    letter-spacing: 0.5px;     
    text-align: left;          
    max-width: 650px;          /* Mantém a quebra de linha elegante antes do botão */
}

/* BOTÃO COM MOLDURA (ESTILO GHOST) */
.btn-moldura {
    display: inline-block;
    color: #f4f4ec;               /* Texto na cor bege oficial */
    text-decoration: none;        /* Remove o sublinhado padrão de links */
    font-size: 0.85rem;           /* Tamanho discreto e elegante */
    font-weight: 400;
    letter-spacing: 2px;          /* Espaçamento entre as letras para visual premium */
    
    /* Criação da Moldura */
    border: 1px solid #f4f4ec;    /* Moldura fina de 1px na cor bege oficial */
    padding: 14px 55px;           /* Espaçamento interno (altura x largura) */

    border-radius: 5px;           /* Deixa as pontas sutilmente arredondadas e elegantes */    

    transition: all 0.3s ease;    /* Transição suave para o efeito de passar o mouse */
    white-space: nowrap;          /* Impede que o texto "SAIBA MAIS" quebre em duas linhas */
}

/* EFEITO AO PASSAR O MOUSE */
.btn-moldura:hover {
    background-color: #f4f4ec;    /* Preenche o fundo com bege */
    color: #4c5c4c;               /* Inverte o texto para a cor verde do site */
}

/* ADAPTAÇÃO PARA CELULAR (FRASE E BOTÃO) */
@media (max-width: 768px) {
    .frase-container {
        flex-direction: column;   /* Empilha o texto em cima e o botão embaixo no celular */
        align-items: flex-start;  /* Mantém ambos alinhados na esquerda mesmo no celular */
        gap: 25px;
    }
    .frase-negrito {
        font-size: 1.2rem;        /* Ajuste sutil de leitura para telas pequenas */
        line-height: 1.4;
    }
    .secao-frase {
        padding: 10px 6% 50px 6%;
    }
}

/* ESTILIZAÇÃO DO RODAPÉ */
.rodape-principal {
    width: 100%;
    background-color: #4c5c4c;     /* Mesma cor de fundo do site */
    padding: 0px 6% 60px 6%;     /* Margens laterais idênticas às seções superiores */
    display: flex;
    justify-content: center;
}

/* CONTAINER QUE LIMITA A LARGURA E CRIA O TRAÇO */
.rodape-container {
    width: 100%;
    max-width: 1200px;             /* Trava no mesmo alinhamento do menu e da frase */
    border-top: 1px solid #f4f4ec; /* O traço divisório na cor bege oficial */
    padding-top: 40px;             /* Espaço entre o traço e o conteúdo das colunas */
    display: flex;
    justify-content: space-between;/* Afasta as 3 colunas (Esquerda, Centro, Direita) */
    align-items: flex-start;       /* Alinha as colunas pelo topo */
    gap: 30px;
}

/* REGRAS GERAIS PARA AS COLUNAS */
.rodape-coluna {
    flex: 1;                       /* Divide o espaço igualmente entre as três */
    color: #f4f4ec;                /* Todos os textos na cor bege oficial */
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

/* AJUSTES ESPECÍFICOS DE ALINHAMENTO */
.rodape-coluna.esquerda {
    text-align: left;              /* Textos colados na esquerda */
}

.rodape-coluna.centro {
    display: flex;
    justify-content: center;       /* Centraliza a logo no meio da coluna central */
}

.rodape-coluna.direita {
    text-align: right;             /* Textos e ícones colados na direita */
    display: flex;
    flex-direction: column;
    align-items: flex-end;         /* Alinha os blocos internos à direita */
}

/* ESTILO DOS TÍTULOS (ENTRE EM CONTATO / SIGA A GENTE) */
.titulo-coluna {
    font-weight: 700;              /* Negrito marcante */
    margin-bottom: 15px;           /* Espaço antes de começar os dados abaixo dele */
}

/* ESPAÇAMENTOS DO TEXTO DE CONTATO */
.espaco-telefone {
    margin-top: 15px;              /* Separa o bloco do endereço dos números */
}

.espaco-email {
    margin-top: 15px;              /* Separa o bloco dos números do e-mail */
}

/* LOGO DO RODAPÉ (CRESCE ACOMPANHANDO A ALTURA DO TEXTO DA ESQUERDA) */
.logo-rodape {
    height: 100%;               /* Força o container da imagem a usar toda a altura disponível da seção */
    max-height: 180px;          /* Uma trava de segurança para não estourar caso o texto mude muito */
    width: auto;                /* Mantém a proporção correta da largura sem achatar o logo */
    display: block;
    object-fit: contain;        /* Garante que o desenho do logo fique inteiro e nítido dentro do espaço */
}


/* ÁREA E ÍCONES DAS REDES SOCIAIS */
.icones-redes {
    display: flex;
    gap: 15px;                     /* Espaço entre o ícone do Facebook e do Instagram */
    margin-top: 10px;
}

.svg-icone {
    width: 26px;                   /* Tamanho elegante para os ícones */
    height: 26px;
    fill: #f4f4ec;                 /* Pinta os ícones inteiramente na sua cor bege oficial */
    transition: opacity 0.3s ease;
}

.svg-icone:hover {
    opacity: 0.7;                  /* Efeito sutil ao passar o mouse */
}

/* ADAPTAÇÃO PARA CELULAR (EMPILHAMENTO VERTICAL) */
@media (max-width: 768px) {
    .rodape-container {
        flex-direction: column;    /* Transforma as colunas em linhas uma abaixo da outra */
        align-items: center;       /* Centraliza tudo no celular */
        text-align: center;
        gap: 40px;
    }
    
    .rodape-coluna.esquerda,
    .rodape-coluna.direita {
        text-align: center;        /* Centraliza os textos no celular */
        align-items: center;
    }
}







/* ==========================================
   7. CONFIGURAÇÕES DA PÁGINA SOBRE SEPARADA
   ========================================== */

/* ==========================================
   7. PÁGINA SOBRE.HTML (VERSÃO LIMPA)
   ========================================== */

/* Força o fundo a ser bege e limpa margens apenas nesta página */
.pagina-sobre {
    background-color: #f4f4ec; /* Fundo Bege Claro */
    min-height: 100vh;
    font-family: sans-serif;
}

/* Container principal da seção */
.secao-titulo-sobre {
    width: 100%;
    padding: 60px 6% 20px 6%; /* Mantém rigorosamente a margem lateral de 6% da index */
    display: flex;
    justify-content: center;
}

/* Alinha o título e a linha horizontal lado a lado */
.sobre-header-container {
    width: 100%;
    max-width: 1200px;         /* Mantém a trava de largura padrão de 1200px */
    display: flex;
    align-items: center;       /* Alinha o meio da letra com o meio do traço */
    gap: 30px;                 /* Espaço de 30px entre a palavra e o início do traço */
}

/* O TÍTULO EM CAIXA ALTA */
.titulo-sobre {
    color: #4c5c4c;            /* Sua cor verde oficial */
    font-size: 1.6rem;           /* Tamanho imponente e limpo */
    font-weight: 100;          /* Negrito marcante */
    letter-spacing: 8px;       /* Espaçamento sutil entre as letras */
    white-space: nowrap;       /* Impede que o título quebre em duas linhas */
}

/* O TRAÇO DO LADO DIREITO */
.linha-decorativa-sobre {
    flex: 1;                   /* Faz o traço se esticar até preencher todo o resto da tela */
    height: 3px;               /* Espessura fina e elegante de 1px */
    background-color: #4c5c4c; /* Cor verde oficial idêntica ao texto */
}

/* Ajuste sutil para celulares */
@media (max-width: 768px) {
    .secao-titulo-sobre {
        padding: 50px 6% 20px 6%;
    }
    .titulo-sobre {
        font-size: 1.6rem;     /* Reduz um pouco o texto em telas pequenas */
    }
    .sobre-header-container {
        gap: 15px;             /* Diminui o vão para dar mais espaço para a linha no celular */
    }
}




/* CONTAINER DO CONTEÚDO (LOGO + TEXTO) */
.secao-conteudo-sobre {
    width: 100%;
    padding: 40px 6% 80px 6%; /* Mantém rigorosamente a margem lateral de 6% */
    display: flex;
    justify-content: center;
}

.sobre-conteudo-container {
    width: 100%;
    max-width: 1200px;         /* Mantém a trava padrão de alinhamento */
    display: flex;
    justify-content: space-between; /* Afasta o logo para a esquerda e o texto para a direita */
    align-items: flex-start;   /* Alinha ambos pelo topo dos blocos */
    gap: 60px;                 /* Espaço de segurança elegante entre a logo e o texto */
    align-items: center;       /* Centraliza o logo verticalmente em relação à altura do texto */
}

/* BOX DO LOGO (ESQUERDA) */
.sobre-logo-box {
    flex: 0 0 auto;            /* Impede que o container do logo encolha ou deforme */
}

.logo-sobre-img {
    height: 500px;             /* Mantém os mesmos 100px clássicos que você definiu na index */
    width: auto;
    display: block;
}

/* BOX DO TEXTO (DIREITA) */
.sobre-texto-box {
    flex: 1;                   /* Faz o texto ocupar todo o restante do espaço disponível */
    max-width: 800px;          /* Evita linhas excessivamente longas em monitores gigantes */
    padding-right: 75px;       /* Cria o recuo invisível de 2 cm à direita do texto */
    
}

/* ESTILIZAÇÃO DO TEXTO EM VERDE E NEGRITO */
.texto-sobre-manifesto {
    color: #4c5c4c;            /* Sua cor verde oficial invertida para o fundo bege */
    font-size: 1rem;         /* Tamanho idêntico ao manifesto e à frase da index */
    font-weight: 300;          /* Peso em negrito marcante solicitado */
    line-height: 1.5;          /* Espaçamento confortável entre linhas */
    text-align: justify;          /* Alinhamento padrão à esquerda dentro do bloco */

}

/* Cria uma quebra confortável entre os dois parágrafos */
.espaco-paragrafo {
    margin-top: 30px;          /* Afasta o segundo parágrafo do primeiro */

    
}

/* ADAPTAÇÃO PARA CELULARES */
@media (max-width: 768px) {
    .sobre-conteudo-container {
        flex-direction: column;   /* Empilha o logo em cima e o texto embaixo no celular */
        align-items: center;      /* Centraliza ambos na tela do celular */
        gap: 40px;
    }
    
    .texto-sobre-manifesto {
        font-size: 1.2rem;        /* Reduz ligeiramente para melhor leitura em telas pequenas */
        text-align: center;       /* Centraliza o texto no mobile */
    }
}

/* ESTILIZAÇÃO DA LISTA DE FOCOS ✨ */
.lista-focos-sobre {
    list-style: none;             /* Remove as bolinhas pretas automáticas do navegador */
    padding-left: 0;
    margin-top: 15px;             /* Afasta a lista do texto de cima */
    margin-bottom: 15px;          /* Afasta a lista do texto de baixo */
}

.lista-focos-sobre li {
    color: #4c5c4c;               /* Mesma cor verde oficial */
    font-size: 1.5rem;            /* Mesmo tamanho de letra ajustado */
    font-weight: 300;             /* Mantém a letra fina e sofisticada */
    line-height: 1.6;             /* Espaçamento confortável entre cada item */
    text-align: left;             /* Itens de lista ficam melhor alinhados à esquerda */
}

/* RECUO DE 2CM À ESQUERDA PARA O SEGUNDO BLOCO DE TEXTO */
.bloco-recuado-sobre {
    padding-left: 75px;        /* Cria o degrau invisível de 2 cm puxando o texto para a direita */
    width: 100%;
}

/* AJUSTE PARA CELULAR (DESFAZ O RECUO EM TELAS PEQUENAS PARA NÃO ESMAGAR) */
@media (max-width: 768px) {
    .bloco-recuado-sobre {
        padding-left: 0;       /* No celular o texto volta a ocupar a largura normal centralizada */
    }
}





/* ==========================================
   8. SEÇÃO DE VANTAGENS (MOSAICO DE 2 COLUNAS)
   ========================================== */
.secao-vantagens {
    width: 100%;
    padding: 40px 6% 80px 6%; /* Mantém a margem de 6% idêntica ao resto do site */
    display: flex;
    justify-content: center;
}

.vantagens-container {
    width: 100%;
    max-width: 1200px;         /* Trava padrão de alinhamento de 1200px */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;   /* Alinha o topo das duas colunas principais */
    gap: 160px;                 /* Espaço elegante de separação entre a coluna 1 e 2 */
}

/* CONFIGURAÇÃO DAS DUAS COLUNAS PRINCIPAIS */
.coluna-vantagem.texto,
.coluna-vantagem.texto2 {
    flex: 1;                   /* Faz as duas colunas terem exatamente o mesmo tamanho (50% cada) */
    display: flex;
    flex-direction: column;    /* Força os elementos de dentro (texto e foto) a se empilharem */
}

/* ESTILIZAÇÃO DOS TEXTOS */
.titulo-vantagem {
    color: #4c5c4c;            /* Verde oficial */
    font-size: 1.5rem;         
    font-weight: 700;          /* Título marcante */
    margin-bottom: 15px;       
}

.descricao-vantagem {
    color: #4c5c4c;            
    font-size: 1.2rem;         /* Tamanho padrão da página sobre */
    font-weight: 300;          /* Letra fina e sofisticada */
    line-height: 1.5;          
    text-align: justify;       /* Texto retinho nas duas margens */
    margin-bottom: 30px;       /* Cria um espaço confortável antes da imagem de baixo */
}

/* Ajuste específico para a coluna 2 onde a imagem vem ANTES do texto */
.coluna-vantagem.texto2 .img-vantagem {
    margin-bottom: 30px;       /* Cria o espaço após a imagem e antes do título da folha 🌿 */
}

/* ESTILIZAÇÃO DAS IMAGENS */
.img-vantagem {
    width: 100%;               /* Ocupa toda a largura da coluna */
   /* height: 500px;            👇 ALTERADO: Aumentamos de 350px para 500px para dar mais altura */
    object-fit: contain;       /* 👇 ALTERADO: Muda para contain para exibir a imagem INTEIRA sem cortes */
    border-radius: 4px;        /* Mantém os cantos suaves */
    background-color: transparent; /* Garante que o fundo integre perfeitamente com o bege do site */
}

/* ADAPTAÇÃO PARA CELULAR */
@media (max-width: 768px) {
    .vantagens-container {
        flex-direction: column;   /* Empilha a Coluna 2 inteira abaixo da Coluna 1 */
        gap: 50px;                /* Aumenta o espaço de separação entre os blocos no celular */
    }
    
    .descricao-vantagem {
        font-size: 1.2rem;        
        text-align: center;       
        margin-bottom: 20px;
    }
    
    .titulo-vantagem {
        text-align: center;       
    }
    
    .coluna-vantagem.texto2 .img-vantagem {
        margin-bottom: 20px;
    }
    
    .img-vantagem {
        height: 350px;            /* Reduz a altura das fotos no celular para não alongar demais */
    }
}

/* CONTAINER DOS BOTÕES NA COLUNA 2 */
.botoes-vantagens {
    display: flex;
    gap: 20px;                 /* Espaço de separação entre os dois botões */
    margin-top: 25px;          /* Afasta os botões do parágrafo de descrição acima */
    width: 100%;
}

/* BOTÃO VERDE COM MOLDURA PARA O FUNDO BEGE */
.btn-sobre-verde {
    display: inline-block;
    color: #4c5c4c;               /* Texto na cor verde oficial */
    text-decoration: none;        /* Remove o sublinhado de link */
    font-size: 0.85rem;           /* Mesmo tamanho discreto e elegante */
    font-weight: 700;             /* Deixa a escrita do botão marcante */
    letter-spacing: 2px;          /* Espaçamento entre as letras */
    
    /* Moldura Verde Oficial */
    border: 1px solid #4c5c4c;    /* Moldura fina de 1px na cor verde */
    padding: 14px 45px;           /* Largura expandida para afastar o texto das pontas */
    border-radius: 5px;           /* Pontas sutilmente arredondadas combinando com o index */
    
    transition: all 0.3s ease;    /* Transição suave para o efeito hover */
    white-space: nowrap;          /* Impede que o texto quebre em duas linhas */
    text-align: center;
}

/* EFEITO AO PASSAR O MOUSE (INVERTE AS CORES) */
.btn-sobre-verde:hover {
    background-color: #4c5c4c;    /* Preenche o fundo com o verde oficial */
    color: #f4f4ec;               /* Inverte o texto para a cor bege do site */
}

/* ADAPTAÇÃO PARA CELULAR (EMPILHA OS BOTÕES SE A TELA FOR MUITO PEQUENA) */
@media (max-width: 576px) {
    .botoes-vantagens {
        flex-direction: column;   /* Empilha um botão em cima do outro no celular */
        gap: 15px;
    }
    .btn-sobre-verde {
        width: 100%;              /* Faz os botões ocuparem a largura total da tela no mobile */
        padding: 14px 20px;
    }
}



/* ==========================================
   9. EFEITO DE EXPANSÃO DE IMAGEM NO HOVER
   ========================================== */

/* Configuração de transição na imagem padrão para o movimento ser suave */
.img-vantagem {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    z-index: 1;
    cursor: pointer; /* Adiciona a mãozinha para indicar que é clicável */
}

/* 🪄 MÁGICA DO CLIQUE: IMAGEM FLUTUA NO MEIO DA TELA 🪄 */
.img-vantagem.active {
    position: fixed;           /* Tira a imagem do fluxo normal e prende na tela */
    top: 50%;                  /* Posiciona o topo no meio vertical da tela */
    left: 50%;                 /* Posiciona a esquerda no meio horizontal da tela */
    
    /* Centraliza o eixo da foto no meio exato e aumenta o tamanho dela */
    transform: translate(-50%, -50%) scale(1.3); 

    width: auto;               /* Libera a largura original da foto */
    height: auto;              /* Libera a altura original da foto (cancela o quadrado) */
    aspect-ratio: auto;        /* 🔓 IMPORTANTE: Arranca o formato quadrado do mosaico */    

    max-width: 50vw;           /* Garante que ela ocupe no máximo 50% da largura da tela do usuário */
    max-height: 60vh;          /* Garante que ela ocupe no máximo 60% da altura da tela */
    
    object-fit: contain;       /* Mostra a imagem inteira sem nenhum corte */
    border-radius: 6px;        /* Deixa os cantos arredondados mais visíveis no tamanho grande */
    box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.6); /* Sombra pesada para destacar do fundo */
    z-index: 9999;             /* Força a imagem a ficar acima de absolutamente tudo no site */
}





/* ==========================================
   10. PÁGINA PORTIFOLIO.HTML (VERSÃO BRUTA)
   ========================================== */

/* Força o fundo a ser verde e limpa margens apenas nesta página */
.pagina-portifolio {
    background-color: #4c5c4c; /* Fundo Verde Oficial */
    min-height: 100vh;
    font-family: sans-serif;
}

/* Container principal da seção */
.secao-titulo-portifolio {
    width: 100%;
    padding: 60px 6% 20px 6%; /* Mantém rigorosamente a margem lateral de 6% */
    display: flex;
    justify-content: center;
}

/* Alinha o título e a linha horizontal lado a lado */
.portifolio-header-container {
    width: 100%;
    max-width: 1200px;         /* Mantém a trava de largura padrão de 1200px */
    display: flex;
    align-items: center;       /* Alinha o meio da letra com o meio do traço */
    gap: 30px;                 /* Espaço de 30px entre a palavra e o início do traço */
}

/* O TÍTULO EM CAIXA ALTA (BEGE) */
.titulo-portifolio {
    color: #f4f4ec;            /* Sua cor bege oficial */
    font-size: 1.6rem;         /* Tamanho idêntico ao da página sobre */
    font-weight: 100;          /* Letra bem fina e elegante */
    letter-spacing: 6px;       /* Afastamento de 6px entre as letras */
    white-space: nowrap;       /* Impede que o título quebre em duas linhas */
}

/* O TRAÇO DO LADO DIREITO (BEGE) */
.linha-decorativa-portifolio {
    flex: 1;                   /* Faz o traço se esticar até preencher todo o resto da tela */
    height: 3px;               /* Espessura encorpada de 3px idêntica à da página sobre */
    background-color: #f4f4ec; /* Cor bege oficial idêntica ao texto */
}

/* Ajuste sutil para celulares */
@media (max-width: 768px) {
    .secao-titulo-portifolio {
        padding: 50px 6% 20px 6%;
    }
    .titulo-portifolio {
        font-size: 1.4rem;     
    }
    .portifolio-header-container {
        gap: 15px;             
    }
}




/* ==========================================
   11. SEÇÃO DE PROJETO (TEXTO + MOSAICO 2X2)
   ========================================== */
.secao-projeto {
    width: 100%;
    padding: 40px 6% 60px 6%; /* Mantém rigorosamente a margem lateral de 6% */
    display: flex;
    justify-content: center;
}

.projeto-container {
    width: 100%;
    max-width: 1200px;         /* Trava padrão de alinhamento de 1200px */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;   /* Alinha o topo do texto com o topo do mosaico */
    gap: 50px;                 /* 👇 ALTERADO: Reduzido de 100px para 50px para dar espaço para as colunas 👇 */
    justify-content: flex-start; /* Puxa a coluna do texto e o mosaico totalmente para a esquerda */
}

/* COLUNA 1: CONFIGURAÇÃO DOS TEXTOS (AGORA EM 30%) */
.projeto-coluna-texto {
    /* 👇 ALTERADO: Mudamos de 40% para 30% para encolher bem a coluna do texto 👇 */
    flex: 0 0 25%;                   
    color: #f4f4ec;            /* Todos os textos na cor bege oficial */

}

.projeto-titulo-obra {
    font-size: 2.5rem;
    font-weight: 700;          /* Título marcante */
    margin-bottom: 5px;
}

.projeto-localizacao {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 35px;       /* Espaço confortável antes do primeiro parágrafo */
    opacity: 0.8;
}

.projeto-descricao {
    font-size: 1.2rem;         /* Mantém o padrão de tamanho do manifesto */
    font-weight: 300;          /* Letra fina e sofisticada solicitada */
    line-height: 1.5;
    text-align: center;       /* Texto retinho nas duas margens */
}

.espaco-paragrafo-projeto {
    margin-top: 25px;          /* Afasta os parágrafos subsequentes */
}

/* COLUNA 2: CONFIGURAÇÃO DO MOSAICO (AGORA EM 70%) */
.projeto-coluna-mosaico {
    /* 👇 ALTERADO: Mudamos de flex: 1 para flex: 0 0 70% para forçar o mosaico a crescer 👇 */
    flex: 0 0 50%;                   
    width: 100%;
    margin-left: 60px;

}

/* CRIAÇÃO DA GRADE 2X2 DE IMAGENS */
.grid-mosaico-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Divide perfeitamente em 2 colunas */
    grid-template-rows: repeat(2, 1fr);    /* Divide perfeitamente em 2 linhas */
    gap: 15px;                             /* Pequeno espaçamento elegante entre as fotos */
    width: 100%;
}

/* Reaproveita a classe .img-vantagem garantindo a altura proporcional e o efeito hover flutuante */
.grid-mosaico-2x2 .img-vantagem {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;       /* Força cada foto a ser um quadrado perfeito para o mosaico ficar simétrico */
    object-fit: cover;         
    border-radius: 4px;
}

/* ADAPTAÇÃO PARA CELULAR (RESPONSIVIDADE AUTOMÁTICA) */
@media (max-width: 768px) {
    .projeto-container {
        flex-direction: column;   /* Empilha o mosaico de imagens abaixo do texto no celular */
        gap: 40px;
    }
    
    /* 👇 ADICIONADO: Remove a trava de largura no celular para o site não quebrar em telas pequenas 👇 */
    .projeto-coluna-texto,
    .projeto-coluna-mosaico {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .projeto-titulo-obra,
    .projeto-localizacao {
        text-align: center;       /* Centraliza o cabeçalho do projeto no celular */
    }
    
    .projeto-descricao {
        font-size: 1.2rem;        /* Reduz sutilmente no mobile para melhor leitura */
        text-align: center;       /* Centraliza os textos no celular */
    }
    
    .grid-mosaico-2x2 {
        gap: 10px;                /* Diminui o vão das fotos em telas pequenas */
    }
}




/* ==========================================
   12. SEÇÃO DA OBRA 002 (TEXTO + 3 IMAGENS EMPILHADAS)
   ========================================== */

/* Cria um respiro confortável entre o fim da Obra 001 e o início da Obra 002 */
.obra-dois {
    border-top: 1px solid rgba(244, 244, 236, 0.1); /* Linha fina e muito discreta separando as obras */
    padding-top: 80px;
}

/* CONTAINER DAS 3 IMAGENS UMA EM CIMA DA OUTRA */
.coluna-imagens-verticais {
    display: flex;
    flex-direction: column;    /* Força o empilhamento estrito vertical */
    gap: 15px;                 /* Espaçamento elegante entre uma foto e outra */
    max-width: 250px;          /* Limita rigidamente a largura para as fotos ficarem pequenas */
    width: 100%;
}

/* Garante que as imagens verticais fiquem proporcionais e simétricas */
.coluna-imagens-verticais .img-vantagem {
    width: 100%;
    height: auto;              /* Deixa a altura livre para respeitar a proporção real da foto */
    aspect-ratio: 3 / 2;       /* Formato retangular clássico para fotos de arquitetura empilhadas */
    object-fit: cover;         
    border-radius: 4px;
}

/* EFETUA O RECUO APENAS NA SEGUNDA IMAGEM */
.coluna-imagens-verticais .img-vantagem:nth-child(2) {
    margin-left: 120px;         /* Empurra a segunda foto um pouco para a direita */
}

/* EFETUA O RECUO APENAS NA TERCEIRA IMAGEM */
.coluna-imagens-verticais .img-vantagem:nth-child(3) {
    margin-left: 240px;         /* Empurra a terceira foto ainda mais, criando o efeito cascata */
}

/* REMOVE OS RECUOS NO CELULAR PARA AS FOTOS NÃO FICAREM TORTAS NA TELA PEQUENA */
@media (max-width: 768px) {
    .coluna-imagens-verticais .img-vantagem:nth-child(2),
    .coluna-imagens-verticais .img-vantagem:nth-child(3) {
        margin-left: 0;        /* No celular, elas voltam a ficar perfeitamente alinhadas */
    }
}


/* ADAPTAÇÃO PARA CELULAR DA OBRA 002 */
@media (max-width: 768px) {
    .coluna-imagens-verticais {
        gap: 15px;             /* Reduz sutilmente o vão no mobile */
    }
}



/* ==========================================
   13. SEÇÃO PRÓXIMOS PROJETOS (2 COLUNAS)
   ========================================== */
.secao-proximos-projetos {
    width: 100%;
    padding: 40px 6% 80px 6%; /* Mantém a margem lateral padrão de 6% */
    display: flex;
    justify-content: center;
}

.proximos-container {
    width: 100%;
    max-width: 1200px;         /* Trava rígida de 1200px do site */
    display: flex;
    justify-content: space-between;
    gap: 50px;                 /* Mantém o mesmo gap de 50px usado nas obras acima */
}

/* CADA UMA DAS COLUNAS DOS NOVOS PROJETOS */
.coluna-proximo-projeto {
    flex: 1;                   /* Divide o espaço igualmente em duas metades (50% cada) */
    display: flex;
    flex-direction: column;    /* Empilha a foto em cima e o texto embaixo */
}

/* Configuração de proporção das imagens retangulares */
.coluna-proximo-projeto .img-vantagem {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;       /* Formato retangular elegante */
    object-fit: cover;
    border-radius: 4px;
}

/* ESTILIZAÇÃO DOS TÍTULOS (BEGE E FINOS) */
.titulo-proximo {
    color: #f4f4ec;            /* Sua cor bege oficial */
    font-size: 1.5rem;         /* Mesmo tamanho padrão adotado na página */
    font-weight: 300;          /* Letra fina e elegante */
    margin-top: 15px;          /* Afasta o título para baixo da imagem */
    letter-spacing: 1px;
}

/* 🎯 ALINHAMENTOS OPOSICIONAIS SOLICITADOS */
.coluna-proximo-projeto.esquerda .titulo-proximo {
    text-align: left;          /* Força "Amora PT" a colar rigidamente na esquerda */
}

.coluna-proximo-projeto.direita .titulo-proximo {
    text-align: right;         /* Força "Palmela PT" a colar rigidamente na direita */
}

/* ADAPTAÇÃO PARA CELULAR */
@media (max-width: 768px) {
    .proximos-container {
        flex-direction: column;   /* Empilha os dois projetos no celular */
        gap: 40px;
    }
    
    .coluna-proximo-projeto.esquerda .titulo-proximo,
    .coluna-proximo-projeto.direita .titulo-proximo {
        text-align: center;       /* No celular ambos ficam centralizados para melhor leitura */
    }
}


/* ==========================================
   14. SEÇÃO PROJETO CENTRALIZADO (SOBREDA PT)
   ========================================== */
.secao-projeto-central {
    width: 100%;
    padding: 0px 6% 80px 6%; /* Padding superior zerado para aproximar da linha de cima */
    display: flex;
    justify-content: center;   /* Centraliza o bloco inteiro na tela */
}

.projeto-central-container {
    width: 100%;
    max-width: 1200px;         /* Mantém a trava rígida padrão do site */
    display: flex;
    justify-content: center;   /* Centraliza o conteúdo interno */
}

/* COLUNA CENTRAL DO PROJETO */
.coluna-projeto-central {
    flex: 0 0 50%;             /* Ocupa exatamente metade da largura (mesmo tamanho das fotos de cima) */
    display: flex;
    flex-direction: column;    /* Empilha a foto em cima e o texto embaixo */
    align-items: center;       /* Garante a centralização dos elementos internos */
}

/* Configuração de proporção da imagem central */
.coluna-projeto-central .img-vantagem {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;       /* Mantém o mesmo formato retangular elegante */
    object-fit: cover;
    border-radius: 4px;
}

/* ESTILIZAÇÃO DO TÍTULO CENTRALIZADO (BEGE E FINO) */
.titulo-projeto-central {
    color: #f4f4ec;            /* Sua cor bege oficial */
    font-size: 1.5rem;         /* Mesmo tamanho padrão adotado na página */
    font-weight: 300;          /* Letra fina e elegante */
    margin-top: 15px;          /* Afasta o título para baixo da imagem solicitado */
    letter-spacing: 1px;
    text-align: center;        /* Centraliza o texto "Sobreda PT" rigidamente abaixo da foto */
}

/* ADAPTAÇÃO PARA CELULAR */
@media (max-width: 768px) {
    .coluna-projeto-central {
        flex: 0 0 100%;        /* No celular ocupa a largura total para não esmagar */
    }
}






/* ==========================================
   15. PÁGINA DEPOIMENTOS.HTML (VERSÃO BASE)
   ========================================== */

/* Força o fundo a ser bege e limpa margens nesta página */
.pagina-depoimentos {
    background-color: #f4f4ec; /* Fundo Bege Claro igual ao da página sobre */
    min-height: 100vh;
    font-family: sans-serif;
}



/* ==========================================
   16. SEÇÃO TEXTO DESTAQUE (DEPOIMENTOS)
   ========================================== */
.secao-texto-depoimentos {
    width: 100%;
    padding: 40px 6% 20px 6%; /* Mantém rigidamente o recuo lateral padrão de 6% */
    display: flex;
    justify-content: center;
}

.depoimentos-texto-container {
    width: 100%;
    max-width: 1200px;         /* Mesma trava horizontal das outras páginas do site */
}

/* ESTILIZAÇÃO DO TÍTULO EM NEGRITO VERDE */
.titulo-destaque-depoimentos {
    color: #4c5c4c;            /* Sua cor verde oficial */
    font-size: 1.5rem;         /* Tamanho grande e potente idêntico ao das outras páginas */
    font-weight: 700;          /* Aplica o peso em negrito solicitado */
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: left;          /* Alinhamento elegante à esquerda */
    max-width: 750px;          /* Limita a largura para o texto quebrar linhas com elegância */
}

/* Ajuste sutil para celulares */
@media (max-width: 768px) {
    .titulo-destaque-depoimentos {
        font-size: 1.2rem;     /* Reduz um pouco em telas pequenas para não quebrar muito */
        text-align: center;    /* Centraliza no mobile seguindo o padrão do seu cabeçalho */
        margin: 0 auto;
    }
}




/* ==========================================
   17. SEÇÃO RELATO DO CLIENTE (2 COLUNAS)
   ========================================== */
.secao-relato-cliente {
    width: 100%;
    padding: 20px 6% 80px 6%; /* Mantém a margem lateral padrão de 6% */
    display: flex;
    justify-content: center;
}

.relato-container {
    width: 100%;
    max-width: 1200px;         /* Trava de 1200px alinhada com todo o site */
    display: flex;
    justify-content: flex-start; /* Alinhamento do Plano A: empurrado para a esquerda */
    align-items: center;       /* Centraliza o texto verticalmente ao meio da imagem */
}

/* COLUNA 1: CONFIGURAÇÃO DO TEXTO DO CLIENTE */
.coluna-relato-texto {
    flex: 0 0 30%;             /* Trava rigidamente o texto em 30% da tela igual ao portfólio */
}

.texto-depoimento-cliente {
    color: #4c5c4c;            /* Sua cor verde oficial */
    font-size: 1.5rem;         /* Tamanho padrão do manifesto e das vantagens */
    font-weight: 300;          /* Letra fina, leve e sofisticada */
    line-height: 1.5;
    text-align: justify;       /* Texto perfeitamente reto nas duas margens */
}

/* COLUNA 2: CONFIGURAÇÃO DA IMAGEM DO DEPOIMENTO */
.coluna-relato-imagem {
    flex: 0 0 40%;             /* Trava a imagem em 40% da tela igual ao portfólio */
    width: 100%;
    margin-left: 50px;         /* Mantém o afastamento elegante de 50px das colunas */
}

/* Reaproveita a classe .img-vantagem garantindo as proporções e o zoom pop-up de 1.3 */
.coluna-relato-imagem .img-vantagem {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;       /* Formato retangular clássico para fotos de arquitetura */
    object-fit: cover;
    border-radius: 4px;
}

/* ADAPTAÇÃO PARA CELULAR */
@media (max-width: 768px) {
    .relato-container {
        flex-direction: column;   /* Empilha a imagem abaixo do texto no celular */
        gap: 30px;
    }
    
    .coluna-relato-texto,
    .coluna-relato-imagem {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;        /* Zera o afastamento lateral no celular */
    }
    
    .texto-depoimento-cliente {
        font-size: 1.2rem;        
        text-align: center;       /* Centraliza o relato na tela do smartphone */
    }
}

/* ==========================================
   18. ALINHAMENTO CENTRALIZADO & BOTÃO VERDE (DEPOIMENTOS)
   ========================================== */

/* Força os elementos internos da coluna de texto a se empilharem centralizados */
.coluna-relato-texto {
    display: flex;
    flex-direction: column;
    align-items: center;       /* Centraliza o botão horizontalmente abaixo do texto */
}

/* 👇 ALTERADO: Mudamos de text-align: justify para center 👇 */
.texto-depoimento-cliente {
    color: #4c5c4c;            
    font-size: 1.5rem;         
    font-weight: 300;          
    line-height: 1.5;
    text-align: center;        /* Texto do cliente agora fica perfeitamente centralizado */
}

/* BOTÃO VERDE COM MOLDURA PARA O FUNDO BEGE */
.btn-depoimento-verde {
    display: inline-block;
    color: #4c5c4c;               /* Texto na cor verde oficial */
    text-decoration: none;        /* Remove o sublinhado de link */
    font-size: 0.85rem;           /* Tamanho discreto e sofisticado */
    font-weight: 700;             /* Escrita marcante no botão */
    letter-spacing: 2px;          /* Espaçamento entre as letras */
    margin-top: 30px;             /* Empurra o botão 30px para baixo do texto */
    
    /* Criação da Moldura Verde */
    border: 1px solid #4c5c4c;    /* Moldura fina de 1px em verde */
    padding: 14px 55px;           /* Mesma largura alargada para afastar as letras do 'S' */
    border-radius: 5px;           /* Pontas levemente arredondadas e elegantes */
    
    transition: all 0.3s ease;    /* Transição suave para o efeito hover */
    white-space: nowrap;          /* Impede que o texto quebre em duas linhas */
    text-align: center;
}

/* EFEITO HOVER (INVERTE AS CORES AO PASSAR O MOUSE) */
.btn-depoimento-verde:hover {
    background-color: #4c5c4c;    /* Preenche o fundo com o verde oficial */
    color: #f4f4ec;               /* Inverte a letra para a cor bege do site */
}

/* ADAPTAÇÃO PARA CELULAR (BOTÃO RESPONSIVO) */
@media (max-width: 576px) {
    .btn-depoimento-verde {
        width: 100%;              /* No celular o botão ocupa toda a largura disponível */
        padding: 14px 20px;
    }
}

/* ==========================================
   19. SEÇÃO DE 4 COLUNAS (DEPOIMENTOS)
   ========================================== */
.secao-quatro-colunas {
    width: 100%;
    padding: 40px 6% 80px 6%; /* Mantém rigorosamente as margens de 6% do site */
    display: flex;
    justify-content: center;
}

.quatro-colunas-container {
    width: 100%;
    max-width: 1200px;         /* Mesma trava de 1200px da index, sobre e portfólio */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;   /* Alinha o teto de todas as colunas */
    gap: 30px;                 /* Espaço de ar confortável separando as 4 colunas */
}

/* CONFIGURAÇÃO INDIVIDUAL DE CADA COLUNA (25% DO ESPAÇO) */
.coluna-bloco {
    flex: 1;                   /* Distribui o espaço igualmente em 4 partes perfeitas */
}

.coluna-bloco p {
    color: #4c5c4c;            /* Sua cor verde oficial */
    font-size: 1.1rem;         /* Tamanho ideal para leitura de blocos múltiplos */
    font-weight: 300;          /* Letra fina e sofisticada padrão */
    line-height: 1.6;          
    text-align: justify;       /* Garante que o texto fique reto nas margens ao preencher */
}

/* ADAPTAÇÃO PARA CELULAR (RESPONSIVIDADE COMPLETA) */
@media (max-width: 992px) {
    .quatro-colunas-container {
        grid-template-columns: repeat(2, 1fr); /* Em tablets, divide em 2 colunas e 2 linhas */
        display: grid; 
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .quatro-colunas-container {
        display: flex;
        flex-direction: column;   /* Em celulares, empilha as 4 colunas verticalmente */
        gap: 30px;
        text-align: center;
    }
    .coluna-bloco p {
        text-align: center;       /* Centraliza o texto no mobile */
    }
}

/* ESTILIZAÇÃO DO NOME DO AUTOR EM NEGRITO */
.nome-autor-depoimento {
    font-weight: 700 !important;   /* Força o peso em negrito solicitado */
    margin-top: 15px;              /* Afasta o nome do texto do depoimento acima */
    font-size: 1.1rem;
    color: #4c5c4c;                /* Mantém a cor verde oficial do site */
    text-align: left;              /* Mantém o alinhamento padrão à esquerda */
}

/* Garante que o nome também centralize no celular junto com o texto */
@media (max-width: 576px) {
    .nome-autor-depoimento {
        text-align: center;
    }
}


/* ==========================================
   20. EFEITO CASCATA VERTICAL NOS DEPOIMENTOS (CORRIGIDO)
   ========================================== */

/* Segunda coluna ganha uma margem no topo para descer fisicamente */
.quatro-colunas-container .coluna-bloco:nth-child(2) {
    margin-top: 150px;
    transform: none; /* Limpa o truque antigo */
}

/* Terceira coluna ganha uma margem maior */
.quatro-colunas-container .coluna-bloco:nth-child(3) {
    margin-top: 300px;
    transform: none;
}

/* Quarta coluna ganha a margem máxima, empurrando o chão da seção */
.quatro-colunas-container .coluna-bloco:nth-child(4) {
    margin-top: 450px;
    transform: none;
}

/* REMOVE A MARGEM NO CELULAR PARA NÃO QUEBRAR O LAYOUT */
@media (max-width: 992px) {
    .quatro-colunas-container .coluna-bloco:nth-child(2),
    .quatro-colunas-container .coluna-bloco:nth-child(3),
    .quatro-colunas-container .coluna-bloco:nth-child(4) {
        margin-top: 0; 
    }
}

/* ==========================================================================
   21. PÁGINA DE CONTATO (MM ECO HOUSES)
   ========================================================================== */

/* Container Geral da Seção */
.conteudo-contato {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Tom claro neutro e limpo */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 250px); /* Garante preenchimento visual na tela */
}

/* Caixa central que envolve o texto e o formulário */
.contato-container {
    width: 100%;
    max-width: 600px; /* Largura ideal para leitura e preenchimento */
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra suave moderna */
}

/* Cabeçalho do formulário */
.contato-introducao {
    text-align: center;
    margin-bottom: 30px;
}

.contato-introducao h1 {
    font-size: 2rem;
    color: #2c3e50; /* Tom escuro elegante */
    margin-bottom: 10px;
}

.contato-introducao p {
    color: #7f8c8d; /* Cinza suave para o subtítulo */
    font-size: 1rem;
    line-height: 1.5;
}

/* Organização dos campos do formulário */
.formulario-contato {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaçamento idêntico entre os blocos */
}

/* Bloco que junta o Label e o Input */
.grupo-campo {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre o título do campo e a caixa de texto */
}

.grupo-campo label {
    font-weight: bold;
    font-size: 0.9rem;
    color: #34495e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilização das caixas de entrada e área de texto */
.grupo-campo input,
.grupo-campo textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dcdde1;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    color: #2c3e50;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Impede que o padding quebre a largura */
}

/* Efeito de foco ao clicar no campo (Estilo Eco minimalista) */
.grupo-campo input:focus,
.grupo-campo textarea:focus {
    outline: none;
    border-color: #27ae60; /* Verde eco sugerindo seleção */
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

/* Área de texto específica */
.grupo-campo textarea {
    resize: vertical; /* Permite o usuário esticar apenas para baixo */
}

/* Botão de Enviar (Design Moldura/Sólido Premium) */
.btn-enviar {
    background-color: #2c3e50;
    color: #ffffff;
    border: 2px solid #2c3e50;
    padding: 15px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

/* Efeito Hover no botão */
.btn-enviar:hover {
    background-color: transparent;
    color: #2c3e50;
}

/* Responsividade para telas menores (Celulares) */
@media (max-width: 480px) {
    .contato-container {
        padding: 25px 20px;
    }
    
    .contato-introducao h1 {
        font-size: 1.6rem;
    }
}