.elementor .header-transparente{position:absolute;z-index:999;/* 1. CONFIGURACIÓN INICIAL DEL HEADER */
selector {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: transparent; /* Empieza transparente */
  transition: padding 0.3s ease;
  
  /* ACTIVAMOS EL DETECTOR DE SCROLL DE CSS */
  animation: cambiarHeader auto linear;
  animation-timeline: scroll();
  animation-range: 0px 150px; /* AQUÍ DEFINES LOS 150PX */
}

/* 2. ANIMACIÓN QUE SE EJECUTA MIENTRAS BAJAS */
@keyframes cambiarHeader {
  to {
      background-color: #ffffff; /* Se vuelve blanco */
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      padding-top: 10px;
      padding-bottom: 10px;
  }
}

/* 3. ACHICAR EL LOGO AUTOMÁTICAMENTE */
selector img {
  animation: achicarLogo auto linear;
  animation-timeline: scroll();
  animation-range: 0px 150px;
}

@keyframes achicarLogo {
  to {
      width: 140px; /* Tamaño final al bajar */
  }
}

/* 4. CAMBIAR COLOR DE TEXTO DEL MENÚ */
selector .elementor-item {
  animation: textoNegro auto linear;
  animation-timeline: scroll();
  animation-range: 0px 150px;
}

@keyframes textoNegro {
  to {
      color: #000000;
  }
}\n}