.header_inner {
  position: fixed;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  top:0;
  left: 0;
  padding: 24px;
  z-index: 9999;

}

.header_inner #logo{
  height: unset!important;
  transform: translateY(0%);
  /*display: inline-block;*/
  transition: transform .7s cubic-bezier(0.83, 0, 0.17, 1);

}

.custom-menu-button {
  width: auto;
  font-size: 18px;
  font-weight: bold;
  background: none;
  border: none;
  color: var(--on-background-ligh);
  cursor: pointer;

}

.header_menu_inner {
  clip-path: inset(0px -20px 0px -20px);
}
.header_menu_closed {
  transform: translateY(0%);
  display: inline-block;
  transition: transform .7s cubic-bezier(0.83, 0, 0.17, 1);
}
.header_menu_opened {
  position: absolute;  
  right: 18px;
  transform: translateY(-100%);
  transition: transform .7s cubic-bezier(0.83, 0, 0.17, 1);
}

.menu-is-opening .header_menu_closed {
    transform: translateY(100%);

}
.menu-is-opening .header_menu_opened {
    transform: translateY(0%);
}
.menu-is-opening .header_logo {  
  transform: translateY(100%);
}




/* Overlay general */
.custom-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--background-ligh);
  z-index: 9998;
  transform: translateY(-100%);
  opacity: 1;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.custom-menu-overlay.open {
  transform: translateY(0);
  opacity: 1;
}

/* Contenedor interior con 2 columnas */
.custom-overlay-inner {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
}

.custom-overlay-left,
.custom-overlay-right {
  flex: 1;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu-image {
  
  margin-bottom: 2rem;
}

.social-links a,
.language-switcher a {
  display: block;
  margin-bottom: 10px;
  color: var(--on-background-ligh);
  text-decoration: none;
}

/* Menú de navegación */
.custom-overlay-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-overlay-menu li {
  opacity: 0;
  transform: translateY(40px);
  margin-bottom: 30px; /* más separación entre ítems */
}

.custom-overlay-menu a {
  font-size: 2.5rem;
  text-decoration: none;
  color: var(--on-background-ligh);
  display: inline-block;
  transition: color 0.3s ease;
}

.custom-overlay-menu a:hover {
  color: var(--on-background-ligh);
  text-decoration: underline;
}


/* Muestra logo de escritorio por defecto */
.logo-mobile {
  display: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
   /* En pantallas pequeñas (móvil), muestra el logo móvil */
  .logo-desktop {
    display: none !important;
  }

  .logo-mobile {
    display: inline;
  }

  .custom-overlay-inner {
    flex-direction: column;
    text-align: center;
  }

  .custom-overlay-left,
  .custom-overlay-right {
    padding: 10vw;
    align-items: center;
  }

  .menu-image {
    max-width: 80%;
  }

  .custom-overlay-menu a {
    font-size: 2rem;
  }
}