/**
 * Multi Navbar — estilos
 * Escritorio centrado + 9 diseños de menú móvil.
 */

/* ============================================================
   VARIABLES BASE (se sobreescriben inline por instancia)
   ============================================================ */
.mnav {
	--mnav-font-family: inherit;
	--mnav-font-size: 16px;
	--mnav-font-weight: 500;
	--mnav-letter-spacing: 0px;
	--mnav-text-transform: none;
	--mnav-gap: 28px;
	--mnav-text-color: #111827;
	--mnav-text-hover: #2563eb;
	--mnav-align: center;
	--mnav-bar-bg: transparent;
	--mnav-bar-padding: 14px 24px;
	--mnav-burger-color: #111827;
	/* --mnav-burger-hover NO se define aquí a propósito: así, si el usuario
	   no elige color de hover, el respaldo usa el color base del icono
	   (y nunca el rojo del tema). */
	--mnav-burger-color-open: #ffffff;
	--mnav-burger-size: 26px;
	--mnav-burger-bg: transparent;
	--mnav-burger-bg-open: transparent;
	--mnav-burger-radius: 8px;
	--mnav-overlay-bg: #0f172a;
	--mnav-mlink-color: #ffffff;
	--mnav-mlink-hover: #38bdf8;
	--mnav-mfont-size: 28px;
	--mnav-mfont-weight: 600;
	--mnav-manim: 450ms;
	--mnav-blur: 14px;
	--mnav-sub-bg: #ffffff;
	--mnav-sub-text: #111827;
	--mnav-sub-hover: #2563eb;
	--mnav-sub-radius: 10px;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--mnav-font-family);
}

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

.mnav--sticky {
	position: sticky;
	top: 0;
	z-index: 900;
}

/* ============================================================
   COMPORTAMIENTO AL HACER SCROLL (sticky)
   ============================================================ */
/* La barra transiciona suave entre estados. */
.mnav--sticky .mnav__bar {
	transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
/* Ocultar/mostrar la barra según dirección de scroll. */
.mnav--hideonscroll {
	transition: transform 0.35s ease;
	will-change: transform;
}
.mnav--hideonscroll.is-hidden {
	transform: translateY(-100%);
}
/* Encoger al hacer scroll. */
.mnav--shrink.is-scrolled .mnav__bar {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
/* Sombra al hacer scroll. */
.mnav--shadow.is-scrolled .mnav__bar {
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
}
/* Transparente arriba -> sólido al hacer scroll. */
.mnav--transparent .mnav__bar {
	background: transparent !important;
}
.mnav--transparent:not(.is-scrolled) .mnav__link,
.mnav--transparent:not(.is-scrolled) .mnav__brand {
	color: var(--mnav-text-top);
}
.mnav--transparent.is-scrolled .mnav__bar {
	background: var(--mnav-bar-bg-scrolled) !important;
}

/* ============================================================
   BARRA
   ============================================================ */
.mnav__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
}

.mnav__brand {
	font-weight: 800;
	font-size: 1.25em;
	color: var(--mnav-text-color);
	text-decoration: none;
	margin-right: auto;
	line-height: 1;
}

/* Lista escritorio ------------------------------------------- */
.mnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mnav__list--desktop {
	display: flex;
	align-items: center;
	gap: var(--mnav-gap);
	flex: 1;
	justify-content: var(--mnav-align);
}

/* Alineación por clase (funciona aunque no haya variable inline, p.ej. en Elementor) */
.mnav--align-left  .mnav__list--desktop { justify-content: flex-start; }
.mnav--align-center .mnav__list--desktop { justify-content: center; }
.mnav--align-right .mnav__list--desktop { justify-content: flex-end; }

/* Si hay marca, la lista no roba todo el espacio a la izquierda */
.mnav__brand ~ .mnav__list--desktop {
	flex: 1;
}

.mnav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--mnav-text-color);
	font-size: var(--mnav-font-size);
	font-weight: var(--mnav-font-weight);
	letter-spacing: var(--mnav-letter-spacing);
	text-transform: var(--mnav-text-transform);
	text-decoration: none;
	line-height: 1.4;
	padding: 6px 2px;
	transition: color 0.25s ease;
}

