/* ==========================================================================
   sliders/_base.css — Estilos base compartidos por todos los sliders Mutador
   --------------------------------------------------------------------------
   Sumario:
   - Wrapper común `.mut-slider` (para reset y posicionamiento).
   - Header opcional con label + contador (`.mut-slider-header`).
   - Dots compartidos (`.mut-slider-dots`, `.mut-slider-dot`).
   - touch-action en .swiper para que el drag horizontal NUNCA propague
     scroll horizontal a la página en móvil.
   - NO contiene reglas específicas de un slider concreto: cada slider tiene
     su propio archivo css/sliders/slider-XXX.css con sus particularidades.
   ========================================================================== */


/* ---------- Wrapper común ---------- */
.mut-slider{
  position: relative;
}


/* ---------- Header (label + contador) — opcional ---------- */
.mut-slider-header{
  padding: 0 var(--gutter) clamp(20px, 3vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mut-slider-label,
.mut-slider-count{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.bs-section--dark .mut-slider-label,
.bs-section--dark .mut-slider-count{ color: rgba(239,236,228,.38); }


/* ---------- Dots compartidos ---------- */
.mut-slider-dots{
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: clamp(20px, 3vw, 32px) 0 0;
}
.mut-slider-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.mut-slider-dot.is-on{
  background: var(--accent);
  transform: scale(1.25);
}


/* ---------- Swiper engine — anti scroll horizontal global ---------- */
/* Cualquier .mut-slider que use swiper hereda este touch-action.
   Bloquea pan horizontal del navegador → swiper.js consume el drag. */
.mut-slider .swiper,
.mut-slider .swiper-wrapper{
  touch-action: pan-y;
}