/* ============================================================
   styles.css — Estilos propios que complementan a Tailwind.
   Tailwind (vía CDN) hace el grueso del trabajo; acá van solo
   los detalles que conviene tener en un archivo aparte.
   ============================================================ */

/* Tipografía base: usamos Inter (cargada desde Google Fonts en el HTML).
   Si no carga, caemos en la fuente del sistema. */
:root {
  --brand: #4f46e5;       /* índigo: color principal */
  --brand-dark: #4338ca;
  --accent: #f59e0b;      /* ámbar: acento para la cuenta regresiva */
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Transiciones suaves para hovers y cambios de estado. */
a, button {
  transition: all 0.15s ease;
}

/* La barra de navegación móvil aparece/desaparece con esta clase. */
.nav-hidden {
  display: none;
}

/* Número grande de la cuenta regresiva: que respire bien. */
.countdown-number {
  font-variant-numeric: tabular-nums; /* evita que "salte" al cambiar de número */
  letter-spacing: -0.02em;
}

/* Animación sutil al cargar las tarjetas del dashboard. */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fade-up 0.4s ease both;
}

/* Respeta a quien prefiere menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
  a, button { transition: none; }
}