/* antes… */

#container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  overflow: hidden;
  contain: layout paint;      /* aisla repaint/layout */
  touch-action: none;         /* evita scroll durante el drag */
}

/* wrappers ocupan todo el container */
.img-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  contain: paint;             /* aisla repaint de cada wrapper */
}

/* sólo el after recorta con clip-path */
.img-wrapper.after {
  overflow: hidden;
  will-change: clip-path;     /* hint para GPU */
}

/* imágenes cubren el wrapper */
.img-wrapper img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* línea central preparada para transform */
#line {
  position: absolute;
  top: 0; height: 100%;
  width: 2px;
  background-color: #FAFAFA;
  will-change: transform;     /* hint para GPU */
  transform: translateX(50%);
  z-index: 10;
}

/* slider full-bleed pero transparente */
#slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  appearance: none;
  cursor: grab;
  z-index: 20;
  touch-action: none;         /* evita scroll mientras arrastras */
}
#slider:active { cursor: grabbing; }
/* thumb igual que antes… */