/* ==========================================================================
   MBSoft · Encabezado
   Sustituye al de Astra. El menú sale de Apariencia → Menús.
   ========================================================================== */

/* Alto del encabezado fijo. Se declara aquí, junto a las reglas que lo
   componen, porque de él depende dónde se detienen los enlaces de ancla: si
   las dos cifras se separan, el encabezado empieza a tapar el título de la
   sección a la que se salta. 38 de la barra superior + 76 de la principal +
   los bordes. */
:root { --mb-header-alto: 118px; }

html {
  scroll-behavior: smooth;
  /* scroll-padding-top y no scroll-margin en cada destino: así vale para
     todos los enlaces de ancla del sitio, los de ahora y los que vengan.
     Los 18px extra son aire para que el título no quede pegado al borde. */
  scroll-padding-top: calc(var(--mb-header-alto) + 18px);
}

.mb-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(11, 24, 56, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(168, 196, 224, .18);
  transition: box-shadow var(--mb-dur) var(--mb-ease);
}
.mb-header.is-stuck { box-shadow: 0 10px 34px rgba(5, 20, 45, .34); }

/* --- Barra superior ------------------------------------------------------- */
.mb-topbar {
  background: rgba(22, 36, 80, .75);
  border-bottom: 1px solid rgba(168, 196, 224, .12);
}
.mb-topbar__inner {
  max-width: var(--mb-wrap);
  margin: 0 auto;
  padding: 0 var(--mb-gutter);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.mb-topbar__partner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--mb-text-on-dark-2);
}
.mb-topbar__partner i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mb-gold);
  animation: mb-pulse 2.2s ease-in-out infinite;
}
.mb-topbar__datos {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mb-topbar__dato {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--mb-text-on-dark-2);
  text-decoration: none;
  transition: color var(--mb-dur) var(--mb-ease);
}
/* El horario no es un enlace: va en el gris más tenue. */
span.mb-topbar__dato { color: var(--mb-text-mute); }
a.mb-topbar__dato:hover,
a.mb-topbar__dato:focus-visible { color: var(--mb-orange); }

/* --- Barra principal ------------------------------------------------------ */
.mb-header__inner {
  max-width: var(--mb-wrap);
  margin: 0 auto;
  padding: 0 var(--mb-gutter);
  height: 76px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* --- Logotipo ------------------------------------------------------------ */
.mb-logo {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  font-family: var(--mb-font-logo);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0;
  /* Sin separación entre piezas: el aire lo ponen los márgenes de la barra y
     del ecualizador, medidos sobre el logotipo oficial. Con el gap encima
     salían 6px junto a la barra y 4 junto al ecualizador, y el original tiene
     4 y 1: por eso se veía suelto. */
  color: var(--mb-white);
  text-decoration: none;
}
.mb-logo:hover,
.mb-logo:focus-visible { color: var(--mb-white); }

/* La M y la B, sueltas, miden lo mismo que en el logotipo oficial. Lo que
   sobra es el hueco entre ellas: Montserrat trae más prosa que la tipografía
   del logotipo.

   Todos los márgenes de aquí abajo están calibrados sobre el HUECO DE TINTA
   medido en la captura, no sobre las cajas: cada letra lleva dentro de su caja
   un margen lateral propio de la fuente, distinto en cada glifo, así que dos
   huecos de caja iguales dan huecos visuales distintos. De ahí que los valores
   sean asimétricos y alguno negativo. Los objetivos salen del arte, llevados a
   la altura de mayúscula del navbar:
     M→B 1,48   B→barra 2,22   barra→S 2,47   S→eq 0,62   eq→F 0,62 */
.mb-logo__mb {
  letter-spacing: -2.4px;
}

/* Todas las medidas de aquí abajo salen de logo-mbsoft.png, proporcionadas a
   la altura de mayúscula (67px en el arte, 16,8px a 24px de tipo). */
.mb-logo__bar {
  width: 1px;
  height: 26px;
  margin: 0 2.1px 0 3.5px;
  background: var(--mb-white);
  opacity: .9;
}

.mb-logo__eq {
  display: flex;
  align-items: center;
  gap: 1.3px;
  height: 21px;
  /* En el logotipo oficial las barras casi tocan la S y la F. Negativo a la
     derecha porque la F de Montserrat trae mucho margen izquierdo propio. */
  margin: 0 -0.9px 0 0.1px;
}
.mb-logo__eq i {
  display: block;
  width: 2.1px;
  height: var(--h);
  border-radius: 2px;
  transform-origin: center;
  animation: mb-wave 1.7s ease-in-out var(--d) infinite;
}
.mb-logo__eq-orange { background: var(--mb-orange); }
.mb-logo__eq-blue   { background: #2151E8; }

/* mb-wave vive en animations.css, junto con el resto. */

/* --- Navegación de escritorio -------------------------------------------- */
.mb-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.mb-nav__list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-nav__list > li { position: relative; }

.mb-nav__list > li > a,
.mb-nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--mb-radius-sm);
  background: transparent;
  font-family: var(--mb-font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mb-text-on-dark-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--mb-dur) var(--mb-ease), background-color var(--mb-dur) var(--mb-ease);
}
.mb-nav__list > li > a:hover,
.mb-nav__list > li > a:focus-visible,
.mb-nav__toggle:hover,
.mb-nav__toggle:focus-visible {
  color: var(--mb-white);
  background: rgba(37, 99, 235, .22);
}

