/* Definición de variables de color */
:root {
    --azul-cobalto: #0047AB;
    /* Color azul cobalto */
    --blanco: #FFFFFF;
    /* Color blanco */
    --negro: #000000;
    /* Negro puro */
    /* Color negro */
}

/* Estilos generales para todos los elementos */
* {
    margin: 0;
    /* Elimina el margen por defecto */
    padding: 0;
    /* Elimina el padding por defecto */
    box-sizing: border-box;
    /* Incluye padding y border en el tamaño total del elemento */
    font-family: 'Inter', sans-serif;
    /* Fuente predeterminada */
}

/* Estilos para el cuerpo de la página */
body {
    background: var(--blanco);
    /* Fondo blanco */
    overflow-x: hidden;
    /* Oculta el desplazamiento horizontal */
}

/* Sección del video de fondo */
.video-hero {
    height: calc(80vh);
    /* Altura del viewport menos 40px */
    position: relative;
    /* Posición relativa para contener elementos absolutos */
    overflow: hidden;
    /* Oculta el contenido que se desborda */
    background: var(--negro);
    /* Fondo negro */
}

/* Contenedor del video */
#video-container {
    width: 110%;
    /* Ancho completo */
    height: 100%;
    /* Altura completa */
    position: absolute;
    /* Posición absoluta para cubrir el contenedor */
    top: 60px;
    /* Alineado en la parte superior */
    left: 80px;
    /* Alineado a la izquierda */
}

/* Superposición del video (texto y otros elementos) */
.video-overlay {
    position: absolute;
    /* Posición absoluta para superponer el video */
    top: 40%;
    /* Posición vertical del texto */
    left: 40;
    /* Posición horizontal del texto */
    transform: translateY(-50%);
    /* Centra verticalmente */
    color: var(--blanco);
    /* Color del texto blanco */
    max-width: 600px;
    /* Ancho máximo del texto */
    z-index: 2;
    /* Capa superior */
}

/* Título principal */
.main-title {
    font-size: clamp(2.2rem, 2.2vw, 4rem);
    /* Tamaño de fuente grande */
    line-height: 1.1;
    /* Espaciado entre líneas */
    margin-bottom: 1.5rem;
    /* Margen inferior */
    border-left: 6px solid var(--azul-cobalto);
    /* Línea azul a la izquierda */
    padding-left: 2rem;
    /* Espaciado interno a la izquierda */
    text-shadow: 0 0 10px rgba(0, 71, 171, 0.8), 0 0 20px rgba(0, 71, 171, 0.6);
    /* Efecto de sombra azul */
}

/* Parte del título en color azul */
.main-title span {
    color: var(--azul-cobalto);
    /* Color azul */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
    /* Efecto de sombra blanca */
}

/* Contenedor del control de volumen */
.volume-container {
    position: absolute;
    /* Posición absoluta */
    bottom: 40px;
    /* Alineado en la parte inferior */
    left: 470px;
    /* Alineado a la izquierda */
    z-index: 3;
    /* Capa superior */
    display: flex;
    /* Flexbox para alinear elementos */
    align-items: center;
    /* Centra verticalmente */
    gap: 15px;
    /* Espacio entre elementos */
    opacity: 0;
    /* Oculto por defecto */
    transition: opacity 0.3s ease;
    /* Transición suave */
}

/* Mostrar el control de volumen al hacer hover */
.video-hero:hover .volume-container {
    opacity: 1;
    /* Visible al hacer hover */
}

/* Estilos del control de volumen */
.volume-control {
    display: flex;
    /* Flexbox para alinear elementos */
    align-items: center;
    /* Centra verticalmente */
    gap: 10px;
    /* Espacio entre elementos */
    background: rgba(255, 255, 255, 0.15);
    /* Fondo semitransparente */
    padding: 10px 15px;
    /* Espaciado interno */
    border-radius: 25px;
    /* Bordes redondeados */
    backdrop-filter: blur(10px);
    /* Efecto de desenfoque */
    transition: all 0.3s ease;
    /* Transición suave */
}

/* Icono del volumen */
.volume-icon {
    width: 40px;
    /* Ancho del icono */
    height: 40px;
    /* Altura del icono */
    border-radius: 50%;
    /* Forma circular */
    background: var(--azul-cobalto);
    /* Fondo azul */
    display: flex;
    /* Flexbox para centrar contenido */
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    /* Centra horizontalmente */
    cursor: pointer;
    /* Cursor de puntero */
}

/* Icono dentro del botón de volumen */
.volume-icon i {
    color: var(--blanco);
    /* Color blanco */
    font-size: 1.2rem;
    /* Tamaño de fuente */
}

