@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --cor-azul: #2135A6;

    --cor-branca: #FFFFFF;

    --cor-cinza-claro: #D6D3D1;
    --cor-cinza-quase-claro: #A8A29E;
    --cor-cinza: #57534E;
    --cor-cinza-escuro: #292524;

    --cor-laranja: #E43A12;
    --cor-laranja-claro: #F3541C;

    --cor-rosa: #FEE7D6;

    --fonte-poppins: "Poppins", sans-serif;
    --fonte-monserrat:"Montserrat", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    background-color: var(--cor-azul);
}

.background {
    width: 100vw;
    height: 100vh;
    padding-left: 52.5vw; /* padding usado para que a ilustração fique à direita da tela */
    position: fixed; /* ilustração fica fixa na tela mesmo que role para baixo */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    pointer-events: none; /* remove qualquer interação com a ilustração */
}

.background__arte {
    width: 500px;
    height: auto;
}

.background__logo {
    width: 215px;
    height: auto;
}

main {
    height: calc(100% + 5%);
    width: 52.5vw; /* define a largura do quadrado branco que separa a tela ao "meio" */
    background-color: var(--cor-branca);
}

label a {
    cursor: pointer; /* todos os labels e hyperlinks ficam com a "mãozinha" do mouse */
}

input:focus {
    border-color: var(--cor-cinza-escuro);
    outline: none;
}

button {
    border: none;
}

