/* ==============================
                     Navbar
        ============================== */
        .header-fixed .navbar.affix .module .module-icon i,
        .header-fixed .navbar.affix .navbar-nav > li > a {
            color: #ffffff !important; /* Asegura que el color del texto del navbar no cambie */
        }

        .header-fixed .navbar.affix .navbar-nav > li > a:hover::before,
        .header-fixed .navbar.affix .navbar-nav > li.active > a:before {
            background-color: #ffffff !important; /* Asegura que el color de fondo del hover no cambie */
        }

        /* Clase para ocultar el contenido del navbar */
        .navbar-hidden #navbar-collapse-1,
        .navbar-hidden .logo {
            opacity: 0 !important; /* Asegura que el contenido del navbar desaparezca */
            visibility: hidden !important; /* Oculta el contenido del navbar */
            transition: opacity 0.5s ease, visibility 0.5s ease !important;
        }

        /* Asegura que el fondo degradado del navbar siga visible */
        .header .navbar {
            background: linear-gradient(to bottom, rgba(15, 107, 68, 1), rgba(15, 107, 68, 0.7), rgba(15, 107, 68, 0.3), rgba(15, 107, 68, 0)) !important;
            transition: background 0.3s ease !important;
        }

        /* Estilos generales para el body */
        body {
            padding-top: 0 !important;
            /* Elimina cualquier padding superior que pueda interferir */
        }

        /* Asegura que el wrapper y el contenido principal no tengan margen superior */
        #wrapper,
        #main-content,
        header {
            margin-top: 0 !important;
            padding-top: 0 !important;
            height: 0 !important;
        }

        /* ==============================
            Fondo degradado siempre visible
        ============================== */
        .header .navbar {
            background: linear-gradient(to bottom, rgba(15, 107, 68, 1), rgba(15, 107, 68, 0.7), rgba(15, 107, 68, 0.3), rgba(15, 107, 68, 0)) !important;
            transition: background 0.3s ease !important;
        }



        /* ==============================
        Sección de Título con Video
        ============================== */
        #page-title {
            position: relative;
            width: 100%;
            height: 60vh;
            /* Altura fija */
            margin: 0;
            padding: 0;
            color: #fff;
            text-align: center;
            /* Si quieres un color de fondo por si el video no carga, descomenta:
       background-color: #000;
        */
        }

        /* Contenedor del video */
        .bg-section {
            /* Forzamos que no tenga z-index elevado */
            z-index: auto !important;
            /* <-- Bloquea cualquier z-index externo */

            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .bg-section video {
            /* No usamos z-index, pero el video se declara primero en el HTML */
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(30%);
        }


        /* Contenedor del texto (va después del video en el HTML) */
        .title.text-center {
            position: absolute;
            /* Para superponerlo sobre el contenedor del video */
            top: 0;
            left: 0;
            width: 100%;
            height: 60vh;
            /* Misma altura que #page-title */
            margin: 0;
            padding: 0 !important;

            /* Flexbox para centrar el texto */
            display: flex;
            align-items: center;
            /* Centra verticalmente */
            justify-content: center;
            /* Centra horizontalmente */
        }

        /* Ajustes del título */
        .title--heading {
            margin: 0;
            /* Sin márgenes adicionales */
        }

        .title--heading h1 {
            font-size: 36px ;
            font-weight: 700 ;
            margin: 0;
        }

        .titulo-reflejo {
            /* Control de la caja del texto y su reflejo */
            display: inline-block;
            line-height: 1 !important;

            /* Fuente y estilo */
            font-family: 'Bebas Neue', sans-serif;
            font-size: 15vh !important;
            font-weight: 900 !important;
            /* 900 es el grosor máximo */
            text-transform: uppercase;
            letter-spacing: 10px;
            color: #fff !important;

            /* Posicionamiento extra si deseas bajarlo un poco */
            margin: 0 !important;
            margin-top: 18vh !important;

            /* Efecto de reflejo hasta la mitad con un degradado suave */
            -webkit-box-reflect: below -5.8vh linear-gradient(transparent 0%,
                    transparent 50%,
                    rgba(0, 0, 0, 0.2) 60%,
                    rgba(0, 0, 0, 0.7) 100%);
        }
        

@media (max-width: 768px) {
    /* Ajustes generales para la sección */
    #page-title {
        height: 60vh; /* Reduce aún más la altura en móviles */
    }

    /* Ajustes del video */
    .bg-section video {
        object-fit: cover;
    }

    /* Ajuste de la posición y tamaño del título */
    .title.text-center {
        height: 60vh; /* Ajusta la altura del contenedor */
    }

    /* Ajuste del tamaño del título */
    .titulo-reflejo {
        margin-bottom: none !important;

        font-size: 4vh !important; /* Ajusta el tamaño en móviles */
        margin-top: 0.1vh !important; /* Ajusta el margen superior */
        -webkit-box-reflect: below -1.8vh linear-gradient(transparent 0%, transparent 50%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.7) 100%);
    }
}




        /* ==============================
        Estilos Generales
        ============================== */
        body,
        html {
            overflow-x: visible !important;
        }
        .section {
            padding: 0px 0px;
            background-color: #f9f9f9;
        }

        .feature-panel {
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            margin-bottom: 30px;
        }

        .feature-panel .feature--icon {
            margin-bottom: 20px;
        }

        .feature-panel h2 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .feature-panel p {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }

        

        /* ==============================
        Sección SOBRE NOSOTROS
        ============================== */
        /* Añadimos la línea gris entre los contenedores */
        #linea-gris {
            position: absolute;
            top: 100%;
            /* Se coloca justo debajo del contenido del video */
            left: 0;
            width: 100%;
            height: 10px;
            /* Ajusta el grosor de la línea */
            background-image: url('https://www.asesoresrya.pe/assets/images/conocenos/LINEAGRIS.png');
            /* Línea gris */
            background-size: cover;
            background-repeat: no-repeat;
        }

        /* Estilo para la sección "Sobre Nosotros" */
        #seccion-sobre-nosotros {
            background-image: url('https://www.asesoresrya.pe/assets/images/conocenos/LINEASENDEGRADADO.png');
            background-size: cover;
            /* La imagen cubre todo el contenedor */
            background-position: center center;
            /* Centra la imagen de fondo */
            background-repeat: no-repeat;
            /* No repite la imagen */
            position: relative;
            /* Espaciado superior e inferior */
        }

        /* Contenedor blanco con bordes redondeados */
        .contenedor-blanco {
            max-width: auto;
            /* Ancho máximo del contenedor */
            margin: 0 auto;
            /* Centra horizontalmente */
            background-color: #ece6e600;
            /* Fondo blanco */
            border-radius: 23vh 23vh 0 0;
            /* Bordes redondeados solo en las esquinas superiores */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            /* Sombra sutil */
            padding: 5vh;
            /* Espacio interno */
            box-sizing: border-box;
        }

        /* Contenedor principal en Flexbox */
        .contenedor-flex {
            display: flex;
            /* Activa Flexbox */
            gap: 4vh;
            /* Espacio horizontal entre columnas */
            flex-wrap: wrap;
            /* Permite que las columnas bajen en pantallas pequeñas */
        }

        /* Columna Izquierda (Texto) */
        .col-izquierda {
            width: 65%;
            /* 60% para texto */
            box-sizing: border-box;
            padding: 15vh;
        }

        /* Aplica estilos uniformes a todos los párrafos dentro de .col-izquierda */
        .col-izquierda p {
            font-family: 'Open Sans', sans-serif;
            /* Fuente */
            font-size: 2.5vh;
            /* Tamaño de letra */
            line-height: 1.6;
            /* Espaciado entre líneas */
            text-align: justify;
            /* Justificar el texto */
            color: #000000;
            /* Color uniforme para todo el texto */
            font-weight: normal;
            /* Evitar negritas */
            margin-bottom: 2vh;
            /* Espacio entre párrafos */
        }

        /* Columna Derecha (Imagen) */
        .col-derecha {
            width: 27%;
            /* 40% para imagen */
            box-sizing: border-box;
            display: flex;
            /* Opcional: para alinear imagen */
            align-items: center;
            /* Centra verticalmente la imagen dentro de la col */
            justify-content: center;
            /* Centra horizontalmente la imagen */
            gap: 2vh;
        }

        .col-derecha img {
            max-width: 100%;
            /* La imagen no excede su columna */
            height: 80%;

            /* Sombra sutil a la imagen */
        }

                /* Estilos responsivos para tablets y móviles */
