@tailwind base;
@tailwind components;
@tailwind utilities;

/* Animaciones personalizadas */
@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

/* Scroll oculto para carrousels */
.scroll-smooth::-webkit-scrollbar {
  display: none;
}

.scroll-smooth {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Botones especiales */
.btn-amarillo {
  background-color: #f7c873;
  color: #0a0f2c;
}

.btn-amarillo:hover {
  background-color: #ffd588;
  transform: scale(1.05);
}

/* Modal filtros (a futuro) */
#modalFiltros {
  transition: transform 0.4s ease-in-out;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  #catScroll a { width: 5.5rem !important; }
  #catScroll i { font-size: 1.25rem !important; }
}