/* ------------ buttons style ------------ */

/* BOTÓN */
.btn-norm .elementor-button-link.elementor-button {
    position: relative;
    overflow: hidden;

    color: #fff;
    background: var(--c-primary);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;

    border: none;
    border-radius: 30px;

    span.elementor-button-content-wrapper {
        padding: 3px 8px !important;

        .elementor-button-icon svg {
            width: 0.8em !important; 
            transform: rotate(0deg);

            transition: transform 0.55s ease;
        }
    }
}


/* Degradado superpuesto */
.btn-norm .elementor-button-link.elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        90deg,
        var(--c-secondary) 0%,
        var(--c-secondary-light) 30%,
        var(--c-primary-light) 65%,
        var(--c-primary) 100%
    );

    opacity: 0;
    transition: opacity 0.55s ease;
}

/* El contenido queda por encima del degradado */
.btn-norm .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    column-gap: 30px !important;

    transition: column-gap 0.55s ease;
}

/* HOVER */
.btn-norm .elementor-button-link.elementor-button:hover::before,
.btn-norm .elementor-button-link.elementor-button:focus::before {
    opacity: 1;
}

.btn-norm .elementor-button-link.elementor-button:hover
.elementor-button-content-wrapper,
.btn-norm .elementor-button-link.elementor-button:focus
.elementor-button-content-wrapper {
    column-gap: 35px !important;

    .elementor-button-icon svg {
        transform: rotate(45deg);
    }
}

/* botón blanco */

.btn-light .elementor-button-link.elementor-button {
    position: relative;
    overflow: hidden;

    background-color: #fff;
    background-image: none;

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;

    border: 2px solid #fff;
    border-radius: 30px;

    transition:
        background-color 0.55s ease,
        border-color 0.55s ease,
        color 0.55s ease;

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

        display: flex;
        align-items: center;
        column-gap: 30px !important;

        transition: column-gap 0.55s ease;

        .elementor-button-text {
            background: linear-gradient(
                90deg,
                var(--c-secondary) 0%,
                var(--c-secondary-light) 30%,
                var(--c-primary-light) 65%,
                var(--c-primary) 100%
            );

            background-clip: text;
            -webkit-background-clip: text;

            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        .elementor-button-icon svg {
            width: 0.8em !important;
            transform: rotate(0deg);

            transition:
                transform 0.55s ease,
                fill 0.55s ease,
                stroke 0.55s ease;
        }
    }
}


/* HOVER */

.btn-light .elementor-button-link.elementor-button:hover,
.btn-light .elementor-button-link.elementor-button:focus {
    background-color: transparent !important;
    background-image: none !important;
    border-color: #fff !important;
    color: #fff !important;

    .elementor-button-content-wrapper {
        column-gap: 35px !important;

        .elementor-button-text {
            background: none !important;
            background-clip: border-box;
            -webkit-background-clip: border-box;

            color: #fff !important;
            -webkit-text-fill-color: #fff !important;
        }

        .elementor-button-icon svg {
            transform: rotate(45deg);
        }

        .elementor-button-icon svg path {
            stroke: #fff !important;
        }
    }
}

/* BOTÓN CON FONDO DEGRADADO */

.btn-gradient .elementor-button-link.elementor-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Este fondo aparece cuando desaparece el degradado */
    background-color: #fff;
    background-image: none;

    color: #fff;

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;

    border-radius: 30px;

    transition:
        border-color 0.55s ease,
        color 0.55s ease;

    /* Fondo degradado */
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        background: linear-gradient(
            90deg,
            var(--c-secondary) 0%,
            var(--c-secondary-light) 30%,
            var(--c-primary-light) 65%,
            var(--c-primary) 100%
        );

        border-radius: inherit;
        opacity: 1;
        pointer-events: none;

        transition: opacity 0.55s ease;
    }

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

        display: flex;
        align-items: center;
        column-gap: 30px !important;

        transition: column-gap 0.55s ease;

        .elementor-button-text {
            color: #fff;
            -webkit-text-fill-color: #fff;
        }

        .elementor-button-icon svg {
            width: 0.8em !important;
            transform: rotate(0deg);

            transition: transform 0.55s ease;
        }

        /* Icono blanco en estado normal */
        .elementor-button-icon svg path {
            stroke: #fff !important;
        }
    }
}


/* HOVER */

.btn-gradient .elementor-button-link.elementor-button:hover,
.btn-gradient .elementor-button-link.elementor-button:focus {
    color: transparent !important;
    background-color: #fff !important;

    /* Oculta el degradado y deja visible el fondo blanco */
    &::before {
        opacity: 0;
    }

    .elementor-button-content-wrapper {
        column-gap: 35px !important;

        /* Texto degradado */
        .elementor-button-text {
            background: linear-gradient(
                90deg,
                var(--c-secondary) 0%,
                var(--c-secondary-light) 30%,
                var(--c-primary-light) 65%,
                var(--c-primary) 100%
            );

            background-clip: text;
            -webkit-background-clip: text;

            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
        }

        .elementor-button-icon svg {
            transform: rotate(45deg);
        }

        /* Icono degradado */
        .elementor-button-icon svg path {
            stroke: url(#paint0_linear_4312_25) !important;
        }
    }
}


/* ------------ SUBMIT BUTTON ------------ */

.elementor-field-type-submit .elementor-button {
    position: relative;
    overflow: hidden;

    color: #fff;
    background: var(--c-primary);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;

    border: none;
    border-radius: 30px;

    transition: all 0.55s ease;
}


/* Degradado superpuesto */
.elementor-field-type-submit .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        90deg,
        var(--c-secondary) 0%,
        var(--c-secondary-light) 30%,
        var(--c-primary-light) 65%,
        var(--c-primary) 100%
    );

    opacity: 0;
    transition: opacity 0.55s ease;
}


/* Contenido por encima del degradado */
.elementor-field-type-submit .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3px 8px !important;
}


/* Texto */
.elementor-field-type-submit .elementor-button-text {
    position: relative;
    z-index: 1;
}


/* HOVER */
.elementor-field-type-submit .elementor-button:hover::before,
.elementor-field-type-submit .elementor-button:focus::before {
    opacity: 1;
}


/* Mantener texto blanco */
.elementor-field-type-submit .elementor-button:hover,
.elementor-field-type-submit .elementor-button:focus {
    color: #fff;
}