/*CONFIGURACIÓN GENERAL (Se aplica a todas las pantallas)*/

    .menu-principal,
    .sub-menu,
    .sub-menu-movil {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .flecha {
        font-size: 10px;
        margin-left: 5px;
    }



    @media (max-width: 768px) {

        /* Mostramos el contenedor móvil de forma correcta sin cortar el contenido */
        .navegacion-movil {
            display: block !important;
            font-family: sans-serif;
            position: relative;
            z-index: 9999;
            /* ¡QUITAMOS EL OVERFLOW: HIDDEN QUE DESAPARECÍA LA BARRA! */
        }

        /* Ocultamos el menú principal horizontal de computadora en el celular */
        .menu-principal {
            display: none !important;
        }

        /* Contenedor del botón flotando a la derecha */
        .contenedor-boton {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10000;
        }

        .boton-hamburguesa {
            background: none;
            border: none;
            color: #003366;
            /* Puedes cambiar este color si tu fondo de barra es celeste */
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .boton-hamburguesa .icono-cambiante {
            font-size: 32px;
            line-height: 1;
        }

        .boton-hamburguesa .texto-menu {
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 1px;
        }

        /* Fondo azul completo con animación de deslizamiento */
        .menu-pantalla-completa {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #0d3c6c;
            padding: 100px 30px 30px 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            /* Esconde el menú a la derecha */
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            /* Animación fluida */
            overflow-y: auto;
            list-style: none !important;
            padding-left: 0 !important;
        }

        /* Clase que activa JavaScript para meter el menú a la pantalla */
        .menu-pantalla-completa.abierto {
            transform: translateX(0) !important;
        }

        /* Líneas blancas delgadas */
        .menu-pantalla-completa li {
            width: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        /* Enlaces alineados a la derecha */
        .menu-pantalla-completa .enlace-movil {
            display: block;
            color: white !important;
            text-decoration: none;
            padding: 18px 0;
            text-align: right;
            font-size: 18px;
        }

        .menu-pantalla-completa .flecha {
            font-size: 12px;
            margin-right: 5px;
            display: inline-block;
            transition: transform 0.2s ease;
        }

        /* Submenús en el celular */
        .sub-menu-movil {
            display: none;
            background-color: rgba(0, 0, 0, 0.15);
        }

        .sub-menu-movil.desplegado {
            display: block;
        }

        .sub-menu-movil li {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .sub-menu-movil li a {
            display: block;
            color: #fdfdfd;
            text-decoration: none;
            padding: 12px 15px;
            text-align: right;
            font-size: 15px;
        }
    }


    @media (min-width: 769px) {

        /*Ocultamos por completo la hamburguesa de celular en PC*/
        .navegacion-movil,
        .contenedor-boton,
        .boton-hamburguesa {
            display: none !important;
        }

        /*Forzamos a que el menú principal horizontal sí se vea en PC*/
        .menu-principal {
            display: flex !important;
            justify-content: center;
            gap: 70px;
            background: radial-gradient(circle at 67.6% 20.39%, rgba(255, 255, 255, 0.5), transparent 69%), radial-gradient(circle at 88.75% 28.67%, rgba(255, 255, 255, 0.5), transparent 60%), radial-gradient(circle at 13.33% 0.38%, #bedbf752, transparent 38%), radial-gradient(circle at 86.77% 1.6%, #bedbf752, transparent 39%), radial-gradient(circle at 81.09% 74.15%, rgba(255, 255, 255, 0.5), transparent 57%), radial-gradient(circle at 67.81% 96.71%, #bedbf752, transparent 36%), radial-gradient(circle at 50% 50%, #ffffff, #ffffff 100%);
            background-repeat: no-repeat;
            font-family: Arial, sans-serif;

        }

        .menu-principal>li.tiene-desplegable>a.enlace-principal {
            font-weight: 600 !important;
        }



        .tiene-desplegable:hover>.enlace-principal {
            color: #ffffff;
            background-color: #002d57;
            /* mismo color, sin salto */
        }

        /*Estilo para cada botón principal en PC*/
        .enlace-principal {
            color: #003366;
            font-size: 15px;
            margin-right: 10px;
            text-decoration: none;
        }

        .enlace-principal:hover {
            display: block;
            color: #ffffff;
            text-align: left;
            text-decoration: underline solid 1px !important;
        }

        /*Comportamiento del desplegable con el mouse (Hover) en PC*/
        .tiene-desplegable:hover {
            position: relative;
            background-color: #002d57;
            color: #ffffff;

        }

        .tiene-desplegable {
            padding: 10px;
            text-decoration: none;
        }

        .sub-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: max-content;
            background-color: #f8f9fa;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .tiene-desplegable:hover .sub-menu {
            display: block;
        }

        .sub-menu li a {
            display: block;
            padding: 12px 15px !important;
            color: #003366;
            font-size: 13px;
            border-bottom: 1px solid #e0e0e0;
            text-decoration: none;

        }

        .sub-menu li a:hover {
            background-color: #f0f4f8;
            text-decoration: underline solid 1px !important;
        }

    }