/* PASO 1 — Header negro al pasar el mouse */

.dbheader:hover{
  background: rgba(0,0,0,.92) !important;
}

/* Texto e íconos blancos */
.dbheader:hover a,
.dbheader:hover svg,
.dbheader:hover .elementor-icon{
  color:#fff !important;
  fill:#fff !important;
}
/* PASO 2 — Header negro al hacer scroll */

.dbheader-scrolled{
  background: rgba(0,0,0,.92) !important;
}

.dbheader-scrolled a,
.dbheader-scrolled svg,
.dbheader-scrolled .elementor-icon{
  color:#fff !important;
  fill:#fff !important;
}

/* =========================================
   PREMIUM: Header negro mientras mega menú está abierto
   (tu mega menú suele poner body.db-mm-open)
   ========================================= */

/* Transición suave del header */
.dbheader{
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* Si el mega menú está abierto, el header se queda negro */
body.db-mm-open .dbheader{
  background: rgba(0,0,0,.92) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

/* Texto e íconos blancos mientras el mega está abierto */
body.db-mm-open .dbheader a,
body.db-mm-open .dbheader svg,
body.db-mm-open .dbheader .elementor-icon{
  color:#fff !important;
  fill:#fff !important;
}