/* ==========================================================================
   Header v2 — estilo Coursera (menú nativo de WordPress)
   Namespaced bajo .header-v2 para no colisionar con el header v1 (.menu/.navbar).
   Carga condicional desde ThemeSetup::loadAssets() cuando el flag ACF
   `header_v2_enabled` está activo. header.css (componentes reutilizados:
   search-box, lang-menu, menu-user-profile, notif-menu, shop-link) se carga
   global vía styles.css, así que acá solo definimos el layout nuevo + overrides.

   Breakpoints del theme (max-width): 1535 / 1300 / 1150 / 860 / 760 / 500.
   Corte desktop <-> mobile: 860px.
   ========================================================================== */

.header-v2 {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  font-family: inherit;
}

/* El <header> de header.php (host del header-v2) es `position:static` y mide lo
   mismo que el header, así que el `sticky` de .header-v2 no tiene recorrido; y
   el main.js legacy solo le pone `position:fixed` al scrollear hacia ARRIBA
   (mal: al bajar el header se va, al subir reaparece). Forzamos el host a sticky
   con `!important` (le gana al `position:fixed` inline de main.js) → queda
   siempre fijo arriba, en ambos sentidos. La clase la agrega header-v2.js. */
.is-header-v2-host {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
}

/* Al scrollear (header fijo), se oculta la barra superior (utility) y queda
   solo la barra principal, estilo Coursera. La clase la togglea header-v2.js
   según el scroll. Usamos display:none (no overflow:hidden) para no clipear el
   dropdown de idioma del topbar. */
.header-v2.is-scrolled .header-v2__topbar {
  display: none;
}

.header-v2 *,
.header-v2 *::before,
.header-v2 *::after {
  box-sizing: border-box;
}

.header-v2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-v2 a {
  text-decoration: none;
}

.header-v2__inner {
  max-width: 1530px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  width: 100%;
}

/* ---------- Barra superior (utility bar) ---------- */
/* Estilo Coursera: barra fina, fondo blanco, texto oscuro (diferenciada del
   nav principal oscuro). */
.header-v2__topbar {
  background: var(--white);
  /* border-bottom: 1px solid #e6e6e6; */
}

.header-v2__inner--topbar {
  /* El selector de idioma se movió a la barra principal (al lado del carrito).
     El cliente pidió volver a alinear el menú del top bar a la izquierda. */
  justify-content: flex-start;
  min-height: 32px;
  /* Los ítems ocupan toda la altura de la barra para que el underline del ítem
     activo quede pegado al borde inferior (contra la barra principal), estilo
     Coursera, y no flotando bajo el texto. */
  align-items: stretch;
}

.header-v2__topbar .top-bar {
  display: flex;
}

.header-v2__topbar .top-bar__list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 0px;
}

.header-v2__topbar .top-bar__list > li {
  display: flex;
}

.header-v2__topbar a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: #4a4a4a;
  font-size: 13px;
  line-height: 1;
  /* El cliente escribe los títulos con el formato exacto (ej. "Para Familias"). */
  text-transform: none;
  padding-left: 8px;
  padding-right: 8px;
}

.header-v2__topbar a:hover,
.header-v2__topbar .current-menu-item > a:hover {
  /* color: var(--black); */
  background-color: var(--black);
  color: #fff;
}

.header-v2__topbar a:hover::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0;
  height: 6px;
  background: var(--black);
}

/* Ítem de la página actual: barrita pegada al borde inferior, MÁS ANCHA que el
   texto y más gruesa (estilo Coursera). WordPress marca el <li> con
   current-menu-item / current_page_item / current-menu-ancestor. */
.header-v2__topbar .current-menu-item > a,
.header-v2__topbar .current_page_item > a,
.header-v2__topbar .current-menu-ancestor > a {
  color: var(--black);
}

.header-v2__topbar .current-menu-item > a::after,
.header-v2__topbar .current_page_item > a::after,
.header-v2__topbar .current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0;
  height: 6px;
  background: var(--black);
}

