.elevio-sticky-target {
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    transition: transform var(--elevio-sticky-speed, 320ms) ease,
        opacity var(--elevio-sticky-speed, 320ms) ease,
        box-shadow var(--elevio-sticky-speed, 320ms) ease,
        background-color var(--elevio-sticky-speed, 320ms) ease,
        background var(--elevio-sticky-speed, 320ms) ease;
    will-change: transform, opacity;
}

.elevio-sticky-fixed {
    position: fixed !important;
    top: var(--elevio-sticky-top-offset, 0px) !important;
    z-index: var(--elevio-sticky-z-index, 99999) !important;
}

.elevio-sticky-hidden {
    transform: translateY(-120%) !important;
    opacity: 0;
    pointer-events: none;
}

.elevio-sticky-visible {
    transform: translateY(0) !important;
    opacity: 1;
    pointer-events: auto;
}

.elevio-sticky-shadow {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
}

/*
 * Fondo sólido SOLO cuando el usuario hizo scroll.
 * Usamos background en lugar de background-color para cubrir también fondos con degradado,
 * imágenes o transparencias de Elementor. Al quitar esta clase, el tema/Elementor recupera
 * automáticamente su fondo original.
 */
.elevio-sticky-bg {
    background: var(--elevio-sticky-bg, #ffffff) !important;
}

.elevio-sticky-placeholder {
    display: none;
    width: 100%;
    pointer-events: none;
}

.elevio-sticky-placeholder.is-active {
    display: block;
}

body.admin-bar .elevio-sticky-fixed.elevio-admin-bar-fix {
    top: calc(var(--elevio-sticky-top-offset, 0px) + 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .elevio-sticky-fixed.elevio-admin-bar-fix {
        top: calc(var(--elevio-sticky-top-offset, 0px) + 46px) !important;
    }
}

@media screen and (max-width: 767px) {
    .elevio-sticky-mobile-disabled {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
        background: inherit;
    }
}