/* ====== HEADER ====== */
/* Contenedor general del header */
.header-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}

/* Estilos del header */
.header {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

/* Línea debajo del menú */
.header-line {
    width: calc(100% - 60px);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-top: -38px;
}

/* ====== LOGO Y NOMBRE ====== */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -20px; /* Alineación perfecta con los menús */
}

.logo img {
    height: 80px;
}



/* ====== NAVEGACIÓN ====== */
.navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.navigation ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 90px;
    margin-top: 30px;
    padding: 5px 0;
}

/* Ajuste de fuente */
.navigation ul li a {
    text-decoration: none;
    color: white;
    font-weight: 400;
    font-size: 17px;
    position: relative;
    padding-bottom: 5px;
    transition: border-bottom 0.3s ease;
    font-family: 'MiFuenteSPD1', sans-serif;
}

.navigation ul li a:hover {
    color: white;
}

/* Línea roja en hover */
.navigation ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -34px;
    width: 100%;
    height: 4px;
    background-color: rgb(239,181,66);
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

/* Mantener la línea activa mientras el menú está abierto */
.menu-item:hover > a::after,
.menu-item:hover .dropdown-menu::before {
    transform: scaleX(1);
}


.navigation ul li a:hover::after {
    transform: scaleX(1);
}




/* ====== MEGA MENÚ ====== */
.menu-item {
    position: relative;
    padding-bottom: 37px;
}

/* Contenedor del mega menú */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    flex-direction: column;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 100;
    border-radius: 5px;
    padding-top: 0;
}

/* Extiende el área de hover sin fondo visible */
.menu-item::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 33px; /* Ajusta el espacio sin afectar el diseño */
    background: transparent; /* Sin color visible */
    pointer-events: auto; /* Mantiene el hover */
}


/* Activa el menú en hover */
.menu-item:hover .dropdown-menu {
    display: flex;
}


/* Mantiene el menú desplegado cuando el usuario baja el mouse */
.menu-item:hover .dropdown-menu,
.dropdown-menu:hover {
    display: flex;
    opacity: 1;
    visibility: visible;
}






/* Contenedor interno del mega menú */
.expertise-menu {
    display: flex;
    justify-content: space-between;
}

/* Sección azul de información */
.expertise-info {
    background: rgba(35, 60, 111, 1);
    color: rgba(246, 246, 246, 0.8);
    padding: 25px;
    border-radius: 0px;
    width: 40%;
    line-height: 1.8;
}

.expertise-info h3 {
    font-size: 15px;
    font-weight: 800 !important;
    color: #fff;
}

.expertise-info p {
    font-size: 14px;
    font-weight:lighter !important;
}

/* 🔹 Enlaces del menú */
.expertise-links {
    display: flex;
    justify-content: space-between;
    width: 30%;
    padding-left: 20px;
    position: relative;

}

/* 🔹 Lista de opciones en vertical */
.expertise-links ul {
    list-style: none;
    padding-left: 0px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;

}


/* 🔹 Asegurar el tamaño normal de los enlaces */
.expertise-links ul li a {
    text-decoration: none;
    color: #002b5ce1;
    font-size: 13px;
    font-weight: 200;
    transition: transform 0.2s ease-in-out, font-size 0.2s ease-in-out !important;
}

/* 🔹 Aumentar el tamaño en hover */
.expertise-links ul li a:hover {
    transform: scale(1.2) !important; /* 🔹 Crece al 120% */
    font-size: 16px !important; /* 🔹 Ajusta el tamaño */
    font-weight: 800 !important; /* 🔹 Hace que se vea más visible */
}


/* ❌ Eliminar línea amarilla heredada */
.expertise-links ul li a,
.expertise-links ul li a::after {
    text-decoration: none !important;
    color: #002b5c !important;
    font-size: 14px !important;
    border-bottom: none !important; /* 🔹 Evita línea amarilla */
    background: none !important;
    box-shadow: none !important;
}

/* ❌ También evitar que se agregue en hover */
.expertise-links ul li a:hover,
.expertise-links ul li a:hover::after {
    text-decoration: none !important;
    color: #002b5c !important;
    border-bottom: none !important;
    background: none !important;
    box-shadow: none !important;
    
}

/* 🔹 Imagen dentro del mega menú */
.expertise-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 30%;
}