/* Barra deslizante del volumen */
.volume-slider {
    width: 100px;
    /* Ancho de la barra */
    height: 4px;
    /* Altura de la barra */
    -webkit-appearance: none;
    /* Elimina el estilo por defecto en navegadores WebKit (Chrome, Safari) */
    -moz-appearance: none;
    /* Elimina el estilo por defecto en navegadores Firefox */
    appearance: none;
    /* Elimina el estilo por defecto en navegadores modernos */
    background: rgba(255, 255, 255, 0.2);
    /* Fondo semitransparente */
    border-radius: 2px;
    /* Bordes redondeados */
    outline: none;
    /* Elimina el contorno al enfocar */
    opacity: 1;
    /* Opacidad completa */
    transition: opacity 0.3s ease;
    /* Transición suave para cambios de opacidad */
}

/* Estilo del control deslizante (thumb) para navegadores WebKit */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Elimina el estilo por defecto */
    width: 15px;
    /* Ancho del control deslizante */
    height: 15px;
    /* Altura del control deslizante */
    background: var(--blanco);
    /* Fondo blanco */
    border-radius: 50%;
    /* Forma circular */
    cursor: pointer;
    /* Cursor de puntero */
}

/* Estilo del control deslizante (thumb) para navegadores Firefox */
.volume-slider::-moz-range-thumb {
    width: 15px;
    /* Ancho del control deslizante */
    height: 15px;
    /* Altura del control deslizante */
    background: var(--blanco);
    /* Fondo blanco */
    border-radius: 50%;
    /* Forma circular */
    cursor: pointer;
    /* Cursor de puntero */
}

/* Mostrar la barra deslizante al hacer hover */
.volume-control:hover .volume-slider {
    opacity: 1;
    /* Opacidad completa */
}

/* Secciones mejoradas */
.integrated-section {
    padding: 100px 20px;
    /* Espaciado interno */
    position: relative;
    /* Posición relativa */
}

/* Contenedor de la sección fusionada */
.fusion-container {
    max-width: 1600px;
    /* Ancho máximo */
    margin: 0 auto;
    /* Centrado horizontal */
    display: grid;
    /* Grid layout */
    grid-template-columns: 1fr 1fr;
    /* Dos columnas */
    min-height: 600px;
    /* Altura mínima */
    border-radius: 30px;
    /* Bordes redondeados */
    overflow: hidden;
    /* Oculta el contenido que se desborda */
    box-shadow: 0 0 20px rgba(0, 71, 171, 0.5), 0 0 40px rgba(0, 71, 171, 0.3);
    /* Sombra azul */
    position: relative;
    /* Posición relativa */
}

/* Texto dentro de la sección fusionada */
.text-fusion {
    padding: 60px;
    /* Espaciado interno */
    background: var(--blanco);
    /* Fondo blanco */
    display: flex;
    /* Flexbox para alinear contenido */
    flex-direction: column;
    /* Dirección vertical */
    justify-content: center;
    /* Centra verticalmente */
    position: relative;
    /* Posición relativa */
}

/* Línea azul en el lado izquierdo */
.text-fusion.line-left::before {
    content: '';
    /* Contenido vacío */
    position: absolute;
    /* Posición absoluta */
    top: 0;
    /* Alineado en la parte superior */
    left: 0;
    /* Alineado a la izquierda */
    width: 6px;
    /* Ancho de la línea */
    height: 100%;
    /* Altura completa */
    background: var(--azul-cobalto);
    /* Fondo azul */
    box-shadow: 0 0 10px rgba(0, 71, 171, 0.8), 0 0 20px rgba(0, 71, 171, 0.6);
    /* Sombra azul */
}

/* Línea azul en el lado derecho */
.text-fusion.line-right::before {
    content: '';
    /* Contenido vacío */
    position: absolute;
    /* Posición absoluta */
    top: 0;
    /* Alineado en la parte superior */
    right: 0;
    /* Alineado a la derecha */
    width: 6px;
    /* Ancho de la línea */
    height: 100%;
    /* Altura completa */
    background: var(--azul-cobalto);
    /* Fondo azul */
    box-shadow: 0 0 10px rgba(0, 71, 171, 0.8), 0 0 20px rgba(0, 71, 171, 0.6);
    /* Sombra azul */
}

/* Título de la sección */
.section-title {
    font-size: 2.8rem;
    /* Tamaño de fuente */
    color: var(--azul-cobalto);
    /* Color azul */
    margin-bottom: 30px;
    /* Margen inferior */
    line-height: 1.2;
    /* Espaciado entre líneas */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
    /* Sombra blanca */
    text-align: center; /* Centra el título */
}

