/* CLASES DE UTILIDAD GENERALES Y REUTILIZABLES */

/* Contenedores */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
}

@media (min-width: 640px) { .container { max-width: var(--max-width-sm); } }
@media (min-width: 768px) { .container { max-width: var(--max-width-md); } }
@media (min-width: 1024px) { .container { max-width: var(--max-width-lg); } }
@media (min-width: 1280px) { .container { max-width: var(--max-width-xl); } }
@media (min-width: 1440px) { .container { max-width: var(--max-width-2xl); } }

/* Grid Responsive Reutilizables */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Flexbox Helpers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Glassmorphism Reutilizable */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
}

.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(14, 165, 233, 0.2);
}

/* Texto e Impacto Tipográfico */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-eco-gradient {
  background: var(--gradient-eco);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.text-primary-color { color: var(--color-primary); }
.text-secondary-color { color: var(--color-secondary); }
.text-muted-color { color: var(--text-muted); }

/* Espaciados Rápidos (Márgenes y Rellenos) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-2xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Ocultar visualmente pero mantener accesible para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}