/* * DESIGN & DEVELOPMENT BY: Antonio Salazar
 * Email: siemprenegoceando@gmail.com
 * -------------------------------------------------------
 */

#carousel {
  position: relative;
  height: 100vh;
  overflow: hidden;
  touch-action: pan-y;
  /* Permite el scroll vertical normal de la página, pero optimiza el manejo del gesto horizontal */
}

#carousel div {
  position: absolute;
  transition: transform 400ms, left 400ms, opacity 400ms, z-index 0s;
  opacity: 1;
}

#carousel div img {
  width: 400px;
  transition: width 400ms;

  /* Propiedades para deshabilitar la selección y el arrastre */
  -webkit-user-drag: none;
  /* WebKit (Chrome, Safari) */
  -moz-user-select: none;
  /* Firefox */
  -webkit-user-select: none;
  /* WebKit (Selección de texto) */
  user-select: none;
  /* Estándar (Otros navegadores) */
  /*
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: 10px;*/
}

/* **Línea corregida:** Se agregó el valor 'pointer' */
#carousel img:hover {
  cursor: pointer;
  /* <--- CORRECCIÓN AQUÍ */
}

#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}

#carousel div.hideLeft img {
  width: 200px;
}

#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}

#carousel div.hideRight img {
  width: 200px;
}

#carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}

#carousel div.prev img {
  width: 300px;
}

#carousel div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}

#carousel div.prevLeftSecond img {
  width: 200px;
}

#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}

#carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}

#carousel div.next img {
  width: 300px;
}

#carousel div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}

#carousel div.nextRightSecond img {
  width: 200px;
}

@media (min-width: 320px) and (max-width: 480px) {}

@media (min-width: 481px) and (max-width: 768px) {}

@media (min-width: 769px) and (max-width: 1024px) {}

@media (min-width: 1025px) and (max-width: 1200px) {}

@media (min-width: 1201px) and (max-width: 1399px) {}

@media (min-width: 1400px) and (max-width: 2400px) {}