/* MP360 · Ayres de Cardales — Navbar (port de Advisora)
 *
 * Fuente de fidelidad: REFERENCIAS/advisora-navbar/original (Navbar.astro,
 * webflow.css, components.css, global-styles.css). Análisis y valores:
 * ENTREGAS/NAVBAR/ANALISIS-ADVISORA.md.
 *
 * Aislamiento: TODO vive bajo #mp360-navbar. No se importa ninguna regla
 * global de Webflow/normalize (html font-size, body, a, p, ul, img, button,
 * reduced-motion global). La tipografía fluida de Advisora (html font-size)
 * se porta como --nav-u: cada `Xrem` original es `calc(X * var(--nav-u))`.
 *
 * Adaptaciones aprobadas: barra oscura --primary-950 con logo blanco
 * original (tanda 3: PROPUESTA de barra en el primario #2D5661, pendiente de
 * aprobación visual; todo el color de la barra sale de los tokens
 * --mp360-navbar-* de abajo); Inter para navegación y CTA (rol interfaz,
 * 2026-09-15); radios del design system; navegación centrada en el
 * viewport "lo más posible" (grid); hamburger por debajo de 1180 px; CTAs =
 * botón reutilizable mp360-boton; CTAs al pie de la tarjeta; tarjeta en 2
 * columnas con altura reducida; estado en #mp360-navbar (no en <html>).
 *
 * Capa: z-index 35 dentro de #mp360-root (entrada 20 · tooltip 30 · navbar 35
 * · aviso 40 · panel POI 50).
 */

#mp360-navbar {
  /* Advisora global-styles.css: html { font-size } fluido (≥992). */
  --nav-u: calc(0.5991091314rem + 0.4454342984vw);
  /* Texto de enlaces y CTA: la escala fluida, nunca menos de 16 px. */
  --nav-texto: max(1rem, var(--nav-u));
  --nav-curva: cubic-bezier(0.5, 0.5, 0, 1);

  /* Color de la barra: primario #2D5661 (aprobado tanda 4, 2026-09-15).
     CTA (tanda 4): "Contactanos" = principal (blanco, texto/ícono primario,
     animación del botón principal) · "Agendá una visita" = secundario
     (transparente, borde y texto claros; variante mp360-boton--secundario). */
  --mp360-navbar-fondo: var(--primary-700);
  --mp360-navbar-cta-fondo: var(--white);
  --mp360-navbar-cta-texto: var(--primary-700);
  --mp360-navbar-cta2-borde: var(--primary-200);
  --mp360-navbar-cta2-texto: var(--white);
  --mp360-navbar-cta2-fondo-hover: var(--primary-600);

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 35;
  pointer-events: none;           /* solo la barra y el velo reciben puntero */
  font-family: var(--mp360-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Franja compacta 992–1279: se conserva 16 px. Entre 1180 y 1279 la barra
   completa entra sin solaparse; por debajo de 1180 se usa hamburger. */
@media (max-width: 1279px) { #mp360-navbar { --nav-u: 1rem; } }
@media (max-width: 991px)  { #mp360-navbar { --nav-u: calc(0.4469866071rem + 0.8928571429vw); } }
@media (max-width: 767px)  { #mp360-navbar { --nav-u: calc(0.6671006944rem + 0.6944444444vw); } }
@media (max-width: 479px)  { #mp360-navbar { --nav-u: calc(0.7494769874rem + 0.8368200837vw); } }

#mp360-navbar[hidden] { display: none !important; }

#mp360-navbar,
#mp360-navbar *,
#mp360-navbar *::before,
#mp360-navbar *::after { box-sizing: border-box; }

/* Resets acotados (reemplazan a los globales de Webflow/normalize). */
#mp360-navbar p,
#mp360-navbar ul,
#mp360-navbar li { margin: 0; padding: 0; list-style: none; }
/* El botón reutilizable (mp360-boton) conserva su propia tipografía y color. */
/* :where() deja el reset en especificidad de id: antes (1,1,1) pisaba el tamaño
   y el peso propios de .nav_links (los enlaces quedaban a 16 px / 400). */
#mp360-navbar :where(button:not(.mp360-boton)) { font: inherit; color: inherit; margin: 0; }

/* Visibilidad por modo: la barra completa requiere ~1040 px de contenido;
   1180 px deja margen exterior e interior seguro en notebooks compactas. */
@media (max-width: 1179.98px) { #mp360-navbar .is-desktop-only { display: none !important; } }
@media (min-width: 1180px) { #mp360-navbar .is-mobile-only { display: none !important; } }

/* ---------------------------------------------------------------- barra */

/* .page-wrapper: inset exterior de la pastilla (+ safe areas). */
#mp360-navbar .page-wrapper {
  position: relative;
  z-index: 1;
  padding-top: max(calc(0.75 * var(--nav-u)), env(safe-area-inset-top, 0px));
  padding-right: max(calc(0.75 * var(--nav-u)), env(safe-area-inset-right, 0px));
  padding-left: max(calc(0.75 * var(--nav-u)), env(safe-area-inset-left, 0px));
  pointer-events: none;
}

#mp360-navbar .navbar {
  position: relative;
  width: 100%;
  border-radius: var(--radius-navbar);
  background-color: var(--mp360-navbar-fondo);
  color: var(--white);
  pointer-events: auto;
}

/* Tanda 3: laterales 2u (antes 3.62u) — márgenes equilibrados y más ancho
   útil para centrar la navegación. */
#mp360-navbar .padding-global.is-navbar {
  padding: var(--nav-u) calc(2 * var(--nav-u));
}

/* Centrado "lo más posible": las columnas laterales son 1fr con mínimo
   max-content. Cuando entra, la navegación queda centrada en el viewport;
   cuando no, la columna más ancha toma su contenido y la navegación se
   desplaza lo mínimo, sin solaparse. */
#mp360-navbar .navbar_content {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: max(24px, calc(1.75 * var(--nav-u)));
}

#mp360-navbar .navbar_logo-link {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

#mp360-navbar .navbar_logo {
  display: block;
  width: auto;
  max-width: none;
  height: calc(3 * var(--nav-u));      /* = alto del CTA: no agranda la barra */
}

#mp360-navbar .nav_wrap {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(1.75 * var(--nav-u));
}

#mp360-navbar .nav_mobile {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Separación visible entre textos = gap + padding de ambos enlaces
   (.5u + 2 × .75u = 2u ≈ 32 px): suficiente sin empujar la navegación fuera
   del centro. */
#mp360-navbar .navbar_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.5 * var(--nav-u));
}