/* La página actual solo se aclara: el fondo azul es del hover, como en la
   propuesta, y si se usara para ambos no se distinguiría uno de otro. */
.mb-nav__list > li.current-menu-item > a,
.mb-nav__list > li.current-menu-parent > .mb-nav__toggle {
  color: var(--mb-white);
}

.mb-nav__toggle svg { transition: transform var(--mb-dur) var(--mb-ease); }
.mb-nav__list > li.is-open .mb-nav__toggle svg { transform: rotate(180deg); }

/* --- Desplegable de producto --------------------------------------------- */
/* El padding superior es el puente invisible entre el botón y el panel: sin
   él, el menú se cierra al mover el mouse hacia las opciones. */
.mb-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 332px;
  margin: 0;
  padding: 10px 10px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s var(--mb-ease), transform .22s var(--mb-ease), visibility .22s;
}
.mb-nav__list > li.is-open .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* El panel blanco es un hijo del contenedor para que el puente quede fuera. */
.mb-nav__list .sub-menu::before {
  content: "";
  position: absolute;
  inset: 10px 10px 0;
  background: var(--mb-white);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow-pop);
}

.mb-nav__list .sub-menu > li { position: relative; }
.mb-nav__list .sub-menu > li:first-child { margin-top: 10px; }
.mb-nav__list .sub-menu > li:last-child  { margin-bottom: 10px; }

.mb-nav__list .sub-menu a {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 0 10px;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color var(--mb-dur) var(--mb-ease);
}
.mb-nav__list .sub-menu a:hover,
.mb-nav__list .sub-menu a:focus-visible { background: var(--mb-surface); }

.mb-nav__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--mb-white) center / 20px 20px no-repeat;
  border: 1px solid var(--mb-border);
}
.mb-item-xlstat .mb-nav__icon { background-image: url("../img/xlstat.svg"); }
.mb-item-nvivo  .mb-nav__icon { background-image: url("../img/nvivo.svg"); }
.mb-item-risk   .mb-nav__icon { background-image: url("../img/risk.svg"); }

.mb-nav__text b {
  display: block;
  font-family: var(--mb-font-head);
  font-size: 14.5px;
  color: var(--mb-navy);
}
.mb-nav__text i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--mb-text-soft);
}

/* --- Botón de acción ------------------------------------------------------ */
.mb-nav__cta {
  margin-left: 10px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--mb-orange);
  color: var(--mb-white);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(230, 126, 34, .36);
  transition: transform var(--mb-dur) var(--mb-ease), box-shadow var(--mb-dur) var(--mb-ease);
}
.mb-nav__cta:hover,
.mb-nav__cta:focus-visible {
  color: var(--mb-white);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(230, 126, 34, .5);
}

