/* PAGINA CONTATOS */


/* Container Principal: Define altura mínima para não deixar o footer subir */
.contato-secao-principal {
    margin-top: 80px; 
    min-height: calc(100vh - 100px); 
    min-height: 80vh; 
    display: flex;
    align-items: center;
    padding: 60px 0;
    background-color: #f9f9f9;
}

/* 1. Novo container para limitar a largura e centralizar na tela */
.contato-container-central {
    width: 100%;
    max-width: 1100px; 
    margin: 0 auto;    
    padding: 0 20px;   
}

/* 2. Ajuste na Wrapper para centralizar os itens internamente */
.contato-wrapper {
    display: flex;
    justify-content: center; 
    align-items: flex-start;
    gap: 60px; 
    width: 100%;
}

/* 3. Garante que as colunas tenham tamanhos equilibrados */
.contato-info {
    flex: 1;
}

.contato-form-container {
    flex: 1.2;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
}

/* Estilo do Título */
.titulo-fale {
    font-family: 'Bangers', cursive, sans-serif;
    font-size: 48px;
    font-weight: normal; /* "0" não é um valor válido para font-weight, alterado para normal */
    margin-bottom: 30px;
    color: #1a1a1a;
}

/* Itens de Informação */
.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 18px;
}

.info-item i {
    color: #12E1C3;
    font-size: 24px;
}

.info-item a {
    text-decoration: none; 
    color: #1a1a1a;
}

/* Estilo dos Inputs do Formulário */
input, select, textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    box-sizing: border-box; /* Garante que o padding não faça o input vazar do formulário */
}

.form-row-dupla {
    display: flex;
    gap: 15px;
}

/* Botão Enviar com o Verde da Marca */
#btn-enviar-contato {
    font-family: 'Bangers', cursive, sans-serif;
    width: 100%;
    background-color: #12E1C3;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 30px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

#btn-enviar-contato:hover {
    background-color: #169b8e; /* Deixei um verde um pouco mais escuro para o efeito de clique funcionar visualmente */
}

/* Container das Redes Sociais */
.redes-sociais-contato {
    display: flex;
    gap: 15px; 
    margin-top: 30px;
    align-items: center;
}

.icone-social {
    width: 20px;  
    height: 20px; 
    object-fit: contain; 
    transition: transform 0.3s ease; 
    cursor: pointer;
}

.icone-social:hover {
    transform: scale(1.1);
}

/* --- RESPONSIVIDADE PARA MOBILE (UNIFICADA) --- */
@media (max-width: 900px) {
    .contato-wrapper {
        flex-direction: column;
        align-items: center; /* Centraliza as duas grandes colunas (info e form) */
        gap: 40px; /* Reduz o espaço entre o texto e o formulário no celular */
    }

    /* Regra Mágica: Transforma a área de texto numa coluna centralizada */
    .contato-info {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza perfeitamente o título, os textos e ícones */
        text-align: center;
        width: 100%;
    }

    .titulo-fale {
        text-align: center;
    }

    .info-item {
        justify-content: center; /* Garante que o ícone e o texto do email/telefone fiquem no meio */
        width: 100%;
    }

    .redes-sociais-contato {
        justify-content: center; /* Centraliza as redes sociais */
        width: 100%;
        margin-top: 15px;
    }

    .contato-form-container {
        width: 100%; /* Garante que o formulário ocupe o espaço disponível sem vazar */
        box-sizing: border-box;
    }

    .form-row-dupla {
        flex-direction: column;
        gap: 0;
    }
}




.contato-form-container {
    position: relative;
    z-index: 10; /* Garante que o formulário esteja na frente de fundos/decorativos */
}

select {
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300c3a5%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: .65em auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Remove a seta padrão para usar a nossa estilizada */
}