/* ========================================================================== 
   MÓDULO: SECCIÓN EXPONOR (Front Page) - Adaptado a Estilos Globales
   ========================================================================== */

/* 1. Contenedor Principal */
.ms-exponor {
    padding: 10px 0 100px 0;
    background-color: var(--color-light-gray, #f4f6f8);
}

/* 2. Contenedor de Ancho Máximo (Para el video) */
.ms-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. Textos de Cabecera  */
.section-header .ms-exponor__description {
    font-size: 1.125rem;
    color: var(--color-text, #4a5568);
    max-width: 700px;
    margin: 20px auto 40px auto;
    line-height: 1.6;
    padding: 0 20px; 
}

/* 4. Contenedor HTML5 */
.ms-exponor__video-wrapper {
    position: relative; 
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    overflow: hidden; 
    background-color: #000; /* Fondo de carga */
}

/* Reproductor Nativos de Video */
.ms-html5-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000; 
    outline: none;
}

/* ========================================================================== 
   SECCIÓN RESPONSIVA (Media Queries)
   ========================================================================== */

/* Tablets (pantallas menores a 992px) */
@media screen and (max-width: 992px) {
    .ms-exponor {
        padding: 60px 0;
    }
}

/* Teléfonos (pantallas menores a 768px) */
@media screen and (max-width: 768px) {
    .ms-exponor {
        padding: 40px 0;
    }

    /* Reducimos el tamaño de la descripción en móviles */
    .section-header .ms-exponor__description {
        font-size: 1rem;
        margin-bottom: 30px; /* Menos espacio entre texto y video */
    }
    .ms-exponor__video-wrapper {
        border-radius: 8px; 
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
}

/* Teléfonos Pequeños (pantallas menores a 480px) */
@media screen and (max-width: 480px) {
    .ms-exponor {
        padding: 30px 0;
    }
}