/* ---------- Barra principal ---------- */
.header-v2__main {
  background: var(--black);
  box-shadow: 1px 2px 6px 1px rgba(59, 59, 59, 0.3);
  /* Ancla para el panel del mega-menú (full-width). */
  position: relative;
}

.header-v2__inner--main {
  min-height: 72px;
  gap: 26px;
}

.header-v2__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.header-v2__logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* ---------- Nav principal (nivel 0) ---------- */
.nav-v2 {
  flex: 0 1 auto;
}

.nav-v2__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Link compartido por <a> (items simples) y <button> (triggers de mega-menú). */
.nav-v2__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: #fff;
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  border-radius: 6px;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

/* Reset del <button> trigger. */
.nav-v2__trigger {
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.nav-v2__link:hover,
.nav-v2__item.is-open > .nav-v2__trigger {
  color: var(--green);
}

/* Indicador (chevron) para los items que abren mega-menú. */
.nav-v2__trigger::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.nav-v2__item.is-open > .nav-v2__trigger::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* ---------- Panel del mega-menú ---------- */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  border-top: 1px solid #ececec;
  /* Estado cerrado (animable). El atributo [hidden] se remueve por JS al abrir. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
  z-index: 999;
}

/* Cuando JS quita [hidden], igualmente controlamos visibilidad con .is-open. */
.mega-menu[hidden] {
  display: block;
}

/* Apertura por click (fuente de verdad, también en touch). */
.nav-v2__item.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* Mejora desktop: apertura por hover solo en dispositivos con puntero fino. */
@media (hover: hover) and (pointer: fine) {
  .nav-v2__item.has-megamenu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
  }

  .nav-v2__item.has-megamenu:hover > .nav-v2__trigger {
    color: var(--green);
  }
}

.mega-menu__inner {
  max-width: 1530px;
  margin: 0 auto;
  padding: 32px 40px 36px;
}

.mega-menu__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* Líneas de separación entre columnas (gris claro de la paleta). */
.mega-menu__col:not(:last-child) {
  border-right: 1px solid var(--light-grey);
  padding-right: 28px;
}

.mega-menu__col-title {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--light-grey);
}

.mega-menu__col-title:hover {
  filter: brightness(0.96);
}

/* Grupos dentro de la columna (Diplomados / Cursos). */
.mega-menu__groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mega-menu__group-title {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: black;
  margin-bottom: 6px;
}

.mega-menu__group-title:hover {
  color: var(--green);
}

.mega-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-menu__link {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.35;
  color: #3a3a3a;
}

.mega-menu__link:hover {
  color: var(--green);
}

.mega-menu__item--all .mega-menu__link {
  margin-top: 6px;
  font-weight: 600;
  color: var(--black);
}

.mega-menu__item--all .mega-menu__link::after {
  content: " →";
  color: var(--green);
}

/* ---------- Franja "promo" al pie del panel (leyenda + enlace) ---------- */
/* Full-bleed: el fondo llega al borde real de la pantalla (igual que el panel
   blanco, ver comentario "full-width" en .header-v2__main), no solo al borde
   de .mega-menu__inner (max-width: 1530px, centrado). El padding lateral se
   recalcula para que el texto quede alineado con las columnas de arriba en
   viewports anchos (>1610px), e igual al padding del inner en los angostos.
   display: flow-root (en vez de overflow:hidden) contiene el float sin
   riesgo de recortar contenido. */
.mega-menu__promo {
  display: flow-root;
  margin-top: 28px;
  margin-bottom: -36px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px max(40px, calc((100vw - 1530px) / 2 + 40px));
  background: var(--light-grey);
  font-size: 15px;
  color: var(--grey-medium);
  line-height: 1.6;
}

/* El texto conector ("o") tiene sentido cuando los links se apilan (drawer mobile),
   pero queda huérfano en desktop, donde el segundo link flota lejos a la derecha. */
.mega-menu__promo-after {
  display: none;
}

