/* Transición suave para menú mobile */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

#mobile-menu.mobile-menu-open {
  max-height: 500px;
  opacity: 1;
}

#mobile-menu.mobile-menu-closed {
  max-height: 0;
  opacity: 0;
}

/* Asegurar que el menú mobile tenga fondo sólido */
#mobile-menu {
  background-color: rgb(185 28 28); /* red-700 */
}

/* Animación suave para los items del menú */
#mobile-menu a {
  transition: all 0.2s ease;
}

/* Mejorar la experiencia táctil en móvil */
button, a, .card {
  -webkit-tap-highlight-color: transparent;
}

.menu-tab { 
  background-color: white; 
  color: #a10439; 
  border: 1px solid #a10439 
}

/* Estilo específico cuando el botón tiene la clase 'active' */
.menu-tab.active { 
  background-color: #a10439 !important; 
  color: white !important; 
}