/* Texto de la sección */
.section-text {
    font-size: 1.5rem;
    /* Tamaño de fuente */
    line-height: 1.8;
    /* Espaciado entre líneas */
    color: #444;
    /* Color de texto gris */
    text-align: justify; /* Justifica el texto */
}


/* Imagen dentro de la sección fusionada */
.image-fusion {
    background: var(--azul-cobalto);
    /* Fondo azul */
    position: relative;
    /* Posición relativa */
    overflow: hidden;
    /* Oculta el contenido que se desborda */
}

/* Imagen dentro del contenedor */
.image-fusion img {
    width: 100%;
    /* Ancho completo */
    height: 100%;
    /* Altura completa */
    object-fit: cover;
    /* Ajusta la imagen al contenedor */
    opacity: 0.95;
    /* Opacidad ligeramente reducida */
}

/* Superposición de la imagen */
.image-overlay {
    position: absolute;
    /* Posición absoluta */
    width: 100%;
    /* Ancho completo */
    height: 100%;
    /* Altura completa */
    background: rgba(0, 71, 171, 0.1);
    /* Fondo semitransparente */
}

/* Línea divisoria azul para cada sección */
section {
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    padding-bottom: 40px; /* Espacio para la línea */
}

section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Ancho de la línea */
    height: 1px; /* Grosor de la línea */
    background: var(--azul-cobalto); /* Color azul cobalto */
    box-shadow: 0 0 10px var(--azul-cobalto), 0 0 20px var(--azul-cobalto); /* Efecto de neón */
}


/* Estilos responsivos para pantallas de 1024 */
@media (max-width: 1600px) {
    .video-hero {
        height: 92vh;
        /* Altura relativa al viewport */
        display: flex;
        flex-direction: column;
        /* Organiza los elementos en columna */
        align-items: flex-start;
        /* Alinea los elementos a la izquierda */
        justify-content: flex-start;
        /* Alinea el contenido en la parte superior */
        padding-top: 40%;
        /* Espacio superior relativo al 10% del contenedor */
        padding-left: 5%;
        /* Espacio a la izquierda relativo al 5% del contenedor */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    .video-overlay {
        position: absolute;
        /* Posicionamiento absoluto dentro de .video-hero */
        text-align: left;
        /* Alinea el texto a la izquierda */
        transform: none;
        /* Elimina cualquier transformación */
        max-width: 40%;
        /* Limita el ancho del texto */
        margin-bottom: 15px;
        /* Espaciado en la parte inferior */
        top: 74%;
        /* Mueve el texto un 30% hacia abajo dentro del contenedor */
        left: 5%;
        /* Mueve el texto un 5% hacia la derecha dentro del contenedor */
    }

    .main-title {
        font-size: clamp(1rem, 2vw, 1.3rem);
        /* Tamaño de fuente responsivo */
        font-weight: bold;
        /* Hace que el texto sea más grueso */
        line-height: 1.2;
        /* Ajusta el espacio entre líneas */
        padding-left: 10px;
        /* Espaciado interno a la izquierda */
        border-left: 4px solid #007bff;
        /* Agrega una línea azul a la izquierda */
        text-align: left;
        /* Alinea el texto a la izquierda */
    }

    /* Contenedor del video */
    #video-container {
        width: 132%;
        /* Ocupa el 100% del ancho */
        height: 100%;
        /* Mantiene la altura completa de la sección */
        position: absolute;
        /* Posición absoluta dentro del contenedor padre */
        top: 0px;
        /* Desplaza el video hacia abajo */
        left: 50%;
        /* Lo coloca en el centro horizontalmente */
        transform: translateX(-50%);
        /* Lo ajusta exactamente al centro */
    }

    /* Control de volumen más pequeño y movido hacia arriba */
    /* Control de volumen más pequeño y movido hacia arriba */
    .volume-container {
        bottom: 12%;
        /* Posiciona el control de volumen más arriba */
        left: 30%;
        /* Centra ligeramente el control de volumen */
        transform: translateX(-50%) scale(0.8);
        /* Reduce el tamaño del control */
    }

    .volume-control {
        padding: 5px 10px;
        /* Reduce el espacio interno del control de volumen */
        gap: 8px;
        /* Reduce la separación entre los elementos internos */
    }

    .volume-icon {
        width: 25px;
        /* Reduce el tamaño del ícono de volumen */
        height: 25px;
    }

    .volume-icon i {
        font-size: 0.9rem;
        /* Reduce el tamaño del ícono */
    }

    .volume-slider {
        width: 70px;
        /* Hace la barra de volumen más corta */
    }


    /* Secciones integradas */
    .integrated-section {
        padding: 40px 8px;
        /* Espaciado reducido */
    }

    .fusion-container {
        max-width: 1300px;
        /* Ancho máximo reducido */
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Dos columnas de igual tamaño */
        min-height: 450px;
        /* Altura mínima reducida */
        border-radius: 8px;
        /* Bordes más pequeños */
        box-shadow: 0 0 8px rgba(0, 71, 171, 0.3);
        /* Sombra más suave */
    }

    .text-fusion {
        padding: 20px;
        /* Espaciado interno reducido */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    /* Línea azul en el lado izquierdo */
    .text-fusion.line-left::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        left: 0;
        /* Alineado a la izquierda */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    /* Línea azul en el lado derecho */
    .text-fusion.line-right::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        right: 0;
        /* Alineado a la derecha */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    .section-title {
        font-size: 2rem; /* Tamaño de fuente reducido */
        margin-bottom: 10px; /* Margen inferior reducido */
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); /* Sombra más suave */
        text-align: center; /* Centra el título */
    }

    .section-text {
        font-size: 1.3rem; /* Tamaño de fuente reducido */
        line-height: 1.4; /* Espaciado entre líneas */
        color: #555; /* Color de texto */
        text-align: justify; /* Justifica el texto */
    }

    .image-fusion {
        height: 450px;
        /* Altura reducida */
    }

    .image-fusion img {
        opacity: 0.95;
        /* Opacidad ligeramente reducida */
        object-position: center 30%;
        /* Ajusta la posición de la imagen */
    }

    .image-overlay {
        background: rgba(0, 71, 171, 0.1);
        /* Fondo semitransparente */
    }


    .integrated-section:nth-child(even) .text-fusion {
        order: 1;
        /* Texto a la derecha */
        padding-top: 10px;
        /* Espaciado superior reducido */
    }

    .integrated-section:nth-child(even) .image-fusion {
        order: 2;
        /* Imagen a la izquierda */
        height: 450px;
        /* Altura reducida */
    }

    /* Optimización de espacios */
    .section-title br,
    .section-text br {
        display: none;
        /* Elimina saltos de línea innecesarios */
    }

}

