/*--------------------------------------------------------------
# ESTILOS ADICIONALES PARA SWIPER (mantener CSS existente intacto)
--------------------------------------------------------------*/

/* Puntos Swiper con mis colores */
.carruselProductos .swiper-pagination-bullet {
  background: var(--naranja);
  opacity: 0.3;
}
.carruselProductos .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Flechas estilo Bootstrap control */
.carruselProductos .swiper-button-prev,
.carruselProductos .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--azulo);
}
.carruselProductos .swiper-button-prev::after,
.carruselProductos .swiper-button-next::after {
  font-size: 18px;
  color: #fff;
}

/* Espaciado inferior para paginación */
.carruselProductos .swiper-pagination {
  bottom: -3rem;
}

/* Ajuste de altura uniforme para slides */
.carruselProductos .swiper-slide {
  height: auto;
  display: flex;
}

.carruselProductos .swiper-slide .caja-producto {
  display: flex;
  flex-direction: column;

}






.carruselProductos-swiper { overflow: hidden; } /* asegura el recorte correcto */