.expertise-image img {
    width: 80%;
    border-radius: 0px;
}





.projects-dropdown {
    left: auto !important;       /* Elimina la alineación actual que causa problemas */
    right: 0 !important;         /* Coloca el menú a la derecha del ítem padre */
    transform: none !important;  /* Anula el translateX anterior */
}

/* Segundo menú (Projects) */
.menu-item:nth-child(3) .dropdown-menu {
    left: 50% !important;         /* Lo mueve inicialmente al 50% del elemento padre */
    transform: translateX(-70%) !important; /* Ajusta para centrar correctamente debajo del menú Projects */
}





/* 🔹 Efecto cuando está en la URL "approach_expertise" */
.active-submenu {
    transform: scale(1.2) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #002b5c !important;
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease-in-out, font-size 0.3s ease-in-out;
}


/* 🔹 Agregar transición para suavizar el efecto */
.active-submenu {
    transition: transform 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

/* ❌ Evita el hover si tiene la clase "no-hover" */
.no-hover:hover {
    transform: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
}





.sub-submenu {
    position: absolute;
    top: 0;
    left: 100%; 
    width: 260px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    padding: 15px;
    border: 1px solid rgb(239,181,66);
    z-index: 9999;
    border-radius: 5px;
    opacity: 0; /* ⬅️ Usa opacidad en lugar de display */
    visibility: hidden; /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Garantiza que submenu-item sea relativo */
.submenu-item {
    position: relative;
}

/* muestra sub-submenú solo cuando haces hover directo en submenu-item */
.submenu-item:hover > .sub-submenu {
    opacity: 1; /* ⬅️ Hace visible al hacer hover */
    visibility: visible;
}

/* estilos internos del sub-submenú */
.expertise-links .submenu-ul-tag .sub-submenu li {
    list-style: none;
    margin-bottom: 0px !important; /* elimina casi todo margen inferior */
    line-height: 1.0 !important;   /* ajusta la altura de la línea al mínimo necesario */
    padding: 1px 0 !important;     /* reduce más el padding vertical */
}

.expertise-links .submenu-ul-tag .sub-submenu li a {
    padding: 6px 8px !important; /* padding equilibrado sin aumentar mucho el tamaño */
    font-size: 13px !important; /* mantiene el tamaño de fuente más pequeño */
    display: flex !important; /* usar flexbox para centrado vertical */
    align-items: center !important; /* centrar verticalmente el texto */
    line-height: 1.2 !important; /* altura de línea controlada */
}

.sub-submenu li a:hover {
    color: rgb(239,181,66);
}

/* Evitar crecimiento excesivo en los enlaces del menú */
.expertise-links ul li a:hover {
    transform: scale(1.05) !important; /* crecimiento leve del 5% máximo */
    font-size: 15px !important; /* tamaño controlado para evitar desbordamiento */
    font-weight: 600 !important; /* peso suficiente para destacar sin exagerar */
}

/* Asegurar que no haya desbordamiento visual del texto */
.expertise-links ul li a {
    display: inline-block; /* permite que el escalado funcione correctamente */
    overflow: hidden;      /* oculta desbordes si suceden */
    white-space: nowrap;   /* evita que se corte el texto en dos líneas */
    text-overflow: ellipsis; /* muestra puntos suspensivos si el texto es muy largo */
    transition: transform 0.2s ease-in-out, font-size 0.2s ease-in-out;
}










/* ====== CONTACT US MENU (MISMO ESTILO QUE PROJECTS) ====== */
.contact-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-80%);
    width: 800px;
    height: 240px;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    flex-direction: column;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 100;
    border-radius: 5px;
    padding: 0px;
}

/* Activa el menú en hover */
.menu-item:hover .contact-dropdown {
    display: flex;
}

 






/* Que todo se vea bien en Desktop*/
@media (min-width: 1025px) {
    .header-container {
        display: flex !important; /* 🔹 REACTIVAMOS el header de escritorio */
    }

    .mobile-header,
    .mobile-menu-container {
        display: none !important; /* 🔹 Oculta la versión móvil en escritorio */
    }
}



