.smp-sliders-wrapper {
  max-width: 1100px;
  margin: 80px auto;
  display: flex;
  flex-direction: column;
  gap: 90px;
}

.smp-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: ew-resize;
  background: #eee;
}

/* Imagen DESPUÉS (base, ocupa todo) - ESCRITORIO */
.smp-img-after {
  display: block;
  width: 100%;
  height: 30vw !important;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* Wrapper imagen ANTES */
.smp-img-before-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.smp-img-before-wrapper img {
  display: block;
  width: 100vw;
  max-width: 1100px;
  height: 30vw !important;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* Handle / divisor */
.smp-slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #ffffff;
  z-index: 3;
  cursor: ew-resize;
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

/* Círculo central del handle */
.smp-slider-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Etiquetas ANTES / DESPUÉS */
.smp-label {
  position: absolute;
  top: 15px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  z-index: 4;
  pointer-events: none;
  border-radius: 3px;
}

.smp-label-before {
  left: 15px;
}
.smp-label-after {
  right: 15px;
}

/* ── MÓVIL ── */
@media (max-width: 768px) {
  .smp-sliders-wrapper {
    margin: 0 auto;
    padding: 0 0px;
    gap: 20px;
  }

  .smp-img-after {
    height: auto !important;
    object-fit: unset;
  }

  .smp-img-before-wrapper img {
    width: calc(100vw + 6px) !important;
    height: auto !important;
    object-fit: unset;
  }
}

@media (min-width: 769px) {
  #sup-slider {
    margin-top: -60px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  #sup-slider {
    padding: 0 !important;
    width: 100%;
  }
}