/* ---------- BOTONES ---------- */
.btn-primario,
.btn-secundario,
.btn-claro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--f-titulos);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-btn);
    text-decoration: none;
    padding: 16px 34px;
    border-radius: 999px !important;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease;

    &:focus-visible {
        outline: 3px solid var(--c-azul-claro);
        outline-offset: 3px;
    }
}

.btn-primario {
    color: var(--c-blanco);
    background: linear-gradient(135deg, var(--c-azul) 0%, var(--c-azul-oscuro) 100%);
    box-shadow: 0 10px 28px rgba(34, 102, 172, .38);

    &:hover, &:focus, &:active {
        color: var(--c-blanco);
        background: linear-gradient(135deg, var(--c-azul-claro) 0%, var(--c-azul) 100%);
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(55, 152, 207, .5);
    }
}

.btn-secundario {
    color: var(--c-azul-oscuro);
    background: transparent;
    border-color: var(--c-azul);

    &:hover, &:focus, &:active {
        color: var(--c-blanco);
        background: var(--c-azul-oscuro);
        border-color: var(--c-azul-oscuro);
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(34, 102, 172, .35);
    }
}

.btn-claro {
    color: var(--c-azul-oscuro);
    background: var(--c-blanco) !important;
    box-shadow: 0 10px 28px rgba(3, 33, 50, .28) !important;

    &:hover, &:focus, &:active {
        color: var(--c-blanco);
        background: var(--c-azul) !important;
        transform: translateY(-3px);
        box-shadow: 0 16px 36px rgba(3, 33, 50, .4) !important;
    }
}