*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial;background:#f5f5f5;}

/* HEADER */
.ens-header{background:#fff;}
.header-wrap{margin:0 auto;}

/* TOP */
.top-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
border-bottom:1px solid #ddd;
}

.logo-area{display:flex;align-items:center;gap:20px; margin-left: 10px;}
.logo-ens{width:80px;}

.site-title h1{font-size:1.5rem; font-weight: 700;color:#3f2e1f; padding: 0; margin: 0;}
.site-title span{font-size:1.2rem;color:#3f2e1f;}

.top-links a{margin-left:10px;text-decoration:none;color:#333;}

/* HAMBURGUESA */
.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
color:#0d5aa7;
}

/* NAV */
.main-nav{
background: #3d0a00;
background: linear-gradient(90deg,rgba(61, 10, 0, 1) 0%, rgba(121, 9, 20, 1) 35%, rgba(255, 178, 45, 1) 100%);
position:sticky;
top:0;
z-index:9999;
    margin-bottom: 0;
}

/* MENU */
.menu{
display:flex;
justify-content:center;
list-style:none;
}

.menu li{position:static;}

.menu a{
color:#fff;
padding:18px 20px;
display:block;
text-decoration:none;
white-space:nowrap;
    font-size: 1.2rem;
}

.menu a:hover{color:#fff; }

.main-nav ul{ margin-bottom: 0px !important;}

.menu li:hover{background:#08457f; border-radius: 5px!important;}

/* MEGA MENU DESKTOP */
.mega-menu{
position:absolute;
left:50%;
top:100%;
transform:translateX(-50%);
width:1000px;
max-width:95%;
background:#fff;
display:grid;
grid-template-columns: repeat(3,1fr) ;
gap:20px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
opacity:0;
visibility:hidden;
transition:.3s;
}

.has-mega:hover .mega-menu{
opacity:1;
visibility:visible;
}

.ens-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
}


.mega-col h4{color:#8b1e3f;margin-bottom:10px; font-size: 1.1rem;}
.mega-col ul{list-style:none; padding-left: 0px; padding-right: 10px;}
.mega-col li{/*margin-bottom:8px;*/ margin-left: 10px;}
.mega-col p{width:300px; line-height: 1.2;}

.mega-col a{
    color:#24415c; 
    border-radius: 5px; 
    font-size: 0.9rem; 
    padding: 10px 10px 10px 18px;
    display: block;
    /*width: 210px;
    max-width: 210px;*/
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1;
    text-align:left;
    position: relative;
    transition: .3s;
}

/* Hover */
.mega-col a:hover{
    color:#fff;
    padding-left: 38px; /* mueve TODO el contenido */
}

/* Flecha */
.mega-col a::before {
    content: "\f061"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);

    opacity: 0;
    transition: .3s;
    font-size: .9rem;
}

/* Mostrar flecha */
.mega-col a:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* CUANDO mega-image ESTÁ DENTRO */
.mega-col .mega-image{
    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
}

/* CUANDO EL MISMO ELEMENTO TIENE LAS 2 CLASES */
.mega-col.mega-image{
    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    gap:1rem;
}

/* IMÁGENES */
.mega-image{
    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    gap:.7rem;

    width:100%;
}

.mega-image img{
    width:100px;
    object-fit:contain;

    display:block;
}

.mega-image h4{
    margin:0;
}
@media(min-width:1200px){}

/* SUBMENU MOBILE */
.submenu{
display:none;
background:#1f5fa8;
}

.submenu a{
display:block;
padding:5px 30px;
font-size:16px;
}

.submenu a:hover{
background-color: #001f3f;
}

.submenu-title{
    color:#fff;    
    padding:14px 30px 6px;
    background:rgba(0,0,0,.18);
    font-size:18px;
}

.submenu-title::before{
    content:"▸ ";
}

/* GRUPO */
.submenu-group{
    border-top:1px solid rgba(255,255,255,.12);
}

/* TITULO */
.submenu-title{
    color:#fff;    
    padding:14px 25px;
    background:rgba(0,0,0,.18);
    cursor:pointer;
    position:relative;
}

/* FLECHA */
.submenu-title::after{
    content:"▾";
    position:absolute;
    right:20px;
    transition:.3s;
}

/* ROTAR */
.submenu-group.active .submenu-title::after{
    transform:rotate(180deg);
}

/* ITEMS */
.submenu-items{
    display:none;
    background:#2a67af;
}

/* MOSTRAR */
.submenu-group.active .submenu-items{
    display:block;
}

@media(max-width:900px){

    .menu > li.has-mega.active > a{
        background:#ff7730 linear-gradient(90deg,rgba(61, 10, 0, 1) 0%, rgba(121, 9, 20, 1) 35%, rgba(255, 178, 45, 1) 100%) !important;
        color:#fff !important;
    }

    .submenu-group.active > .submenu-title{
        background:#ff7730 !important;
        color:#fff !important;
    }

    .submenu-group.active > .submenu-title::after{
        color:#fff;
    }

    .submenu-group.active .submenu-items{
        background:#fff3e8;
    }

    .submenu-group.active .submenu-items a{
        color:#7a1c1c !important;
    }

    .submenu-group.active .submenu-items a:hover{
        background:#ff7730;
        color:#fff !important;
    }
}


/* LINKS */
.submenu-items a{
    display:block;
    padding:10px 40px;
    color:#fff;
    text-decoration:none;
    font-size:16px;
}

.submenu-items a:hover{
    background:#001f3f;
}


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

.mega-image img{display: none !important;}
/* ocultar top-links */
.top-links{display:none !important;}

/* hamburguesa visible */
.menu-toggle{display:block;}

/* menú vertical */
.menu{
position:absolute;
top:100%;
left:0;
width:100%;
background:#0d5aa7;
flex-direction:column;
display:none;
        padding-left: 0;
}

.menu.active{display:block;}

.menu li{border-top:1px solid rgba(255,255,255,0.2); background-color: #08457f;}

.menu a{font-size:18px;}

/* quitar mega */
.mega-menu{display:none !important;}

/* acordeón */
.has-mega > a{
position:relative;
}

.has-mega > a::after{
content:"▾";
position:absolute;
right:20px;
}

.has-mega.active .submenu{
display:block;
}

}

/* DEMO */
.hero{
height:400px;
background:#ccc;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#fff;
}