.plantillas-carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1rem;
  user-select: none;
}

.plantillas-carousel-track {
  position: relative;
  width: 100%;
  height: clamp(22rem, 50vw, 30rem);
  perspective: 900px;
  perspective-origin: 50% 50%;
}

.plantillas-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(9rem, 22vw, 12rem);
  margin-left: calc(clamp(9rem, 22vw, 12rem) / -2);
  height: 100%;
  transition:
    transform 700ms var(--ease-out-expo),
    opacity   700ms var(--ease-out-expo),
    filter    700ms var(--ease-out-expo);
  cursor: pointer;
  will-change: transform, opacity;
}

.plantillas-slide.pc-center {
  transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
  opacity: 1;
  filter: none;
  z-index: 10;
  cursor: zoom-in;
}

.plantillas-slide.pc-right1 {
  transform: translateX(72%) translateZ(-80px) rotateY(-28deg) scale(0.78);
  opacity: 0.55;
  filter: brightness(0.7);
  z-index: 5;
}

.plantillas-slide.pc-right2 {
  transform: translateX(122%) translateZ(-160px) rotateY(-36deg) scale(0.6);
  opacity: 0.25;
  filter: brightness(0.5);
  z-index: 2;
}

.plantillas-slide.pc-left1 {
  transform: translateX(-72%) translateZ(-80px) rotateY(28deg) scale(0.78);
  opacity: 0.55;
  filter: brightness(0.7);
  z-index: 5;
}

.plantillas-slide.pc-left2 {
  transform: translateX(-128%) translateZ(-160px) rotateY(36deg) scale(0.6);
  opacity: 0.25;
  filter: brightness(0.5);
  z-index: 2;
}

.plantillas-slide:not(.pc-center) { pointer-events: auto; }
.plantillas-slide.pc-right1:hover,
.plantillas-slide.pc-left1:hover  { opacity: 0.72; }

.plantillas-slide .phone-mockup {
  width: 100%;
  height: 100%;
  margin: 0;
  padding-top: 0;
  overflow: visible;
  align-items: center;
}

.plantillas-slide .phone-mockup img {
  cursor: default;
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.plantillas-carousel-nav {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  position: relative;
  z-index: 20;
  margin-top: 0.75rem;
}

.plantillas-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.18s var(--ease-out-expo);
}

.plantillas-carousel-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(62, 207, 142, 0.06);
  transform: scale(1.08);
}

.plantillas-carousel-btn:active { transform: scale(0.94); }

.plantillas-carousel-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.plantillas-carousel-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: background 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.plantillas-carousel-dots span.pc-dot-active {
  background: var(--accent);
  transform: scale(1.4);
}

@media (max-width: 600px) {
    .plantillas-carousel-track { height: clamp(22rem, 75vw, 28rem); perspective: 600px; }

    .plantillas-carousel {
        padding-block: 0.35rem;
        gap: 1rem;
        margin-inline: 0;
        width: 100%;
    }

    .plantillas-slide {
        width: clamp(13rem, 42vw, 18rem);
        margin-left: calc(clamp(13rem, 42vw, 18rem) / -2);
        height: auto;
    }

    .plantillas-slide {
        overflow: hidden;
        border-radius: var(--radius-lg);
    }
    .plantillas-slide img {
        height: 100%;
        width: 100%;
        max-width: none;
        object-fit: cover;
        object-position: top center;

        clip-path: inset(0 0 22% 0);

        transform: none;
    }

    .plantillas-carousel-nav {
        margin-top: 0.55rem;
    }

    .plantillas-slide.pc-right1 { transform: translateX(66%) translateZ(-60px) rotateY(-22deg) scale(0.72); }
    .plantillas-slide.pc-right2 { transform: translateX(118%) translateZ(-110px) rotateY(-30deg) scale(0.54); }
    .plantillas-slide.pc-left1  { transform: translateX(-66%) translateZ(-60px) rotateY(22deg) scale(0.72); }
    .plantillas-slide.pc-left2  { transform: translateX(-118%) translateZ(-110px) rotateY(30deg) scale(0.54); }
}

@media (min-width: 768px) {
  .plantillas-carousel {
    overflow: visible;
    padding-bottom: 0;
    gap: 0.75rem;
  }

  .plantillas-carousel-track {
    height: clamp(26rem, 40vw, 36rem);
    margin-top: 2rem;
    overflow: visible;
  }

  .plantillas-carousel-nav {
    margin-top: 2.5rem;
  }

  .plantillas-slide {
    width: clamp(19rem, 40vw, 26rem);
    margin-left: calc(clamp(19rem, 40vw, 26rem) / -2);
  }

  .plantillas-slide {
    height: 100%;
    padding-top: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  .plantillas-slide img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-lg);
    transform: none;
  }

  .plantillas-slide:hover img {
    transform: scale(1.02);
  }
}