/* ==========================================================================
   UTILITIES - Club de Juegos Rosario
   ========================================================================== */

/* ========== TEXT ========== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-gray-600); }

.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-bold { font-weight: var(--font-bold); }
.font-semibold { font-weight: var(--font-semibold); }

/* ========== SPACING ========== */

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ========== DISPLAY ========== */

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }

.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ========== ANIMATIONS ========== */

/* Fade in desde abajo */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Contador animado */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-count {
  animation: countUp 0.6s ease forwards;
}

/* Hover lift generico */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ========== DADO COMO BULLET ========== */

.list-dice {
  list-style: none;
  padding-left: 0;
}

.list-dice li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
}

.list-dice li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4F6C' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%230B4F6C'/%3E%3Ccircle cx='16' cy='8' r='1' fill='%230B4F6C'/%3E%3Ccircle cx='8' cy='16' r='1' fill='%230B4F6C'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%230B4F6C'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%230B4F6C'/%3E%3C/svg%3E");
  background-size: contain;
}

/* ========== RESPONSIVE VISIBILITY ========== */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ========== MAX WIDTH ========== */

.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }