/* Styles for the custom featured carousel (#carouselDestacado)
   Designed to override Bootstrap's default carousel behavior for this specific component.
*/
#carouselDestacado {
  --carousel-height: 520px;
  position: relative;
}

#carouselDestacado .carousel-inner {
  position: relative;
  height: var(--carousel-height);
  overflow: hidden;
}

#carouselDestacado .carousel-item {
  position: absolute;
  inset: 0 0 0 0;
  opacity: 0;
  transition: opacity 420ms ease-in-out;
  display: block;
}

#carouselDestacado .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show full image without cropping */
  display: block;
}

#carouselDestacado .carousel-item.active {
  opacity: 1;
  position: relative; /* active slide participates in flow */
}

/* Controls */
.carousel-destacado-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(0,0,0,0.45);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.carousel-destacado-control:hover { background: rgba(0,0,0,0.7); transform: translateY(-50%) scale(1.02); }
.carousel-destacado-prev { left: 12px; }
.carousel-destacado-next { right: 12px; }

/* Small screens reduce height */
@media (max-width: 991px) {
  #carouselDestacado { --carousel-height: 380px; }
}
@media (max-width: 575px) {
  #carouselDestacado { --carousel-height: 260px; }
  .carousel-destacado-control { width: 40px; height: 40px; }
}

/* Accessibility focus ring */
.carousel-destacado-control:focus { outline: 3px solid rgba(13,110,253,0.28); outline-offset: 2px; }

/* Make sure our custom rules take precedence over Bootstrap where needed */
#carouselDestacado.carousel-destacado .carousel-inner .carousel-item { display: block; }