/* Añade aquí tu código CSS.

Por ejemplo:
.ejemplo {
    color: red;
}

Para mejorar tu conocimiento sobre CSS, echa un vistazo a https://www.w3schools.com/css/css_syntax.asp

Fin del comentario */ 

/* ================================================= */
/* RESET DE CAPAS (CLAVE) */
/* ================================================= */
body {
    position: relative;
    z-index: 0;
}

/* TODO el contenido normal va arriba */
body > *:not(.mi-video-hero) {
    position: relative;
    z-index: 10;
}

/* ================================================= */
/* VIDEO FONDO GLOBAL */
/* ================================================= */
.mi-video-hero {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -9999; /* 🔥 fondo REAL */
    overflow: hidden;
    pointer-events: none; /* no bloquea clics */
}

/* Carrusel */
.mi-video-hero .video-bg-carousel {
    position: absolute;
    inset: 0;
}

/* Videos */
.mi-video-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.2s ease, transform 1.5s ease;
}

/* Video activo */
.mi-video-hero video.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* Overlay */
.mi-video-hero .overlay-dark {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2;
}

/* ================================================= */
/* RESPONSIVE CON BOOTSTRAP */
/* ================================================= */
@media (max-width: 768px) {
    .mi-video-hero video {
        object-fit: cover;
    }
    .mi-video-hero .overlay-dark {
        background: rgba(0,0,0,0.6);
    }
}

@media (max-width: 576px) {
    .mi-video-hero {
        height: 100vh;
    }
}