/* ==========================================================================
   nav-compat.css
   ------------------------------------------------------------------
   Las clases .nav-item (y su :hover) NO son de Tailwind — vienen del
   globals.css propio del sitio. Se portan acá literalmente, tal cual
   están definidas ahí, para que el navbar real se vea idéntico sin
   depender de ningún archivo compilado por Next.
   Fuente: app/globals.css del repo Next.js (sección "NAVBAR").
   ========================================================================== */

.nav-item {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

.nav-item:hover {
  color: #dc2626 !important; /* @apply text-red-600 del globals.css real */
  opacity: 0.7 !important;
}

/* animate-fade-in: no es una utilidad nativa de Tailwind. El sitio real la
   define distinto según la página (algunas usan un slide grande de 30px/1s,
   pensado para secciones, no para un menú). Para el dropdown del navbar
   usamos una versión más chica y rápida, apropiada para este uso puntual. */
@keyframes fade-in-menu {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in-menu 0.15s ease-out;
}