/* BOTONES */
.btn {
    a {
        background-color: transparent !important;
        border: none;
        border-top: 1px solid var(--c-azul-oscuro);
        border-bottom: 1px solid var(--c-azul-oscuro);
        padding: 18px 25px !important;
        transition: var(--all-transition);
        position: relative;
        z-index: 1;
        border-radius: 0;
        font-size: 18px;

        span {
            color: var(--c-blanco-puro) !important;
            transition: var(--all-transition);
        }

        &::after {
            content: '';
            background: var(--deg-oscuro);
            position: absolute;
            width: 100%;
            height: calc(100% + 2px);
            inset: 0;
            margin: auto;
            z-index: -1;
            opacity: 0;
            transition: var(--all-transition);
        }

        &:hover {
            &::after {
                opacity: 1;
            }
        }
    }

    &.oscuro {
        a {
            span {
                color: var(--c-azul-oscuro) !important;
            }

            &:hover {
                span {
                    color: var(--c-blanco-puro) !important;
                }
            }
        }
    }

    &.claro {
        a {
            border-color: var(--c-blanco-roto);
        }
    }
}