/* Estructura del carrusel principal */
.gallery-slider {
  width: 100%;
  height: auto; /* Ajusta automáticamente la altura */
  margin-bottom: 10px;
}

.gallery-slider .swiper-slide {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 550px; /* Fija la altura estándar del carrusel principal */
}

.gallery-slider .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Mantiene la proporción y deja espacio blanco si es necesario */
}

/* Estructura del carrusel de miniaturas */
.gallery-thumbs {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.gallery-thumbs .swiper-slide {
  width: auto; /* Ajusta el ancho dinámico de las miniaturas */
  height: 100px; /* Mantén una altura constante para las miniaturas */
  opacity: 0.5; /* Las miniaturas no activas tienen menor opacidad */
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1; /* Miniatura activa más visible */
}

.gallery-thumbs .swiper-slide img {
  width: auto;
  height: 100%;
  object-fit: cover; /* Asegura que la miniatura mantenga proporciones */
}

/* Botones de navegación */
.swiper-button-next, .swiper-button-prev {
  color: #ff6d00; /* Personaliza el color de los botones */
}

/* Opcional: mejora la visibilidad de los botones en dispositivos móviles */
@media (max-width: 768px) {
  .swiper-button-next, .swiper-button-prev {
    display: none; /* Ocultar los botones en pantallas pequeñas si lo prefieres */
  }
}