/* POSIÇÕES COM O MESMO EFEITO DO SEU DESIGN */

/* animação suave */
.carousel-card {
  transition: all 0.35s ease;
  touch-action: pan-y;
}

.carousel-pos-1 {
  transform: translateX(-140%) scale(0.8);
  opacity: 0.5;
  z-index: 5;
}

.carousel-pos-2 {
  transform: translateX(0) scale(1.2);
  opacity: 1;
  z-index: 20;
}

.carousel-pos-3 {
  transform: translateX(140%) scale(0.8);
  opacity: 0.5;
  z-index: 5;
}

.carousel-card {
  transition: all 0.45s ease;
}


/* 📱 MOBILE — telas até 480px */
@media (max-width: 480px) {

  /* reduz tamanho */
  [data-card] > div {
    width: 160px !important;
  }

  /* card lateral aparece 25% do lado */
  .carousel-pos-1 {
    transform: translateX(-65%) scale(0.85);
  }

  .carousel-pos-2 {
    transform: translateX(0) scale(1);
  }

  .carousel-pos-3 {
    transform: translateX(65%) scale(0.85);
  }
}

/* 📱 ULTRA-MOBILE (iPhone SE, 320px–360px) */
@media (max-width: 360px) {

  /* mais redução */
  [data-card] > div {
    width: 220px !important;
  }

  /* deixa ainda mais para dentro */
  .carousel-pos-1 {
    transform: translateX(-47%) scale(0.8);
  }

  .carousel-pos-2 {
    transform: translateX(0) scale(1);
  }

  .carousel-pos-3 {
    transform: translateX(47%) scale(0.8);
  }
}