/*
Titulo:       Sticky-header CSS
Descripcion: Añade un efecto de "sticky" al header de Elementor.
             Cambia el color de fondo y la opacidad al hacer scroll.
             Reduce el tamaño del header y los elementos dentro de él.
             Mejora la experiencia de usuario al navegar por la página.
             Se utiliza CSS personalizado para lograr este efecto.
             El código se aplica a un header específico con la clase "sticky-header".
             Se utilizan variables CSS para facilitar la personalización.
             El efecto se activa al hacer scroll, aplicando una clase adicional "elementor-sticky--effects".
*/

header.sticky-header {
    --header-height: 70px;
    --opacity: 1;
    --shrink-me: 0.70;
    --sticky-background-color: #e8f5e9; /* Color de fondo del header sticky */
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

@media (max-width: 1024px) {
    header.sticky-header {
        --header-height: 100px;
    }
}
@media (max-width: 767px) {
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * 1);
}
}