/* Estilização dos botões */

.container-botoes{
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.botao{
    border: none;
    border-radius: 100vmax;
    color: var(--texto-branco);
    cursor: pointer;
    font-size: 0.75rem;
    padding: .5rem 2rem;
    transition: .5s;
}

    .botao--secundario{
        background-color: transparent;
        border: 1px solid var(--cor-azul);
        color: var(--texto-azul);
        font-weight: 600;
        padding: calc(.5rem - 1px) calc(2rem - 1px);
    }

        .botao--secundario:hover{
            background-color: var(--cor-azul-hover);
            border-color: var(--cor-azul-hover);
            color: var(--texto-branco);
        }

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

        .botao--azul:hover{
            background-color: var(--cor-azul-hover);
        }

    .botao--verde{
        background-color: var(--cor-verde);
    }

        .botao--verde:hover{
            background-color: var(--cor-verde-hover);
        }

    .botao--vermelho{
        background-color: var(--cor-vermelho);
    }

        .botao--vermelho:hover{
            background-color: var(--cor-vermelho-hover);
        }

    .botao:disabled, .botao:disabled:hover{
        background-color: var(--cor-desabilitado);
        box-shadow: none;
        cursor: initial;
    }

/* RESPONSIVIDADE */
@media screen and (max-width: 425px){
    .container-botoes{
        flex-direction: column;
    }

    .container-botoes *{
        width: 100%;
    }
}