/* --- Hero --- */
#home.hero {
    min-height: 70vh; /* Ajuste para ser menor que o Hero da Home */
    background: url('/img/ft-1024x682.png') no-repeat center center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4); 
}
.hero-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-size: large;
}

.hero h1{
    padding-inline: 30px;
    font-size: 50px;
}


/* --- Historia --- */
#historia{
    background-color: #ececec7e;
}

#historia p{
    text-align: center;
    font-size: x-large;
    padding: 20px 200px;
    color: rgb(49, 49, 49);
    font-weight: 100;
}

/* Visão / Missão / Valores */
#visao {
    padding: 50px 0; /* Ajusta o padding da seção */
}
.visao-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 30%; /* Mantém o padding para desktop */
}

.visao-container h2 {
    flex: 0 0 200px;
    color: #9966CC;
    font-weight: 700;
    margin: 0;
    padding-top: 50px;
}

.visao-container p {
    flex: 1;
    margin: 0;
    line-height: 1.6;
    color: rgb(49, 49, 49);
    font-weight: 100;
    font-size:larger;
}

/* - container solucoes (3 cards) */

#solucoes {
    position: relative;
    background-color: #ececec7e; 
    background-position: right center;
    background-size: auto 100%;
    padding: 60px 20px;
    color: #9966CC;
}

/* Overlay semitransparente */
#solucoes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); 
    z-index: 1;
}

/* Conteúdo acima do overlay */
#solucoes * {
    position: relative;
    z-index: 2;
}

#solucoes h3 {
    text-align:start;
    line-height: 1.2;
    margin-bottom: 20px;
    font-size: x-large;
}

#solucoes p{
    font-size: larger;
    text-align: start;
    color: rgb(49, 49, 49);
    font-weight: 100;
}

#solucoes .container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

#solucoes .card {
    flex: 1 1 250px; 
    max-width: 300px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

#solucoes .card:hover {
    transform: translateY(-5px);
}

#solucoes .card-icon {
    width: 290px;
    height: 115px;
    margin-bottom: 15px;
}

/* --- Section Cultura (Texto e Imagem lado a lado) --- */
#cultura {
    padding: 60px 20px;
}

#cultura .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

#cultura .texto {
    flex: 1;
}

#cultura .texto h2 {
    font-size: 35px;
    font-weight: 700;
    color: rgb(49, 49, 49)
}

#cultura .texto h3 {
    font-size: 35px;
    font-weight: 600;
    color: #a26adf;
    margin-bottom: 20px;
}

#cultura .texto p {
    font-size: 20px;
    line-height: 1.6;
    color: rgb(49, 49, 49);
}

#cultura .imagem-valores {
    flex: 1;
    text-align: center;
}

#cultura .imagem-valores img {
    max-width: 100%;
    height: auto;
}


/* -knowhow- (Imagem e Texto lado a lado) */
#knouhow {
    padding: 60px 20px;
}

#knouhow .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

#knouhow .texto {
    flex: 1;
}


#knouhow .texto p {
    font-size: 20px;
    line-height: 1.6;
    color: rgb(49, 49, 49);
}

/*- SOLUÇOES - (Regras específicas da página Soluções) */

.solucoes {
    position: relative;
    background-color: #ffffff;
    background-position: right center;
    background-size: auto 100%;
    padding: 60px 20px;
    color: #9966CC;
}

/* Overlay branco */
.solucoes::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 1;
}

/* Conteúdo acima do overlay */
.solucoes * {
    position: relative;
    z-index: 2;
}

.solucoes h3 {
    text-align: center;
    line-height: 1.2;
    margin-bottom: 20px;
    font-size: large;
}

.solucoes p {
    font-size: large;
    text-align: center;
    color: rgb(49, 49, 49);
    font-weight: 100;
}

.solucoes .container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.solucoes .card {
    flex: 1 1 250px;
    max-width: 300px;
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border: 1px solid #a1a1a1;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.651);
    transition: transform 0.3s ease;
}

