/* ==================== */
/* Eliminar el cuadro amarillo alrededor del ítem activo o enfocado */
.menu-header .wp-block-navigation-item a:focus,
.menu-header .wp-block-navigation-item a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ===== Estilo elegante para subrayado animado ===== */
.menu-header .wp-block-navigation-item a {
  position: relative;
  overflow: hidden;
}

/* Línea oculta inicialmente */
.menu-header .wp-block-navigation-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: #f5c536;
  transition: width 0.3s ease;
}

/* Animación de izquierda a derecha */
.menu-header .wp-block-navigation-item a:hover::after,
.menu-header .wp-block-navigation-item.current-menu-item a::after {
  width: 100%;
}

/* === Menú móvil (overlay) oscuro === */
.wp-block-navigation__responsive-container {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* === Ítems del menú responsive === */
.wp-block-navigation__responsive-container .wp-block-navigation-item a {
  color: #ffffff !important;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.5rem 1rem;
  display: block;
}

/* Hover y activo (resaltado en amarillo) */
.wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item a {
  color: #f5c536 !important;
}

/* Subrayado animado en menú móvil */
.wp-block-navigation__responsive-container .wp-block-navigation-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: #f5c536;
  transition: width 0.3s ease;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item a:hover::after,
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item a::after {
  width: 100%;
}