/* ==================================================
   ESTILOS ESPECÍFICOS PARA CARRUSEL (SWIPER)
================================================== */

/* Contenedor principal del carrusel */
.swiper-container {
  width: 100%;
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}

/* Ajustes para el carrusel de soluciones solares */
#soluciones-section .swiper {
  padding-bottom: 3rem; /* Espacio para la paginación */
}

/* Estilos para las diapositivas */
#soluciones-section .swiper-slide {
  height: auto; /* Altura automática basada en el contenido */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover en las diapositivas */
#soluciones-section .swiper-slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Estilos específicos para las imágenes dentro del carrusel */
#soluciones-section .swiper-slide div img {
  width: 10rem; /* Tamaño fijo para las imágenes */
  height: 10rem;
  object-fit: contain; /* Mantiene la proporción sin recortar */
  margin-bottom: 2rem; /* Espaciado inferior */
  transition: transform 0.3s ease;
}

/* Efecto hover en las imágenes */
#soluciones-section .swiper-slide:hover div img {
  transform: scale(1.05); /* Efecto de aumento de imagen al pasar el mouse */
}

/* Botones de navegación personalizados */
.custom-swiper-btn {
  width: 3rem;
  height: 3rem;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

/* Posicionamiento de los botones */
.swiper-button-prev.custom-swiper-btn {
  left: 10px;
}

.swiper-button-next.custom-swiper-btn {
  right: 10px;
}

/* Efecto hover en los botones */
.custom-swiper-btn:hover {
  background-color: #f3f4f6;
  transform: translateY(-50%) scale(1.1);
}

/* Paginación personalizada */
.swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 2rem;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #15803d;
  transform: scale(1.2);
}

/* Ajustes responsive */
@media (max-width: 640px) {
  .custom-swiper-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  #soluciones-section .swiper-slide div img {
    width: 8rem;
    height: 8rem;
  }
}