#mp360-navbar .nav_links {
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.5 * var(--nav-u));
  padding: calc(0.75 * var(--nav-u));
  border: 0;
  border-radius: var(--radius-compact);
  background: none;
  color: var(--white);
  font-family: var(--mp360-font-ui);
  /* Tanda 3: enlaces y CTA a la misma escala (≈16 px en desktop); la
     jerarquía del CTA sale de superficie, peso, icono y espacio. */
  font-size: var(--nav-texto);
  font-weight: 500;
  letter-spacing: var(--mp360-ui-tracking);
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
}
#mp360-navbar .nav_links:hover { opacity: 1; }
/* Hover fiel: se opacan los hermanos mientras la lista está bajo el puntero. */
#mp360-navbar .navbar_list:hover .nav_links:not(:hover) { opacity: 0.4; }
#mp360-navbar .nav_links:focus { outline: none; }
#mp360-navbar .nav_links:focus-visible {
  opacity: 1;
  outline: 2px solid var(--secondary-400);
  outline-offset: 2px;
}

#mp360-navbar .nav_buttons-wrap {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(1.25 * var(--nav-u));
}

#mp360-navbar .login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--nav-u);
}

/* Botón reutilizable a la escala fluida del navbar (valores de Advisora). */
#mp360-navbar .mp360-boton {
  --mp360-boton-icono-tam: calc(1.125 * var(--nav-u));
  --mp360-boton-gap: calc(0.5 * var(--nav-u));
  --mp360-boton-pad: calc(1.25 * var(--nav-u));
  min-height: calc(3 * var(--nav-u));
  font-size: var(--nav-texto);
}
#mp360-navbar .nav-cta--agendar { --mp360-boton-icono: url("../icons/nucleo/calendar-user.svg"); }
#mp360-navbar .nav-cta--contacto { --mp360-boton-icono: url("../icons/nucleo/whatsapp.svg"); }