/* Estilos responsivos para pantallas de 1250 */
@media (max-width: 1250px) {
    .video-hero {
        height: 70vh;
        /* Altura relativa al viewport */
        display: flex;
        flex-direction: column;
        /* Organiza los elementos en columna */
        align-items: flex-start;
        /* Alinea los elementos a la izquierda */
        justify-content: flex-start;
        /* Alinea el contenido en la parte superior */
        padding-top: 40%;
        /* Espacio superior relativo al 10% del contenedor */
        padding-left: 5%;
        /* Espacio a la izquierda relativo al 5% del contenedor */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    .video-overlay {
        position: absolute;
        /* Posicionamiento absoluto dentro de .video-hero */
        text-align: left;
        /* Alinea el texto a la izquierda */
        transform: none;
        /* Elimina cualquier transformación */
        max-width: 40%;
        /* Limita el ancho del texto */
        margin-bottom: 15px;
        /* Espaciado en la parte inferior */
        top: 72%;
        /* Mueve el texto un 30% hacia abajo dentro del contenedor */
        left: 5%;
        /* Mueve el texto un 5% hacia la derecha dentro del contenedor */
    }

    .main-title {
        font-size: clamp(1rem, 2vw, 1.3rem);
        /* Tamaño de fuente responsivo */
        font-weight: bold;
        /* Hace que el texto sea más grueso */
        line-height: 1.2;
        /* Ajusta el espacio entre líneas */
        padding-left: 10px;
        /* Espaciado interno a la izquierda */
        border-left: 4px solid #007bff;
        /* Agrega una línea azul a la izquierda */
        text-align: left;
        /* Alinea el texto a la izquierda */
    }

    /* Contenedor del video */
    #video-container {
        width: 132%;
        /* Ocupa el 100% del ancho */
        height: 100%;
        /* Mantiene la altura completa de la sección */
        position: absolute;
        /* Posición absoluta dentro del contenedor padre */
        top: 0px;
        /* Desplaza el video hacia abajo */
        left: 50%;
        /* Lo coloca en el centro horizontalmente */
        transform: translateX(-50%);
        /* Lo ajusta exactamente al centro */
    }

    /* Control de volumen más pequeño y movido hacia arriba */
    /* Control de volumen más pequeño y movido hacia arriba */
    .volume-container {
        bottom: 12%;
        /* Posiciona el control de volumen más arriba */
        left: 40%;
        /* Centra ligeramente el control de volumen */
        transform: translateX(-50%) scale(0.8);
        /* Reduce el tamaño del control */
    }

    .volume-control {
        padding: 5px 10px;
        /* Reduce el espacio interno del control de volumen */
        gap: 8px;
        /* Reduce la separación entre los elementos internos */
    }

    .volume-icon {
        width: 25px;
        /* Reduce el tamaño del ícono de volumen */
        height: 25px;
    }

    .volume-icon i {
        font-size: 0.9rem;
        /* Reduce el tamaño del ícono */
    }

    .volume-slider {
        width: 70px;
        /* Hace la barra de volumen más corta */
    }


    /* Secciones integradas */
    .integrated-section {
        padding: 40px 8px;
        /* Espaciado reducido */
    }

    .fusion-container {
        max-width: 1000px;
        /* Ancho máximo reducido */
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Dos columnas de igual tamaño */
        min-height: 400px;
        /* Altura mínima reducida */
        border-radius: 8px;
        /* Bordes más pequeños */
        box-shadow: 0 0 8px rgba(0, 71, 171, 0.3);
        /* Sombra más suave */
    }

    .text-fusion {
        padding: 20px;
        /* Espaciado interno reducido */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    /* Línea azul en el lado izquierdo */
    .text-fusion.line-left::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        left: 0;
        /* Alineado a la izquierda */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    /* Línea azul en el lado derecho */
    .text-fusion.line-right::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        right: 0;
        /* Alineado a la derecha */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    .section-title {
        font-size: 2rem; /* Tamaño de fuente reducido */
        margin-bottom: 10px; /* Margen inferior reducido */
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); /* Sombra más suave */
        text-align: center; /* Centra el título */
    }

    .section-text {
        font-size: 1.2rem; /* Tamaño de fuente reducido */
        line-height: 1.4; /* Espaciado entre líneas */
        color: #555; /* Color de texto */
        text-align: justify; /* Justifica el texto */
    }

    .image-fusion {
        height: 400px;
        /* Altura reducida */
    }

    .image-fusion img {
        opacity: 0.95;
        /* Opacidad ligeramente reducida */
        object-position: center 30%;
        /* Ajusta la posición de la imagen */
    }

    .image-overlay {
        background: rgba(0, 71, 171, 0.1);
        /* Fondo semitransparente */
    }


    .integrated-section:nth-child(even) .text-fusion {
        order: 1;
        /* Texto a la derecha */
        padding-top: 10px;
        /* Espaciado superior reducido */
    }

    .integrated-section:nth-child(even) .image-fusion {
        order: 2;
        /* Imagen a la izquierda */
        height: 400px;
        /* Altura reducida */
    }

    /* Optimización de espacios */
    .section-title br,
    .section-text br {
        display: none;
        /* Elimina saltos de línea innecesarios */
    }

}

