html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  height: 400px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

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

#carousel div img {
  width: 400px;
  transition: width 1s;
}

#carousel .hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel .hideLeft img { width: 200px; }

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

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

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

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

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

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

.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}

/* === STYLES PARA EL LIGHTBOX === */
#modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 100;
}
#modal.show {
  display: flex;
}
#modal img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#modal #close {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 2.5rem;
  color: white;
  cursor: pointer;
}