/* Contenedor general */
.carrusel-facebook-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
}

.img-slide {
    cursor: default; /* indica que no es clickeable */
}



.carrusel-container {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
    padding: 0 20px;
    height: 700px; 
    gap: 30px; 
}

/* Primer carrusel */
#inicio {
    flex-grow: 2; 
    width: 60%;
    height: 100%; 
}

    #inicio .carousel-item img {
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }

/* Segundo carrusel */
#nuevoCarrusel {
    flex-grow: 1; 
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

    #nuevoCarrusel .carousel-wrapper {
        width: 100%;
        height: 250px; 
    }

    #nuevoCarrusel .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: contain; 
    }

/* Facebook page */
.fb-page {
    margin-top: 20px;
    width: 100%;
    margin-left: 6px;
}

/* Centrar siempre el modal */
.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto; /* asegura centrado horizontal y vertical */
}


.modal-content {
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 100vh;
}

    .video-container video {
        max-width: 100%;
        max-height: 100vh;
        object-fit: contain;
    }

@media (max-width: 576px) {
    .modal-dialog {
        max-width: 80%; 

    }
    .btn-close {
        width: 2.5rem;
        height: 2.5rem;
    }
    .video-container video {
        max-height: 60vh; 
    }
}