.mnav__link:hover,
.mnav__link:focus-visible {
	color: var(--mnav-text-hover);
}

/* Efecto: subrayado animado */
.mnav--hover-underline .mnav__link span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s ease;
}
.mnav--hover-underline .mnav__link:hover span::after,
.mnav--hover-underline .mnav__link:focus-visible span::after {
	transform: scaleX(1);
}

/* Efecto: fade */
.mnav--hover-fade .mnav__link { opacity: 0.75; }
.mnav--hover-fade .mnav__link:hover,
.mnav--hover-fade .mnav__link:focus-visible { opacity: 1; }

/* Efecto: píldora */
.mnav--hover-pill .mnav__link {
	padding: 8px 16px;
	border-radius: 999px;
	transition: background 0.25s ease, color 0.25s ease;
}
.mnav--hover-pill .mnav__link:hover,
.mnav--hover-pill .mnav__link:focus-visible {
	background: color-mix(in srgb, var(--mnav-text-hover) 15%, transparent);
}

/* ============================================================
   SUBMENÚS / DROPDOWNS (escritorio)
   ============================================================ */
.mnav__caret {
	width: 0.7em;
	height: 0.7em;
	margin-left: 5px;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}
.mnav__item--has-children > .mnav__link { display: inline-flex; align-items: center; }

.mnav__item--has-children { position: relative; }
.mnav__submenu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: var(--mnav-sub-bg, #fff);
	border-radius: var(--mnav-sub-radius, 10px);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 1001;
}
/* Puente invisible para que el hover no se corte al bajar el ratón. */
.mnav__item--has-children::after {
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 14px;
}
.mnav--align-right .mnav__submenu { left: auto; right: 0; }

