/* =========================================================
   MEGA MENU - ASICON CONSULTING
   Desktop + Responsive
========================================================= */

/* =========================================================
   CONTENEDOR
========================================================= */

.menu{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:80%;
    height:80px;
    margin-left:auto;
    padding:0;
    background:transparent;
    z-index:9999;
}

.menu .container{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* =========================================================
   NAV
========================================================= */

#nav{
    width:100%;
    position:relative;
}

#nav *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#nav ul{
    list-style:none;
}

#nav > ul{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:80px;
}

#nav > ul > li{
    position:static;
    display:flex;
    align-items:center;
    height:80px;
    padding:0 18px;
}

/* =========================================================
   LINKS PRINCIPALES
========================================================= */

#nav > ul > li > a{
    display:flex;
    align-items:center;
    height:54px;
    padding:0 14px;
    border-radius:28px;
    text-decoration:none;
    font-family:'Montserrat',sans-serif;
    transition:.25s;
}

#nav > ul > li > a:before{
    margin-right:10px;
    color:#E8E8E8;
    font-family:'Font Awesome 5 Free';
    font-size:22px;
    font-weight:900;
}

#nav > ul > li > a span{
    color:#FFF;
    font-size:15px;
    font-weight:500;
    letter-spacing:1px;
    white-space:nowrap;
}

#nav > ul > li:hover > a,
#nav > ul > li.open > a{
    filter:
        drop-shadow(0 0 4px rgba(13,110,151,1))
        drop-shadow(0 0 10px rgba(13,110,151,.95))
        drop-shadow(0 0 22px rgba(13,110,151,.80));
}

#nav > ul > li:hover > a span,
#nav > ul > li.open > a span{
    font-weight:600;
}

/* =========================================================
   MEGA PANEL DESKTOP
========================================================= */

#nav > ul > li > ul{
    position:fixed;
    top:80px;
    left:0;
    width:100%;
    padding:28px 0;
    background:rgba(5,5,5,.94);
    border-top:1px solid #0D6E97;
    border-bottom:2px solid #0D6E97;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,220px));
    justify-content:center;
    gap:24px 40px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:.25s;
    z-index:9999;
}

#nav > ul > li.open > ul{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#nav > ul > li > ul > li{
    width:220px;
    display:flex;
    flex-direction:column;
}

#nav > ul > li > ul > li > a{
    color:#FFF;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
    margin-bottom:12px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

#nav > ul > li > ul > li > ul{
    position:static;
    display:flex;
    flex-direction:column;
    gap:8px;
    background:transparent;
}

#nav > ul > li > ul > li > ul > li > a{
    display:flex;
    align-items:center;
    color:#CFCFCF;
    font-size:14px;
    text-decoration:none;
    transition:.2s;
}

#nav > ul > li > ul > li > ul > li > a:hover{
    color:#3BB6E6;
    padding-left:8px;
}

/* =========================================================
   UTILIDADES
========================================================= */

.navPanelToggle,
#navPanel,
.toggle,
#header .toggle{
    display:none !important;
}

/* =========================================================
   1200
========================================================= */

@media (max-width:1200px){

    .menu{
        width:95%;
        height:72px;
    }

    #nav > ul{
        height:72px;
    }

    #nav > ul > li{
        height:72px;
        padding:0 12px;
    }

    #nav > ul > li > a{
        height:48px;
        padding:0 10px;
    }

    #nav > ul > li > a span{
        font-size:13px;
    }

    #nav > ul > li > ul{
        top:72px;
    }
}

/* =========================================================
   900 - RESPONSIVE
========================================================= */
@media (max-width:900px){

    /* El wrapper del menú desaparece visualmente */
    .menu{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        width:80%;
        height:auto;
        margin-left:auto;
    }

    .menu .container{
        width:0;
        height:0;
        display:block;
        overflow:visible;
    }

    /* NAV ocupa toda la altura disponible */
    #nav{
        position:fixed;
        top:72px;
        left:0;
        width:70%;
        height:calc(100vh - 72px);
        z-index:10000;

        display:flex;
        flex-direction:column;
    }

    /* Menú */
    #nav > ul{
        display:none;
        flex-direction:column;
        justify-content:flex-start;   /* <-- importante */
        align-items:stretch;          /* <-- importante */

        flex:1;
        width:100%;
        height:100%;
        margin:0;
        padding:0;

        background:rgba(0,0,0,.90);
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);

        border-bottom:2px solid #0D6E97;

        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
    }

    /* Menú abierto */
    #nav.active > ul{
        display:flex !important;
    }

    #nav > ul > li{
        display:block;
        width:100%;
        height:auto;
        flex:0 0 auto;              /* ← importante */

        padding:0;
        border-bottom:1px solid rgba(255,255,255,.15);
    }

    #nav > ul > li > a{
        display:flex;
        align-items:center;
        justify-content:flex-start;

        min-height:40px;
        height:auto;

        padding:16px 16px;  
        line-height:1.2;

        border-radius:0;
    }

    #nav > ul > li > a:before{
        width:22px;
        margin-right:12px;
        text-align:center;
        flex-shrink:0;
    }

    /* Submenú tipo acordeón */
    #nav > ul > li > ul{
        position:static;
        display:none;
        width:100%;

        overflow:visible;           /* ← evita que recorte el contenido */

        background:rgba(16,16,16,.90);
        padding:8px 0 12px;
        grid-template-columns:1fr;
    }

    #nav > ul > li.open > ul{
        display:grid;
    }
}

/* =========================================================
   600
========================================================= */

@media (max-width:600px){

    #nav{
        top:64px;
        height:calc(100vh - 64px);
    }

    #nav > ul{
        max-height:calc(100vh - 64px);
    }

    #nav > ul > li > a{
        height:54px;
        padding:0 16px;
    }

    #nav > ul > li > a:before{
        font-size:18px;
        margin-right:8px;
    }

    #nav > ul > li > a span{
        font-size:13px;
    }

    #nav > ul > li > ul{
        padding:16px;
    }

    #nav > ul > li > ul > li > a{
        font-size:15px;
    }

    #nav > ul > li > ul > li > ul > li > a{
        font-size:13px;
    }
}