/* ==================================================
   SLIDER CSS - Estilos para transiciones automáticas
   ================================================== */

/* Contenedor principal del banner/slider */
.banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Estilos base para cada slide */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Slide activo - visible */
.slide.active {
  opacity: 1;
}

/* Contenedor picture dentro del slide */
.slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Imagen responsiva dentro de picture */
.slide picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   ================================================== */

/* Desktop pequeño (máx. 1920px) */
@media (max-width: 1920px) {
  .banner {
    aspect-ratio: 16 / 9;
  }
}

/* Tablet y móvil (máx. 992px) */
@media (max-width: 992px) {
  .banner {
    aspect-ratio: 16 / 9;
  }
}

/* Móviles pequeños (máx. 576px) */
@media (max-width: 576px) {
  .banner {
    aspect-ratio: 4 / 5;
  }
}