/* ============================================================
   HEADER V2 — layout en 3 niveles (topbar / nav principal / nav landing)
   Aplica solo a: #header-desktop.header-v2
   ============================================================ */

/* Override base: el header pasa a columna en lugar de fila */
#header-desktop.header-v2 {
  flex-direction: column;
  height: auto;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

/* ─────────────────────────────────────────
   NIVEL 1: Top bar (logo + global/contacta)
───────────────────────────────────────── */
.header-topbar {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 0 max(56px, calc(50% - var(--container-width) / 2));
  height: 56px;
  border-bottom: 1px solid rgba(130, 128, 159, 0.15);
}

.header-topbar .logo img {
  height: 32px;
}

/* Menú global (menu_secundario) en la top bar */
#menu-global .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

#menu-global .menu li {
  float: none;
  position: relative;
}

#menu-global .menu li a {
  cursor: pointer;
  color: var(--dark-blue-100);
  line-height: 56px;
  padding: 0 10px;
  display: inline-block;
  font-family: "Red Hat Display", sans-serif;
  font-size: 15px;
  font-weight: 400;
}

#menu-global .menu li a:hover,
#menu-global .menu li a:focus {
  color: var(--azul-light-100);
}

/* WPML dropdown posicionado bajo la top bar */
#menu-global .wpml-ls-current-language > .sub-menu {
  top: 50px;
}

/* En pantallas ≤1200px ocultar todo salvo el último item (WPML) */
@media (max-width: 1200px) {
  #menu-global .menu li {
    display: none;
  }
  #menu-global .menu li:last-child {
    display: flex;
  }
}


/* ─────────────────────────────────────────
   NIVEL 2: Menú principal (ancho completo, izquierda)
───────────────────────────────────────── */
#header-desktop.header-v2 #menu-principal {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(130, 128, 159, 0.15);
}

#header-desktop.header-v2 #menu-principal > ul {
  padding: 0 max(56px, calc(50% - var(--container-width) / 2));
  justify-content: flex-start;
}

#header-desktop.header-v2 #menu-principal > ul > li {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header-desktop.header-v2 #menu-principal > ul > li > a {
  height: 100%;
  display: flex;
  align-items: center;
}
#header-desktop.header-v2 #menu-principal>ul li {
    float: left;
    line-height: 25px;
}
#header-desktop #menu-principal li.page_current a::after {
    border-bottom: solid 0px var(--azul-light-25);
}
#header-desktop.header-v2 #menu-principal > ul > li.current-menu-item > a,
#header-desktop.header-v2 #menu-principal > ul > li.page_current > a {
  text-decoration: underline;
}

/* Indicador de página actual: reajuste de posición vertical */
#header-desktop.header-v2 #menu-principal li.page_current a::after {
  bottom: 0;
}

/* Submenú desplegable: posición según nuevo alto total (56 topbar + 64 menu) */
#header-desktop.header-v2 #menu-principal .submenu.active {
  position: absolute;
  top: 100%;
}

#header-desktop.header-v2 #menu-principal .submenu-flex {
  max-height: calc(100vh - 106px);
}

/* Ocultar cards del submenu en pantallas intermedias */
@media (max-width: 1200px) {
  #header-desktop.header-v2 #menu-principal .submenu .submenu-info {
    display: none;
  }
}


/* ─────────────────────────────────────────
   NIVEL 3: Menú landing
───────────────────────────────────────── */
#menu-landing-header {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid rgba(130, 128, 159, 0.15);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#menu-landing-header::-webkit-scrollbar {
  display: none;
}

#menu-landing-header .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

#menu-landing-header .menu li {
  margin-right: 40px;
  white-space: nowrap;
}

#menu-landing-header .menu li:last-child {
  margin-right: 0;
}

#menu-landing-header .menu li a {
  color: var(--dark-blue-100);
  font-family: "Red Hat Display", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 56px;
  display: inline-block;
}

#menu-landing-header .menu li a:hover,
#menu-landing-header .menu li a:focus {
  color: var(--azul-light-100);
}

#menu-landing-header .menu li.current-menu-item a {
  font-weight: 600;
  border-bottom: 2px solid var(--azul-light-25);
}