@media (max-width: 1024px) {
    /* Contenedor blanco con bordes redondeados */
    .contenedor-blanco {
        
        
        border-radius: 40px;
        
    }
    /* Contenedor Flex se ajusta a columna */
    .contenedor-flex {
        flex-direction: column;
        /* Cambia de fila a columna */
    }

    /* Columna izquierda (Texto) */
    .col-izquierda {
        width: 100%;
        /* Ocupa el 100% del ancho */
        padding: 3vh;
        /* Reduce el espacio interno */
    }

    /* Columna derecha (Imagen) */
    .col-derecha {
        width: 100%;
        /* Ocupa el 100% del ancho */
        display: flex;
        justify-content: center;
        align-items: center;
        /* Centra la imagen */
        padding: 3vh 0;
        /* Añade espacio superior e inferior */
    }

    .col-derecha img {
        width: 80%;
        /* Ajusta el tamaño de la imagen */
        height: auto;
        /* Mantiene la proporción de la imagen */
    }

    /* Ajuste del tamaño del texto en pantallas pequeñas */
    .col-izquierda p {
        font-size: 4vh;
        /* Aumenta el tamaño de la fuente para facilitar la lectura */
    }
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px) {
    /* Contenedor blanco con bordes redondeados */
    .contenedor-blanco {
        
        
        border-radius: 40px;
        
    }
    /* Ajusta el tamaño del texto aún más para móviles pequeños */
    .col-izquierda p {
        font-size: 2vh;
        /* Aumenta el tamaño de la fuente para móviles más pequeños */
    }

    .col-derecha img {
        width: 90%;
        height: 50%;
        /* Ajusta el tamaño de la imagen en pantallas móviles */
    }
}



        /* ==============================
        Sección NUESTRO OBJETIVO
        ============================== */

        /* Contenedor de la imagen */
        .contenedor-imagen {
            position: relative;
            text-align: center;
            /* Centra el texto */
            padding: 0 15vh 10vh 15vh;
        }

        /* Estilo de la imagen */
        .contenedor-imagen img {
            width: 100%;
            height: auto;
            /* Asegura que la imagen ocupe todo el ancho disponible pero manteniendo la proporción */
        }

        /* Estilo para el título */
        .titulo-objetivo {
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* Centra el texto en el medio de la imagen */
            color: #fff;
            /* Blanco para resaltar el texto */
            font-family: 'Bebas Neue', sans-serif;
            font-size: 10vh;
            font-weight: bold;
            padding: 2vh 4vh;
            /* Espaciado alrededor del texto */
        }
                /* Estilos responsivos para tablets y móviles */
