/* === Carrusel 1 por 1 (banner) === */
.carousel{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.carousel__viewport{
  overflow: hidden;
  width: 100%;
  border-radius: 10px;
}

.carousel__track{
  display: flex;
  transform: translateX(0);
  transition: transform .55s ease;
  will-change: transform;
}

/* Cada item ocupa el 100% del viewport => 1 imagen por vez */
.carousel__item{
  flex: 0 0 100%;
  display: block;
}

.carousel__item img{
  display: block;
  width: 100%;
  height: 420px;          /* carrusel NO crece */
  object-fit: contain;    /* ? muestra la imagen completa */
  object-position: center;
  border-radius: 10px;
  background: #137CBF;       /* para que se vea limpio si sobran espacios */
}

/* Flechas */
.carousel__arrow{
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
  opacity: .95;
}

.carousel__arrow svg{
  width: 26px;
  height: 26px;
}

/* Hover / feedback */
.carousel__arrow:hover{ opacity: 1; }
.carousel__arrow:active{ transform: scale(.97); }

/* Responsivo */
@media(max-width:991px){
  .carousel__item img{ height: 240px; } /* 100px es muy poco; por eso se ve*