.pdis-shell {
  width: 100%;
  margin: 0 auto 28px;
  border-radius: var(--pdis-radius, 0);
  overflow: hidden;
}

.pdis-slider {
  position: relative;
  width: 100%;
  isolation: isolate;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
}

.pdis-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.pdis-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.pdis-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
}

.pdis-link {
  display: block;
  width: 100%;
  height: 100%;
}

.pdis-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  backface-visibility: hidden;
  will-change: transform, opacity, filter, clip-path;
}

.pdis-caption {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 8%;
  z-index: 5;
  padding: 14px 18px;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 38px);
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0,0,0,.75);
  background: linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,0));
  pointer-events: none;
}

.pdis-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(0,0,0,.34);
  color: #fff;
  font-size: 34px;
  line-height: 42px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.pdis-prev { left: 16px; }
.pdis-next { right: 16px; }

.pdis-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 20;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.pdis-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  cursor: pointer;
}

.pdis-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* Effets */
.pdis-slider.fx-fade .pdis-slide.is-entering .pdis-image {
  animation: pdisFade var(--pdis-ms) ease both;
}

.pdis-slider.fx-zoom .pdis-slide.is-entering .pdis-image {
  animation: pdisZoom var(--pdis-ms) cubic-bezier(.2,.75,.2,1) both;
}

.pdis-slider.fx-blur .pdis-slide.is-entering .pdis-image {
  animation: pdisBlur var(--pdis-ms) ease both;
}

.pdis-slider.fx-slide .pdis-slide.is-entering .pdis-image {
  animation: pdisSlide var(--pdis-ms) cubic-bezier(.22,.8,.25,1) both;
}

.pdis-slider.fx-cinematic .pdis-slide.is-entering .pdis-image {
  animation: pdisCinematic var(--pdis-ms) cubic-bezier(.2,.7,.2,1) both;
}

.pdis-slider.fx-wipe .pdis-slide.is-entering .pdis-image {
  animation: pdisWipeImage var(--pdis-ms) ease both;
}

.pdis-slider.fx-split .pdis-slide.is-entering .pdis-image {
  animation: pdisSplitImage var(--pdis-ms) ease both;
}

.pdis-wipe,
.pdis-split {
  position: absolute;
  z-index: 12;
  pointer-events: none;
}

.pdis-wipe {
  inset: 0;
  transform: translateX(-105%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
  mix-blend-mode: screen;
}

.pdis-slider.fx-wipe.is-transitioning .pdis-wipe {
  animation: pdisWipeOverlay var(--pdis-ms) ease both;
}

.pdis-split {
  top: 0;
  bottom: 0;
  width: 50%;
  background: rgba(0,0,0,.7);
}

.pdis-split-a { left: 0; transform: translateX(-101%); }
.pdis-split-b { right: 0; transform: translateX(101%); }

.pdis-slider.fx-split.is-transitioning .pdis-split-a {
  animation: pdisSplitLeft var(--pdis-ms) ease both;
}
.pdis-slider.fx-split.is-transitioning .pdis-split-b {
  animation: pdisSplitRight var(--pdis-ms) ease both;
}

@keyframes pdisFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pdisZoom {
  from { opacity: 0; transform: scale(1.22); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pdisBlur {
  from { opacity: 0; filter: blur(18px) brightness(.7); transform: scale(1.08); }
  to { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
}

@keyframes pdisSlide {
  from { opacity: 0; transform: translateX(12%) scale(1.05); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes pdisCinematic {
  0% { opacity: 0; transform: scale(1.18) translateX(2%); filter: contrast(.75) brightness(.65); }
  45% { opacity: 1; filter: contrast(1.08) brightness(1.03); }
  100% { opacity: 1; transform: scale(1); filter: contrast(1) brightness(1); }
}

@keyframes pdisWipeImage {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(1.06); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}

@keyframes pdisWipeOverlay {
  0% { transform: translateX(-105%); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: translateX(105%); opacity: 0; }
}

@keyframes pdisSplitImage {
  from { opacity: .2; transform: scale(1.12); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pdisSplitLeft {
  0% { transform: translateX(-101%); }
  45% { transform: translateX(0); }
  100% { transform: translateX(-101%); }
}

@keyframes pdisSplitRight {
  0% { transform: translateX(101%); }
  45% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

@media (max-width: 767px) {
  .pdis-arrow {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
  .pdis-prev { left: 10px; }
  .pdis-next { right: 10px; }
  .pdis-caption {
    bottom: 10%;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdis-slide.is-entering .pdis-image,
  .pdis-wipe,
  .pdis-split {
    animation: none !important;
  }
}
