/* =====================================================
   UTILIDADES Y HELPERS
   Clases genéricas reutilizables en cualquier página.
   ===================================================== */

/* =====================================================
   ALINEACIÓN DE TEXTO
   ===================================================== */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* =====================================================
   SISTEMA DE MÁRGENES
   ===================================================== */
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 1rem; }
.mt-4  { margin-top: 1.5rem; }
.mt-5  { margin-top: 2rem; }

.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 1rem; }
.mb-4  { margin-bottom: 1.5rem; }
.mb-5  { margin-bottom: 2rem; }

/* =====================================================
   SISTEMA DE PADDING
   ===================================================== */
.py-2  { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3  { padding-top: 1rem;    padding-bottom: 1rem; }
.py-4  { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-5  { padding-top: 2rem;    padding-bottom: 2rem; }

.px-2  { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3  { padding-left: 1rem;    padding-right: 1rem; }
.px-4  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-5  { padding-left: 2rem;    padding-right: 2rem; }

/* =====================================================
   COLORES DE TEXTO
   ===================================================== */
.text-muted  { color: var(--text-light); }
.text-accent { color: var(--accent); }
.text-white  { color: var(--white); }
.text-primary { color: var(--primary); }

/* =====================================================
   FONDOS
   ===================================================== */
.bg-dark  { background: var(--bg-dark); }
.bg-light { background: var(--bg-light); }
.bg-white { background: var(--white); }
.bg-primary { background: var(--primary); }

/* =====================================================
   SECCIONES
   ===================================================== */
.section { 
  padding: 80px 0; 
}

.section-sm { 
  padding: 50px 0; 
}

.section-lg { 
  padding: 100px 0; 
}

/* =====================================================
   SISTEMA DE GRIDS REUTILIZABLES
   ===================================================== */
.grid-auto-xs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-md);
}

.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-lg);
}

.grid-auto-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-lg);
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap-xl);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
}

/* Grid responsive */
@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   EFECTOS HOVER - SISTEMA UNIFICADO
   ===================================================== */
.hover-lift-xs {
  transition: var(--transition-transform);
}

.hover-lift-xs:hover {
  transform: translateY(-2px);
}

.hover-lift-sm {
  transition: var(--transition-transform);
}

.hover-lift-sm:hover {
  transform: translateY(-4px);
}

.hover-lift-md {
  transition: var(--transition-transform);
}

.hover-lift-md:hover {
  transform: translateY(-6px);
}

.hover-lift-lg {
  transition: var(--transition-transform);
}

.hover-lift-lg:hover {
  transform: translateY(-8px);
}

.hover-lift-xl {
  transition: var(--transition-transform);
}

.hover-lift-xl:hover {
  transform: translateY(-10px);
}

/* =====================================================
   EFECTOS DE ESCALA
   ===================================================== */
.hover-scale {
  transition: var(--transition-transform);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-scale-sm {
  transition: var(--transition-transform);
}

.hover-scale-sm:hover {
  transform: scale(1.02);
}

/* =====================================================
   SOMBRAS
   ===================================================== */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-accent { box-shadow: var(--shadow-accent); }

/* =====================================================
   BORDER RADIUS
   ===================================================== */
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-circle { border-radius: var(--radius-circle); }

/* =====================================================
   FLEXBOX UTILITIES
   ===================================================== */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-xs { gap: var(--gap-xs); }
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }
.gap-xl { gap: var(--gap-xl); }

/* =====================================================
   CONTENEDORES
   ===================================================== */
.container-narrow {
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 20px;
}

/* =====================================================
   TRANSICIONES GLOBALES
   ===================================================== */
.transition-fast { transition: var(--transition-fast); }
.transition-base { transition: var(--transition-base); }
.transition-slow { transition: var(--transition-slow); }

/* =====================================================
   DISPLAY UTILITIES
   ===================================================== */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

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

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

/* =====================================================
   WIDTH UTILITIES
   ===================================================== */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* =====================================================
   POSITION UTILITIES
   ===================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }