/* ------------ buttons style ------------ */
.btn-norm {
    .elementor-button-link.elementor-button {
        /* animacion */
        -webkit-animation-fill-mode: backwards;
        animation-fill-mode: backwards;
        background-color: var(--c-rojo);
        color: var(--c-blanco);
        font-weight: 600;
        letter-spacing: var(--letter-spacing-btn);
        text-transform: uppercase;
        text-decoration: none;
        padding: 0px;
        border-radius: 0px;
        border: var(--boder-btn);
        display: inline-block;
        transition: var(--transitions-large);
        font-family: var(--tipo-bold);
        position: relative;
        overflow: hidden;

        &::after {
            position: absolute;
            content: "";
            background-color: var(--c-grafito-profundo);
            height: 100%;
            width: 100%;
            bottom: 0px;
            left: -350px;
            transition: var(--transitions-large);
            z-index: -1px;
        }


        .elementor-button-text {
            line-height: 50px;
            padding-right: 20px;
            padding-left: 20px;
            z-index: 2;
        }

        .elementor-button-icon {
            padding: 10px;
            z-index: 2;

            svg {
                width: 30px;
                fill: var(--c-blanco);

                #Capa_1-2 {
                    /* transition: var(--transitions-large); */
                    transform-origin: center;
                    display: block;
                    /* o inline-flex/flex si es inline */
                    transform: rotate(0deg);
                    transition: var(--transitions-large);
                }
            }
        }

        /* position: absolute; */
        &:hover {
            transition: var(--transitions-large);
            background-color: var(--c-primary);
            color: var(--c-blanco-bg);

            .elementor-button-icon {
                svg {
                    #Capa_1-2 {
                        transition: var(--transitions-large);
                        transform: rotate(180deg);
                    }
                }
            }

            &::after {
                left: 0px;
                transition: var(--transitions-large);
                transition-delay: 0.3s;
            }

        }


    }

    &.btn-light {
        .elementor-button-link.elementor-button {
            background-color: var(--c-blanco);
            color: var(--c-rojo);

            &::after {
                background-color: var(--c-rojo-press);
            }

            .elementor-button-icon {
                circle {
                    stroke: 1px solid var(--c-rojo);
                }
            }

        }


        &:hover {
            .elementor-button-link.elementor-button {
                color: var(--c-blanco);

            }
        }
    }

}

.btn-hero {

    .elementor-button-link.elementor-button {
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: 125px;
        margin-bottom: -8px;

        &::after {
            position: absolute;
            content: "";
            background-color: var(--c-rojo-press);
            height: 100%;
            width: 100%;
            bottom: 0px;
            left: -480px;
            transition: var(--transitions-after);
            z-index: 1;
        }

        .elementor-button-content-wrapper {
            z-index: 2;
            position: relative;

            .elementor-button-icon {
                transition: var(--transitions-large);
                transform: translateY(0px) translateX(0px);
            }
        }
    }


    &:hover {
        .elementor-button-link.elementor-button {
            &::after {
                left: 0px;
                transition: var(--transitions-after);
            }

            .elementor-button-icon {
                transition: var(--transitions-large);
                transform: translateY(-5px) translateX(5px);
            }
        }
    }
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}