/* CTA sobre la barra: colores desde los tokens --mp360-navbar-cta*. */
#mp360-navbar .nav_buttons-wrap .nav-cta--contacto {
  --mp360-boton-fondo: var(--mp360-navbar-cta-fondo);
  --mp360-boton-texto: var(--mp360-navbar-cta-texto);
  --mp360-boton-foco: var(--white);
}
#mp360-navbar .nav_buttons-wrap .nav-cta--agendar {
  --mp360-boton-texto: var(--mp360-navbar-cta2-texto);
  --mp360-boton-borde: var(--mp360-navbar-cta2-borde);
  --mp360-boton-borde-hover: var(--white);
  --mp360-boton-fondo-hover: var(--mp360-navbar-cta2-fondo-hover);
  --mp360-boton-foco: var(--white);
}
/* Tarjeta del menú (tanda 5: fondo blanco, texto e íconos --primary-700).
   "Contactanos" = principal: fondo primario, texto/ícono blancos, misma
   animación del botón principal. "Agendá una visita" = secundario:
   transparente, borde, texto e ícono primarios. Reglas en la sección del
   hamburger (después del foco genérico de los CTAs). */

/* ------------------------------------------------ escala por breakpoint */

@media (max-width: 1279px) {
  #mp360-navbar .navbar_logo { height: calc(2.75 * var(--nav-u)); }   /* = pastilla */
  #mp360-navbar .navbar_mobile-actions { grid-column: 3; justify-self: end; }
}
@media (max-width: 991px) {
  #mp360-navbar .navbar { border: 1px solid var(--primary-900); }
  #mp360-navbar .padding-global.is-navbar {
    padding-left: calc(2.25 * var(--nav-u));
    padding-right: calc(2.25 * var(--nav-u));
  }
}
@media (max-width: 767px) {
  #mp360-navbar .page-wrapper {
    padding-top: max(calc(0.5 * var(--nav-u)), env(safe-area-inset-top, 0px));
    padding-right: max(calc(0.5 * var(--nav-u)), env(safe-area-inset-right, 0px));
    padding-left: max(calc(0.5 * var(--nav-u)), env(safe-area-inset-left, 0px));
  }
  #mp360-navbar .navbar { border-width: 0; }
  #mp360-navbar .padding-global.is-navbar {
    padding: var(--nav-u) var(--nav-u) var(--nav-u) calc(1.5 * var(--nav-u));
  }
}
@media (max-width: 479px) {
  #mp360-navbar .padding-global.is-navbar {
    padding-top: calc(0.75 * var(--nav-u));
    padding-bottom: calc(0.75 * var(--nav-u));
  }
}

/* ---------------------------------------- hamburger (OSMO / components.css) */

/* Tanda 5: acciones mobile (WhatsApp + hamburger) agrupadas para compartir
   la celda 3 del grid sin superponerse. */
#mp360-navbar .navbar_mobile-actions {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--nav-u));
}

#mp360-navbar .hamburger-anchor {
  position: relative;
  width: 2.75em;
  height: 2.75em;
  font-size: var(--nav-u);
  overflow: visible;
  flex-shrink: 0;
}

/* Botón WhatsApp: misma pastilla (tamaño, radius) que el hamburger cerrado,
   fondo blanco y glifo Núcleo en primario. */
#mp360-navbar .navbar_whatsapp {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75em;
  height: 2.75em;
  font-size: var(--nav-u);
  flex-shrink: 0;
  border-radius: var(--radius-control);
  background-color: var(--white);
  color: var(--primary-700);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  #mp360-navbar .navbar_whatsapp:hover { background-color: var(--primary-50); }
}
#mp360-navbar .navbar_whatsapp:active { background-color: var(--primary-100); }
#mp360-navbar .navbar_whatsapp:focus { outline: none; }
#mp360-navbar .navbar_whatsapp:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}
#mp360-navbar .navbar_whatsapp__icono {
  display: block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: url("../icons/nucleo/whatsapp.svg") center / contain no-repeat;
  mask: url("../icons/nucleo/whatsapp.svg") center / contain no-repeat;
}

