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

/* ============================
   Mundo Licencias Termas (Infantil)
   - Solo frontend: colores + look & feel
   - Mantiene estructura
============================ */

/* Tokens (paleta infantil) */
:root{
  --kid-primary:#0ea5e9;   /* sky */
  --kid-accent:#f59e0b;    /* amber */
  --kid-promo:#f43f5e;     /* rose */
  --kid-bg:#f0f9ff;        /* sky-50 */
  --kid-ink:#0f172a;       /* slate-900 */
}

/* 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;
}

/* Botón infantil (reemplaza el "amarillo" por un acento amigable) */
.btn-amarillo {
  background-color: var(--kid-accent);
  color: var(--kid-ink);
  border-radius: 0.85rem;
  font-weight: 800;
  transition: transform .2s ease, filter .2s ease;
}

.btn-amarillo:hover {
  filter: brightness(1.03);
  transform: scale(1.03);
}

/* Botón primario (útil si lo querés usar en home, cards, etc.) */
.btn-kids {
  background-color: var(--kid-primary);
  color: #fff;
  border-radius: 0.85rem;
  font-weight: 800;
  transition: transform .2s ease, filter .2s ease;
}

.btn-kids:hover {
  filter: brightness(0.98);
  transform: scale(1.03);
}

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

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

/* Suaviza estética infantil en cards/containers sin tocar estructura */
.card-kids {
  border-radius: 1rem;
  border: 1px solid rgba(14,165,233,.12);
}

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