@media (max-width: 1024px) {
    /* Ajustes para el contenedor de la imagen */
    .contenedor-imagen {
        padding: 0 5vh 10vh 5vh; /* Reduce el padding lateral en tablets */
    }

    /* Ajusta el tamaño de la imagen */
    .contenedor-imagen img {
        width: 100%;
        height: auto; /* Mantiene la proporción de la imagen */
    }

    /* Ajusta el título en tablets */
    .titulo-objetivo {
        font-size: 6vh; /* Reduce el tamaño del texto para pantallas más pequeñas */
        padding: 2vh 3vh; /* Ajusta el espaciado alrededor del texto */
    }
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px) {
    /* Ajustes para el contenedor de la imagen */
    .contenedor-imagen {
        padding: 0 3vh 10vh 3vh; /* Reduce aún más el padding en móviles */
    }

    /* Ajusta el tamaño de la imagen en móviles */
    .contenedor-imagen img {
        width: 100%;
        height: auto;
    }

    /* Ajusta el título en móviles */
    .titulo-objetivo {
        font-size: 3vh; /* Aumenta un poco el tamaño para hacer el texto legible */
        padding: 1vh 1vh 6vh 3vh; /* Ajusta el espaciado alrededor del texto */
    }
}



        /* ==============================
        SECCION LOGO VISION
        ============================== */
        /* Estilo para el contenedor de la imagen */
        .contenedor-imagen-vision {
            width: 100%;
            /* La imagen ocupará todo el ancho de la pantalla */
            height: 10vh;
            /* Ajusta el alto de la imagen con la unidad vh (puedes modificar este valor) */
            overflow: hidden;
            /* Evita que la imagen se salga del contenedor si no tiene la misma proporción */
        }

        /* Estilo de la imagen */
        .imagen-vision {
            width: 100%;
            /* Hace que la imagen ocupe todo el ancho del contenedor */
            height: 100%;
            /* Hace que la imagen ocupe todo el alto del contenedor */
            object-fit: cover;
            /* Mantiene la proporción de la imagen y la ajusta para que no se deforme */
        }
        /* Estilos responsivos para tablets y móviles */
        @media (max-width: 1024px) {
            /* Ajusta la altura de la imagen para tablets */
            .contenedor-imagen-vision {
                height: 50%; /* Aumenta la altura en tablets si es necesario */
            }

            /* Ajusta la imagen para tablets */
            .imagen-vision {
                object-fit: contain;
            }
        }

        /* Estilos responsivos para dispositivos móviles */
        @media (max-width: 768px) {
            /* Ajusta la altura de la imagen para móviles */
            .contenedor-imagen-vision {
                height: 50%; /* Aumenta la altura para móviles */
                width: 100%;
            }

            /* Ajusta la imagen para móviles */
            .imagen-vision {
                object-fit: contain;
            }
        }



        /* ==============================
        SECCION VISION
        ============================== */
        /* Estilo para la nueva sección */
        #seccion-nueva {
            background-image: url('https://www.asesoresrya.pe/assets/images/conocenos/LINEA1.png');
            background-size: cover;
            /* La imagen cubre todo el contenedor */
            background-position: center center;
            /* Centra la imagen de fondo */
            background-repeat: no-repeat;
            /* No repite la imagen */
        }

        /* Contenedor del contenido dentro de la nueva sección */
        .contenedor-nuevo {
            background-color: #ffffff00;
            /* Fondo blanco */
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            /* Sombra sutil */
            padding: 4vh;
            box-sizing: border-box;
        }

        /* Contenedor Flexbox para dividir en dos columnas */
        .contenedor-flex-nuevo {
            display: flex;
            gap: 4vh;
            /* Espacio entre la columna izquierda y derecha */
        }

        /* Columna Izquierda (Imagen) */
        .col-izquierda-nueva {
            width: 43%;
            /* Imagen ocupa el 45% */
            box-sizing: border-box;
            display: flex;
            padding: 7vh;
            align-items: center;
            /* Centra verticalmente la imagen */
            justify-content: center;
            /* Centra horizontalmente la imagen */
        }

        .col-izquierda-nueva img {
            width: 80%;
            /* La imagen ocupa todo el ancho de su contenedor */
            /* Mantiene la proporción de la imagen */
        }

        /* Columna Derecha (Texto) */
        .col-derecha-nueva {
            width: 53%;
            /* Texto ocupa el 45% */
            box-sizing: border-box;
            padding: 4vh;
        }

        /* Estilo de los párrafos dentro del texto */
        .col-derecha-nueva p {
            font-family: 'Open Sans', sans-serif;
            /* Fuente */
            font-size: 2.6vh;
            /* Tamaño de letra */
            line-height: 1.6;
            /* Espaciado entre líneas */
            text-align: justify;
            /* Justificar el texto */
            color: #000000;
            /* Color uniforme para todo el texto */
            font-weight: normal;
            /* Evitar negritas */
            margin-bottom: 2vh;
            /* Espacio entre párrafos */
        }
        /* Estilos responsivos para tablets y móviles */
