main {
    justify-items: center;
    padding: 64px 0px;
}

main h1 {
    font-size: 28px;
    padding-bottom: 32px;
}

.title-logo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.title-logo img[alt="logo - IntegraCAT"] {
    height: 56px;
    width: 56px;
    object-fit: contain;
}

.lettering-logo {
    height: 64px;
    width: auto;
    max-width: 80px;
    /* opcional para limitar */
    object-fit: contain;
}


/*========================================
Daqui para baixo classes dentro de AUTENTICACAO
==========================================*/

#autenticacao {
    padding: 56px;
    border-radius: 20px;
    background: var(--color-bg-secondary);
    width: 70%;
    display: flex;
    gap: 32px;
    flex-direction: column;
    align-items: center;
}

#autenticacao h1 {
    font-size: 28px;
}

#autenticacao h3 {
    width: 100%;
}

.auth-form {
    width: 100%;
}

.auth-form>div {
    padding: 8px 0px;
}

.container-opcoes {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

.container-opcoes div {
    width: 100%;
}

.auth-form input {
    width: 100%;
    padding: 0.5rem;
    margin: 1rem 0;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--color-light-primary);
    border-radius: 10px;
    padding: 8px 4px;
    /* espaçamento interno para o texto não ficar colado na linha */
    outline: none;
    /* Remove borda*/
    width: 100%;
}

.checkbox-group {
    display: inline;
    justify-content: start;
}

.checkbox-group input {
    width: fit-content;
    border: 01p;
}

.container-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-btn>.btn-green {
    width: 100%;
}

.container-mandar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.auth-form .senhas-diferentes {
    border-bottom: 2px solid var(--color-red);
}


/*========================================
RESPONSIVIDADE
=========================================*/

@media (max-width: 768px) {
    #autenticacao {
        padding: 3rem 1.5rem;
        width: 100%;
    }
    .container-opcoes {
        flex-direction: column;
        align-items: start;
    }
    .campos-registro{
        padding: 2rem;
    }
    .container-mandar{
        flex-direction: column;
    }
}