/* ============================================================
   Club Sweet Slider
   Prefijo: scs-   (convive con sss- y ss26-)

   El contenido/estilo de cada .scs-slide lo define el usuario.
   Aquí solo: layout de pista, peek lateral, flechas y dots.

   Markup esperado:
   .scs-slider
     .scs-arrow.scs-arrow--prev   (opcional, desktop)
     .scs-arrow.scs-arrow--next   (opcional, desktop)
     .scs-viewport
       .scs-track
         .scs-slide × N
     .scs-dots
   ============================================================ */

.scs-slider.scs-slider {
  position: relative;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-x: none;
}

.scs-slider .scs-viewport {
  overflow: hidden;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  cursor: grab;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
.scs-slider .scs-viewport:active { cursor: grabbing; }

.scs-slider .scs-track,
.scs-slider .scs-track * {
  -webkit-user-drag: none;
  user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
}

.scs-slider .scs-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  height: auto !important;
  gap: var(--scs-gap, 16px);
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 0.4s cubic-bezier(0.24,0.76,0.25,1);
}
.scs-slider .scs-track.scs-dragging {
  transition: none !important;
}

/* ----------------------------------------------------------
   perView: 2 en móvil, 4 en desktop, ambos con peek lateral.
   El peek se logra restando un margen del ancho: cada slide
   ocupa (100/perView)% menos un descuento para asomar vecinos.
   Ajusta --scs-peek para más/menos asomo.
   ---------------------------------------------------------- */
.scs-slider {
  --scs-gap: 16px;
  --scs-peek: 32px;
  --scs-pv: 2;              /* <980: móvil */
}
@media (min-width: 980px)  { .scs-slider { --scs-pv: 3; } }  /* 980–1199 */
@media (min-width: 1200px) { .scs-slider { --scs-pv: 4; } }  /* 1200–1919 */
@media (min-width: 1920px) { .scs-slider { --scs-pv: 6; } }  /* >=1920 */

.scs-slider .scs-slide {
  flex: 0 0 calc((100% - (var(--scs-gap, 16px) * (var(--scs-pv, 2) - 1)) - var(--scs-peek, 32px)) / var(--scs-pv, 2)) !important;
  width: calc((100% - (var(--scs-gap, 16px) * (var(--scs-pv, 2) - 1)) - var(--scs-peek, 32px)) / var(--scs-pv, 2)) !important;
  box-sizing: border-box !important;
  height: auto;
}

/* ----------------------------------------------------------
   Flechas — solo desktop
   ---------------------------------------------------------- */
.scs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(120,120,120,0.35);
  color: #FFBCFD;
  font-size: 22px;
  line-height: 1;
  display: none;              /* oculto por defecto (móvil) */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s;
}
.scs-arrow:hover  { background: rgba(120,120,120,0.55); }
.scs-arrow:focus  { outline: 2px solid #FFBCFD; }
.scs-arrow--prev  { left: 6px; }
.scs-arrow--next  { right: 6px; }

@media (min-width: 980px) {
  .scs-arrow { display: flex; }
}

/* ----------------------------------------------------------
   Dots — móvil y desktop
   Activo = barra alargada rosa; inactivos = puntos grises.
   ---------------------------------------------------------- */
.scs-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
}

.scs-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
.scs-dot.is-active {
  width: 26px;
  background: #FFBCFD;
}