.mnav__item--has-children:hover > .mnav__submenu,
.mnav__item--has-children:focus-within > .mnav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mnav__item--has-children:hover > .mnav__link .mnav__caret {
	transform: rotate(180deg);
}
.mnav__sublink {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--mnav-sub-text, #111827);
	font-size: 0.95em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.mnav__sublink:hover,
.mnav__sublink:focus-visible {
	background: color-mix(in srgb, var(--mnav-sub-hover, #2563eb) 12%, transparent);
	color: var(--mnav-sub-hover, #2563eb);
}

/* ============================================================
   BOTÓN HAMBURGUESA
   ============================================================ */
.mnav__toggle {
	display: none;               /* oculto en escritorio */
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 8px;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	background: var(--mnav-burger-bg);
	color: var(--mnav-burger-color);
	border-radius: var(--mnav-burger-radius);
	line-height: 0;
	position: relative;
	z-index: 1002;
	transition: color 0.25s ease, background 0.25s ease;
}

/* Blindaje contra el hover rojo/heredado del tema:
   forzamos el color del icono en cada estado. */
/* Botón: quitamos cualquier borde/sombra/fondo que el tema o Elementor
   pudieran inyectar (de ahí venía el "hover rojizo"). */
.mnav .mnav__toggle,
.mnav .mnav__toggle:link,
.mnav .mnav__toggle:visited,
.mnav .mnav__toggle:hover,
.mnav .mnav__toggle:focus,
.mnav .mnav__toggle:focus-visible,
.mnav .mnav__toggle:active {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	filter: none !important;
	opacity: 1 !important;
	background-color: var(--mnav-burger-bg, transparent) !important;
	background-image: none !important;
}
.mnav.is-open .mnav__toggle,
.mnav.is-open .mnav__toggle:hover,
.mnav.is-open .mnav__toggle:focus,
.mnav.is-open .mnav__toggle:focus-visible,
.mnav.is-open .mnav__toggle:active {
	background-color: var(--mnav-burger-bg-open, transparent) !important;
	background-image: none !important;
}
/* Por si el tema pinta un ::before/::after de acento al hacer hover. */
.mnav .mnav__toggle::before,
.mnav .mnav__toggle::after {
	content: none !important;
	background: none !important;
	box-shadow: none !important;
}
/* Anillo de foco accesible y neutro (no rojo) solo con teclado. */
.mnav .mnav__toggle:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px;
	border-radius: var(--mnav-burger-radius);
}

.mnav__toggle-icon {
	display: inline-flex;
	width: var(--mnav-burger-size);
	height: var(--mnav-burger-size);
}
.mnav__toggle-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* COLOR DEL ICONO: forzado en el propio SVG con !important para que
   ningún tema pueda pintarlo de rojo ni ocultar la X. currentColor
   alimenta tanto stroke (barras/X) como fill (puntos/cuadrícula). */
/* Cableado de color: stroke (barras/X) y fill (puntos/cuadrícula) siguen a currentColor. */
.mnav .mnav__toggle .mnav__toggle-icon svg {
	stroke: currentColor !important;
}
.mnav .mnav__toggle .mnav__toggle-icon svg [fill]:not([fill="none"]),
.mnav .mnav__toggle .mnav__toggle-icon svg[fill]:not([fill="none"]) {
	fill: currentColor !important;
}

/* === COLORES INDEPENDIENTES POR ICONO ===
   Se apunta a cada SVG por su span (--open / --close), NO por el estado,
   así el color de la hamburguesa y el de la X son totalmente distintos. */

/* Icono ABRIR (hamburguesa) */
.mnav .mnav__toggle .mnav__toggle-icon--open svg {
	color: var(--mnav-burger-color, #111827) !important;
}
.mnav .mnav__toggle:hover .mnav__toggle-icon--open svg,
.mnav .mnav__toggle:focus .mnav__toggle-icon--open svg,
.mnav .mnav__toggle:focus-visible .mnav__toggle-icon--open svg,
.mnav .mnav__toggle:active .mnav__toggle-icon--open svg {
	color: var(--mnav-burger-hover, var(--mnav-burger-color, #111827)) !important;
}

/* Icono CERRAR (X) — color propio en todos los estados */
.mnav .mnav__toggle .mnav__toggle-icon--close svg,
.mnav .mnav__toggle:hover .mnav__toggle-icon--close svg,
.mnav .mnav__toggle:focus .mnav__toggle-icon--close svg,
.mnav .mnav__toggle:focus-visible .mnav__toggle-icon--close svg,
.mnav .mnav__toggle:active .mnav__toggle-icon--close svg {
	color: var(--mnav-burger-color-open, #ffffff) !important;
}

/* Mostrar/ocultar icono según estado (forzado para que no lo pise el tema). */
/* Hamburguesa animada: barras que se transforman en X */
.mnav__burger-lines {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: var(--mnav-burger-size, 26px);
	height: var(--mnav-burger-size, 26px);
}
.mnav__burger-lines span {
	display: block;
	width: 100%;
	height: 2.5px;
	border-radius: 3px;
	background: var(--mnav-burger-color, #111827) !important;
	transform-origin: center;
	transition: transform 0.32s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.2s ease, background 0.25s ease;
}
.mnav.is-open .mnav__toggle--animated .mnav__burger-lines span,
.mnav.is-closing.is-open .mnav__toggle--animated .mnav__burger-lines span {
	background: var(--mnav-burger-color-open, #ffffff) !important;
}
.mnav.is-open .mnav__burger-lines span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mnav.is-open .mnav__burger-lines span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.mnav.is-open .mnav__burger-lines span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mnav__toggle-icon--close { display: none !important; }
.mnav.is-open .mnav__toggle-icon--open,
.mnav.is-closing .mnav__toggle-icon--open { display: none !important; }
.mnav.is-open .mnav__toggle-icon--close,
.mnav.is-closing .mnav__toggle-icon--close { display: inline-flex !important; }
/* Mantener el fondo "abierto" del botón mientras se cierra. */
.mnav.is-closing .mnav__toggle,
.mnav.is-closing .mnav__toggle:hover,
.mnav.is-closing .mnav__toggle:focus {
	background-color: var(--mnav-burger-bg-open, transparent) !important;
}

.mnav__toggle-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mnav-burger-color, #111827) !important;
	line-height: 1;
}
.mnav.is-open .mnav__toggle-label {
	color: var(--mnav-burger-color-open, #ffffff) !important;
}

.mnav__sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ============================================================
   PANEL MÓVIL (contenedor común de todos los diseños)
   ============================================================ */
.mnav__panel {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;                 /* activado en móvil */
	visibility: hidden;
	pointer-events: none;
}

.mnav__panel-bg {
	position: absolute;
	inset: 0;
	background-color: var(--mnav-overlay-bg);
	background-image: var(--mnav-overlay-image, none);
	background-size: cover;
	background-position: center;
}

.mnav__panel-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 32px 40px;
	overflow-y: auto;
}

/* Encabezado del menú: logo + texto de marca, arriba a la izquierda. */
.mnav__panel-head {
	position: absolute;
	top: 22px;
	left: 32px;
	right: 68px; /* deja espacio a la X */
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	z-index: 3;
}
.mnav__panel-logo {
	display: block;
	width: var(--mnav-logo-w, 48px);
	height: auto;
	max-height: 20vh;
	object-fit: contain;
}
.mnav__panel-brand {
	color: var(--mnav-mlink-color);
	font-weight: 800;
	font-size: 1.25rem;
	text-decoration: none;
	line-height: 1.1;
}

.mnav__list--mobile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.mnav--malign-center .mnav__list--mobile { text-align: center; align-items: center; }
.mnav--malign-left   .mnav__list--mobile { text-align: left;   align-items: flex-start; }
.mnav--malign-right  .mnav__list--mobile { text-align: right;  align-items: flex-end; }

.mnav__mlink {
	display: inline-block;
	color: var(--mnav-mlink-color);
	font-size: var(--mnav-mfont-size);
	font-weight: var(--mnav-mfont-weight);
	text-decoration: none;
	padding: 10px 6px;
	line-height: 1.2;
	transition: color 0.25s ease, transform 0.25s ease;
}
.mnav__mlink:hover,
.mnav__mlink:focus-visible {
	color: var(--mnav-mlink-hover);
}

/* Submenús en móvil: fila con botón + lista desplegable */
.mnav__mrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mnav--malign-left .mnav__mrow { justify-content: flex-start; }
.mnav--malign-right .mnav__mrow { justify-content: flex-end; }
.mnav__msub-toggle {
	background: none;
	border: 0;
	color: var(--mnav-mlink-color);
	cursor: pointer;
	padding: 6px;
	line-height: 0;
	display: inline-flex;
}
.mnav__msub-toggle .mnav__caret { width: 18px; height: 18px; }
.mnav__item.is-sub-open > .mnav__mrow .mnav__msub-toggle .mnav__caret { transform: rotate(180deg); }

.mnav__msubmenu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.32s ease;
	width: 100%;
}
.mnav__item.is-sub-open > .mnav__msubmenu { max-height: 800px; }
.mnav__mlink--sub {
	font-size: 0.7em;
	opacity: 0.85;
	padding: 6px 6px;
}

/* ============================================================
   REDES SOCIALES (fila dentro del menú abierto)
   ============================================================ */
.mnav__social {
	list-style: none;
	margin: 32px auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	width: 100%;
	max-width: 640px;
}
.mnav--malign-left  .mnav__social { justify-content: flex-start; }
.mnav--malign-right .mnav__social { justify-content: flex-end; }

.mnav__social-item {
	opacity: 0;
	transition: opacity var(--mnav-manim) ease, transform var(--mnav-manim) ease;
	transform: translateY(12px);
}
.mnav.is-open .mnav__social-item {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--mnav-i) * 60ms + 260ms);
}

.mnav__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mnav-social-color, #ffffff);
	transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.mnav__social-link svg {
	width: var(--mnav-social-size, 22px);
	height: var(--mnav-social-size, 22px);
	display: block;
	fill: currentColor;
}
.mnav__social-link:hover,
.mnav__social-link:focus-visible {
	color: var(--mnav-social-hover, #38bdf8);
	transform: translateY(-3px);
}

/* Estilo con círculo de fondo */
.mnav__social--circle .mnav__social-link {
	width: calc(var(--mnav-social-size, 22px) + 22px);
	height: calc(var(--mnav-social-size, 22px) + 22px);
	border-radius: 50%;
	background: var(--mnav-social-bg, rgba(255,255,255,0.12));
}
.mnav__social--circle .mnav__social-link:hover {
	background: var(--mnav-social-hover, #38bdf8);
	color: #ffffff;
}

/* Bloqueo de scroll del body cuando el menú está abierto */
body.mnav-body-lock {
	overflow: hidden;
}

/* Aviso en editor cuando no hay links */
.mnav-empty {
	padding: 12px 16px;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #64748b;
	font-size: 14px;
	background: #f8fafc;
}

/* ============================================================
   ACTIVACIÓN MODO MÓVIL
   (por clase .is-mobile via JS y por media query de respaldo)
   ============================================================ */
.mnav.is-mobile .mnav__list--desktop { display: none; }
.mnav.is-mobile .mnav__toggle { display: inline-flex; }
.mnav.is-mobile .mnav__panel { display: block; }

@media (max-width: 1024px) {
	.mnav:not(.is-desktop) .mnav__list--desktop { display: none; }
	.mnav:not(.is-desktop) .mnav__toggle { display: inline-flex; }
	.mnav:not(.is-desktop) .mnav__panel { display: block; }
}

/* Estado abierto: panel interactivo */
.mnav.is-open .mnav__panel {
	visibility: visible;
	pointer-events: auto;
}

/* Estado cerrando: el panel sigue visible para animar la salida,
   pero ya no recibe clics (evita seleccionar algo mientras cierra). */
.mnav.is-closing .mnav__panel {
	visibility: visible;
	pointer-events: none;
}

/* ============================================================
   ELEMENTOS ANIMABLES: preparación base
   Cada item entra con retardo escalonado (--mnav-i).
   ============================================================ */
.mnav__list--mobile .mnav__item {
	opacity: 0;
	transition: opacity var(--mnav-manim) ease,
				transform var(--mnav-manim) ease;
	transition-delay: 0ms;
}
.mnav.is-open .mnav__list--mobile .mnav__item {
	opacity: 1;
	transition-delay: calc(var(--mnav-i) * 70ms + 120ms);
}

/* ============================================================
   DISEÑO 1 — FULLSCREEN CENTRADO
   ============================================================ */
.mnav--design-fullscreen .mnav__panel-bg {
	opacity: 0;
	transform: scale(1.04);
	transition: opacity var(--mnav-manim) ease, transform var(--mnav-manim) ease;
}
.mnav--design-fullscreen.is-open .mnav__panel-bg {
	opacity: 1;
	transform: scale(1);
}
.mnav--design-fullscreen .mnav__list--mobile .mnav__item {
	transform: translateY(24px);
}
.mnav--design-fullscreen.is-open .mnav__list--mobile .mnav__item {
	transform: translateY(0);
}
.mnav--design-fullscreen .mnav__mlink { position: relative; }
.mnav--design-fullscreen .mnav__mlink::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 2px;
	width: 0; height: 2px;
	background: var(--mnav-mlink-hover);
	transform: translateX(-50%);
	transition: width 0.3s ease;
}
.mnav--design-fullscreen .mnav__mlink:hover::after { width: 60%; }

/* ============================================================
   DISEÑO 2 — DRAWER LATERAL
   ============================================================ */
.mnav--design-drawer .mnav__panel-bg {
	background: rgba(2, 6, 23, 0.55);
	opacity: 0;
	transition: opacity var(--mnav-manim) ease;
}
.mnav--design-drawer.is-open .mnav__panel-bg { opacity: 1; }

.mnav--design-drawer .mnav__panel-inner {
	position: absolute;
	top: 0;
	width: min(360px, 86vw);
	height: 100%;
	background: var(--mnav-overlay-bg);
	justify-content: flex-start;
	padding-top: 90px;
	box-shadow: 0 0 60px rgba(0,0,0,0.35);
	transition: transform var(--mnav-manim) cubic-bezier(0.16, 1, 0.3, 1);
}
.mnav--design-drawer.mnav--side-right .mnav__panel-inner { right: 0; transform: translateX(100%); }
.mnav--design-drawer.mnav--side-left  .mnav__panel-inner { left: 0;  transform: translateX(-100%); }
.mnav--design-drawer.is-open .mnav__panel-inner { transform: translateX(0); }

.mnav--design-drawer .mnav__list--mobile { align-items: flex-start; text-align: left; max-width: none; margin: 0; }
.mnav--design-drawer .mnav__list--mobile .mnav__item { transform: translateX(18px); }
.mnav--design-drawer.is-open .mnav__list--mobile .mnav__item { transform: translateX(0); }

/* ============================================================
   DISEÑO 3 — CORTINA DESDE ARRIBA
   ============================================================ */
.mnav--design-curtain .mnav__panel-bg {
	transform: translateY(-100%);
	transition: transform var(--mnav-manim) cubic-bezier(0.77, 0, 0.175, 1);
}
.mnav--design-curtain.is-open .mnav__panel-bg { transform: translateY(0); }

.mnav--design-curtain .mnav__list--mobile .mnav__item { transform: translateY(-16px); }
.mnav--design-curtain.is-open .mnav__list--mobile .mnav__item { transform: translateY(0); }

/* ============================================================
   DISEÑO 4 — GRID / TARJETAS
   ============================================================ */
.mnav--design-grid .mnav__panel-bg {
	opacity: 0;
	transition: opacity var(--mnav-manim) ease;
}
.mnav--design-grid.is-open .mnav__panel-bg { opacity: 1; }

.mnav--design-grid .mnav__list--mobile {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 560px;
}
.mnav--design-grid .mnav__item {
	transform: scale(0.85) translateY(16px);
}
.mnav--design-grid.is-open .mnav__item { transform: scale(1) translateY(0); }

.mnav--design-grid .mnav__mlink {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 110px;
	padding: 18px;
	text-align: center;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(4px);
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.mnav--design-grid .mnav__mlink:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--mnav-mlink-hover);
	color: var(--mnav-mlink-color);
}

/* Si hay un número impar, que la última ocupe todo el ancho */
.mnav--design-grid .mnav__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* ============================================================
   DISEÑO 5 — REVELADO CIRCULAR (clip-path)
   ============================================================ */
.mnav--design-circular .mnav__panel-bg {
	clip-path: circle(0% at calc(100% - 40px) 40px);
	transition: clip-path var(--mnav-manim) cubic-bezier(0.65, 0, 0.35, 1);
}
.mnav--design-circular.mnav--side-left .mnav__panel-bg {
	clip-path: circle(0% at 40px 40px);
}
.mnav--design-circular.is-open .mnav__panel-bg {
	clip-path: circle(150% at calc(100% - 40px) 40px);
}
.mnav--design-circular.is-open.mnav--side-left .mnav__panel-bg {
	clip-path: circle(150% at 40px 40px);
}
.mnav--design-circular .mnav__list--mobile .mnav__item { transform: scale(0.9); }
.mnav--design-circular.is-open .mnav__list--mobile .mnav__item { transform: scale(1); }

/* ============================================================
   DISEÑO 6 — SPLIT (dos paneles desde los lados)
   ============================================================ */
.mnav--design-split .mnav__panel-bg { background: transparent; }
.mnav--design-split .mnav__panel-bg::before,
.mnav--design-split .mnav__panel-bg::after {
	content: "";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background: var(--mnav-overlay-bg);
	transition: transform var(--mnav-manim) cubic-bezier(0.77, 0, 0.175, 1);
}
.mnav--design-split .mnav__panel-bg::before { left: 0;  transform: translateX(-100%); }
.mnav--design-split .mnav__panel-bg::after  { right: 0; transform: translateX(100%); }
.mnav--design-split.is-open .mnav__panel-bg::before,
.mnav--design-split.is-open .mnav__panel-bg::after { transform: translateX(0); }

.mnav--design-split .mnav__list--mobile .mnav__item { transform: translateY(20px); }
.mnav--design-split.is-open .mnav__list--mobile .mnav__item { transform: translateY(0); }
/* Los items esperan a que los paneles cierren */
.mnav--design-split.is-open .mnav__list--mobile .mnav__item {
	transition-delay: calc(var(--mnav-i) * 60ms + var(--mnav-manim));
}

/* ============================================================
   DISEÑO 7 — GLASSMORPHISM
   ============================================================ */
.mnav--design-glass .mnav__panel-bg {
	background: color-mix(in srgb, var(--mnav-overlay-bg) 45%, transparent);
	-webkit-backdrop-filter: blur(var(--mnav-blur));
	backdrop-filter: blur(var(--mnav-blur));
	opacity: 0;
	transition: opacity var(--mnav-manim) ease;
}
.mnav--design-glass.is-open .mnav__panel-bg { opacity: 1; }

.mnav--design-glass .mnav__list--mobile {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 24px;
	padding: 28px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	max-width: 420px;
	transform: translateY(20px) scale(0.97);
	opacity: 0;
	transition: transform var(--mnav-manim) ease, opacity var(--mnav-manim) ease;
}
.mnav--design-glass.is-open .mnav__list--mobile { transform: translateY(0) scale(1); opacity: 1; }
.mnav--design-glass .mnav__list--mobile .mnav__item { transform: translateY(10px); }
.mnav--design-glass.is-open .mnav__list--mobile .mnav__item { transform: translateY(0); }

/* ============================================================
   DISEÑO 8 — NEÓN / GLOW
   ============================================================ */
.mnav--design-neon .mnav__panel-bg {
	background: radial-gradient(circle at 50% 30%, #1e1b4b 0%, #0b1020 60%, #05060d 100%);
	opacity: 0;
	transition: opacity var(--mnav-manim) ease;
}
.mnav--design-neon.is-open .mnav__panel-bg { opacity: 1; }

.mnav--design-neon .mnav__mlink {
	letter-spacing: 1px;
	text-shadow: 0 0 6px color-mix(in srgb, var(--mnav-mlink-hover) 60%, transparent);
	transition: text-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.mnav--design-neon .mnav__mlink:hover {
	color: var(--mnav-mlink-hover);
	text-shadow:
		0 0 8px var(--mnav-mlink-hover),
		0 0 22px var(--mnav-mlink-hover),
		0 0 40px color-mix(in srgb, var(--mnav-mlink-hover) 70%, transparent);
	transform: scale(1.04);
}
.mnav--design-neon .mnav__list--mobile .mnav__item { transform: translateY(16px); }
.mnav--design-neon.is-open .mnav__list--mobile .mnav__item { transform: translateY(0); }

/* ============================================================
   DISEÑO 9 — LISTA DESLIZANTE ESCALONADA
   ============================================================ */
.mnav--design-slide .mnav__panel-bg {
	opacity: 0;
	transition: opacity var(--mnav-manim) ease;
}
.mnav--design-slide.is-open .mnav__panel-bg { opacity: 1; }

.mnav--design-slide .mnav__list--mobile { align-items: flex-start; text-align: left; }
.mnav--design-slide .mnav__list--mobile .mnav__item { transform: translateX(-40px); }
.mnav--design-slide.is-open .mnav__list--mobile .mnav__item { transform: translateX(0); }
.mnav--design-slide .mnav__mlink {
	position: relative;
	padding-left: 0;
}
.mnav--design-slide .mnav__mlink::before {
	content: "";
	position: absolute;
	left: -18px; top: 50%;
	width: 0; height: 2px;
	background: var(--mnav-mlink-hover);
	transform: translateY(-50%);
	transition: width 0.3s ease;
}
.mnav--design-slide .mnav__mlink:hover { transform: translateX(10px); }
.mnav--design-slide .mnav__mlink:hover::before { width: 12px; }

/* ============================================================
   DISEÑO 10 — BOTTOM SHEET (sube desde abajo)
   ============================================================ */
.mnav--design-sheet .mnav__panel-bg {
	background-color: rgba(2, 6, 23, 0.55);
	opacity: 0;
	transition: opacity var(--mnav-manim) ease;
}
.mnav--design-sheet.is-open .mnav__panel-bg { opacity: 1; }
.mnav--design-sheet .mnav__panel-inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	max-height: 85%;
	justify-content: flex-start;
	background-color: var(--mnav-overlay-bg);
	background-image: var(--mnav-overlay-image, none);
	background-size: cover;
	background-position: center;
	border-radius: 22px 22px 0 0;
	padding: 34px 28px 40px;
	box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
	transform: translateY(100%);
	transition: transform var(--mnav-manim) cubic-bezier(0.16, 1, 0.3, 1);
}
.mnav--design-sheet .mnav__panel-inner::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
}
.mnav--design-sheet.is-open .mnav__panel-inner { transform: translateY(0); }
.mnav--design-sheet .mnav__list--mobile .mnav__item { transform: translateY(14px); }
.mnav--design-sheet.is-open .mnav__list--mobile .mnav__item { transform: translateY(0); }

/* ============================================================
   DISEÑO 11 — ZOOM CON DESENFOQUE
   ============================================================ */
.mnav--design-zoom .mnav__panel-bg {
	opacity: 0;
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	transition: opacity var(--mnav-manim) ease, backdrop-filter var(--mnav-manim) ease;
}
.mnav--design-zoom.is-open .mnav__panel-bg {
	opacity: 1;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.mnav--design-zoom .mnav__list--mobile .mnav__item {
	transform: scale(1.35);
	filter: blur(4px);
	transition: opacity var(--mnav-manim) ease, transform var(--mnav-manim) cubic-bezier(0.16, 1, 0.3, 1), filter var(--mnav-manim) ease;
}
.mnav--design-zoom.is-open .mnav__list--mobile .mnav__item {
	transform: scale(1);
	filter: blur(0);
}

/* ============================================================
   DISEÑO 12 — BARRIDO DE COLOR (WIPE)
   ============================================================ */
.mnav--design-reveal .mnav__panel-bg {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--mnav-manim) cubic-bezier(0.77, 0, 0.175, 1);
}
.mnav--design-reveal.mnav--side-right .mnav__panel-bg { clip-path: inset(0 0 0 100%); }
.mnav--design-reveal.is-open .mnav__panel-bg { clip-path: inset(0 0 0 0); }
.mnav--design-reveal .mnav__list--mobile .mnav__item { transform: translateX(-24px); }
.mnav--design-reveal.mnav--side-right .mnav__list--mobile .mnav__item { transform: translateX(24px); }
.mnav--design-reveal.is-open .mnav__list--mobile .mnav__item { transform: translateX(0); }
.mnav--design-reveal.is-open .mnav__list--mobile .mnav__item {
	transition-delay: calc(var(--mnav-i) * 55ms + var(--mnav-manim) * 0.5);
}

/* ============================================================
   ACCESIBILIDAD: reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.mnav *,
	.mnav *::before,
	.mnav *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}