/* ====== Ajuste para Tablets ====== */
@media (max-width: 1024px) {

    .header-container {
        display: none;
    }

    .header {
        padding: 0;
    }

    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        background: transparent;
        position: fixed;
        width: 100%;
        height: 80px;
        padding: 10px 20px;
        top: 0;
        left: 0;
        z-index: 1001;
        transition: background-color 0.3s ease;
    }

    /* Clase que se añade al hacer scroll */
    .mobile-header.scrolled {
        background: rgba(35, 60, 111, 1); /* Color azul del footer */
    }

    /* Cuando el menú está abierto, también usar fondo azul */
    .mobile-header.menu-open {
        background: rgba(35, 60, 111, 1);
    }

    /* Logo */
    .mobile-header .logo {
        display: flex;
        align-items: center;
    }

    .mobile-header .logo img {
        height: 60px;
        width: auto;
    }

    /* Botón de menú hamburguesa */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        cursor: pointer;
        position: relative;
        right: 20px;
        z-index: 1002;
    }

    .mobile-menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: white;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Animación para convertir en X */
    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }

    /* Línea debajo del header */
    .mobile-header-line {
        position: absolute;
        bottom: 0;
        left: 48%;
        transform: translateX(-50%);
        width: 90%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    /* Contenedor del menú */
    .mobile-menu-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(35, 60, 111, 1);
        padding-top: 90px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
        overflow-y: auto;
    }

    .mobile-menu-container.active {
        opacity: 0.95;
        visibility: visible;
    }

    /* 📌 Cuando se haga scroll, el fondo será azul */
    .scrolled .mobile-header {
        top: 0;
        background: rgba(35, 60, 111, 0.9) !important;
    }

    .mobile-navigation {
        width: 100%;
        height: calc(100vh - 80px); /* Resta la altura del header */
        overflow-y: auto;
        margin-top: 50px;
    }
    
    /* 📌 Lista de elementos del menú */
    .mobile-menu {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 97%;
        margin-left: 10px;
    }

    .mobile-menu-item {
        position: relative; /* Para posicionamiento relativo */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        width: 97%;
    }

    .mobile-menu-item > a {
        padding: 15px 20px;
        font-size: 20px;
        color: white;
        text-decoration: none;
        display: block;
        width: calc(100% - 50px); /* Espacio para la flecha */
    }

    /* Posicionamiento correcto de la flecha principal */
    .mobile-menu-item > .mobile-arrow {
        position: absolute;
        right: 20px;
        top: 15px; /* Alineado con el título principal */
        color: white;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    /* Ajuste para submenús y sus flechas */
    .mobile-submenu li {
        position: relative;
        padding: 10px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-submenu .mobile-arrow {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Rotación de la flecha cuando está activo */
    .mobile-menu-item.active > .mobile-arrow {
        transform: rotate(180deg);
    }

    /* Estilos para sub-submenús */
    .mobile-sub-submenu {
        display: none;
        background-color: rgba(255, 255, 255, 0.03);
    }

    .mobile-submenu li.active > .mobile-sub-submenu {
        display: block;
        
    }

    .mobile-sub-submenu li a {
        padding-left: 50px;
    }

    /* Ajustes para el logo y el botón de cerrar */
    .mobile-header .logo img {
        height: 60px;
    }

    .mobile-menu-toggle {
        right: 60px;
    }

    /* Estilos para submenús móviles */
    .mobile-submenu,
    .mobile-sub-submenu {
        display: none;
    }

    /* Cuando están activos */
    .mobile-menu-item.active > .mobile-submenu,
    .mobile-submenu li.active > .mobile-sub-submenu {
        display: block;
    }

    /* Indentación para niveles */
    .mobile-submenu {
        padding-left: 20px;
    }

    .mobile-sub-submenu {
        padding-left: 20px;
    }

    /* Estilos para todos los enlaces del menú móvil */
    .mobile-menu-item a,
    .mobile-submenu li a,
    .mobile-sub-submenu li a {
        color: white !important;
        text-decoration: none;
    }

    /* Estilos específicos para los submenús */
    .mobile-submenu li,
    .mobile-sub-submenu li {
        color: white;
    }

    /* Asegurar que los enlaces en hover también sean blancos */
    .mobile-menu-item a:hover,
    .mobile-submenu li a:hover,
    .mobile-sub-submenu li a:hover {
        color: rgba(255, 255, 255, 0.8) !important; /* Opcional: un efecto hover suave */
    }

    /* Ajustes para el menú móvil */
    .mobile-menu-item {
        position: relative;
        width: 100%;
    }

    .mobile-menu-item > a {
        padding: 15px 20px;
        font-size: 18px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 40px); /* Reducir el ancho para dar espacio a la flecha */
    }

    .mobile-menu-item > a .mobile-arrow {
        position: absolute;
        right: 45px; /* Aumentar la distancia desde el borde derecho */
    }

    /* Solo para los menús que tienen submenús */
    .mobile-menu-item:has(.mobile-submenu) > a {
        padding-right: 50px; /* Dar más espacio para la flecha */
    }

    /* Mantener los estilos existentes para las flechas de los submenús */
    .submenu-header .mobile-arrow {
        position: relative;
        right: 0;
        margin-right: 20px;
    }

    /* Rotación de la flecha cuando está activo */
    .mobile-menu-item.active > a .mobile-arrow,
    .submenu-item.active .mobile-arrow {
        transform: rotate(180deg);
    }

    /* Estilos para los headers de submenús */
    .submenu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        width: 97%;
        cursor: pointer;
        color: white;
    }

    /* Ajustes para submenús */
    .mobile-submenu {
        display: none;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .mobile-sub-submenu {
        display: none;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.08);
    }

    /* Estilos activos */
    .mobile-menu-item.active > .mobile-submenu,
    .submenu-item.active > .mobile-sub-submenu {
        display: block;
    }

        
    /* Estilo común para todas las flechas */
    .mobile-arrow {
        position: absolute;
        right: 45px;
        color: white;
        transition: transform 0.3s ease;
    }

    /* Ajuste para los menús principales */
    .mobile-menu-item > a {
        padding: 15px 20px;
        font-size: 18px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }

    /* Ajuste para los submenús */
    .submenu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        width: 100%;
        cursor: pointer;
        color: white;
        position: relative; /* Añadido para posicionamiento absoluto de la flecha */
    }

    /* Ajuste para el texto de los submenús */
    .submenu-header span:first-child {
        padding-right: 50px; /* Espacio para la flecha */
    }

    /* Rotación de flechas cuando están activas */
    .mobile-menu-item.active > a .mobile-arrow,
    .submenu-item.active .mobile-arrow {
        transform: rotate(180deg);
    }

    /* Estilos base para los contenedores de menú */
    .mobile-menu-item > a,
    .submenu-header {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }

    /* Estilos para las flechas */
    .mobile-arrow {
        display: inline-block;
        position: absolute;
        right: 30px;
        color: white;
        font-size: 16px;
        transition: transform 0.3s ease;
        pointer-events: none; /* Para que el click funcione en todo el contenedor */
    }

    /* Estilos específicos para menús principales */
    .mobile-menu-item > a {
        color: white;
        font-size: 18px;
        text-decoration: none;
    }

    /* Estilos específicos para submenús */
    .submenu-header {
        color: white;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Rotación de flechas cuando están activas */
    .mobile-menu-item.active > a .mobile-arrow,
    .submenu-item.active .submenu-header .mobile-arrow {
        transform: rotate(180deg);
    }

    /* Estilos para todos los elementos del menú móvil */
    .mobile-menu-item > a,
    .mobile-submenu li a {
        padding: 15px 20px;
        color: white;
        display: block;
        width: 100%;
        text-decoration: none;
        font-size: 16px;
    }

    /* Estilos específicos para los elementos con submenús */
    .mobile-menu-item > a,
    .submenu-header {
        position: relative;
        padding-right: 50px; /* Espacio para la flecha */
    }

    /* Estilos para los submenús */
    .mobile-submenu {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .mobile-submenu li a {
        padding-left: 40px; /* Indentación para submenús */
    }

    /* Estilos para las flechas */
    .mobile-arrow {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 12px;
    }

    /* Rotación de flechas cuando están activas */
    .mobile-menu-item.active > a .mobile-arrow,
    .submenu-item.active .mobile-arrow {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Asegurar que los enlaces de submenús no tengan flechas por defecto */
    .mobile-submenu li a:not(.submenu-header) {
        padding-right: 20px;
    }

    /* Estilos base del menú móvil */
    .mobile-menu {
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* Estilos para todos los items del menú */
    .mobile-menu-item, 
    .submenu-item {
        width: 100%;
        position: relative;
    }

    /* Estilos comunes para todos los enlaces */
    .mobile-menu-item > a,
    .mobile-submenu li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        color: white;
        text-decoration: none;
        width: 100%;
        position: relative;
    }

    /* Estilos específicos para menús principales */
    .mobile-menu-item > a {
        font-size: 16px;
    }

    /* Estilos para submenús */
    .mobile-submenu {
        width: 100%;
        display: none;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .mobile-submenu li > a {
        padding-left: 40px;
        font-size: 15px;
    }

    /* Estilos para sub-submenús */
    .mobile-sub-submenu {
        width: 100%;
        display: none;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .mobile-sub-submenu li > a {
        padding-left: 60px;
    }

    /* Estilos para las flechas */
    .mobile-arrow {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 12px;
        pointer-events: none;
    }

    /* Rotación de flechas cuando están activas */
    .mobile-menu-item.active > a .mobile-arrow,
    .submenu-item.active > a .mobile-arrow {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Mostrar submenús cuando están activos */
    .mobile-menu-item.active > .mobile-submenu,
    .submenu-item.active > .mobile-sub-submenu {
        display: block;
    }

    /* Resetear estilos básicos */
    .mobile-menu,
    .mobile-submenu,
    .mobile-sub-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Estilo básico para todos los enlaces */
    .mobile-menu a {
        color: white;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        position: relative;
    }

    /* Estilos para las flechas */
    .has-submenu > a::after {
        content: '▼';
        position: absolute;
        right: 20px;
        font-size: 12px;
        color: white;
    }

    /* Rotación de la flecha cuando está activo */
    .active > a::after {
        transform: rotate(180deg);
    }

    /* Indentación para niveles */
    .mobile-submenu a {
        padding-left: 40px;
    }

    .mobile-sub-submenu a {
        padding-left: 60px;
    }

    /* Ocultar submenús por defecto */
    .mobile-submenu,
    .mobile-sub-submenu {
        display: none;
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Mostrar submenús cuando están activos */
    .active > .mobile-submenu,
    .active > .mobile-sub-submenu {
        display: block;
        width: 96%;
    }

    /* Estilos para los elementos del menú móvil */
    .mobile-menu > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 15px; /* Espaciado entre elementos del menú */
    }

    /* Estilos para los submenús */
    .mobile-submenu > li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 15px; /* Espaciado entre elementos del submenú */
    }

    /* Estilos para los sub-submenús */
    .mobile-sub-submenu > li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 15px; /* Espaciado entre elementos del sub-submenú */
    }

    /* Ajuste del padding para mantener la alineación con las líneas */
    .mobile-menu > li > a,
    .mobile-submenu > li > a,
    .mobile-sub-submenu > li > a {
        padding: 10px 20px;
    }

    /* Asegurar que el último elemento no tenga margen inferior */
    .mobile-menu > li:last-child,
    .mobile-submenu > li:last-child,
    .mobile-sub-submenu > li:last-child {
        margin-bottom: 0;
    }

}




/* ====== Ajuste para Móviles ====== */
@media (max-width: 767px) {
    
    .header-container {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .mobile-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        background: transparent;
        position: fixed;
        width: 100%;
        height: 70px;
        padding: 0 20px;
        top: 0;
        left: 0;
        z-index: 1001;
        transition: background-color 0.3s ease;
    }

    .mobile-header .logo img {
        height: 50px;
    }

    .mobile-header-line {
        bottom: 0;
        left: 46%;
        width: 85%;
    }

    /* Cuando tiene fondo azul */
    .mobile-header.scrolled,
    .mobile-header.menu-open {
        background: rgba(35, 60, 111, 1);
        height: 70px; /* Asegura la misma altura */
    }

    .mobile-menu-toggle {
        scale: 0.6;
        right: 40px !important;
        top: 0;
    }

    .active > .mobile-submenu,
    .active > .mobile-sub-submenu {
        display: block;
        width: 90%;
    }

}

/* Quitar el fondo de los submenús */
.mobile-submenu,
.mobile-sub-submenu {
    background-color: transparent !important;
}

/* Ajustar el padding para los submenús */
.mobile-submenu > li > a {
    padding-left: 40px; /* Indentación para submenús */
}

.mobile-sub-submenu > li > a {
    padding-left: 60px; /* Indentación para sub-submenús */
}

/* Mantener las líneas de separación */
.mobile-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 15px;
}

.mobile-submenu > li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 15px;
}

.mobile-sub-submenu > li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 15px;
}