/* --------------------------- TEXTO INTRODUTÓRIO --------------------------- */
    .forms {
        display: flex;
        flex-direction: column;
        padding: 64px;
        gap: 48px;
    }


    .forms__introducao {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .forms__introducao__voltar {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .forms__introducao__voltar span{
        transition: color 0.1s ease-in-out;
        color: var(--cor-cinza);
    }
    .forms__introducao__voltar:hover span{
        transition: color 0.1s ease-in-out;
        color: var(--cor-laranja-claro);
    }
    #seta-voltar {
        transition: opacity 0.2s ease-in-out;
    }

    .forms__introducao__texto {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .forms__introducao__titulo {
        font-family: var(--fonte-poppins);
        font-size: 24px;
        font-weight: 600;
        color: var(--cor-cinza-escuro);
    }
    .forms__introducao__label {
        font-family: var(--fonte-poppins);
        font-size: 16px;
        font-weight: 400;
        color: var(--cor-cinza);
    }
/**/


/* ------------------------------- FORMULÁRIO ------------------------------- */

/* Configurações gerais */
    .forms__titulo {
        font-family: var(--fonte-poppins);
        font-size: 16px;
        font-weight: 600;
        color: var(--cor-cinza-escuro);
    }

    .forms__label {
        font-family: var(--fonte-poppins);
        font-size: 14px;
        color: var(--cor-cinza);
        font-weight: 400;
        padding: 24px 0 8px 0px;
    }

    .forms__input {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;;
        height: 48px;
        border: 2px solid var(--cor-cinza-claro);
        color: var(--cor-cinza-escuro);
        border-radius: 8px;
        font-family: var(--fonte-poppins);
        font-size: 16px;
        font-weight: 400;
        padding: 12px;
    }

    .forms__upload {
        border: 2px dashed var(--cor-cinza-claro);
        border-radius: 8px;
        padding: 24px 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        gap: 8px;
        transition: 0.3s ease-in-out;
    }
    .forms__upload:hover {
        border-color: #F67841;
    }
    .forms__upload__icone {
        width: 48px;
        height: auto;
    }
    .forms__upload__label {
        font-family: var(--fonte-poppins);
        font-size: 16px;
        color: var(--cor-cinza-quase-claro);
        font-weight: 400;
    }
/**/


/* Informações pessoais do usuário */
    .forms__informacoes__foto {
        display: flex;
        flex-direction: column;
    }

    .forms__informacoes__redes__secao {
        display: flex;
        flex-direction: column;
    }
    .forms__informacoes__redes__secao__botao {
        margin-top: 18px;
        display: flex;
        justify-content: center;
        border: 2px dashed var(--cor-cinza-claro);
        border-radius: 8px;
        padding: 10px;
        cursor: pointer;
    }


    .forms__endereco__secao {
        display: flex;
        gap: 20px;
    }
    .forms__endereco__secao__esquerda {
        width: 67%;
    }
    .forms__endereco__secao__direita {
        width: 33%;
    }
/**/


/* Seleção de uma trilha */
    .forms__trilhas__grupo {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .forms__trilhas__secao {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .forms__trilhas__secao__grupo {
        display: flex;
        gap: 12px;
        width: 100%;
    }

    .forms__trilhas__secao__grupo__bloco-unico{
        display: flex;
        width: 100%;
        padding-right: 12px;
    }

    .forms__trilhas__secao__grupo__bloco {
        border: 2px solid var(--cor-cinza-claro);
        border-radius: 8px;
        width: 50%;
        cursor: pointer;
        transition: border-color 0.7s ease-in-out;
    }
    .forms__trilhas__secao__grupo__bloco:has(input:checked) {
        transition: border-color 0.3s ease-in-out;
        border-color: var(--cor-laranja);
    }

    .forms__trilhas__secao__grupo__bloco input{
        -webkit-appearance: none; /* Remove a aparência padrão no Chrome/Safari */
        -moz-appearance: none;    /* Remove a aparência padrão no Firefox */
        appearance: none;
        position: absolute;

        margin: 8px 0 0 8px;
        width: 20px;
        height: 20px;
        border: 2px solid var(--cor-cinza-claro);
        border-radius: 100%;
        flex-shrink: 0;
        transition: background-color 0.3s ease-in-out;
    }
    .forms__trilhas__secao__grupo__bloco input:checked {
        background-color: var(--cor-laranja);
        border-color: var(--cor-laranja);
        transition: background-color 0.3s ease-in-out;

        background-image: url(../assets/icons/Verificar.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

    .forms__trilhas__secao__grupo__conteudo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 16px 16px 16px;
        gap: 8px;
        cursor: pointer;
    }

    .forms__trilhas__secao__grupo__conteudo img {
        width: 40px;
        height: auto;
    }

    .forms__trilhas__secao__grupo__conteudo span{
        font-family: var(--fonte-monserrat);
        font-weight: 500;
        font-size: 16px;
        color: var(--cor-cinza-escuro);
    }
/**/

/* Termos e condições */
    .forms__termos {
        display: flex;
        gap: 12px;
    }

    .forms__termos label{
        cursor: pointer;
        display: flex;
    }

    .forms__termos label span a{
        font-weight: 500;
        color: var(--cor-laranja);
    }

    .forms__termos input {
        -webkit-appearance: none; /* Remove a aparência padrão no Chrome/Safari */
        -moz-appearance: none;    /* Remove a aparência padrão no Firefox */
        appearance: none;

        width: 20px;
        height: 20px;
        border: 2px solid var(--cor-cinza-claro);
        border-radius: 5px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.5s ease-in-out;
    }

    .forms__termos input:checked {
        background-color: var(--cor-laranja);
        border-color: var(--cor-laranja);
        transition: background-color 0.5s ease-in-out;

        background-image: url(../assets/icons/Verificar.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

    .forms__termos__texto {
        font-family: var(--fonte-poppins);
        font-size: 16px;
        font-weight: 400;
        color:#57534E;
    }
/**/


/* Botão de cancelar e fazer inscrição */
    .forms__botoes {
        display: flex;
        justify-content: flex-end;
        padding-top: 16px;
        gap: 16px;
    }

    .forms__botoes__cancelar {
        padding: 12px 24px;
        border: 1px solid var(--cor-laranja);
        color: var(--cor-laranja);
        background-color: var(--cor-branca);
        border-radius: 8px;

        font-family: var(--fonte-poppins);
        font-weight: 500;
        font-size: 16px;

        transition: background-color 0.2s ease-in-out;
        cursor: pointer;
    }

    .forms__botoes__cancelar:hover {
        transition: background-color 0.2s ease-in-out;
        background-color: var(--cor-rosa);
    }

    .forms__botoes__inscricao {
        padding: 12px 24px;
        border: 1px solid var(--cor-laranja);
        color: var(--cor-branca);
        background-color: var(--cor-laranja);
        border-radius: 8px;

        font-family: var(--fonte-poppins);
        font-weight: 500;
        font-size: 16px;

        transition: background-color 0.2s ease-in-out;
        cursor: pointer;
    }

    .forms__botoes__inscricao:hover {
        transition: background-color 0.2s ease-in-out;
        background-color: var(--cor-laranja-claro);
        border-color: var(--cor-laranja-claro);
    }
/**/