/* ============================ */
/* 📱 RESPONSIVIDADE E MENU MOBILE */
/* ============================ */

/* --- Até 768px: Menu Hambúrguer e Navegação Mobile --- */
@media (max-width: 768px) {
    .banner_trabalhe_conosco {
        width: 100%;
        padding: 0;

    }

    .title_trabalhe {
        position: absolute;
        width: 100%;
        height: auto;
    }

    .texto_trabalhe1,
    .texto_trabalhe2 {
        font-size: 3.5rem;
        margin-left: 30px;

    }

    .texto_trabalhar {
        font-size: 100px;
    }

    .informacao-vagas {
        width: 100%;
        height: 20rem;
        display: flex;
        padding: 0 0 0 20px;
    }

    .title-fundo-vagas {
        font-size: 3.2rem;
        margin: 0;
        padding: 0;

    }

    .vagas {
        width: 100%;
        padding: 0px;

    }

    .folder-vagas {
        width: 100%;
        height: 15.6rem;
        padding: 0;
        margin: 0;
    }

    .img-teste {
        width: 40%;
        height: auto;
        border-radius: 8px;
    }

    .texto-card {
        margin: 0;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1rem;
    }

    .descricao_formulario {
        margin-top: 4rem;
        flex-direction: column;
    }

    .descricao-lista {
        margin-left: 0;
    }

    .descricao_title {
        font-size: 60px;
        margin: 0;
        padding: 0 0 30px 20px;
    }

    .subtitle-list {
        font-family: var(--fonte-principal);
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        margin: 0;
        width: 80%;
    }

    .cadastro {
        width: 100%;
        max-width: 31rem;
        height: auto;
        margin: 0;
        padding: 25px 25px;
    }
}

/* --- Até 480px: Ajustes gerais mobile --- */
@media (max-width: 480px) {

    .banner_trabalhe_conosco {
        width: 100%;
        padding: 0;

    }

    .title_trabalhe {
        position: absolute;
        width: 100%;
        height: auto;
    }

    .texto_trabalhe1,
    .texto_trabalhe2 {
        font-size: 3.5rem;
        margin-left: 30px;

    }

    .texto_trabalhar {
        font-size: 100px;
    }

    .informacao-vagas {
        width: 100%;
        height: 20rem;
        display: flex;
        padding: 0 0 0 20px;
    }

    .title-fundo-vagas {
        font-size: 3.2rem;
        margin: 0;
        padding: 0;

    }

    .vagas {
        width: 100%;
        padding: 0px;

    }

    .folder-vagas {
        width: 100%;
        height: 15.6rem;
        padding: 0;
        margin: 0;
    }

    .img-teste {
        width: 40%;
        height: auto;
        border-radius: 8px;
    }

    .texto-card {
        margin: 0;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1rem;
    }

    .descricao_formulario {
        margin-top: 4rem;
        flex-direction: column;
    }

    .descricao-lista {
        margin-left: 0;
    }

    .descricao_title {
        font-size: 60px;
        margin: 0;
        padding: 0 0 30px 20px;
    }

    .subtitle-list {
        font-family: var(--fonte-principal);
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        margin: 0;
        width: 80%;
    }

    .cadastro {
        width: 100%;
        max-width: 31rem;
        height: auto;
        margin: 0;
        padding: 25px 25px;
    }

    .subtitle-final {
    margin-left: 0px;
    font-size: 50px;
    padding-left: 20px;
    
}

.vagas{
        flex-direction: column;
        height: auto;
    }

    .texto-card {
        margin-top: 10px;
        margin-left: 20px;
    }

    .folder-vagas {
        width: 100%;
        height: auto;
        margin: 10px;
        padding: 10px;
    }
    
    .card-vagas{
        flex-direction: column;
        height: auto;
    }

}



/* --- Até 420px: Ajustes específicos --- */
@media (max-width: 420px) {

    .vagas{
        flex-direction: column;
        height: auto;
    }

    .texto-card {
        margin-top: 10px;
        margin-left: 20px;
    }

    .folder-vagas {
        width: 100%;
        height: auto;
        margin: 10px;
        padding: 10px;
    }
    
    .card-vagas{
        flex-direction: column;
        height: auto;
    }

}

@media (max-width: 439px) {
    #topo-navigation {
        height: 5rem;
        width: 100%;
    }

    .title-produtos {
        font-size: 3rem;
    }

    .title-card-cursos {
        display: none;
    }

    .cursos {
        width: 180px;
        height: 300px;
        margin-bottom: 10px;
    }

    .vagas{
        flex-direction: column;
        height: auto;
    }

    .texto-card {
        margin-top: 10px;
        margin-left: 20px;
    }

    .folder-vagas {
        width: 100%;
        height: auto;
        margin: 10px;
        padding: 10px;
    }
    
    .card-vagas{
        flex-direction: column;
        height: auto;
    }

}