/* --- Botón de menú móvil -------------------------------------------------- */
.mb-burger {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  /*
   * Relleno a cero y centrado con flex. Astra da `padding: 12px 24px` a todo
   * <button>: 48px de relleno no caben en 46 de ancho, así que el botón
   * crecía a 50 y la caja de contenido quedaba en cero, con las barras
   * desplazadas a la derecha en vez de centradas.
   */
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid rgba(168, 196, 224, .3);
  background: transparent;
  cursor: pointer;
}
/* Astra pinta todos los <button> con su color de marca en :hover y :focus, y esa
   regla gana a `.mb-burger` por especificidad. Por eso estos estados se declaran
   explícitamente en vez de heredar el fondo transparente de arriba. */
.mb-burger:hover,
.mb-burger:focus,
.mb-burger:focus-visible {
  background: rgba(37, 99, 235, .22);
  border-color: rgba(168, 196, 224, .55);
}

.mb-burger span,
.mb-burger span::before,
.mb-burger span::after {
  display: block;
  width: 18px;
  height: 1.8px;
  background: var(--mb-white);
  border-radius: 2px;
  transition: transform .25s var(--mb-ease), opacity .25s var(--mb-ease);
}
.mb-burger span {
  position: relative;
  margin: 0 auto;
}
.mb-burger span::before,
.mb-burger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.mb-burger span::before { top: -6px; }
.mb-burger span::after  { top: 6px; }

.mb-burger[aria-expanded="true"] span { background: transparent; }
.mb-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.mb-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Menú móvil ----------------------------------------------------------- */
.mb-mobile-nav {
  border-top: 1px solid rgba(168, 196, 224, .18);
  background: rgba(11, 24, 56, .98);
  padding: 14px var(--mb-gutter) 20px;
}
.mb-mobile-nav__list,
.mb-mobile-nav__list .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-mobile-nav__list a {
  display: block;
  padding: 13px 12px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 500;
  color: var(--mb-text-on-dark-2);
  text-decoration: none;
}
.mb-mobile-nav__list a:hover,
.mb-mobile-nav__list a:focus-visible {
  color: var(--mb-white);
  background: rgba(37, 99, 235, .22);
}
/* "Software" no lleva a ningún lado: es solo el rótulo del grupo. */
.mb-mobile-nav__list > .menu-item-has-children > a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mb-text-on-dark);
  pointer-events: none;
}
.mb-mobile-nav__list .sub-menu a { padding-left: 24px; }

.mb-mobile-nav__cta {
  display: block;
  margin-top: 10px;
  padding: 15px;
  border-radius: 11px;
  text-align: center;
  background: var(--mb-orange);
  color: var(--mb-white);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.mb-mobile-nav__cta:hover { color: var(--mb-white); }

/* --- Barra de progreso de lectura ----------------------------------------- */
.mb-progress {
  height: 2px;
  background: rgba(168, 196, 224, .12);
}
.mb-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mb-blue), var(--mb-orange));
  transition: width .1s linear;
}

/* --- Puntos de quiebre ---------------------------------------------------- */
@media (max-width: 1080px) {
  .mb-nav    { display: none; }
  .mb-burger { display: flex; }
}

/* En móvil la barra superior deja solo el aviso de partner: los datos de
   contacto ya están en el pie y en el botón flotante. */
@media (max-width: 860px) {
  .mb-topbar__datos { display: none; }
}
@media (max-width: 520px) {
  .mb-topbar { display: none; }
  :root { --mb-header-alto: 79px; }
}

@media (min-width: 1081px) {
  .mb-mobile-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mb-logo__eq i,
  .mb-topbar__partner i { animation: none; }
  .mb-nav__list .sub-menu { transition: none; }
  .mb-nav__cta:hover { transform: none; }
}