.bg-white {
  background-color: white;
}
.layout{
  display: initial;
}
/* Contenedor principal del slider */
.image-slider-container {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding-bottom: 25px; /* Espacio extra para que la barra sea cómoda */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* Cada ítem de la galería */
.image-slider-item {
  flex: 0 0 auto;            /* Evita que las imágenes se encojan */
  width: 300px;              /* Ancho fijo para cada imagen (ajústalo a tu gusto) */
  scroll-snap-align: start;  /* Punto de anclaje para el scroll */
}

/* Ajuste de la imagen dentro del contenedor */
.image-slider-item img {
  width: 100%;               /* Que ocupe todo el ancho del ítem */
  height: auto;              /* Mantiene la proporción */
  display: block;
  border-radius: 8px;        /* Opcional: bordes redondeados */
}

/* 2. DISEÑO DE LA BARRA DE SCROLL (Navegadores Chrome, Edge, Safari) */

/* Tamaño de la barra (Grosor) */
.image-slider-container::-webkit-scrollbar {
  height: 14px; /* Más gruesa para que se vea bien */
}

/* El fondo de la barra (Track) */
.image-slider-container::-webkit-scrollbar-track {
  background: #f1f1f1;       /* Color gris muy claro */
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1); /* Sombra interna para profundidad */
}

/* La pieza que se mueve (Thumb) */
.image-slider-container::-webkit-scrollbar-thumb {
  background: #444;          /* Color oscuro para alto contraste */
  border-radius: 10px;
  border: 3px solid #f1f1f1; /* Crea un efecto de separación del borde */
}

/* Efecto al pasar el ratón por encima */
.image-slider-container::-webkit-scrollbar-thumb:hover {
  background: #000;          /* Se vuelve negra al tocarla */
}

/* 3. Soporte para Firefox (usa propiedades distintas) */
.image-slider-container {
  scrollbar-width: auto;     /* 'auto' es más gruesa que 'thin' */
  scrollbar-color: #444 #f1f1f1; /* color del tirador y del fondo */
}