/* Estilos responsivos para pantallas de 1024 */
@media (max-width: 1024px) {
    .video-hero {
        height: 57vh;
        /* Altura relativa al viewport */
        display: flex;
        flex-direction: column;
        /* Organiza los elementos en columna */
        align-items: flex-start;
        /* Alinea los elementos a la izquierda */
        justify-content: flex-start;
        /* Alinea el contenido en la parte superior */
        padding-top: 40%;
        /* Espacio superior relativo al 10% del contenedor */
        padding-left: 5%;
        /* Espacio a la izquierda relativo al 5% del contenedor */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    .video-overlay {
        position: absolute;
        /* Posicionamiento absoluto dentro de .video-hero */
        text-align: left;
        /* Alinea el texto a la izquierda */
        transform: none;
        /* Elimina cualquier transformación */
        max-width: 40%;
        /* Limita el ancho del texto */
        margin-bottom: 15px;
        /* Espaciado en la parte inferior */
        top: 72%;
        /* Mueve el texto un 30% hacia abajo dentro del contenedor */
        left: 5%;
        /* Mueve el texto un 5% hacia la derecha dentro del contenedor */
    }

    .main-title {
        font-size: clamp(1rem, 2vw, 1.3rem);
        /* Tamaño de fuente responsivo */
        font-weight: bold;
        /* Hace que el texto sea más grueso */
        line-height: 1.2;
        /* Ajusta el espacio entre líneas */
        padding-left: 10px;
        /* Espaciado interno a la izquierda */
        border-left: 4px solid #007bff;
        /* Agrega una línea azul a la izquierda */
        text-align: left;
        /* Alinea el texto a la izquierda */
    }

    /* Contenedor del video */
    #video-container {
        width: 132%;
        /* Ocupa el 100% del ancho */
        height: 100%;
        /* Mantiene la altura completa de la sección */
        position: absolute;
        /* Posición absoluta dentro del contenedor padre */
        top: 0px;
        /* Desplaza el video hacia abajo */
        left: 50%;
        /* Lo coloca en el centro horizontalmente */
        transform: translateX(-50%);
        /* Lo ajusta exactamente al centro */
    }

    /* Control de volumen más pequeño y movido hacia arriba */
    /* Control de volumen más pequeño y movido hacia arriba */
    .volume-container {
        bottom: 12%;
        /* Posiciona el control de volumen más arriba */
        left: 40%;
        /* Centra ligeramente el control de volumen */
        transform: translateX(-50%) scale(0.8);
        /* Reduce el tamaño del control */
    }

    .volume-control {
        padding: 5px 10px;
        /* Reduce el espacio interno del control de volumen */
        gap: 8px;
        /* Reduce la separación entre los elementos internos */
    }

    .volume-icon {
        width: 25px;
        /* Reduce el tamaño del ícono de volumen */
        height: 25px;
    }

    .volume-icon i {
        font-size: 0.9rem;
        /* Reduce el tamaño del ícono */
    }

    .volume-slider {
        width: 70px;
        /* Hace la barra de volumen más corta */
    }


    /* Secciones integradas */
    .integrated-section {
        padding: 40px 8px;
        /* Espaciado reducido */
    }

    .fusion-container {
        max-width: 1000px;
        /* Ancho máximo reducido */
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Dos columnas de igual tamaño */
        min-height: 300px;
        /* Altura mínima reducida */
        border-radius: 8px;
        /* Bordes más pequeños */
        box-shadow: 0 0 8px rgba(0, 71, 171, 0.3);
        /* Sombra más suave */
    }

    .text-fusion {
        padding: 20px;
        /* Espaciado interno reducido */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    /* Línea azul en el lado izquierdo */
    .text-fusion.line-left::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        left: 0;
        /* Alineado a la izquierda */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    /* Línea azul en el lado derecho */
    .text-fusion.line-right::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        right: 0;
        /* Alineado a la derecha */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    .section-title {
        font-size: 1.5rem; /* Tamaño de fuente reducido */
        margin-bottom: 10px; /* Margen inferior reducido */
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); /* Sombra más suave */
        text-align: center; /* Centra el título */
    }

    .section-text {
        font-size: 1rem; /* Tamaño de fuente reducido */
        line-height: 1.4; /* Espaciado entre líneas */
        color: #555; /* Color de texto */
        text-align: justify; /* Justifica el texto */
    }

    .image-fusion {
        height: 300px;
        /* Altura reducida */
    }

    .image-fusion img {
        opacity: 0.95;
        /* Opacidad ligeramente reducida */
        object-position: center 30%;
        /* Ajusta la posición de la imagen */
    }

    .image-overlay {
        background: rgba(0, 71, 171, 0.1);
        /* Fondo semitransparente */
    }


    .integrated-section:nth-child(even) .text-fusion {
        order: 1;
        /* Texto a la derecha */
        padding-top: 10px;
        /* Espaciado superior reducido */
    }

    .integrated-section:nth-child(even) .image-fusion {
        order: 2;
        /* Imagen a la izquierda */
        height: 300px;
        /* Altura reducida */
    }

    /* Optimización de espacios */
    .section-title br,
    .section-text br {
        display: none;
        /* Elimina saltos de línea innecesarios */
    }

}

