#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1); /* Black background with opacity */
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  
}

.loading {
  background-color: #f8f8f8;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  z-index: 97;
  position: fixed;
  visibility: hidden;
}



.loadinganimation {
  z-index: 98;
  position: fixed;

  /* Loader de puntos */
  color: #f16701;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: l21 0.5s infinite alternate linear;

  /* Posicionamiento centrado */
  top: 30%;
  left: 50%;

  visibility: hidden;
}

 @keyframes l21 {
  50% {
    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
  }
  100% {
    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
  }
}

/* HEADER */
#site-header { position: sticky; top:0; z-index:1000; background:#fff; transition: all .3s ease; border-bottom-style: solid;  border-bottom-width: 2px;  border-bottom-color: #efefef;}






.header__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding:0px 20px;
}
.nav__logo { justify-self: start; }

.nav__logo img { width: 125px; }

.nav__menu { display:flex; gap:30px; list-style:none; margin:0; padding:0;justify-self: center;padding-top: 12px; }

.nav__menu > li { position:relative; }

.nav__menu > li > a { 
  text-decoration:none; 
  color:#333; 
  font-size:17px;
  font-weight: 250;
  cursor:pointer; 
  outline:none; 
  padding-bottom: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  
 }

.nav__menu > li > a:focus { border-bottom:2px solid #f16701; }


.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* MEGA PANEL FULL WIDTH */
.mega-panel {
  position: fixed;
top:76px;
left:0;
width:100vw;
background:#fff;


border-top: 2px solid #efefef;
border-bottom: 1px solid #f0f0f0;


opacity:0; 
visibility:hidden;
transform: translateY(-8px);
transition: all .25s ease;
padding:10px 0;
}


.nav__menu li.active .mega-panel {
  opacity:1; visibility:visible; transform: translateY(0);
}

.mega-panel__inner {
  width:100vw;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap:40px;
  padding-left: 40px;
}

.mega-panel__inner a{
  color: inherit;
  text-decoration: none;
}
.mega-column h4 {
  font-size:15px;
  color: #000;
  text-transform:uppercase;
  margin-bottom:12px;
}

.mega-column a {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:#222;
  margin-bottom:10px;
  text-decoration:none;
  padding:6px;
  border-radius:1px;
  font-weight: 250;
}

.mega-column a:hover {
  background:#f5f7f8;
}

/* VISUAL SEPARATION */
.mega-column { border-right:1px solid #eee; padding-right:20px; }
.mega-column:last-child { border:none; }

.mega-promo {
  background:#f8f9fb;
  padding:20px;
  border-radius:1px;
}

.mega-promo img{
  
  max-height: 250px;  
  object-fit: cover; 
  margin-right:50px;
}


.header__topbar {
  width: 100%;
  background-color:#f9f9fb;
  
  color: #FFF;
  font-size: 13px;
  text-align:right;
  margin-bottom: 10px;
  padding:3px;
  

}

/* MOBILE */
.nav__mobile-toggle { display:none; }

.img_logo {
  color:#FFF;
  text-align: left;
  text-decoration: none;
  
  font-style:normal;
  vertical-align:text-top;
    
  float: left;

  cursor:pointer;

  width: 15ch;
}

 .iconTop {
  border-bottom:#FFF;
  border-bottom-style:solid;
  border-bottom-width:2px;
  color:#00849c;
   display:none;
  
 }


.iconTopClose{
  font-size:24px; 
  cursor: pointer;
  float: right; 
  color:#323232;
  padding-top:12px;
  margin-right: 10px;
  display:none;
}

.nav_menu_li_oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: all .3s ease;
}

@media(max-width:900px){
  .nav_menu_li_oculto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

 .nav__menu {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:74px;
    left:100%;   /* 👈 empieza fuera */
    width:100%;
    height:100%;
    background:#fff;
    transition:.3s;
    overflow-y:auto;
    padding-top:0px;
  }

  .nav__menu.open {
    left:0;  /* 👈 entra */
  }

  .iconTopClose{
    display:flex;
    padding-bottom:40px;
  }

   .iconTop{
    display:flex;
  }

  .mega-promo{
    display:none;
  }


  .nav__menu li { border-bottom:1px solid #eee;  padding: 0px 10px 0px 10px;}

  .nav__menu > li > a { font-size:14px;}
  .nav__menu > li > a:focus { border-bottom:0px solid;}

  .nav__menu > li.has-submenu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:14px;
    font-weight: 450;
  }

  .nav__menu > li.has-submenu > a::after {
    content: '+';
    font-weight: Medium;

  }

  .nav__menu > li.has-submenu.active > a::after {
    content: '-';
  }

  .mega-panel {
    position:static;
    transform:none;
    box-shadow:none;
    padding:0;
    display:none;
    
  }

  .nav__menu li.active .mega-panel {
    display:block;
  }

  .mega-panel__inner { display:block; }

  .nav__mobile-toggle { display:block; }


}

  @media(max-width:430px){
  .header__topbar {
    display:none;
  }
  .logo_top{
    margin-top:10px;
  }

  .nav__menu{
    top:52px;
  }
}