/* //carrusel css */

    html {
        scroll-behavior: smooth;
    }

    .hero {
        /* position: relative; */
        height: 80vh;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        transition: background-image 1s ease-in-out;
    }

    @media (min-width: 768px) {
        .hero {
            height: 86vh;
        }
    }

    .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .hero-background.active {
        opacity: 1;
    }


    
.hero-viewport {
  position: sticky;
  top: 0;
  height: 100vh;          /* ocupa la altura de la ventana */
  overflow: hidden;       /* recorta las imágenes al viewport */
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* cubre sin deformar */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

.slide.active { opacity: 1; }