.solucoes .card:hover {
    transform: translateY(-5px);
}

.solucoes .card-icon {
    width: 120px;
    height: 100px;
    margin-bottom: 15px;
}

.titulo {
    text-align: center;
    font-size: 35px;
    font-weight: 800;
    color: rgb(49, 49, 49);
    padding-top: 0;
    margin-bottom: 50px;
    background-color: transparent; 
}

/* CORREÇÃO DO LAYOUT EM DESKTOP: Usando flex-basis/flex-grow para dividir o espaço */
.atividades {
    display: flex;
    align-items: flex-start;
    gap: 60px; /* Gap fixo e mais seguro */
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px; /* Padding estável */
    color: rgb(49, 49, 49);
    background-color: #9966CC;
}

.atividades h2{
    flex: 1; /* Ocupa 1/3 do espaço disponível */
    font-size:xx-large;
    color: rgb(255, 255, 255); /* Garante que o texto seja branco */
}

.atividades p{
    flex: 2; /* Ocupa 2/3 do espaço disponível */
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 25px;
}

/*- DEMAIS SEÇÕES -*/
h3{
    color: black;
}

#certificacoes {
    text-align: center;
    padding: 50px 20%;
    font-size: x-large;
    color: #9966cc;
    background-color: #ececec7e; 
}

#certificacoes p{
    padding: 20px;
    color: rgb(49, 49, 49);
    font-weight: 300;
}

.autorizacao{
    text-align: center;
}

.autorizacao h4{
    text-align: center;
    padding: 50px 30%;
    font-size: x-large;
    color: #9966cc;
}

.autorizacao img{
    width: 1000px;
    height: auto;
}

.sessao {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 100px;
}

.conteudo {
    display: flex;
    align-items: flex-start; 
    gap: 50px; 
    max-width: 1000px; 
    padding: 50px 0 0 0;
}

.conteudo h2 {
    font-size: x-large;
    flex: 1; 
    text-align: right; 
    color: #9966cc;
}

.conteudo p {
    flex: 2; 
    text-align: left; 
    margin: 0; 
    color: #363636;
    font-size: larger;
}

#segmentos{
    padding: 50px 20%;;
    font-size: x-large;
} 

#segmentos p{
    padding: 30px;
    font-weight:100;
    color: rgb(49, 49, 49);
}

/* --- REGRAS DE RESPONSIVIDADE ESPECÍFICAS PARA 'SOBRE.CSS' --- */

@media (max-width: 900px) {
    /* Historia: Reduz o padding lateral do texto */
    #historia p {
        padding: 20px 50px;
        font-size: large;
    }

    /* Visão: Reduz o padding lateral do container e a largura do título */
    .visao-container {
        padding: 20px 5%;
    }
    .visao-container h2 {
        flex: 0 0 150px; 
        padding-top: 30px;
    }
    
    /* Cultura/Know-how: Empilha as colunas (imagem e texto) */
    #cultura .container,
    #knouhow .container {
        flex-direction: column;
        gap: 30px;
    }
    
    /* Know-how: Garante que a imagem apareça antes do texto no mobile */
    #knouhow .container {
        flex-direction: column-reverse; 
    }

    /* Atividades: Empilha o título e o parágrafo no mobile */
    .atividades {
        flex-direction: column;
        gap: 20px;
        padding: 40px 20px; /* Padding ajustado para mobile */
        max-width: 100%; /* Garante que ocupe a tela toda */
    }
    .atividades h2, .atividades p {
        flex: none; /* Remove a divisão de espaço */
        text-align: center;
    }
    
    /* Outras correções */
    .titulo {
        font-size: 30px;
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
    /* Visão: Título e parágrafo ficam em coluna */
    .visao-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px 5%;
    }
    .visao-container h2 {
        flex: auto; 
        padding-top: 0;
        margin-bottom: 10px;
    }
    
    /* Historia: Padding ainda mais apertado */
    #historia p {
        padding: 15px 20px;
        font-size: medium;
    }
    
    .hero h1 {
        font-size: 36px;
    }
}