@media (max-width: 768px) {
    .video-hero {
        height: 40vh;
        /* Altura relativa al viewport */
        display: flex;
        flex-direction: column;
        /* Organiza los elementos en columna */
        align-items: flex-start;
        /* Alinea los elementos a la izquierda */
        justify-content: flex-start;
        /* Alinea el contenido en la parte superior */
        padding-top: 40%;
        /* Espacio superior relativo al 40% del contenedor */
        padding-left: 5%;
        /* Espacio a la izquierda relativo al 5% del contenedor */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    .video-overlay {
        position: absolute;
        /* Posicionamiento absoluto dentro de .video-hero */
        text-align: left;
        /* Alinea el texto a la izquierda */
        transform: none;
        /* Elimina cualquier transformación */
        max-width: 40%;
        /* Limita el ancho del texto */
        margin-bottom: 15px;
        /* Espaciado en la parte inferior */
        top: 70%;
        /* Mueve el texto un 70% hacia abajo dentro del contenedor */
        left: 5%;
        /* Mueve el texto un 5% hacia la derecha dentro del contenedor */
    }

    .main-title {
        font-size: clamp(0.7rem, 2vw, 1rem);
        /* Tamaño de fuente responsivo */
        font-weight: bold;
        /* Hace que el texto sea más grueso */
        line-height: 1.2;
        /* Ajusta el espacio entre líneas */
        padding-left: 10px;
        /* Espaciado interno a la izquierda */
        border-left: 4px solid #007bff;
        /* Agrega una línea azul a la izquierda */
        text-align: left;
        /* Alinea el texto a la izquierda */
    }

    /* Contenedor del video */
    #video-container {
        width: 132%;
        /* Ocupa el 132% del ancho */
        height: 100%;
        /* Mantiene la altura completa de la sección */
        position: absolute;
        /* Posición absoluta dentro del contenedor padre */
        top: 0px;
        /* Desplaza el video hacia arriba */
        left: 50%;
        /* Lo coloca en el centro horizontalmente */
        transform: translateX(-50%);
        /* Lo ajusta exactamente al centro */
    }

    /* Control de volumen más pequeño y movido hacia arriba */
    .volume-container {
        bottom: 45px;
        /* Posiciona el control de volumen más arriba */
        left: 40%;
        /* Centra ligeramente el control de volumen */
        transform: translateX(-50%) scale(0.8);
        /* Reduce el tamaño del control */
    }

    .volume-control {
        padding: 5px 10px;
        /* Reduce el espacio interno del control de volumen */
        gap: 8px;
        /* Reduce la separación entre los elementos internos */
    }

    .volume-icon {
        width: 25px;
        /* Reduce el tamaño del ícono de volumen */
        height: 25px;
    }

    .volume-icon i {
        font-size: 0.9rem;
        /* Reduce el tamaño del ícono */
    }

    .volume-slider {
        width: 70px;
        /* Hace la barra de volumen más corta */
    }

    /* Secciones integradas */
    .integrated-section {
        padding: 40px 8px;
        /* Espaciado reducido */
    }

    .fusion-container {
        max-width: 1000px;
        /* Ancho máximo reducido */
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Dos columnas de igual tamaño */
        min-height: 250px;
        /* Altura mínima reducida */
        border-radius: 8px;
        /* Bordes más pequeños */
        box-shadow: 0 0 8px rgba(0, 71, 171, 0.3);
        /* Sombra más suave */
    }

    .text-fusion {
        padding: 20px;
        /* Espaciado interno reducido */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    /* Línea azul en el lado izquierdo */
    .text-fusion.line-left::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        left: 0;
        /* Alineado a la izquierda */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    /* Línea azul en el lado derecho */
    .text-fusion.line-right::before {
        content: '';
        /* Contenido vacío */
        position: absolute;
        /* Posición absoluta */
        top: 0;
        /* Alineado en la parte superior */
        right: 0;
        /* Alineado a la derecha */
        width: 4px;
        /* Ancho de la línea reducido (de 6px a 4px) */
        height: 100%;
        /* Altura completa */
        background: var(--azul-cobalto);
        /* Fondo azul */
        box-shadow: 0 0 5px rgba(0, 71, 171, 0.8), 0 0 10px rgba(0, 71, 171, 0.6);
        /* Sombra azul reducida */
    }

    .section-title {
        font-size: 1.5rem; /* Tamaño de fuente reducido */
        margin-bottom: 10px; /* Margen inferior reducido */
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); /* Sombra más suave */
        text-align: center; /* Centra el título */
    }

    .section-text {
        font-size: 1rem; /* Tamaño de fuente reducido */
        line-height: 1.4; /* Espaciado entre líneas */
        color: #555; /* Color de texto */
        text-align: justify; /* Justifica el texto */
    }

    .image-fusion {
        height: 260px;
        /* Altura reducida */
    }

    .image-fusion img {
        opacity: 0.95;
        /* Opacidad ligeramente reducida */
        object-position: center 30%;
        /* Ajusta la posición de la imagen */
    }

    .image-overlay {
        background: rgba(0, 71, 171, 0.1);
        /* Fondo semitransparente */
    }


    .integrated-section:nth-child(even) .text-fusion {
        order: 1;
        /* Texto a la derecha */
        padding-top: 10px;
        /* Espaciado superior reducido */
    }

    .integrated-section:nth-child(even) .image-fusion {
        order: 2;
        /* Imagen a la izquierda */
        height: 260px;
        /* Altura reducida */
    }

    /* Optimización de espacios */
    .section-title br,
    .section-text br {
        display: none;
        /* Elimina saltos de línea innecesarios */
    }
}