#mp360-navbar .navigation__dark-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--primary-950);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s var(--nav-curva), visibility 0.7s var(--nav-curva);
}
#mp360-navbar[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0.33;
  visibility: visible;
  pointer-events: auto;
}

#mp360-navbar .hamburger-nav {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: var(--radius-container);
  font-size: var(--nav-u);
  color: var(--primary-700);      /* tanda 5: textos e íconos del menú sobre blanco */
}

/* Cerrado: la caja de la tarjeta (invisible) no debe capturar toques ni el
   arrastre del panorama; solo el toggle recibe puntero. */
#mp360-navbar:not([data-navigation-status="active"]) .hamburger-nav { pointer-events: none; }

#mp360-navbar .hamburger-nav__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75em;
  height: 2.75em;
  border-radius: var(--radius-control);
  background-color: var(--white);
  transition: all 0.7s var(--nav-curva);
}
/* Corrección puntual (2026-09-15): la pastilla cerrada pasa de secundario a
   blanco, igual que el botón de WhatsApp de al lado; desplegada, la tarjeta
   ya era blanca (el color acompaña la misma transición de tamaño). */
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__bg {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-container);
  background-color: var(--white);
  box-shadow: 0 24px 64px -24px rgb(10 28 33 / 0.45);
}

#mp360-navbar .hamburger-nav__group {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 1em;
  padding: 2.25em 2.5em 2em 2em;
  pointer-events: auto;
  transform-origin: 100% 0;
  transform: scale(0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nav-curva), transform 0.7s var(--nav-curva), visibility 0.7s var(--nav-curva);
}
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__group {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  /* Al abrir, visibility cambia en el acto (sin efecto visual: opacity parte
     de 0) para que el primer ítem sea enfocable de inmediato. El cierre
     conserva visibility .7s de la regla base. */
  transition: opacity 0.5s var(--nav-curva), transform 0.7s var(--nav-curva), visibility 0s;
}

#mp360-navbar .hamburger-nav__menu-p {
  color: currentColor;
  opacity: 0.8;                   /* .55 original: sube por contraste (≈ 4,8:1 sobre blanco) */
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#mp360-navbar .hamburger-nav__ul {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 0.375em;
}

#mp360-navbar .hamburger-nav__a {
  appearance: none;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: currentColor;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mp360-navbar .hamburger-nav__a:focus { outline: none; }
#mp360-navbar .hamburger-nav__a:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
  border-radius: var(--radius-compact);
}

#mp360-navbar .hamburger-nav__p {
  display: block;
  padding-right: 1.25em;
  color: inherit;
  font-family: var(--mp360-font-ui);
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: -0.01em;        /* Manrope ≈ 24 px */
  line-height: 1.2;
  white-space: nowrap;
}

#mp360-navbar .hamburger-nav__dot {
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: currentColor;
  transform: scale(0);
  opacity: 0.5;
  transition: transform 0.5s var(--nav-curva), opacity 0.5s var(--nav-curva);
}
@media (hover: hover) and (pointer: fine) {
  #mp360-navbar .hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot { transform: scale(0); }
  #mp360-navbar .hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot { transform: scale(1); opacity: 0.25; }
}

/* CTAs al pie de la tarjeta (mismo componente que en la barra). */
#mp360-navbar .hamburger-nav__ctas {
  display: flex;
  flex-flow: column;
  gap: calc(0.5 * var(--nav-u));
  margin-top: 0.25em;
}
#mp360-navbar .hamburger-nav__ctas .mp360-boton {
  width: 100%;
  /* Auditoría final 2026-09-15: en tablet (--nav-u ≈ 14 px) los CTAs del menú
     medían 42 px de alto; el menú es táctil → target mínimo 44 px. */
  min-height: max(44px, calc(3 * var(--nav-u)));
}
/* Foco sobre la tarjeta blanca: contorno primario. */
#mp360-navbar .hamburger-nav__ctas .mp360-boton { --mp360-boton-foco: var(--primary-700); }

/* Tanda 5 · CTA principal del menú: fondo primario, texto e ícono blancos
   (7,9:1). Conserva el intercambio de ícono y la escala del principal. */
