/* ======== Estilo base para íconos de menú (categorías principales) ======== */
a[class^="icon-"]::before {
  content: "";
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto 5px auto !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease;
}

/* Íconos más grandes en escritorio */
@media (min-width: 768px) {
  a[class^="icon-"]::before {
    width: 60px !important;
    height: 60px !important;
  }
}

/* Texto debajo del ícono (categorías principales) */
a[class^="icon-"],
.sp-megamenu-parent li[class*="icon-"] > a,
.sp-megamenu-parent li.sp-has-child > a[class^="icon-"] {
  font-size: 14px !important;
  font-weight: 700 !important; /* Negrita en categorías */
  line-height: 1.3 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 6px !important;
  color: inherit !important;
  text-transform: none !important;
  font-family: inherit !important;
}

/* Hover en categorías */
a[class^="icon-"]:hover {
  color: #c2a34c !important;
}

/* Íconos por categoría */
a.icon-led::before {
  background-image: url('/images/menu-icons/pantallas-led.png') !important;
}
a.icon-conference::before {
  background-image: url('/images/menu-icons/sistemas-conferencias.png') !important;
}
a.icon-bocinas::before {
  background-image: url('/images/menu-icons/bocinas-pa.png') !important;
}
a.icon-audio::before {
  background-image: url('/images/menu-icons/audio-profesional.png') !important;
}
a.icon-luces::before {
  background-image: url('/images/menu-icons/luces-escenario.png') !important;
}
a.icon-panel::before {
  background-image: url('/images/menu-icons/interactive-flat-panel.png') !important;
}

/* ======== Subcategorías (compacto y más espaciado) ======== */
.sp-mega-group-child li > a,
.sp-dropdown-inner li > a {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  line-height: 1.1 !important;
  padding: 2px 10px !important;
  margin: 0 !important;
  color: #444 !important;
  display: block !important;
  text-align: left !important;
  transition: all 0.2s ease-in-out;
}

/* Hover en subcategorías */
.sp-mega-group-child li > a:hover,
.sp-dropdown-inner li > a:hover {
  color: #044f6d !important;
  text-decoration: underline !important;
}

/* Quitar íconos heredados en subcategorías normales */
.sp-mega-group-child li > a:not([class^="icon-"])::before,
.sp-dropdown-inner li > a:not([class^="icon-"])::before {
  content: none !important;
}

/* ======== Estilo individual para la subcategoría "Prueba" (corregido) ======== */
#sp-menu .sp-megamenu-wrapper a.menu-prueba {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #444 !important; /* Ya no está en azul */
  text-transform: none !important;
}

#sp-menu .sp-megamenu-wrapper a.menu-prueba:hover {
  color: #044f6d !important;
  text-decoration: underline !important;
}

/* ======== NUEVO: Títulos clicables como encabezados de subcategorías ======== */
.sp-mega-group-child li.menu-title-item > a,
.sp-dropdown-inner li.menu-title-item > a {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #044f6d !important;
  padding: 6px 10px !important;
  margin: 6px 0 3px 0 !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #e0e0e0;
  display: block !important;
}

/* Hover en títulos clicables */
.sp-mega-group-child li.menu-title-item > a:hover,
.sp-dropdown-inner li.menu-title-item > a:hover {
  color: #c2a34c !important;
  text-decoration: none !important;
}