.mega-menu__promo-link {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-menu__promo-link:hover {
  color: var(--green);
}

/* El segundo link ("Explorá todos los programas →") queda pegado a la derecha;
   el texto + primer link fluyen como texto normal a su alrededor. */
.mega-menu__promo-link:last-child {
  float: right;
  margin-left: 24px;
}

/* ---------- Buscador (estilo Coursera) ---------- */
/* Barra abierta en el medio (desktop ≥1150). Las auto-margins la centran entre
   el nav (izquierda) y las acciones (derecha). */
.header-v2__search {
  flex: 0 1 460px;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* Form del buscador (reutilizado en barra, overlay y drawer). */
.search-v2 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  background: var(--white);
  border: 1px solid #d6d6d6;
  border-radius: 24px;
  overflow: hidden;
}

.search-v2__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 16px;
  font-size: 14px;
  color: var(--black);
}

.search-v2__submit {
  flex: 0 0 auto;
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.search-v2__submit img {
  width: 18px;
  height: 18px;
  max-width: fit-content;
}

/* Ícono de búsqueda (visible <1150; se oculta en desktop ancho). */
.header-v2__actions > .header-v2__search-toggle-wrap {
  display: none;
}

.header-v2__search-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.header-v2__search-toggle .menu-icon {
  width: 22px;
  height: 22px;
}

/* ---------- Acciones (carrito / login / usuario / notif) ---------- */
.header-v2__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.header-v2__actions > li {
  display: flex;
  align-items: center;
}

/* Neutraliza el `margin-left: 25px` de `.nav-links-right > li` (header.css v1)
   que se filtra a las acciones/topbar del v2; el espaciado lo da el `gap`. */
.header-v2 .nav-links-right > li {
  margin-left: 0;
}

/* Selector de idioma reubicado en la barra principal (al lado del carrito).
   Va sobre fondo oscuro → texto blanco. Neutralizamos el height:80px que le da
   header.css (alto del nav v1). El dropdown se ancla debajo del item. */
.header-v2__actions .lang-menu {
  height: auto;
  position: relative;
}

.header-v2__actions .lang-menu > a {
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}

.header-v2__actions .lang-menu:hover > a {
  color: var(--green);
}

.header-v2__actions .lang-menu .menu-dropdown {
  top: 100%;
}

/* Botón "Unirse Gratis" reutilizado: aseguramos buen contraste sobre fondo oscuro. */
.header-v2__actions .register-link .btn-dark {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--green);
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.header-v2__actions .register-link .btn-dark:hover {
  background: var(--light-green);
  color: var(--black);
}

.header-v2__actions .login-link .user-login-btn {
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}

.header-v2__actions .login-link .user-login-btn:hover {
  color: var(--green);
}

/* ---------- Hamburguesa (mobile) ---------- */
/* Especificidad (0,2,0) para ganarle a `.header-v2__actions > li`. */
.header-v2__actions > .header-v2__burger-wrap {
  display: none;
}

.header-v2__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.header-v2__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

/* ==========================================================================
   Foco visible (accesibilidad — navegación por teclado)
   ========================================================================== */
.header-v2 a:focus-visible,
.header-v2 button:focus-visible,
.header-v2 input:focus-visible,
.mobile-drawer-v2 a:focus-visible,
.mobile-drawer-v2 button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dentro del panel blanco del mega-menú, el verde sobre blanco tiene buen
   contraste; mantenemos el mismo tratamiento. */
.mega-menu a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Drawer mobile (Phase 3)
   ========================================================================== */
.mobile-drawer-v2 {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

.mobile-drawer-v2 *,
.mobile-drawer-v2 *::before,
.mobile-drawer-v2 *::after {
  box-sizing: border-box;
}

.mobile-drawer-v2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-drawer-v2 a {
  text-decoration: none;
}

.mobile-drawer-v2.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-drawer-v2__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-drawer-v2.is-open .mobile-drawer-v2__overlay {
  opacity: 1;
}

.mobile-drawer-v2__panel {
  position: absolute;
  top: 0;
  left: 0;
  /* Full-width (de lado a lado), como el menú mobile de Coursera. */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* iOS < 16 fallback con custom property opcional. */
  background: var(--black);
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer-v2.is-open .mobile-drawer-v2__panel {
  transform: translateX(0);
}

.mobile-drawer-v2__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-drawer-v2__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 4px;
}

.mobile-drawer-v2__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.mobile-drawer-v2__close {
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.mobile-drawer-v2__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.mobile-drawer-v2__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-drawer-v2__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Buscador arriba del drawer (estilo Coursera mobile). */
.mobile-drawer-v2__search {
  flex: 0 0 auto;
  padding: 14px 20px 8px;
}

.mobile-drawer-v2__search .search-v2 {
  width: 100%;
}

/* Contenedor de pantallas (drill-down estilo Coursera): cada `.mdrawer__view`
   se apila absolutamente y entra/sale deslizándose en X. */
.mobile-drawer-v2__views {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.mdrawer__view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--black);
  transform: translateX(100%);
  /* `visibility:hidden` evita que las pantallas fuera de vista pinten encima
       de la activa (no alcanza solo el transform). Se oculta tras el slide. */
  visibility: hidden;
  transition:
    transform 0.28s ease,
    visibility 0s linear 0.28s;
}

.mdrawer__view--root,
.mdrawer__view.is-active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s ease;
}

/* Pantalla que quedó atrás en la pila (deslizada a la izquierda). */
.mdrawer__view.is-prev {
  transform: translateX(-100%);
  visibility: visible;
  transition: transform 0.28s ease;
}

/* Fila "← Volver" arriba de cada sub-pantalla. */
.mdrawer__back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.mdrawer__back:hover {
  color: var(--green);
}

.mdrawer__back-arrow {
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.mdrawer__view-title {
  display: block;
  padding: 16px 20px 4px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

a.mdrawer__view-title--link:hover {
  color: var(--green);
}

.mobile-drawer-v2__nav {
  padding: 8px 0 32px;
}

.mdrawer__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mdrawer__top-link,
.mdrawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.mdrawer__top-link:hover,
.mdrawer__toggle:hover {
  color: var(--green);
}

/* Chevron de los items "drill" (apunta a la derecha: entra a su sub-pantalla). */
.mdrawer__chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex: 0 0 auto;
  margin-left: 12px;
}

.mdrawer__sub {
  padding: 4px 20px 16px;
  background: rgba(255, 255, 255, 0.03);
}

.mdrawer__col {
  padding: 10px 0;
}

.mdrawer__col-title {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--green);
}

/* Grupos (Diplomados / Cursos) dentro de la categoría en el drawer.
   El padding lateral antes lo daba `.mdrawer__sub` (acordeón); ahora que el
   grupo va suelto en la pantalla drill-down lo aporta él, alineado a 20px con
   el back/título. */
.mdrawer__group {
  margin-top: 12px;
  padding: 0 20px;
}

.mdrawer__group-title {
  display: inline-block;
  color: white;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.mdrawer__col-list {
  display: flex;
  flex-direction: column;
}

.mdrawer__link {
  display: block;
  min-height: 44px;
  line-height: 44px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.mdrawer__link:hover {
  color: var(--green);
}

.mdrawer__link--all {
  font-weight: 600;
  color: #fff;
}

.mdrawer__link--all::after {
  content: " →";
  color: var(--green);
}

/* Franja "promo" en la raíz del drawer (entre la lista principal y la
   secundaria). Sin recuadro: alineada al ritmo de las filas (mismo padding
   lateral y el mismo separador inferior) para que fluya como una nota más. */
.mdrawer__promo {
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.mdrawer__promo-link {
  display: inline;
  min-height: 0;
  color: #fff;
  font-weight: 600;
}

.mdrawer__promo-link:hover {
  color: var(--green);
}

.mdrawer__list--secondary {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mdrawer__list--secondary .mdrawer__top-link {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.mdrawer__auth {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  padding: 22px 20px 0;
}

.mdrawer__auth .btn-dark {
  background: var(--green);
  color: var(--black);
  border: none;
  font-weight: 600;
  border-radius: 8px;
  padding: 13px 18px;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}

.mdrawer__login {
  text-align: center;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}

.user-login-btn-mobile {
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Pantallas medianas: reducimos paddings laterales y apretamos el nav. */
@media (max-width: 1300px) {
  .header-v2__inner {
    padding: 0 24px;
  }

  .header-v2__inner--main {
    gap: 18px;
  }

  .nav-v2__link {
    padding: 0 10px;
    font-size: 14px;
  }
}

/* Medianas-chicas: top bar más compacta + nav y acciones más ajustados,
   para que todo entre antes de pasar a hamburguesa (860px). */
@media (max-width: 1150px) {
  .header-v2__topbar .top-bar__list {
    gap: 4px 16px;
  }

  .header-v2__topbar a,
  .header-v2__topbar-right .lang-menu > a {
    font-size: 12px;
  }

  .header-v2__inner--main {
    gap: 14px;
  }

  .nav-v2__list {
    gap: 0;
  }

  .nav-v2__link {
    padding: 0 8px;
  }

  .header-v2__actions {
    gap: 14px;
  }
}

/* < 1150px: el buscador del medio pasa a ícono; al togglear se despliega como
   overlay full-width debajo de la barra principal. */
@media (max-width: 1149px) {
  .header-v2__search {
    display: none;
  }

  /* Al ocultarse la barra de búsqueda desaparece su `margin:0 auto`, que era
       lo que empujaba el cluster al borde derecho. Lo pineamos a la derecha
       para que no quede un hueco muerto (logo izq · nav · acciones der).
       Especificidad (0,2,0) para ganarle al reset `.header-v2 ul {margin:0}`
       (0,1,1), que de otro modo pisa el `margin-left` de clase simple. */
  .header-v2 .header-v2__actions {
    margin-left: auto;
  }

  .header-v2__actions > .header-v2__search-toggle-wrap {
    display: flex;
  }

  .header-v2.is-search-open .header-v2__search {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--black);
    padding: 12px 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    z-index: 1001;
  }

  .header-v2.is-search-open .header-v2__search .search-v2 {
    flex: 1 1 auto;
  }
}

/* <= 860px: colapsa a hamburguesa. Header compacto estilo Coursera: solo
   ícono de búsqueda + Unirse Gratis (o avatar) + hamburguesa. El carrito, el
   "Entrar" y las notificaciones se mueven al drawer. */
@media (max-width: 860px) {
  .header-v2 .nav-v2,
  .header-v2__topbar {
    display: none;
  }

  /* Lo que se oculta en compacto (carrito/Entrar/notif van al drawer; el idioma
     se oculta igual que el resto: si no están los otros, no está). Especificidad
     (0,2,0) para ganarle a `.header-v2__actions > li { display:flex }`. */
  .header-v2__actions .shop-link,
  .header-v2__actions > .header-v2__desktop-only,
  .header-v2__actions .notif-menu,
  .header-v2__actions .lang-menu {
    display: none;
  }

  .header-v2__actions > .header-v2__burger-wrap {
    display: flex;
  }

  .header-v2__inner--main {
    min-height: 60px;
    gap: 14px;
    /* Logo a la izquierda, cluster (buscar + registro + hamburguesa) a la derecha. */
    justify-content: space-between;
  }

  .header-v2__logo img {
    height: 34px;
  }

  .header-v2__actions {
    margin-left: auto;
    gap: 10px;
  }
}
.mega-menu-category__educacion .mega-menu__col-title {
  background-color: var(--light-blue) !important;
}
.mega-menu-category__educacion .mega-menu__item--all a::after {
  color: #ccffff !important;
}
.mega-menu-category__ambiente .mega-menu__col-title {
  background-color: var(--light-green) !important;
}
.mega-menu-category__ambiente .mega-menu__item--all a::after {
  color: #99ffcc !important;
}
.mega-menu-category__creatividad .mega-menu__col-title {
  background-color: var(--light-purple) !important;
}
.mega-menu-category__creatividad .mega-menu__item--all a::after {
  color: #ccccff !important;
}
.mega-menu-category__bienestar .mega-menu__col-title {
  background-color: var(--light-pink) !important;
}
.mega-menu-category__bienestar .mega-menu__item--all a::after {
  color: #ffccff !important;
}