/* *********************** */
/*       HEADER NAV        */
/* *********************** */
#navList {
  z-index: 999;
}

#submenuTaller,
#submenuSobre {
  min-width: 11rem;
  border-radius: 0 0 var(--md) 0;
  border-top: 3px solid var(--accent);
  transform: translateY(-3px);
}

#navList a span,
#navList button span {
  display: inline-block;
  padding: var(--xsm) 0;
  border-bottom: 3px solid transparent;
}

#navList a span:hover,
#navList button:not([aria-expanded="true"]) span:hover {
  border-bottom-color: var(--black);
}

#navList button[aria-expanded="true"] span {
  color: var(--accent);
}

@media (max-width: 64rem) {
  #logo {width: 14rem;}
}


@media (max-width: 48rem) {
  #navList {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    padding-block: var(--lg);
    overflow-y: auto;
    width: calc(100% - 2rem);
    max-width: 32rem;
    max-height: 80vh;
    border-radius: var(--md);
    background-color: var(--light-grey);
    text-align: center;
  }

  #navList.active {
    display: flex;
  }

  #menuToggle, #closeNavList {
    display: block;
  }

  #submenuTaller,
  #submenuSobre {
    position: static;
    box-shadow:
      inset 0 3px 6px -3px var(--dark-grey),
      inset 0 -3px 6px -3px var(--dark-grey);
    border-radius: 0;
  }
}

@media (min-width: 48rem) {
    #overlayNav {
    display: none;
  }
}

/* *********************** */
/*       BANNER       */
/* *********************** */
#bannerMsgs {
  transition: transform var(--trans-med) ease;
}

/* *********************** */
/*       FOOTER            */
/* *********************** */
@media (max-width: 48rem) {
  .ord2-mob {
    order: 2;
  }
}