.mega-nav{
    position: relative;
    z-index: 1000;
    display:flex;
    justify-content:center;
    width:100%;
    background:#42ACBF;
}

.menu-level-1{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    margin:0;
    padding:0;
    list-style:none;
}

.menu-level-1 > li{
    list-style:none;
}

.menu-level-1 > li > a{
    display:block;
    padding:20px 0;
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

/* ocultar submenus */
.menu-level-1 .sub-menu{
    display:none;
}

/* mega panel */
.menu-level-1 > li.open > .sub-menu{
    display:grid;

    position:absolute;

    left:50%;
    transform:translateX(-50%);

    width:1400px;
    max-width:95vw;

    padding:40px;

    background:#fff;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

    z-index:9999;

    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

/* fondo full ancho */
.menu-level-1 > li.open > .sub-menu::before{
    content:"";

    position:fixed;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:100vw;
    height:100%;

    background:#fff;

    z-index:-1;
}

/* columnas */
.menu-level-1 > li.open > .sub-menu > li{
    list-style:none;
}

/* títulos */
.menu-level-1 > li.open > .sub-menu > li > a{
    display:block;

    margin-bottom:15px;

    font-size:18px;
    font-weight:700;

    color:#111;

    text-decoration:none;
}

/* tercer nivel */
.menu-level-1 > li.open > .sub-menu > li > .sub-menu{
    display:block;

    margin:0;
    padding:0;

    position:static;

    background:none;
    box-shadow:none;
}

.menu-level-1 > li.open > .sub-menu > li > .sub-menu li{
    list-style:none;
    margin-bottom:10px;
}

.menu-level-1 > li.open > .sub-menu > li > .sub-menu a{
    color:#444;
    font-size:14px;
    text-decoration:none;
    transition:.2s;
}

.menu-level-1 > li.open > .sub-menu > li > .sub-menu a:hover{
    color:#000;
}

/* botón cerrar */
.mega-close{
    position:absolute;
    top:200px;
    right:calc((100vw - min(1400px,95vw))/2 + 20px);
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    color:#fff;
    background:#FA3741;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
    cursor:pointer;
    font-size:20px;
    display:none;
    z-index:10001;
}

.mega-close.active{
    display:flex;
    align-items:center;
    justify-content:center;
}

.mega-close:hover{
    transform:scale(1.05);
}