/* ───────────────────────────────────────────────────────────────────────────────
   UTILIDADES REUTILIZABLES - viollier-theme-2026
   Clases de propósito general para evitar estilos inline
   ─────────────────────────────────────────────────────────────────────────────── */

/* ── Texto ── */
.text-center {
  text-align: center;
}

.text-gray {
  color: var(--gray);
}

.text-white {
  color: white;
}

/* ── Margin / Padding ── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

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

.mr-1 { margin-right: 0.5rem; }
.mr-2 { margin-right: 1rem; }

/* ── Display / Flex ── */
.flex {
  display: flex;
}

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

.flex-gap-1 {
  gap: 0.5rem;
}

.flex-gap-2 {
  gap: 1rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

.grid {
  display: grid;
}

.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* ── Iconos ── */
.icon-section-heading {
  color: var(--primary-light);
  margin-right: 0.7rem;
}

.icon-section-heading-purple {
  color: #7c3aed;
  margin-right: 0.7rem;
}

.icon-sm {
  font-size: 0.9rem;
}

.icon-md {
  font-size: 1.2rem;
}

.icon-lg {
  font-size: 1.7rem;
}

.icon-gap-sm {
  margin-right: 5px;
}

.icon-gap-md {
  margin-right: 0.8rem;
}

/* ── Botones ── */
.btn-secondary-outline {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-secondary-outline:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-dark-outline {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* ── Estilos de sección ── */
.section-light {
  background: #f8fafc;
}

.section-white {
  background: #fff;
}

.section-dark {
  background: #001f3f;
}

/* ── Contenedores ── */
.container-padding {
  padding: 0 24px;
}

.max-w-sm {
  max-width: 100px;
}

.max-w-md {
  max-width: 820px;
}

.max-w-lg {
  max-width: 1020px;
}

/* ── Fondos y bordes ── */
.bg-light-blue {
  background: #eff6ff;
  border: 1px solid rgba(59, 130, 246, 0.18);
}

/* ── Sobreescrituras de header/footer ── */
.header-padding-top {
  padding-top: 160px;
}

/* ── Gradientes especiales ── */
.gradient-purple {
  background: linear-gradient(to right, #7c3aed, transparent);
}

.gradient-blue {
  background: linear-gradient(to right, var(--primary-light), transparent);
}

/* ── Mapas ── */
.rounded-map {
  height: 580px;
  border-radius: 20px;
  overflow: hidden;
}