.section_loader {
    position: fixed;
    align-items: center;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
}

.loader {
    background-color: antiquewhite;
    position: relative;
    width: 40px;
    height: 40px;
}

.loader .loader_1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid orange;
    border-left-color: transparent;
    border-bottom: none;
}

/* Asegura que el video ocupe el 100% del ancho disponible */
#hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

/* Hacer que el video se ajuste al tamaño de la pantalla */
#hero video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video cubra toda el área sin distorsionarse */
}

/* Hacer que la imagen del logo sea responsiva */
#hero .promo {
    text-align: center;
}

#hero .loguito {
    width: 40%; /* Empieza con el logo al 50% del contenedor */
    height: auto;
    max-width: 600px; /* Limita el tamaño máximo del logo */
}

/* Capa encima del video (opcional, si usas alguna superposición) */
#hero .capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparente */
}

/* Media Queries para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    /* Ajuste de logo para pantallas más pequeñas */
    #hero .loguito {
        width: 100%; /* Aumenta el tamaño del logo en móviles */
        max-width: 100px; /* Limita el tamaño máximo */
        margin-top: 80px;
    }

    /* Ajuste del video para pantallas pequeñas */
    #hero video {
        object-fit: cover; /* Asegura que el video cubra completamente sin distorsionarse */
    }

}

@media (max-width: 480px) {
    /* Ajuste aún más en pantallas muy pequeñas (móviles más pequeños) */
    #hero .loguito {
        width: 90%; /* Hacer el logo casi al 100% en móviles muy pequeños */
        max-width: 300px; /* Limita el tamaño máximo */
    }

    #hero video {
        object-fit: cover; /* El video sigue cubriendo toda la pantalla */
    }
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #030716;
    opacity: 0.5;
}

.promo {
    padding-top: 5px;
    color: rgb(255, 0, 0);
    flex-direction: column;
    justify-content: top;
    align-items: center;
    display: flex;
    position: relative;
    z-index: 1;
}

.titulito {
    display: flexbox;
    font-size: 50px;
    position: absolute;
    align-items: center;
    text-align: center;

}

.titulito:hover:after {
    transform: scaleY(1);
    color: #ffffff;
    transform-origin: bottom top;
    opacity: 1;
    transition: 2s;
}

.loguito{     /* Ajusta el tamaño de la imagen */
    transform: scale(1); /* La imagen será un 10% más grande permanentemente */
    animation: agrandar 3s ease-in-out forwards;
}

@keyframes agrandar {
    
    0% {
        transform: scale(0.8);
        opacity: 0.3;
    }

    100% {
        transform: scale(1);
        opacity: (1);
    }
    
}

.producto{     /* Ajusta el tamaño de la imagen */
    transform: scale(0.8); /* La imagen será un 10% más grande permanentemente */
    opacity: 0.7;        /* La imagen tendrá una opacidad del 80% permanentemente */
    transition: transform 1s ease, opacity 0.3s ease; /
}

.producto:hover{
    opacity: 1;
    transform: scale(1.0);
    filter: contrast(1.1);
}

.marquee-text {
    display: inline-block; /* Hace que el texto se muestre en una sola línea */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

@media (max-width: 576px) {
    .h1 {
        font-size: 25px; /* Puedes ajustar este valor según tu preferencia */
    }

    .sobrenosotros{
        font-size: 10vw;
    }
}