/* =============================================================================
   Scoped Elementor Carousel CSS – todas las reglas van precedidas de .mi-carousel
   para evitar conflictos con el resto de style.css
   ============================================================================= */

/* Reset box-sizing sólo dentro del carrusel */
.mi-carousel .elementor *,
.mi-carousel .elementor :after,
.mi-carousel .elementor :before {
  box-sizing: border-box;
}

/* Contenedores de Elementor siempre al 100% de ancho dentro de .mi-carousel */
.mi-carousel .e-con.e-con > .e-con-inner > .elementor-widget,
.mi-carousel .elementor.elementor .e-con > .elementor-widget {
  max-width: 100%;
}

/* Variables para número de slides según breakpoints */
.mi-carousel .elementor-element.elementor-element-0b99481 {
  --e-image-carousel-slides-to-show: 6;
}
@media (max-width: 1024px) {
  .mi-carousel .elementor-element.elementor-element-0b99481 {
    --e-image-carousel-slides-to-show: 4;
  }
}
@media (max-width: 767px) {
  .mi-carousel .elementor-element.elementor-element-0b99481 {
    --e-image-carousel-slides-to-show: 2;
  }
}

/* — Swiper Container — */
.mi-carousel .swiper-container {
  width: 100%;
  overflow: hidden;
}

/* Scroll continuo  */
.mi-carousel .swiper-wrapper {
  display: flex;
  animation: scroll-carousel var(--carousel-duration) linear infinite;
  will-change: transform; /* acelera el repaint */
}
@keyframes scroll-carousel {
  from   { transform: translateX(0); }
  to     { transform: translateX(calc(-1 * var(--carousel-distance))); }
}

/* Cada slide sigue igual de centrado y uniforme */
.mi-carousel .swiper-slide {
  flex: 0 0 auto;
  width: 10%;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mi-carousel .swiper-slide:last-child { margin-right: 0; }

.mi-carousel .swiper-slide img {
  max-height: 80px;     /* altura fija */
  max-width: 100%;      /* no exceder el ancho del slide */
  width: auto;          /* mantiene proporción */
  object-fit: contain;  
  display: block;
  opacity: 0.7;
  transition: opacity .3s ease;
}
.mi-carousel .swiper-slide img:hover {
  opacity: 1;
}

/* — Paginación (bullets) — */
.mi-carousel .swiper-pagination {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
}


/* =============================================================================
   Fin de carousel.elementor.css
   ============================================================================= */