@media (max-width: 1024px) {
    
    /* Ajusta el contenedor Flexbox a una sola columna en tablets */
    .contenedor-flex-nuevo {
        flex-direction: column;
        gap: 2vh; /* Reduce el espacio entre columnas */
    }

    /* Ajusta el ancho de las columnas para tablets */
    .col-izquierda-nueva, .col-derecha-nueva {
        width: 100%; /* Las columnas ocuparán el 100% del ancho */
        padding: 4vh;
    }

    /* Ajusta el tamaño de la imagen en tablets */
    .col-izquierda-nueva img {
        width: 100%; /* La imagen ocupará el 100% del ancho */
    }

    /* Ajuste de párrafos para tablets */
    .col-derecha-nueva p {
        font-size: 2vh; /* Ajusta el tamaño del texto para pantallas más pequeñas */
        line-height: 1.5;
    }
    .col-derecha-nueva br {
        display: none;
    }
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px) {
    /* Ajusta el contenedor Flexbox a una sola columna en móviles */
    .contenedor-flex-nuevo {
        flex-direction: column;
        gap: 2vh;
    }

    /* Ajusta el ancho de las columnas para móviles */
    .col-izquierda-nueva, .col-derecha-nueva {
        width: 100%; /* Las columnas ocuparán el 100% del ancho */
        padding: 4vh;
    }

    /* Ajusta el tamaño de la imagen en móviles */
    .col-izquierda-nueva img {
        width: 100%; /* La imagen ocupará el 100% del ancho */
    }

    /* Ajuste de párrafos para móviles */
    .col-derecha-nueva p {
        font-size: 2; /* Ajusta el tamaño del texto para pantallas más pequeñas */
        line-height: 1.5;
    }
    /* Oculta los saltos de línea (br) en móviles */
    .col-derecha-nueva br {
        display: none;
    }
}

        /* ==============================
        SECCION LOGO MISION
        ============================== */
        /* Estilo para el contenedor de la imagen */
        .contenedor-imagen-mision {
            width: 100%;
            /* La imagen ocupará todo el ancho de la pantalla */
            height: 10vh;
            /* Ajusta el alto de la imagen con la unidad vh (puedes modificar este valor) */
            overflow: hidden;
            /* Evita que la imagen se salga del contenedor si no tiene la misma proporción */
        }

        /* Estilo de la imagen */
        .imagen-mision {
            width: 100%;
            /* Hace que la imagen ocupe todo el ancho del contenedor */
            height: 100%;
            /* Hace que la imagen ocupe todo el alto del contenedor */
            object-fit: cover;
            /* Mantiene la proporción de la imagen y la ajusta para que no se deforme */
        }
        /* Estilos responsivos para tablets y móviles */
        @media (max-width: 1024px) {
            /* Ajusta la altura de la imagen para tablets */
            .contenedor-imagen-mision {
                height: 50%; /* Aumenta la altura en tablets si es necesario */
            }

            /* Ajusta la imagen para tablets */
            .imagen-mision {
                object-fit: contain;
            }
        }

        /* Estilos responsivos para dispositivos móviles */
        @media (max-width: 768px) {
            /* Ajusta la altura de la imagen para móviles */
            .contenedor-imagen-mision {
                height: 50%; /* Aumenta la altura para móviles */
                width: 100%;
            }

            /* Ajusta la imagen para móviles */
            .imagen-mision {
                object-fit: contain;
            }
        }

        /* ==============================
        SECCION MISION
        ============================== */
        /* Estilo para la sección de misión */
        #seccion-mision {
            background-image: url('https://www.asesoresrya.pe/assets/images/conocenos/LINEA2.png');
            background-size: cover;
            /* La imagen cubre todo el contenedor */
            background-position: center center;
            /* Centra la imagen de fondo */
            background-repeat: no-repeat;
            /* No repite la imagen */

        }

        /* Contenedor principal para la nueva sección */
        .contenedor-mision {
            background-color: #ffffff00;
            /* Fondo blanco */
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            /* Sombra sutil */
            padding: 4vh;
            box-sizing: border-box;

        }

        /* Contenedor Flexbox para dividir en dos columnas */
        .contenedor-flex-mision {
            display: flex;
            /* Separa las columnas */
            gap: 5vh;
            /* Espacio entre la columna izquierda y derecha */
        }

        /* Columna Izquierda (Texto) */
        .col-izquierda-mision {
            width: 53%;
            /* Texto ocupa el 45% */
            box-sizing: border-box;
            padding: 6vh;
        }

        /* Estilo de los párrafos dentro del texto */
        .col-izquierda-mision p {
            font-family: 'Open Sans', sans-serif;
            /* Fuente */
            font-size: 2.6vh;
            /* Tamaño de letra */
            line-height: 1.6;
            /* Espaciado entre líneas */
            text-align: justify;
            /* Justificar el texto */
            color: #000000;
            /* Color uniforme para todo el texto */
            font-weight: normal;
            /* Evitar negritas */
            margin-bottom: 2vh;
            /* Espacio entre párrafos */
        }

        /* Columna Derecha (GIF) */
        .col-derecha-mision {
            width: 43%;
            /* GIF ocupa el 45% */
            box-sizing: border-box;
            display: flex;
            align-items: center;
            /* Centra verticalmente la imagen */
            justify-content: center;
            /* Centra horizontalmente la imagen */
            gap: 2vh;
            padding: 6vh;
        }

        /* Estilo del GIF */
        .gif-mision {
            width: 90%;
            /* El GIF ocupa todo el ancho de su contenedor */
            /* Mantiene la proporción del GIF */
            border-radius: 10px;
            /* Bordes redondeados para el GIF */
        }
        /* Estilos responsivos para tablets y móviles */
