/* Menú con el efecto de Clients (ver assets/js/menu.js) */
nav .cd-primary-nav a .mn-mask { display: block; position: relative; overflow: hidden; height: 1em; line-height: 1; }
nav .cd-primary-nav a .mn-n, nav .cd-primary-nav a .mn-s { display: block; white-space: nowrap; transition: transform .08s cubic-bezier(.3, 0, .2, 1); }
nav .cd-primary-nav a .mn-s { position: absolute; left: 0; right: 0; top: 0; transform: translateY(105%); text-align: center; }
nav .cd-primary-nav a.mn-cambio .mn-n { transform: translateY(-105%); }
nav .cd-primary-nav a.mn-cambio .mn-s { transform: translateY(0); }
nav .cd-primary-nav a .mn-s span { display: inline; position: static; top: auto; opacity: 1; color: inherit; z-index: auto; font-size: 1em; }
nav .cd-primary-nav a .mn-s .t-r { font-family: "Instrument Serif", Georgia, serif; font-style: normal; font-size: 1.08em; }
nav .cd-primary-nav a .mn-s .t-i { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.08em; }
nav .cd-primary-nav a .mn-s .t-p { font-family: "Pixelify Sans", monospace; font-size: .82em; }
nav .cd-primary-nav a:hover { color: #000; }
/* el CSS original oculta "a span" (era solo para el número): restituir los spans del efecto */
nav .cd-primary-nav a span.mn-mask, nav .cd-primary-nav a span.mn-n, nav .cd-primary-nav a span.mn-s,
nav .cd-primary-nav a .mn-s span { top: auto; opacity: 1; color: inherit; z-index: auto; font-family: inherit; }
nav .cd-primary-nav a span.mn-mask { display: block; position: relative; font-size: 1em; }
nav .cd-primary-nav a span.mn-n { display: block; position: relative; font-size: 1em; }
nav .cd-primary-nav a span.mn-s { display: block; position: absolute; font-size: 1em; }
nav .cd-primary-nav a span.mn-s, nav .cd-primary-nav a:hover span.mn-s { top: 0; left: 0; right: 0; }
nav .cd-primary-nav a span.mn-n, nav .cd-primary-nav a:hover span.mn-n { top: 0; }
nav .cd-primary-nav a span.mn-mask { height: 1.02em; }

/* Líneas que siguen la selección (como en Clients) */
nav .cd-primary-nav li { position: relative; }
nav .cd-primary-nav li::before, nav .cd-primary-nav li::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; color: inherit;
  transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.3, 0, .2, 1); pointer-events: none;
}
nav .cd-primary-nav li::before { top: 0; }
nav .cd-primary-nav li::after { bottom: 0; }
nav .cd-primary-nav li.mn-activo::before, nav .cd-primary-nav li.mn-activo::after { transform: scaleX(1); }

/* Fondo que alterna con la animación y termina en gris carbón con texto rosa */
nav .cd-primary-nav { transition: visibility 0s, opacity .3s ease-in-out, background-color .08s linear, color .08s linear; color: #000; }
nav .cd-primary-nav.mn-gris { background-color: #272624; color: #f2cfce; }
nav .cd-primary-nav a { color: inherit; }
nav .cd-primary-nav a:hover { color: inherit; }

/* Con el menú en gris: logo blanco y botón Cerrar en rosa */
body.menu-gris .abtnLogo.icononegro .negro { opacity: 0; }
body.menu-gris .abtnnewmenu, body.menu-gris .abtnnewmenu.textblack { color: #f2cfce !important; border-color: rgba(242, 207, 206, .5) !important; }

nav .cd-primary-nav.mn-azul { background-color: #23469a; color: #f6fa97; }
nav .cd-primary-nav.mn-rosa { background-color: #feadce; color: #23469a; }
body.menu-gris .abtnLogo .negro { opacity: 0; }