/* === MENÚ SUPERIOR BONMENU: color de destacado === */

/* Texto al pasar el mouse y cuando está activo */
#top-menu-0[data-bonmm-depth="0"] > li > a:hover,
#top-menu-0[data-bonmm-depth="0"] > li.sfHover > a,
#top-menu-0[data-bonmm-depth="0"] > li.current > a {
  color: #000 !important;
}

/* Línea / barra inferior (highlight) */
#top-menu-0[data-bonmm-depth="0"] > li > a::after,
#top-menu-0[data-bonmm-depth="0"] > li.sfHover > a::after,
#top-menu-0[data-bonmm-depth="0"] > li.current > a::after {
  background: #000 !important;
}

/* Submenú: hover en enlaces dentro del desplegable */
.bonmmenu .dropdown-submenu > a:hover,
.bonmmenu .bonmm-top-menu li a:hover {
  color: #000 !important;
}

/* Flechita del menú (caret) en negro */
#top-menu-0[data-bonmm-depth="0"] > li > a .nav-arrows,
#top-menu-0[data-bonmm-depth="0"] > li > a .nav-arrow,
#top-menu-0[data-bonmm-depth="0"] > li > a i,
#top-menu-0[data-bonmm-depth="0"] > li > a svg {
  color: #000 !important;
  fill: #000 !important;
}

/* Si la flecha está hecha con bordes (triángulo CSS) */
#top-menu-0[data-bonmm-depth="0"] > li > a::before,
#top-menu-0[data-bonmm-depth="0"] > li > a::after {
  border-top-color: #000 !important;
  border-bottom-color: #000 !important;
  border-left-color: #000 !important;
  border-right-color: #000 !important;