/*
 * ==========================================
 * ESTILOS RESPONSIVOS PARA MAX-WIDTH: 768PX
 * Arquivo: estilos-mobile.css (Versão Corrigida)
 * ==========================================
 */

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

    /*
     * 1. RESET E LAYOUT GERAL
     * Anula larguras fixas (1100px) e posicionamentos fixos de desktop.
     */

    /* Anula min-width e position: fixed/absolute de containers principais */



    .container, .container2 {
        max-width: 100%;
        min-width: 100%; 
        position: relative; 
        transform: none; 
        left: 0; 
        padding: 0 20px; /* Padding lateral padrão */
        box-sizing: border-box;
        margin: 0 auto;
        height: auto;
        top: auto; /* Anula qualquer top fixo */
        display: flex;
        flex-direction: column;
        align-items: center;        
    }

    .container {
    padding: 0; /* Remova o padding lateral de 20px no .container para permitir que o .topo-principal se espalhe */
    max-width: 100%;
}

    main {
        padding-top: 150px; /* Espaço para o header */
        min-height: auto;
    }

    /* Esconde o elemento decorativo de fundo */
    .elemento1 {
        display: none; 
    }

    

    .topo-principal {
        width: 100%;
        padding: 20px 0;        
        height: auto;         
        flex-direction: column;         
        align-items: center;
        position: relative;
        margin: 0;
    }

    .logo-home {
       width: 180px; 
       height: auto;     
       position: static !important;
       justify-content: center;
       align-items: center;
       margin: -75px auto;       
       }

       .logo-home img {
    /* Garante que a imagem se comporte como um bloco centralizável */
    display: block; 
    /* Remove margens e padding que poderiam deslocar a imagem */
    margin: 0; 
    padding: 0;
    max-width: 100%; /* Evita que a imagem vaze do container */
}

    .linha {
        display: none; /* Esconde a linha */
    }

    .menu {
        position: relative;
        margin-top: 20px;
        height: auto;
        display: none; /* Escondido por padrão (para Menu Hambúrguer) */
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .menu-list {
        flex-direction: column; 
        padding: 0;
        width: 100%;
    }

    .menu-list li {
        margin: 5px 0;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu-list a {
        font-size: 16px;
        padding: 10px 0;
    }

    /*
     * 3. SEÇÃO HERO
     */

    .hero {
        flex-direction: column; 
        height: auto;
        margin-top: 50px;
        padding: 0 20px;
        gap: 0; 
    }

    .heroA {
        width: 100%;
        margin-top: 0; 
        order: 2; 
    }

    .heroB {
        width: 100%;
        height: auto;
        justify-content: center; 
        order: 1; 
        margin-top: 0;
    }

    .tetina {
        width: 80%; 
        height: auto;
        max-width: 300px; 
        z-index: 0; 
        display: none;
    }

    .texto-hero1 {
        font-size: 28px; 
        text-align: center;
        line-height: 1.2;
    }

    .texto-hero2 {
        width: 100%; 
        height: auto;
        text-align: center;
        font-size: 14px;
    }

    .bt-mais {
        margin: 20px auto; 
    }

    /*
     * 4. COMPONENTE DRAWER (AGENDAMENTO DESLIZANTE)
     */

    .drawer-container {
        height: 90vh; 
        transform: translateY(calc(-90vh + 40px)); /* Deixa 40px visíveis */        
    }

    .drawer-container.expanded {
        transform: translateY(0);
        background: #41813F;
    }

    .container-acionar {
        width: 100%; 
        transform: none; 
        left: 0;
        justify-content: center; 
    }

    .drawer-header {
        width: 80%; 
        max-width: 300px;
    }

    .conteudo-deslizado {
        height: 100%; 
        padding: 10px;
    }

    /* FORMULÁRIO (3 COLUNAS -> 1 COLUNA) */
    .form-container {
        grid-template-columns: 1fr; 
        gap: 10px; 
    }
    
    .form-column button {
        margin-top: 10px;
    }

    /*
     * 5. CARROSSEL 1 (ÁREAS DE ATUAÇÃO) - AJUSTADO PARA SWIPE
     */

    .carrossel1 {
        /* Transforma o carrossel em um container de blocos */
        width: 100%;
        height: auto;
        padding: 20px; /* Adiciona espaçamento interno */
        background-color: black; /* Fundo branco como no desktop */
        box-sizing: border-box;
    }

    .carrossel-linha {
        /* Permite que os itens se empilhem verticalmente */
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espaço entre cada item */
        overflow: visible;
    }

    .carrossel-inner {
        /* Anula o comportamento de slide */
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espaço entre os itens */
        width: 100%;
        transform: none !important; /* Remove qualquer translação do JS */
        height: 1000px;
        
    }

    .item-carrossel {
        /* Estilo de cada item como um card individual */
        width: 100%;
        min-width: 0;
        padding: 20px;
        border: 1px solid #eee; /* Adiciona uma borda sutil */
        box-sizing: border-box;        
    }

    .item-carrossel1 {
        /* Estilo de cada item como um card individual */
        width: 100%;       
        height: auto;
        padding: 20px;
        border: 1px solid #eee; /* Adiciona uma borda sutil */
        box-sizing: border-box;   
        background-color: white;     
    }
    /*  Oculta as setas conforme solicitado */
    .carrossel1 .seta {
        display: none; 
    }

    /* Oculta os indicadores */
    .carrossel-indicadores {
        display: none;
    }

    /*
     * 6. DIFERENCIAIS
     */

    .diferenciais {
        width: 100%; 
        height: auto;
        padding: 20px;
        margin-top: 20px;
    }

    .titulo-sessao {
        font-size: 28px;
        text-align: center;
        width: 300px;
        
    }

    .box-diferenciais {
        flex-direction: column; 
        height: auto;
        gap: 15px;
    }

    .box {
        width: 100%; 
        height: auto;
        padding-bottom: 20px; 
    }

    /*
     * 7. CARROSSEL DE PROJETOS - AJUSTADO PARA SWIPE E EMPILHAMENTO
     */

    .projetos {
        width: 100%; 
        height: auto;
        padding: 20px;
    }

    .projetos-wrapper {
        width: 100%;
    }

    .projetos-inner {
        /* Habilita a rolagem por toque */
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 30px;
        transform: none !important; /* Remove qualquer translação do JS */
    }

    /* Empilha as colunas A e B e ajusta a largura do slide */
    .slide-projeto {
        flex-direction: column;
        width: 100%;
        min-width: 0;
        height: auto; 
        gap: 20px;
    }

    .coluna-b {
        width: 100%; 
        height: auto;
        padding: 0;
    }

    .coluna-a{
        max-width: 250px;
        display: flex;
        justify-content: center;    
        align-items: center;
        justify-items: center;
        margin: 0 auto;
        margin-bottom: -60px;
    }

    .coluna-a img {
        max-width: 100%;
        height: auto; /* Mantém a proporção da imagem */
        display: block; /* Remove espaços extras abaixo da imagem */
    }
    
    /* 🚫 Oculta as setas conforme solicitado */
    .projetos .seta {
        display: none; 
    }

    .projetos-indicadores {
        display: none;
    }

    /*
     * 8. RODAPÉ
     */

    .container-footer2 {
        width: 100%; 
        height: auto;
        flex-direction: column; 
        align-items: center;
        justify-content: center; 
        justify-items: center;
        padding: 30px 20px;
        margin-top: 0;
        text-align: center;
        gap: 20px;        
    }

    .container-footer {
        width: 100%; 
        height: auto;
        flex-direction: column; 
        align-items: center;
        justify-content: center; 
        justify-items: center;
        padding: 30px 20px;
        margin-top: 0;
        text-align: center;
        gap: 20px;        
    }

    .logo-agendamento {
        margin: 0 auto;
        width: 100px;
        height: auto;
    }

    .menu-footer {
        width: 100%;
        display: flex;
        justify-content: center;    
        position: relative;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .menu-list-footer {
        align-items: center; 
    }

    .descritivo-footer {
        width: 100%;
        margin: 0;
        text-align: center;
        margin-bottom: 50px;
    }

    .social-network {
        width: auto;
        flex-direction: row; 
        margin: 0;
        gap: 30px;
    }
}

/*
 * ==========================================
 * PÁGINA FUNDADORA - LAYOUT MOBILE
 * ==========================================
 */
.fundadora {
    /* 1. Altera a direção do flex para coluna (vertical) */
    display: flex;
    flex-direction: column;
    
    /* 2. Remove a largura e altura fixas do desktop */
    width: 350px !important;/* Ocupa toda a largura disponível */
    height: auto; /* A altura se ajusta ao conteúdo */
    margin: 0 auto;
    /* 3. Ajusta o padding para ser uniforme em telas pequenas */
    padding: 20px;
    margin-top: 200px;
    /* 4. Centraliza os itens (imagem e texto) no eixo cruzado */
    align-items: center;
    
    /* 5. Garante um espaçamento consistente */
    gap: 30px;
}

.fundadora3 {
    /* 1. Altera a direção do flex para coluna (vertical) */
    display: flex;
    flex-direction: column;
    
    /* 2. Remove a largura e altura fixas do desktop */
    width: 350px !important;/* Ocupa toda a largura disponível */
    height: auto; /* A altura se ajusta ao conteúdo */
    margin-top: 160px;
    /* 3. Ajusta o padding para ser uniforme em telas pequenas */
    padding: 20px;
    
    /* 4. Centraliza os itens (imagem e texto) no eixo cruzado */
    align-items: center;
    
    /* 5. Garante um espaçamento consistente */
    gap: 30px;
}

.fundadora2 {
    /* 1. Altera a direção do flex para coluna (vertical) */
    display: flex;
    flex-direction: column;    
    /* 2. Remove a largura e altura fixas do desktop */
    width: 350px;/* Ocupa toda a largura disponível */
    height: auto;
    margin: 0 auto;
    /* 3. Ajusta o padding para ser uniforme em telas pequenas */
    padding: 20px;    
    /* 4. Centraliza os itens (imagem e texto) no eixo cruzado */
    align-items: center;
    justify-content: center;
    /* 5. Garante um espaçamento consistente */
    gap: 30px;    
}

.conteudo-esquerda{
    margin-top: -200px;  
    
}

.conteudo-direita{
    margin-top: 250px; 
    width: 400px;   
    margin-bottom: 400px;
    
}

.conteudo-direita2{
    display: flex;
    flex-direction: column;   
    width: 350px !important;    
    height: auto;    
}

.box-line{
    display: flex;
    flex-direction: column;    
    gap: 20px; 
    
    height: auto;
    
    width: 350px;
}

.box-line2{
    display: flex;
    flex-direction: column;    
    gap: 20px;      
      
    height: auto;
    width: 400px;
}

.item-carrossel{
    display: flex;
    flex-direction: column;
    height: auto;
    padding-right: 100px;
}

.item-carrossel2{
    display: flex;
    flex-direction: column;
    height: auto;
    padding-right: 100px;
    margin-bottom: 50px;
}

.item-E{
    display: flex;
    flex-direction: column;    
}

.container-interno{
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 400px;
    
    margin-top: 100px;
}

.container-interno2{
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 350px;
    margin-bottom: 100px;
}

.forms-container-personalizado{
    flex-direction: column;
    width: 400px;  
    margin-top: -350px;  
    height: auto;
    
}

.forms-campos-curtos{
    display: flex;
    flex-direction: column;
    width: 400px;    

}

.input-group-row{   
    flex-direction: column;
    margin-bottom: 10px;
}


.texto-padrao{
    width: 300px !important;
    height: auto;
    font-size: 16px;
    font-weight: 200;
    color: #ffffff;
    line-height: 1.4;
    text-align: left;
    margin-top: 20px;     
    display: flex;
    flex-direction: column;    
    margin-top: 20px;   
    
}

.item{
    width: 300px;
    height: auto;
    
}

.fundadora2{
    width: 350px !important;
    height: auto !important;    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    
}

.texto-recuado{
    padding-left: 10px;
}

/*
 * ==========================================
 * NOTÍCIAS MOBILE
 * ==========================================
 */
.container-noticias {
    width: 100% !important;
    padding: 20px;
    margin-top: 180px; /* Espaço para o header fixo */
    height: auto !important;
}

/*
 * ==========================================
 * POLÍTICA DE PRIVACIDADE MOBILE
 * ==========================================
 */
.container-politica {
    width: 100% !important;
    padding: 20px;
    margin-top: 180px;
    height: auto !important;
}

/*
 * ==========================================
 * ÁREAS DE ATUAÇÃO MOBILE
 * ==========================================
 */
.container-atuacao {
    width: 100% !important;
    padding: 20px;
    margin-top: 180px;
    height: auto !important;
}

.grid-atuacao {
    grid-template-columns: 1fr; /* 1 coluna */
    padding: 0;
}