.elementor-3782 .elementor-element.elementor-element-92b9411{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for container, class: .elementor-element-92b9411 *//* Estilo padrão do header */
.custom-sticky-header {
  position: relative;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  transition: all 0.3s ease;
}

/* Quando rolar a página */
.custom-sticky-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Empurra o conteúdo para evitar pulo */
.sticky-placeholder {
  height: 0px;
  transition: height 0.3s ease;
}

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const header = document.querySelector(".custom-sticky-header");
    const placeholder = document.createElement("div");
    placeholder.classList.add("sticky-placeholder");
    header.parentNode.insertBefore(placeholder, header);

    const headerHeight = header.offsetHeight;

    function onScroll() {
      if (window.scrollY > 50) {
        header.classList.add("sticky");
        placeholder.style.height = headerHeight + "px";
      } else {
        header.classList.remove("sticky");
        placeholder.style.height = "0px";
      }
    }

    window.addEventListener("scroll", onScroll);
  });
</script>




<div class="custom-sticky-header">
  <!-- Conteúdo do header aqui -->
</div>/* End custom CSS */