/* Contenedor principal para centrar y gestionar las imágenes */
.image-gallery-container {
  display: flex; /* Usa Flexbox para alinear las imágenes */
  justify-content: center; /* Centra las imágenes horizontalmente */
  align-items: flex-start; /* Alinea las imágenes por la parte superior */
  gap: 20px; /* Espacio entre las imágenes */
  flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente línea si no caben */
  padding: 20px; /* Añade un poco de padding alrededor del contenedor */
  box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/* Estilo para cada contenedor individual de imagen */
.image-wrapper {
  flex: 1; /* Permite que los wrappers crezcan y se encojan */
  min-width: 250px; /* Ancho mínimo para que no se compriman demasiado */
  max-width: 400px; /* Ancho máximo deseado en estado normal */
  position: relative; /* Necesario para el posicionamiento absoluto del scroll */
  overflow: hidden; /* Oculta el contenido que se sale de los límites */
  cursor: pointer; /* Indica que el elemento es interactivo */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sutil sombra para dar profundidad */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), /* Transición suave para la ampliación */
              box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición para la sombra */
  border-radius: 8px; /* Bordes redondeados */
}

/* Estilo de la imagen dentro del wrapper */
.image-wrapper img {
  display: block; /* Elimina el espacio extra debajo de la imagen */
  width: 100%; /* La imagen ocupa todo el ancho del wrapper */
  height: auto; /* Mantiene la proporción de la imagen */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición para la ampliación de la imagen */
}

/* Estilo cuando el ratón está sobre el wrapper */
.image-wrapper:hover {
  transform: scale(1.05); /* Amplía ligeramente el contenedor */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
  z-index: 10; /* Asegura que la imagen ampliada se superponga correctamente */
  /* No añadimos transform: scale() aquí para evitar el rebote */
}

/* Estilo de la imagen cuando el ratón está sobre el wrapper */
.image-wrapper:hover img {
  transform: scale(1); /* La imagen se mantiene a escala 1 dentro del contenedor ampliado */
  /* Esto es clave para evitar el efecto de rebote, la imagen no se amplía más allá de su contenedor */
}

/* Estilo para permitir el scroll dentro de la imagen ampliada */
.image-wrapper.scrolling-enabled {
  overflow-y: auto; /* Habilita el scroll vertical cuando se activa */
  height: 500px; /* Altura fija para la imagen ampliada, ajusta según necesites */
  max-height: 80vh; /* Limita la altura máxima al 80% del viewport */
  width: 450px; /* Ancho fijo para la imagen ampliada, ajusta según necesites */
  max-width: 90vw; /* Limita el ancho máximo al 90% del viewport */
  transform: scale(1.05); /* Asegura que se mantiene la escala del hover */
}

/* Estilo de la imagen dentro del wrapper con scroll activado */
.image-wrapper.scrolling-enabled img {
  height: auto; /* La altura se ajusta automáticamente al contenido */
  width: 100%; /* La imagen sigue ocupando el ancho del wrapper */
  display: block; /* Asegura que se muestre correctamente */
}

/* Estilos para la barra de scroll (opcional, para un mejor aspecto) */
.image-wrapper.scrolling-enabled::-webkit-scrollbar {
  width: 8px;
}

.image-wrapper.scrolling-enabled::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.image-wrapper.scrolling-enabled::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.image-wrapper.scrolling-enabled::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}