.btn {

    .elementor-button {

        background: transparent !important;
        border: none;
        padding: 0 !important;
        margin: 0;

        color: var(--c-rojo) !important;
        font-size: 1rem !important;
        font-weight: 600;
        letter-spacing: .5px;

        position: relative;
        display: inline-block;

        transition: color .3s ease;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 100%;
            height: 2px;
            background: var(--c-rojo);

            transform: scaleX(1);
            transform-origin: right;
            transition: transform .3s ease;
        }

        &:hover::after {
            transform: scaleX(0);
            color: var(--c-rojo-hover);
            letter-spacing: 0.8px;
        }

    }

}



.btn-blanco {

    .elementor-button {

        color: var(--c-negro) !important;

        padding: 15px 30px !important;

        margin: 0px;

        position: relative;

        background-color: var(--c-blanco) !important;

        border: 1px solid var(--c-blanco);

        border-radius: 0;

        font-size: 1rem !important;

        font-weight: 600;

        letter-spacing: 0.5px;

        overflow: hidden;

        z-index: 1;

        transition: all .4s ease;



        &::after {

            content: "";

            background: var(--c-negro);

            position: absolute;

            z-index: -1;

            height: 100%;

            width: 0;

            top: 0;

            bottom: 0;

            left: 0;

            margin: auto;

            transition: all .4s ease;

        }



        &:hover {

            color: var(--c-blanco) !important;

            

            &::after {

                width: 100%;

            }

        }

    }

}