@media (max-width: 500px) {

    .video-hero {
        height: 40vh;
        /* Altura relativa al viewport */
        display: flex;
        flex-direction: column;
        /* Organiza los elementos en columna */
        align-items: flex-start;
        /* Alinea los elementos a la izquierda */
        justify-content: flex-start;
        /* Alinea el contenido en la parte superior */
        padding-top: 43%;
        /* Espacio superior relativo al 43% del contenedor */
        padding-left: 5%;
        /* Espacio a la izquierda relativo al 5% del contenedor */
        position: relative;
        /* Permite posicionar elementos hijos de manera absoluta */
    }

    .video-overlay {
        position: absolute;
        /* Posicionamiento absoluto dentro de .video-hero */
        text-align: left;
        /* Alinea el texto a la izquierda */
        transform: none;
        /* Elimina cualquier transformación */
        max-width: 40%;
        /* Limita el ancho del texto */
        margin-bottom: 15px;
        /* Espaciado en la parte inferior */
        top: 70%;
        /* Mueve el texto un 30% hacia abajo dentro del contenedor */
        left: 5%;
        /* Mueve el texto un 5% hacia la derecha dentro del contenedor */
    }

    .main-title {
        font-size: clamp(0.6rem, 2vw, 7rem);
        /* Tamaño de fuente responsivo */
        font-weight: bold;
        /* Hace que el texto sea más grueso */
        line-height: 1.2;
        /* Ajusta el espacio entre líneas */
        padding-left: 10px;
        /* Espaciado interno a la izquierda */
        border-left: 4px solid #007bff;
        /* Agrega una línea azul a la izquierda */
        text-align: left;
        /* Alinea el texto a la izquierda */
    }

    /* Contenedor del video */
    #video-container {
        width: 132%;
        /* Ocupa el 100% del ancho */
        height: 100%;
        /* Mantiene la altura completa de la sección */
        position: absolute;
        /* Posición absoluta dentro del contenedor padre */
        top: 0px;
        /* Desplaza el video hacia abajo */
        left: 50%;
        /* Lo coloca en el centro horizontalmente */
        transform: translateX(-50%);
        /* Lo ajusta exactamente al centro */
    }


    /* Control de volumen más pequeño y movido hacia arriba */
    .volume-container {
        bottom: 50px;
        /* Posiciona el control de volumen más arriba */
        left: 40%;
        /* Centra ligeramente el control de volumen */
        transform: translateX(-50%) scale(0.8);
        /* Reduce el tamaño del control */
    }

    .volume-control {
        padding: 5px 10px;
        /* Reduce el espacio interno del control de volumen */
        gap: 8px;
        /* Reduce la separación entre los elementos internos */
    }

    .volume-icon {
        width: 25px;
        /* Reduce el tamaño del ícono de volumen */
        height: 25px;
    }

    .volume-icon i {
        font-size: 0.9rem;
        /* Reduce el tamaño del ícono */
    }

    .volume-slider {
        width: 70px;
        /* Hace la barra de volumen más corta */
    }

    /* Ajustes extremos para secciones integradas */
    .integrated-section {
        padding: 30px 8px;
    }

    .fusion-container {
        grid-template-columns: 1fr;
        min-height: 300px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 71, 171, 0.3);
    }

    .text-fusion {
        padding: 20px;
        order: 2;
    }

    .image-fusion {
        order: 1;
        height: 200px;
    }

    .text-fusion.line-left::before,
    .text-fusion.line-right::before {
        width: 100%;
        height: 3px;
        bottom: 0;
        box-shadow: 0 0 3px rgba(0, 71, 171, 0.4);
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    }

    .section-text {
        font-size: 0.9rem;
        line-height: 1.4;
        color: #555;
    }

    .image-fusion img {
        opacity: 0.95;
        object-position: center 30%;
    }

    .image-overlay {
        background: rgba(0, 71, 171, 0.1);
    }

    /* Ajustes específicos de orden */
    .integrated-section:nth-child(even) .fusion-container {
        flex-direction: column;
    }

    .integrated-section:nth-child(even) .text-fusion {
        order: 2;
        padding-top: 15px;
    }

    .integrated-section:nth-child(even) .image-fusion {
        order: 1;
        height: 180px;
    }

    /* Optimización de espacios */
    .section-title br,
    .section-text br {
        display: none;
    }
}