/* Altura máxima visible del carrusel */
#carousel {
  --carousel-max-h: 640px;  /* altura máxima fija */
}

/* El <img> rellena el ancho disponible hasta 1920px sin deformarse */
#carousel .carousel-inner .item img {
  width: 100%;           /* ocupa todo el ancho disponible */
  max-width: 1600px;     /* no se estira más allá de 1600px */
  height: auto;          /* mantiene proporción */
  max-height: var(--carousel-max-h); /* altura máxima 640px */
  object-fit: cover;     /* cubre el ancho, recortando si hace falta */
  object-position: center;
  display: block;
  margin: 0 auto;        /* centra la imagen en pantallas grandes */
  background: #00000010; /* evita parpadeos/barras en carga */
  position: relative;
}

/* Opcional: en móviles, baja un poco la altura para que quepa más contenido */
@media (max-width: 768px) {
  #carousel {
    --carousel-max-h: 50vh;
  }
  #carousel .carousel-inner .item img {
    object-fit: contain; /* evitar recorte en móviles */
  }
}

/* gradiente izquierda/derecha */
#carousel .carousel-inner::before,
#carousel .carousel-inner::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 11%;
  pointer-events: none;
  z-index: 2;
}

/* pseudo-elemento para gradientes */
#carousel .carousel-inner .item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(0,0,0,0.35), rgba(0,0,0,0) 24%),
    linear-gradient(to left,  rgba(0,0,0,0.35), rgba(0,0,0,0) 24%);
  background-repeat: no-repeat;
  background-size: 24% 100%, 24% 100%;
  background-position: 0 0, 100% 0;
}

/* Flechas por encima del velo */
#carousel .carousel-control { z-index: 3; }

/* Elimina el "viñeteado" lateral de Bootstrap */
#carousel .carousel-control,
#carousel .left.carousel-control,
#carousel .right.carousel-control,
#carousel .carousel-control:hover,
#carousel .carousel-control:focus {
  background-image: none !important;
  background-color: transparent !important;
  filter: none;
}

#carousel .carousel-control::before,
#carousel .carousel-control::after {
  content: none !important;
}

/* Ajustes de altura según el ancho */
@media (min-width: 1981px) {
  #carousel .carousel-inner .item img {
    width: auto;          /* no se estira más allá de 1920px */
    height: var(--carousel-max-h); /* altura máxima 540px */
    margin-bottom: 20px;
  }
}

@media (min-width: 769px) and (max-width: 1920px) {
  #carousel .carousel-inner .item img {
    width: 100%;
    height: auto;          /* se adapta al ancho disponible */
    max-height: var(--carousel-max-h);
    margin-bottom: 20px;
  }
}