/* =============================================================================================
                              --- Código CSS para Desktop Grandes ---
============================================================================================= */
/* ------------------- IMPORTAR TIPOGRAFIAS -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* --------------------- TRABALHE CONOSCO ---------------------- */
.align {
    display: flex;
    justify-content: space-between; align-items: center;

    width: calc(var(--base-resolution-width) - 150px);
    margin: 70px auto;
}
.align:first-of-type { margin-top: 50px; position: relative; }

.icone-flutuante { position: absolute; }
.align:first-of-type .icone-flutuante:nth-of-type(1) { width: 95px; top: -30px; left: 600px; }
.align:first-of-type .icone-flutuante:nth-of-type(2) { width: 90px; bottom: -70px; right: calc(-22vw + 300px); }
.align:first-of-type .icone-flutuante:nth-of-type(3) { width: 85px; top: 10px; right: calc(-22vw + 210px); }
.align:first-of-type .icone-flutuante:nth-of-type(4) { width: 125px; bottom: -300px; left: -100px; }
.align:first-of-type .icone-flutuante:nth-of-type(5) { width: 80px; bottom: -385px; right: calc(-19vw + 210px); }

main .align:first-of-type > div:nth-of-type(2) { width: 55%; }
main .align:first-of-type > div:nth-of-type(2) > div { margin-left: 20px; }

main .align .title {
    color: var(--third-color);
    text-align: left;
    font-size: 2.2rem; font-family: 'Fredoka'; font-weight: bold;
    margin-bottom: 20px;
}

main .align .text {
    color: var(--third-color);
    text-align: justify;
    font-size: 1.05rem; font-family: 'Nunito'; font-weight: bold;
    margin-top: 10px;
}

main .align:first-of-type img { width: 380px; }

/* ------------------------ FORMULÁRIO ------------------------- */
.fundo {
    width: 950px; height: 380px;
    margin: 70px auto 60px;

    flex-direction: column;
    justify-content: center;

    background-image: url("../images/Vector\ 187.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
main .align.fundo .text { margin-top: 0; }

.btn-conhecer {
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Fredoka';
    font-weight: bold;
    padding: 12px 50px;
    margin-top: 30px;
    border-radius: 50px;
    width: max-content;
}
.btn-conhecer a { color: white; text-decoration: none; }

.btn-conhecer a:hover {
    opacity: 1;
    color: white;
    transition: 0.5s;
}

/* =============================================================================================
                             --- Media Query para Desktop Menores ---
============================================================================================= */
@media (max-width: 1366px) and (min-width: 981px) {
    /* --------------------- TRABALHE CONOSCO ---------------------- */
    main .align:first-of-type > div:nth-of-type(2) { width: 50%; }
    main .align:first-of-type img { width: 30vw; max-width: 350px; }

    .align:first-of-type .icone-flutuante:nth-of-type(1) { top: -50px; left: 760px; }
    .align:first-of-type .icone-flutuante:nth-of-type(3) { display: none; }
    .align:first-of-type .icone-flutuante:nth-of-type(4) { bottom: -200px; }
    .align:first-of-type .icone-flutuante:nth-of-type(5) { width: 65px; bottom: -410px; right: calc(-23vw + 240px); }

    /* ------------------------ FORMULÁRIO ------------------------- */
    .fundo { width: 830px; height: 315px; }
}

/* =============================================================================================
                                --- Media Query para Celulares ---
============================================================================================= */
@media (max-width: 980px) {
    /* --------------------- TRABALHE CONOSCO ---------------------- */
    .align { 
        width: var(--base-resolution-width); max-width: 600px;
        margin: 60px auto;
    }

    .align:first-of-type { flex-direction: column; row-gap: 40px; }
    main .align:first-of-type > div:nth-of-type(2) { width: 100%; }

    main .align .title, main .align .text { text-align: center; }
    main ul { width: 80vw; max-width: 300px; margin: auto; }
    main ul li { text-align: left; }

    main .align:first-of-type img { width: clamp(230px, 40vw, 350px); }

    .align:first-of-type .icone-flutuante:nth-of-type(1) { top: 200px; left: -25px; }
    .align:first-of-type .icone-flutuante:nth-of-type(2) { width: 90px; bottom: 30px; right: calc(-19vw + 100px); }
    .align:first-of-type .icone-flutuante:nth-of-type(3) { right: calc(-28vw + 210px); }
    .align:first-of-type .icone-flutuante:nth-of-type(4) { bottom: -50px; left: -45px; }
    .align:first-of-type .icone-flutuante:nth-of-type(5) { bottom: -345px; right: calc(-14vw + 110px); }

    /* -------------------- DEMAIS RESPONSIVO ---------------------- */
    body {
        overflow-x: hidden;
    }

    .title {
        font-size: 30px;
        /* Reduz o título */
        line-height: 1.2;
    }

    /* --- SEÇÃO 1 (Principal) --- */
    /* Alvo: <div class="align" style="justify-content: space-evenly..."> */
    /* Empilha o bloco de imagem e texto, e inverte a ordem */
    .align[style*="justify-content: space-evenly"] {
        flex-direction: column-reverse;
        /* Coloca o texto ANTES da imagem */
        padding: 0 20px;
        gap: 30px;
        margin-top: 30px;
    }

    /* Ajusta a imagem */
    .align[style*="justify-content: space-evenly"] img {
        max-width: 100%;
        height: auto;
    }

    /* --- Anulação de Larguras (Seção 1) --- */
    /* Usamos !important para anular o style="..." do HTML */

    p.title[style*="width: 546px"],
    p.text[style*="width: 546px"] {
        width: 100% !important;
    }

    /* Centraliza o título que teve a largura anulada */
    p.title[style*="width: 546px"] {
        text-align: center !important;
    }

    /* Altera o alinhamento da descrição */
    p.text[style*="width: 546px"] {
        text-align: left !important;
    }

    /* Ajusta o container da lista */
    div[style*="width: 526px"] {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Ajusta o alinhamento da lista de vagas */
    div[style*="width: 526px"]>ul.text {
        text-align: left !important;
    }


    /* --- SEÇÃO 2 (Formulário) --- */
    .fundo {
        width: 90% !important;
        /* Anula o 'width: 949px' */
        height: auto !important;
        /* Anula o 'height: 382px' */
        margin-top: 50px;
        margin-bottom: 50px;
        padding: 40px 20px;
        /* Adiciona padding interno */
        background-position: center;
        /* Centraliza o fundo */
    }

    /* Anula a largura do texto do formulário */
    .fundo p.text[style*="width: 608px"] {
        width: 100% !important;
        /* O text-align: center do HTML já vai funcionar */
    }

    /* O botão .btn-conhecer já irá centralizar
       pois .fundo é um flex-column com 'align-items: center' */
}

/* =============================================================================================
                            --- Media Query para Celulares Pequenos ---
============================================================================================= */
@media (max-width: 650px) {
    .align:first-of-type .icone-flutuante:nth-of-type(1),
    .align:first-of-type .icone-flutuante:nth-of-type(2),
    .align:first-of-type .icone-flutuante:nth-of-type(3),
    .align:first-of-type .icone-flutuante:nth-of-type(4),
    .align:first-of-type .icone-flutuante:nth-of-type(5) {
        display: none;
    }
}