/* FIX VIDEO - ESTILOS QUE GANAN SOBRE TODOS */
/* Este archivo DEBE cargarse AL FINAL de todos los CSS */

/* Resetear todo lo relacionado con hero */
*[class*="hero"] {
    all: unset !important;
}

.hero-section {
    height: 30vh !important;
    min-height: 300px !important;
    max-height: 500px !important;
    width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    background: #000 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.hero-bg-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
}

/* Matar cualquier flex/grid que esté interfiriendo */
.hero-section .container,
.hero-section .row,
.hero-section .col,
.hero-section div,
.hero-section section {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Media queries para mantener consistencia */
@media (max-width: 991px) {
    .hero-section {
        height: 30vh !important;
        min-height: 300px !important;
    }
    .hero-bg-video {
        object-fit: contain !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        height: 30vh !important;
        min-height: 250px !important;
    }
    .hero-bg-video {
        object-fit: contain !important;
    }
}

@media (max-width: 575px) {
    .hero-section {
        height: 30vh !important;
        min-height: 200px !important;
    }
    .hero-bg-video {
        object-fit: contain !important;
    }
}