/* BenStar Occidente — reglas responsive.
   La tipografía y los paddings de las páginas ya usan clamp() (fluyen solos);
   aquí (1) colapsamos las grids multi-columna por ancho y (2) convertimos el
   nav en menú hamburguesa en pantallas estrechas.
   Los selectores [style*="…"] apuntan al grid-template-columns inline tal como
   lo serializa el runtime (React) en el DOM (p. ej. "repeat(3, 1fr)"). */

/* ────────── Ancho del contenedor: fluido, a ancho completo ────────── */
/* Los contenedores usan max-width:1240px inline; quitamos el tope para que el
   contenido se adapte automáticamente a cualquier pantalla, dejando solo ~50px
   de margen lateral (menos en móvil). Los párrafos conservan su propio
   max-width en ch, así que las líneas de texto siguen siendo legibles. */
[style*="max-width: 1240px"] {
  max-width: none !important;
  padding-left: clamp(20px, 4vw, 50px) !important;
  padding-right: clamp(20px, 4vw, 50px) !important;
}

/* ────────── Grids: colapso por ancho ────────── */
@media (max-width: 900px) {
  /* Secciones de 2 columnas → 1 columna (hero, bandas, contacto, etc.) */
  [style*="1.15fr 0.85fr"],
  [style*="1.3fr 0.7fr"],
  [style*="1.05fr 0.95fr"],
  [style*="1.1fr 0.9fr"],
  [style*="1fr 0.9fr"],
  [style*="0.9fr 1.1fr"],
  [style*="1fr 1fr"],
  [style*="auto 1fr"],
  [style*="1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Tarjetas de 3 y stats de 4 → 2 columnas */
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Móvil: tarjetas de 3 → 1 columna (los stats de 4 se quedan en 2×2) */
@media (max-width: 560px) {
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ────────── Nav: menú hamburguesa en móvil ────────── */
.nav-burger { display: none; }
.nav-collapse { display: flex; align-items: center; gap: var(--space-4); }

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
    background: color-mix(in srgb, var(--color-accent-2-700) 14%, transparent);
  }
  .nav-burger span {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--color-text); margin: 0 auto;
  }
  .nav-collapse {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: var(--space-4); margin-top: var(--space-3);
  }
  .nav-collapse.open { display: flex; }
  .nav-links-row {
    flex-direction: column; align-items: flex-start !important; gap: var(--space-3) !important;
  }
  .nav-links-row a { font-size: 16px; }
  .nav-actions { justify-content: space-between; }
}