/* =========================================================================
   MKN MEGA MENU — "La Visión" nav dropdown (desktop) + drawer accordion (mobile).
   Loads site-wide (header is shared). Depends on tokens.css for the palette.
   Breakpoint mirrors the nav's own 960px boundary (see wow.css @media 960).
   ========================================================================= */

/* ---- Trigger: chevron + reset the plain-link look on the mega item ------- */
.mkn-nav__has-mega { position: static; }
.mkn-nav__mega-trigger {
	display: inline-flex; align-items: center; gap: 7px;
	position: relative; color: rgba(255,255,255,0.95); font-weight: 500; font-size: 0.98rem;
	padding: 4px 0; transition: color 220ms;
	text-shadow: 0 1px 12px rgba(24,15,48,0.55);
	cursor: pointer;
}
.mkn-nav.is-stuck .mkn-nav__mega-trigger { text-shadow: none; }
.mkn-nav__mega-trigger:hover { color: #fff; }
/* gold underline echoing the sibling nav links */
.mkn-nav__mega-trigger::after {
	content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
	background: var(--mkn-gold-gradient); transition: width 300ms var(--mkn-ease);
}
.mkn-nav__mega-trigger:hover::after,
.mkn-nav__mega-trigger[aria-expanded="true"]::after { width: 100%; }
.mkn-nav__chev {
	width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 240ms var(--mkn-ease);
}
.mkn-nav__mega-trigger[aria-expanded="true"] .mkn-nav__chev {
	transform: translateY(1px) rotate(-135deg);
}

/* =========================================================================
   DESKTOP (≥ 961px): centered dropdown panel under the header.
   ========================================================================= */
@media (min-width: 961px) {
	/* Anchor the panel to the header's centered inner (max-width 1280, margin
	   auto) so it centers on the true header axis — not on the trigger <li>,
	   which would push it off the right edge. */
	.mkn-nav__inner { position: relative; }
	.mkn-mega {
		position: absolute;
		top: calc(100% + 14px);
		left: 50%;
		transform: translateX(-50%);
		width: min(1100px, calc(100vw - 48px));
		z-index: 200;
	}
	/* JS drives visibility via [hidden]; when shown, animate in. */
	.mkn-mega[hidden] { display: none; }
	.mkn-mega {
		opacity: 0; visibility: hidden;
		transition: opacity 200ms var(--mkn-ease), transform 200ms var(--mkn-ease);
		transform: translateX(-50%) translateY(-8px);
		pointer-events: none;
	}
	.mkn-mega.is-open {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}

	.mkn-mega__panel {
		position: relative; overflow: hidden;
		background: rgba(24, 15, 48, 0.97);
		-webkit-backdrop-filter: blur(20px) saturate(1.2);
		backdrop-filter: blur(20px) saturate(1.2);
		border: 1px solid rgba(195, 168, 245, 0.25);
		border-radius: 20px;
		box-shadow:
			0 1px 0 rgba(255,255,255,0.06) inset,
			0 24px 60px rgba(10, 6, 22, 0.55),
			0 60px 120px rgba(10, 6, 22, 0.4);
		padding: 26px 26px 0;
	}
	/* faint lavender wash top-left, echoing the dark bands */
	.mkn-mega__panel::before {
		content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
		background: radial-gradient(700px 320px at 12% -10%, rgba(157,123,234,0.16), transparent 62%);
	}

	.mkn-mega__grid {
		position: relative; z-index: 1;
		list-style: none; margin: 0; padding: 0;
		display: grid; grid-template-columns: repeat(3, 1fr);
		gap: 4px 10px;
	}
}
@media (min-width: 1240px) {
	.mkn-mega__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Item (shared desktop look; mobile overrides below) ------------------ */
.mkn-mega__item {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 14px 15px; border-radius: 14px;
	color: inherit; text-decoration: none;
	border: 1px solid transparent;
	transition: background 220ms var(--mkn-ease), border-color 220ms var(--mkn-ease), transform 220ms var(--mkn-ease);
}
.mkn-mega__item.is-linked { cursor: pointer; }
.mkn-mega__item.is-linked:hover {
	background: rgba(157, 123, 234, 0.10);
	border-color: rgba(195, 168, 245, 0.22);
	transform: translateY(-2px);
}
.mkn-mega__item.is-inert { cursor: default; opacity: 0.55; }

/* current-page marker: gold left rule */
.mkn-mega__item.is-current {
	background: rgba(201, 162, 39, 0.08);
	border-color: rgba(201, 162, 39, 0.28);
	box-shadow: inset 3px 0 0 var(--mkn-gold);
}

.mkn-mega__ico {
	flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px;
	color: var(--mkn-lavender);
	transition: color 220ms var(--mkn-ease);
}
.mkn-mega__item.is-active .mkn-mega__ico { color: var(--mkn-gold-hi); }
.mkn-mega__item.is-linked:hover .mkn-mega__ico { color: var(--mkn-gold-hi); }
.mkn-mega__ico svg { width: 100%; height: 100%; display: block; }

.mkn-mega__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mkn-mega__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mkn-mega__name {
	font-family: var(--mkn-font-display); font-weight: 600; font-size: 1.02rem;
	color: #fff; line-height: 1.2;
}
.mkn-mega__desc {
	font-family: var(--mkn-font-body); font-size: 0.82rem; line-height: 1.45;
	color: var(--mkn-lavender); opacity: 0.72;
}

/* ---- Status chips -------------------------------------------------------- */
.mkn-mega__chip {
	flex: 0 0 auto;
	font-family: var(--mkn-font-body); font-weight: 600;
	font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase;
	padding: 3px 9px; border-radius: 999px; white-space: nowrap;
	border: 1px solid rgba(195,168,245,0.35);
	color: var(--mkn-lavender);
}
.mkn-mega__item.is-active .mkn-mega__chip {
	color: var(--mkn-gold-hi);
	border-color: rgba(201,162,39,0.5);
	background: rgba(201,162,39,0.10);
}
/* "new" (just-graduated) chip — lavender, distinct from live's gold. */
.mkn-mega__item.is-new .mkn-mega__ico { color: var(--mkn-lavender); }
.mkn-mega__item.is-new .mkn-mega__chip {
	color: #fff;
	border-color: rgba(195,168,245,0.6);
	background: rgba(195,168,245,0.16);
}

/* ---- Footer strip -------------------------------------------------------- */
.mkn-mega__foot {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	margin-top: 18px; padding: 16px 15px;
	border-top: 1px solid rgba(201, 162, 39, 0.35);
}
.mkn-mega__foot-line {
	font-family: var(--mkn-font-display); font-style: italic; font-weight: 600;
	font-size: 0.92rem; color: rgba(255,255,255,0.78);
}
.mkn-mega__foot-link {
	font-family: var(--mkn-font-body); font-weight: 600; font-size: 0.86rem;
	color: var(--mkn-gold-hi); white-space: nowrap;
	transition: color 200ms;
}
.mkn-mega__foot-link:hover { color: #fff; }
.mkn-mega__foot-link span { transition: transform 220ms var(--mkn-ease); display: inline-block; }
.mkn-mega__foot-link:hover span { transform: translateX(4px); }

/* =========================================================================
   MOBILE (≤ 960px): accordion inside the existing drawer.
   The trigger becomes a full-width accordion header; the panel becomes an
   indented list of section names + chips (no descriptions — keep it lean).
   ========================================================================= */
@media (max-width: 960px) {
	.mkn-nav__has-mega { width: 100%; }
	.mkn-nav__mega-trigger {
		display: flex; align-items: center; justify-content: flex-start; gap: 10px;
		width: 100%; font-size: 1.28rem; text-shadow: none;
	}
	.mkn-nav__chev {
		width: 9px; height: 9px; margin-left: 2px;
		transform: translateY(-2px) rotate(45deg);
	}
	.mkn-nav__mega-trigger[aria-expanded="true"] .mkn-nav__chev {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Panel: collapsed by default via [hidden]; JS toggles [hidden]. */
	.mkn-mega { width: 100%; }
	.mkn-mega[hidden] { display: none; }
	.mkn-mega__panel {
		background: none; border: 0; border-radius: 0; box-shadow: none;
		padding: 14px 0 6px; backdrop-filter: none; -webkit-backdrop-filter: none;
	}
	.mkn-mega__panel::before { display: none; }
	.mkn-mega__panel::after { display: none; } /* kill inherited grain layer */

	.mkn-mega__grid {
		list-style: none; margin: 0; padding: 0 0 0 4px;
		display: flex; flex-direction: column; gap: 2px;
		border-left: 1px solid rgba(195,168,245,0.22);
	}
	.mkn-mega__item {
		padding: 10px 12px; gap: 11px; border-radius: 10px;
		align-items: center;
	}
	.mkn-mega__ico { width: 20px; height: 20px; margin-top: 0; }
	.mkn-mega__desc { display: none; } /* names + chips only on mobile */
	.mkn-mega__name { font-size: 1.02rem; }
	.mkn-mega__row { gap: 8px; }
	.mkn-mega__item.is-current { box-shadow: inset 3px 0 0 var(--mkn-gold); }
	.mkn-mega__foot { display: none; } /* footer strip is a desktop affordance */
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mkn-mega,
	.mkn-nav__chev,
	.mkn-mega__item,
	.mkn-mega__foot-link span { transition: none !important; }
	@media (min-width: 961px) {
		.mkn-mega { transform: translateX(-50%) translateY(0); }
	}
}

/* Mega-menu footer: group the Declaración-de-Fe + full-vision links on the right. */
.mkn-mega__foot-links { display: flex; align-items: center; gap: 22px; }