@media (max-width: 1024px) {
    /* Ajusta el contenedor Flexbox a una sola columna en tablets */
    .contenedor-flex-mision {
        flex-direction: column;
        gap: 2vh; /* Reduce el espacio entre columnas */
    }

    /* Ajusta el ancho de las columnas para tablets */
    .col-izquierda-mision, .col-derecha-mision {
        width: 100%; /* Las columnas ocuparán el 100% del ancho */
        padding: 4vh;
    }

    /* Ajuste de párrafos para tablets */
    .col-izquierda-mision p {
        font-size: 2vh; /* Ajusta el tamaño del texto para pantallas más pequeñas */
        line-height: 1.5;
    }

    /* Oculta los saltos de línea (br) en tablets */
    .col-izquierda-mision br {
        display: none;
    }

    /* Ajusta el tamaño del GIF en tablets */
    .gif-mision {
        width: 100%; /* El GIF ocupará el 100% del ancho */
    }
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px) {
    /* Ajusta el contenedor Flexbox a una sola columna en móviles */
    .contenedor-flex-mision {
        flex-direction: column;
        gap: 2vh;
    }

    /* Ajusta el ancho de las columnas para móviles */
    .col-izquierda-mision, .col-derecha-mision {
        width: 100%; /* Las columnas ocuparán el 100% del ancho */
        padding: 4vh;
    }

    /* Ajuste de párrafos para móviles */
    .col-izquierda-mision p {
        font-size: 2vh; /* Ajusta el tamaño del texto para pantallas más pequeñas */
        line-height: 1.5;
    }

    /* Oculta los saltos de línea (br) en móviles */
    .col-izquierda-mision br {
        display: none;
    }

    /* Ajusta el tamaño del GIF en móviles */
    .gif-mision {
        width: 100%; /* El GIF ocupará el 100% del ancho */
    }
}