/* ------------ buttons style ------------ */
.btn-norm {
    .elementor-button-link.elementor-button {
        /* animacion */
        -webkit-animation-fill-mode: backwards;
        animation-fill-mode: backwards;
        background-color: var(--c-blanco);
        color: var(--c-primary);
        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-amarillo);
            height: 100%;
            width: 100%;
            bottom: -55px;
            left: 0px;
            transition: var(--transitions-after);
            transition-delay: 0.3s;
            z-index: -1px;
        }

        &::before {
            position: absolute;
            content: "";
            background-color: var(--c-azul);
            height: 100%;
            width: 100%;
            bottom: -55px;
            left: 0px;
            transition: var(--transitions-after);
            transition-delay: 0.1s;
            z-index: -1px;
        }


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

        .elementor-button-icon {
            padding: 10px;
            background-color: var(--c-primary);
            z-index: 2;

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

                path {
                    /* 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 {
                    path {
                        transition: var(--transitions-large);
                        transform: rotate(180deg);
                    }
                }
            }
            
            &::after {
                bottom: 60px;
                transition:  var(--transitions-after);
                transition-delay: 0.3s;
            }

            &::before {
                bottom: 60px;
                transition: var(--transitions-after);
                transition-delay: 0.1s;
            }
        }


    }

}


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

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