#mp360-navbar .hamburger-nav__ctas .nav-cta--contacto {
  --mp360-boton-fondo: var(--primary-700);
  --mp360-boton-texto: var(--white);
}
#mp360-navbar .hamburger-nav__ctas .nav-cta--contacto:active { --mp360-boton-fondo: var(--primary-800); }

/* Tanda 5 · CTA secundario del menú: transparente, borde, texto e ícono
   primarios; hover/pressed con fondo primario muy claro y borde más oscuro. */
#mp360-navbar .hamburger-nav__ctas .nav-cta--agendar {
  --mp360-boton-texto: var(--primary-700);
  --mp360-boton-borde: var(--primary-700);
  --mp360-boton-borde-hover: var(--primary-800);
  --mp360-boton-fondo-hover: var(--primary-50);
}
#mp360-navbar .hamburger-nav__ctas .nav-cta--agendar:active { --mp360-boton-fondo-hover: var(--primary-100); }

#mp360-navbar .hamburger-nav__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--primary-950);
  pointer-events: auto;
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform 0.7s var(--nav-curva);
  -webkit-tap-highlight-color: transparent;
}
/* Área tocable ≥ 44 px aunque la pastilla visible mida menos. */
#mp360-navbar .hamburger-nav__toggle::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((2.75em - 44px) / 2));
}
#mp360-navbar .hamburger-nav__toggle:focus { outline: none; }
#mp360-navbar .hamburger-nav__toggle:focus-visible {
  /* La pastilla cerrada es blanca (corrección 2026-09-15): foco en primario,
     visible en los dos estados (cerrado y abierto usan el mismo color). */
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__toggle {
  transform: translate(-1em, 1em);
  color: var(--primary-700);      /* tanda 5: cierre del menú en primario sobre blanco */
  transition: transform 0.7s var(--nav-curva), background-color 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  #mp360-navbar[data-navigation-status="active"] .hamburger-nav__toggle:hover { background-color: var(--primary-50); }
}
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__toggle:active { background-color: var(--primary-100); }
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__toggle:focus-visible {
  outline-color: var(--primary-700);
}

#mp360-navbar .hamburger-nav__toggle-bar {
  position: absolute;
  width: 40%;
  height: 0.125em;
  background-color: currentColor;
  transform: translateY(-0.15em);
  transition: transform 0.7s var(--nav-curva);
}
#mp360-navbar .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(0.15em); }
@media (hover: hover) and (pointer: fine) {
  #mp360-navbar .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar { transform: translateY(0.15em); }
  #mp360-navbar .hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em); }
}
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar { transform: translateY(0) rotate(45deg); }
#mp360-navbar[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) { transform: translateY(0) rotate(-45deg); }

@media (max-width: 479px) {
  #mp360-navbar .hamburger-nav__p { font-size: 1.375em; }
  #mp360-navbar .hamburger-nav__group { padding: 2em 2.25em 1.75em 1.75em; }
}

/* Altura reducida (landscape): la tarjeta no cabe en una columna → accesos en
   2 columnas y CTAs en fila. Misma escala, padding y motion. */
@media (max-width: 1279px) and (max-height: 500px) {
  #mp360-navbar .hamburger-nav__ul {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.5em;
  }
  #mp360-navbar .hamburger-nav__ctas { flex-flow: row; }
  #mp360-navbar .hamburger-nav__ctas .mp360-boton { width: auto; }
}

/* Cascada GSAP (entrada al tour / apertura del menú): mientras dura, las
   transiciones CSS de los elementos animados quedan en pausa para que GSAP sea
   la única animación sobre opacity/transform. Se quita al completar. */
#mp360-navbar.is-cascada .navbar,
#mp360-navbar.is-cascada .nav_links,
#mp360-navbar.is-cascada .hamburger-nav__toggle,
#mp360-navbar.is-cascada .mp360-boton,
#mp360-navbar.is-cascada .hamburger-nav__li,
#mp360-navbar.is-cascada .hamburger-nav__menu-p {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #mp360-navbar *,
  #mp360-navbar *::before,
  #mp360-navbar *::after {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}