/* =========================================================================
   MKN WOW — hand-coded homepage template (template-mkn-home.php)
   Loaded ONLY for the MKN Home template. Depends on tokens.css for palette,
   fonts, glass, reveal + kenburns utilities.
   The template renders its own header/footer, so this file also owns the nav.
   ========================================================================= */

/* ---- Reset scoped to the template page --------------------------------- */
body.mkn-wow {
	margin: 0;
	background: var(--mkn-bg);
	color: var(--mkn-darkest);
	font-family: var(--mkn-font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.mkn-wow * { box-sizing: border-box; }
body.mkn-wow img { display: block; max-width: 100%; }
body.mkn-wow a { text-decoration: none; }
/* color:inherit at ZERO specificity so component color rules always win.
   (A body.class+a selector at (0,1,2) was silently beating .mkn-nav__links a
   and .mkn-nav__cta — the invisible-header-links bug.) */
:where(body.mkn-wow) :where(a) { color: inherit; }
html { scroll-behavior: smooth; }

/* Kill any residual theme chrome that might slip through */
body.mkn-wow #wpadminbar { /* leave admin bar */ }
body.mkn-wow .mkn-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--mkn-gold); color: var(--mkn-darkest);
	padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600;
}
body.mkn-wow .mkn-skip:focus { left: 0; }

/* ---- Shared typography -------------------------------------------------- */
.mkn-page .mkn-h2 {
	font-family: var(--mkn-font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	font-size: clamp(2rem, 4vw, 3.1rem);
	margin: 0 0 16px;
}
.mkn-kicker--gold {
	color: transparent;
	background: var(--mkn-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	margin: 0 0 16px;
}
.mkn-sec-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.mkn-sec-head__sub { color: #6b6480; font-size: 1.06rem; line-height: 1.7; margin: 0; }
.mkn-sec-head--light .mkn-h2 { color: #fff; }
.mkn-sec-head--light .mkn-sec-head__sub { color: rgba(255,255,255,0.78); }

/* ---- Buttons ------------------------------------------------------------ */
.mkn-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--mkn-font-body); font-weight: 600; font-size: 0.98rem;
	letter-spacing: 0.01em; padding: 15px 32px; border-radius: 999px;
	cursor: pointer; border: 1px solid transparent; white-space: nowrap;
	transition: transform 300ms var(--mkn-ease), box-shadow 300ms var(--mkn-ease),
		background 300ms var(--mkn-ease), color 300ms var(--mkn-ease), border-color 300ms var(--mkn-ease);
}
.mkn-btn--gold {
	background: var(--mkn-gold-gradient);
	color: var(--mkn-darkest);
	box-shadow: 0 12px 30px rgba(201, 162, 39, 0.28);
}
.mkn-btn--gold:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(201, 162, 39, 0.42); }
.mkn-btn--ghost {
	background: transparent; color: #fff;
	border: 1px solid rgba(255,255,255,0.55);
}
.mkn-btn--ghost:hover { border-color: var(--mkn-lavender); background: rgba(195,168,245,0.1); transform: translateY(-2px); }
.mkn-btn--xl { padding: 18px 46px; font-size: 1.06rem; }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.mkn-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: transparent;
	transition: background 350ms var(--mkn-ease), box-shadow 350ms var(--mkn-ease), padding 350ms var(--mkn-ease);
}
.admin-bar .mkn-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .mkn-nav { top: 46px; } }
.mkn-nav.is-stuck {
	background: rgba(24, 15, 48, 0.94);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 8px 34px rgba(0,0,0,0.34);
}
/* While the mobile drawer is open, the drawer (.mkn-nav__drawer) is a child
   of this header — if the header is also .is-stuck, its backdrop-filter
   creates a filtered compositing ancestor for the drawer and GPU compositing
   corrupts/blurs the drawer's text. Kill the frosted-glass effect for the
   duration the drawer is open so the drawer never composites through it. */
body.mkn-nav-open .mkn-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* While the drawer is open, the header's stacking context (base z-index 100)
   must outrank the scrim (body.mkn-nav-open::after, z-index 110) — otherwise
   the scrim paints above the ENTIRE header stacking context, toggle included
   (the toggle's own z-index 130 only competes with siblings INSIDE the
   header's context), and swallows every tap on the toggle and drawer links. */
body.mkn-nav-open .mkn-nav { z-index: 115; }
.mkn-nav__inner {
	max-width: 1280px; margin: 0 auto;
	padding: 22px clamp(18px, 4vw, 52px);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	transition: padding 350ms var(--mkn-ease);
}
.mkn-nav.is-stuck .mkn-nav__inner { padding-top: 13px; padding-bottom: 13px; }
.mkn-nav__brand { line-height: 0; }
.mkn-nav__logo {
	height: 88px; width: auto; /* logo size-up 2026-07-10 (Edward): was 64px */
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
	transition: height 350ms var(--mkn-ease);
}
.mkn-nav.is-stuck .mkn-nav__logo { height: 68px; }
/* Mobile: grow only slightly so the fixed header bar stays compact (Phase 1 logo size-up). */
@media (max-width: 600px) {
	.mkn-nav__logo { height: 62px; }
	.mkn-nav.is-stuck .mkn-nav__logo { height: 52px; }
}
.mkn-nav__drawer { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); }
.mkn-nav__links {
	display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px);
	list-style: none; margin: 0; padding: 0;
}
.mkn-nav__links a {
	position: relative; color: rgba(255,255,255,0.95); font-weight: 500; font-size: 0.98rem;
	padding: 4px 0; transition: color 220ms;
	/* Hold legibility against bright photo areas in the transparent-over-hero state */
	text-shadow: 0 1px 12px rgba(24,15,48,0.55);
}
.mkn-nav__links a::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__links a:hover { color: #fff; }
.mkn-nav__links a:hover::after { width: 100%; }
/* Stuck (solid #180f30) state: solid contrast, shadow no longer needed */
.mkn-nav.is-stuck .mkn-nav__links a { text-shadow: none; }
.mkn-nav__lang {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em;
	color: rgba(255,255,255,0.95);
	text-shadow: 0 1px 12px rgba(24,15,48,0.55);
}
.mkn-nav.is-stuck .mkn-nav__lang { text-shadow: none; }
.mkn-nav__lang a { color: rgba(255,255,255,0.75); transition: color 220ms; }
.mkn-nav__lang a:hover { color: #fff; }
.mkn-nav__lang a.is-current { color: var(--mkn-lavender); }
.mkn-nav__lang span { opacity: 0.5; }
.mkn-nav__cta {
	color: var(--mkn-gold-hi); font-weight: 600; font-size: 0.92rem;
	padding: 11px 24px; border-radius: 999px; border: 1px solid var(--mkn-gold);
	transition: background 260ms var(--mkn-ease), color 260ms var(--mkn-ease), border-color 260ms;
	white-space: nowrap;
}
.mkn-nav__cta:hover { background: var(--mkn-gold-gradient); color: var(--mkn-darkest); border-color: transparent; }

/* ≤960px quick bar (lang + compact CTA in the bar itself) — desktop hides it,
   the full drawer versions remain the desktop UI. */
.mkn-nav__quick { display: none; }

/* toggle */
.mkn-nav__toggle {
	display: none; flex-direction: column; gap: 5px;
	background: none; border: 0; cursor: pointer; padding: 10px; z-index: 130;
	min-height: 44px; box-sizing: border-box; justify-content: center;
}
.mkn-nav__toggle span {
	display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px;
	transition: transform 300ms var(--mkn-ease), opacity 300ms var(--mkn-ease);
}
.mkn-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkn-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mkn-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.mkn-nav__toggle { display: flex; }
	.mkn-nav__drawer {
		position: fixed; inset: 0 0 0 auto; height: 100vh; width: min(84vw, 360px);
		background: var(--mkn-darkest);
		flex-direction: column; align-items: flex-start; justify-content: center;
		gap: 30px; padding: 40px 42px;
		transform: translateX(100%);
		transition: transform 360ms var(--mkn-ease);
		box-shadow: -24px 0 70px rgba(24,15,48,0.6);
		z-index: 120; /* below the toggle (130) so the X stays clickable */
	}
	.mkn-nav__drawer.is-open { transform: translateX(0); }
	.mkn-nav__links { flex-direction: column; align-items: flex-start; gap: 22px; }
	.mkn-nav__links a { font-size: 1.28rem; }
	.mkn-nav__lang { font-size: 1rem; gap: 4px; }
	/* Comfortable tap targets for ES/EN in the drawer (≥44px), without
	   changing the visual weight — padding grows the hit area only. */
	.mkn-nav__lang a { padding: 11px 12px; display: inline-flex; align-items: center; }
	.mkn-nav__cta { font-size: 1rem; padding: 13px 26px; }
	/* backdrop */
	body.mkn-nav-open::after {
		content: ""; position: fixed; inset: 0; background: rgba(10,6,22,0.5);
		z-index: 110; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
	}
	/* Scroll-position-compensating lock (replaces bare overflow:hidden).
	   wow.js sets body.style.top = -scrollY on open and restores scroll on
	   close. A plain overflow lock leaves body's layout box shifted once
	   scrollY > 0, which routes pointer hit-testing over the fixed header
	   to <body> instead of the toggle — this keeps the visual scroll
	   position stable without that shift. overflow-y: scroll keeps the
	   scrollbar-gutter stable so the page doesn't jump width. */
	body.mkn-nav-open { position: fixed; width: 100%; overflow-y: scroll; }

	/* Quick bar: lang switch + compact CTA reachable without the drawer.
	   Tap targets ≥44px via padding; sits between brand and toggle. */
	.mkn-nav__quick { display: flex; align-items: center; gap: 4px; margin-left: auto; }
	.mkn-nav__lang--bar { font-size: 0.92rem; gap: 0; letter-spacing: 0.04em; }
	.mkn-nav__lang--bar a {
		padding: 12px 7px; min-height: 44px;
		display: inline-flex; align-items: center;
	}
	.mkn-nav__ctabar {
		display: inline-flex; align-items: center;
		min-height: 40px; padding: 8px 15px;
		font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em;
		color: var(--mkn-gold, #d9b45b); text-decoration: none;
		border: 1px solid rgba(217,180,91,0.55); border-radius: 999px;
		white-space: nowrap;
	}
	.mkn-nav__ctabar:hover, .mkn-nav__ctabar:focus-visible { background: var(--mkn-gold-gradient); color: var(--mkn-darkest); border-color: transparent; }
	/* Very narrow phones: keep the language switch, drop the CTA (still in the drawer). */
	@media (max-width: 352px) { .mkn-nav__ctabar { display: none; } }

	/* Footer link tap pitch ≥40px (audit measured ~31px top-to-top). Padding
	   grows the hit area without changing the visual rhythm much. */
	.mkn-foot__col li a { display: inline-block; padding: 10px 0; }
}

/* =========================================================================
   ① HERO
   ========================================================================= */
.mkn-hero {
	position: relative; min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: flex-start;
	overflow: hidden; color: #fff;
}
.mkn-hero__bg { position: absolute; inset: 0; z-index: 0; }
.mkn-hero__img {
	width: 100%; height: 100%; object-fit: cover;
	animation: mkn-kenburns 24s ease-out both;
	transform-origin: 60% 40%;
}
.mkn-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(105deg, rgba(24,15,48,0.95) 0%, rgba(24,15,48,0.85) 34%, rgba(24,15,48,0.5) 60%, rgba(24,15,48,0.2) 82%, rgba(24,15,48,0.34) 100%),
		linear-gradient(0deg, rgba(24,15,48,0.88) 0%, rgba(24,15,48,0.0) 52%);
}
.mkn-hero__inner {
	position: relative; z-index: 2;
	max-width: 1280px; width: 100%; margin: 0 auto;
	padding: 0 clamp(24px, 6vw, 96px);
}
.mkn-hero__kicker {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--mkn-font-body); font-weight: 600;
	font-size: 0.82rem; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--mkn-lavender); margin: 0 0 26px;
}
.mkn-hero__kicker::before {
	content: ""; width: 46px; height: 1px; background: var(--mkn-gold-gradient); display: inline-block;
}
.mkn-hero__title {
	font-family: var(--mkn-font-display); font-weight: 700;
	font-size: clamp(3rem, 6.5vw, 5.75rem); line-height: 1.12;
	letter-spacing: -0.02em; margin: 0 0 26px; max-width: 16ch;
	text-shadow: 0 4px 40px rgba(0,0,0,0.4);
}
.mkn-hero__title span { display: block; }
.mkn-hero__title span:not(.mkn-hero__title-accent) { color: #fff; -webkit-text-fill-color: #fff; }
.mkn-hero__title-accent {
	margin-top: 0.04em;
	font-style: italic; font-weight: 600;
	background: linear-gradient(120deg, #fff 0%, var(--mkn-lavender) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.mkn-hero__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.65;
	color: rgba(255,255,255,0.88); max-width: 44ch; margin: 0 0 40px;
}
.mkn-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.mkn-hero__cue {
	/* Centre against the true viewport (full-width hero is the offset parent):
	   use left/right:0 + margin auto, NOT translateX — the .mkn-fx entrance reset
	   sets `transform:none` on load, which would otherwise clobber a centring
	   translate and shove the cue ~half its width to the right. */
	position: absolute; bottom: 30px; left: 0; right: 0; margin-inline: auto;
	width: max-content;
	z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
	color: rgba(255,255,255,0.7); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.mkn-hero__cue-arrow {
	width: 22px; height: 22px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); animation: mkn-bob 2.2s ease-in-out infinite;
}
@keyframes mkn-bob { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(4px,4px); } }

/* (hero entrance choreography lives in the ELEVATION block — .mkn-fx / .mkn-line) */

/* =========================================================================
   ② CREDO STRIP
   ========================================================================= */
.mkn-credo {
	background: var(--mkn-darkest); color: #fff; text-align: center;
	padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 96px);
	display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 44px);
}
.mkn-credo .mkn-hairline { width: min(140px, 40vw); }
.mkn-credo__line {
	font-family: var(--mkn-font-display); font-style: italic; font-weight: 600;
	font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.3; margin: 0;
	color: #fff; max-width: 20ch;
}

/* =========================================================================
   ③ CÓMO FUNCIONA
   ========================================================================= */
.mkn-how {
	background:
		radial-gradient(1000px 500px at 80% -5%, #3b2a66 0%, var(--mkn-darkest) 60%),
		var(--mkn-darkest);
	color: #fff;
	padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 96px);
}
.mkn-how .mkn-sec-head .mkn-h2 { color: #fff; }
.mkn-how .mkn-sec-head__sub { color: rgba(255,255,255,0.75); }
.mkn-how__grid {
	display: grid; grid-template-columns: 1fr; gap: 26px;
	max-width: 1120px; margin: 0 auto;
}
@media (min-width: 1024px) { .mkn-how__grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.mkn-how__card {
	position: relative; padding: 44px 36px 40px; overflow: hidden;
	transition: transform 400ms var(--mkn-ease), box-shadow 400ms var(--mkn-ease), border-color 400ms;
}
.mkn-how__card:hover { transform: translateY(-6px); border-color: rgba(195,168,245,0.5); }
.mkn-how__num {
	font-family: var(--mkn-font-display); font-weight: 700; font-size: 3rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 1.4px rgba(195,168,245,0.55);
	display: block; margin-bottom: 18px;
}
.mkn-how__card--seal .mkn-how__num { -webkit-text-stroke-color: var(--mkn-gold); }
.mkn-how__title { font-family: var(--mkn-font-display); font-weight: 600; font-size: 1.5rem; margin: 0 0 12px; color: #fff; }
.mkn-how__p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0; }
/* Seal on middle card */
.mkn-how__card--seal { border-color: rgba(201,162,39,0.4); }
.mkn-how__seal {
	position: absolute; top: 34px; right: 28px; width: 96px; height: 44px;
	color: var(--mkn-gold); opacity: 0.9;
}
.mkn-how__seal svg { width: 100%; height: 100%; }
/* draw-on: dash the strokes, animate when card visible */
.mkn-how__seal svg [stroke], .mkn-how__seal svg circle, .mkn-how__seal svg path, .mkn-how__seal svg line {
	stroke-dasharray: 620; stroke-dashoffset: 620;
	transition: stroke-dashoffset 1600ms var(--mkn-ease);
}
.mkn-how__card--seal.is-visible .mkn-how__seal svg [stroke],
.mkn-how__card--seal.is-visible .mkn-how__seal svg circle,
.mkn-how__card--seal.is-visible .mkn-how__seal svg path,
.mkn-how__card--seal.is-visible .mkn-how__seal svg line { stroke-dashoffset: 0; }
.mkn-how__seal svg text { opacity: 0; transition: opacity 500ms 900ms; }
.mkn-how__card--seal.is-visible .mkn-how__seal svg text { opacity: 1; }

/* =========================================================================
   ④ MIEMBROS FUNDADORES
   ========================================================================= */
.mkn-founders {
	background: var(--mkn-bg);
	padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 96px);
}
.mkn-founders .mkn-sec-head .mkn-h2 { color: var(--mkn-primary); }
.mkn-founders__grid {
	display: grid; grid-template-columns: 1fr; gap: 28px;
	max-width: 1120px; margin: 0 auto;
}
/* iter8 kept the grid intimate at 2 cards; v1.64.0 the grid is curated from
   Mi Red (up to 6 slots) — two columns on tablet, TWO ROWS OF THREE on
   desktop. The invite card fills the next free slot while there is room. */
@media (min-width: 720px) { .mkn-founders__grid { grid-template-columns: repeat(2, 1fr); max-width: 780px; } }
@media (min-width: 1024px) { .mkn-founders__grid { grid-template-columns: repeat(3, 1fr); max-width: 1120px; } }
.mkn-founder {
	background: #fff; border-radius: var(--mkn-radius); overflow: hidden;
	border: 1px solid #ece5f7; box-shadow: 0 10px 34px rgba(42,26,74,0.06);
	transition: transform 400ms var(--mkn-ease), box-shadow 400ms var(--mkn-ease);
	display: flex; flex-direction: column;
}
.mkn-founder:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(42,26,74,0.16); }
.mkn-founder__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mkn-founder__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--mkn-ease); }
.mkn-founder:hover .mkn-founder__media img { transform: scale(1.04); }
.mkn-founder__badge {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--mkn-gold-gradient); color: var(--mkn-darkest);
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
	padding: 7px 13px; border-radius: 999px;
	box-shadow: 0 6px 18px rgba(201,162,39,0.4);
}
.mkn-founder__badge-ico { font-weight: 700; }
.mkn-founder__body { padding: 24px 26px 28px; }
/* Always exactly one line: listings carry 1–3 categories, and a variable-height
   cat line drifts the name/link baseline across cards in the same row. The full
   category list lives on the profile. */
.mkn-founder__cat {
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--mkn-accent-text); margin: 0 0 8px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkn-founder__name { font-family: var(--mkn-font-display); font-weight: 700; font-size: 1.5rem; color: var(--mkn-primary); margin: 0 0 14px; }
.mkn-founder__link { font-weight: 600; font-size: 0.95rem; color: var(--mkn-accent-text); }
/* open / invite cards */
.mkn-founder--open {
	background: transparent; border: 1.5px dashed rgba(157,123,234,0.5);
	box-shadow: none; align-items: center; justify-content: center; text-align: center;
	min-height: 100%;
}
.mkn-founder--open:hover { transform: translateY(-6px); border-color: var(--mkn-accent); box-shadow: 0 18px 44px rgba(42,26,74,0.1); background: rgba(157,123,234,0.03); }
.mkn-founder__open-inner { padding: 48px 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mkn-founder__open-plus {
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
	font-size: 1.8rem; font-weight: 300; color: var(--mkn-accent);
	border: 1.5px solid rgba(157,123,234,0.5); margin-bottom: 6px; line-height: 1;
	/* iter8 micro-delight: the plus turns like a key on hover, ring warms gold */
	transition: transform 400ms var(--mkn-ease), border-color 400ms var(--mkn-ease), color 400ms var(--mkn-ease);
}
.mkn-founder--open:hover .mkn-founder__open-plus,
.mkn-founder--open:focus-visible .mkn-founder__open-plus {
	transform: rotate(90deg); border-color: var(--mkn-gold); color: var(--mkn-gold-lo);
}
.mkn-founder__open-title { font-family: var(--mkn-font-display); font-weight: 600; font-size: 1.35rem; color: var(--mkn-primary); margin: 0; }
.mkn-founder__open-p { font-size: 0.95rem; line-height: 1.6; color: var(--mkn-muted-text); margin: 0; max-width: 26ch; }
.mkn-founder__open-cta { font-weight: 600; font-size: 0.92rem; color: var(--mkn-accent-text); margin-top: 6px; }
.mkn-founders__caption { text-align: center; color: var(--mkn-muted-text); font-size: 0.95rem; margin: clamp(36px,4vw,52px) auto 0; max-width: 56ch; }

/* =========================================================================
   ⑤ LA VISIÓN
   ========================================================================= */
.mkn-vision {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(88px, 11vw, 150px) clamp(24px, 6vw, 96px);
	background-image: var(--mkn-vision-bg); background-size: cover; background-position: center; background-attachment: fixed;
}
.mkn-vision__overlay {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(24,15,48,0.9) 0%, rgba(24,15,48,0.82) 50%, rgba(24,15,48,0.94) 100%);
}
.mkn-vision__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.mkn-roadmap {
	display: flex; gap: 0; align-items: flex-start; justify-content: flex-start;
	position: relative; padding: 30px 0 10px; margin: 0 auto;
	overflow-x: auto; scroll-snap-type: x mandatory;
	-ms-overflow-style: none; scrollbar-width: none;
}
.mkn-roadmap::-webkit-scrollbar { display: none; }
/* connecting line: real SVG (drawn on scroll — see elevation block) */
.mkn-roadmap__line {
	/* dot center = pad-top 30 + icon 26 + gap 12 + dot half 10 = 78px */
	position: absolute; top: 77px; left: 0; height: 2px; width: 100%;
	z-index: 0; display: block; overflow: visible;
}
.mkn-roadmap__line path {
	stroke: rgba(195, 168, 245, 0.4); stroke-width: 2; fill: none;
	stroke-dasharray: 100; stroke-dashoffset: 100;
	transition: stroke-dashoffset 1600ms var(--mkn-ease);
}
.mkn-roadmap.is-drawn .mkn-roadmap__line path { stroke-dashoffset: 0; }
@media (max-width: 1023px) { .mkn-roadmap__line { width: 1420px; } }
.mkn-roadmap__node {
	position: relative; z-index: 1; flex: 1 0 auto; min-width: 118px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	text-align: center; padding: 0 6px; scroll-snap-align: start;
}
@media (max-width: 640px) { .mkn-roadmap__node { min-width: 128px; } }
/* Desktop: all 11 nodes fit the row — distribute evenly, allow labels to wrap. */
@media (min-width: 1024px) {
	.mkn-roadmap { overflow-x: visible; }
	.mkn-roadmap__node { flex: 1 1 0; min-width: 0; padding: 0 4px; }
	.mkn-roadmap__label { max-width: 12ch; font-size: 0.98rem; }
	/* Vision-final (v1.24.0): with 9 nodes now carrying the long "Recién
	   inaugurada" chip, the nowrap state labels collided across the evenly
	   distributed desktop row. Let the state wrap inside its own node on the
	   horizontal variant only (the vertical La Visión roadmap is untouched). */
	.mkn-roadmap:not(.mkn-roadmap--vertical) .mkn-roadmap__state {
		white-space: normal; max-width: 11ch; line-height: 1.45;
	}
	/* iter8: a two-line label ("Reseñas verificadas") pushed its state chip
	   below every other chip — ragged baseline across the row. Reserve two
	   label lines on every node so all state chips share one baseline whether
	   the label wraps or not. (No display change — the .is-linked underline
	   affordance keeps its inline-block shrink-wrap.) */
	.mkn-roadmap:not(.mkn-roadmap--vertical) .mkn-roadmap__label {
		line-height: 1.2; min-height: 2.4em;
	}
}

/* Linked roadmap nodes on the horizontal (home) variant. wow-inner.css defines
 * the same .is-linked affordance for the vertical (La Vision) variant, but
 * wow-inner.css is not enqueued on template-mkn-home.php, so the horizontal
 * strip needs its own scoped copy of the hover/focus styling. */
.mkn-roadmap__link {
	display: contents; color: inherit;
}
.mkn-roadmap__node.is-linked { cursor: pointer; transition: transform 300ms var(--mkn-ease); }
.mkn-roadmap__node.is-linked:hover { transform: translateY(-3px); }
.mkn-roadmap__node.is-linked .mkn-roadmap__label {
	color: #fff; position: relative; display: inline-block;
}
.mkn-roadmap__node.is-linked .mkn-roadmap__label::after {
	content: ""; position: absolute; left: 50%; right: 50%; bottom: -3px; height: 1px;
	background: var(--mkn-gold-gradient); transition: left 320ms var(--mkn-ease), right 320ms var(--mkn-ease);
}
.mkn-roadmap__node.is-linked:hover .mkn-roadmap__label::after,
.mkn-roadmap__link:focus-visible .mkn-roadmap__label::after { left: 0; right: 0; }
.mkn-roadmap__node.is-linked .mkn-roadmap__ico { color: var(--mkn-lavender); }
.mkn-roadmap__node.is-linked:hover .mkn-roadmap__ico { color: var(--mkn-gold-hi); }
/* Keep the keyboard focus ring on the whole node (display:contents drops it). */
.mkn-roadmap__link:focus-visible { outline: none; }
.mkn-roadmap__node.is-linked:focus-within {
	outline: 3px solid var(--mkn-lavender); outline-offset: 6px; border-radius: 10px;
}

.mkn-roadmap__dot {
	width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--mkn-lavender); background: var(--mkn-darkest);
}
.mkn-roadmap__node.is-active .mkn-roadmap__dot {
	background: var(--mkn-gold-gradient); border-color: var(--mkn-gold-hi);
	box-shadow: 0 0 0 6px rgba(201,162,39,0.18), 0 0 22px rgba(230,201,106,0.55);
}
.mkn-roadmap__label { font-family: var(--mkn-font-display); font-weight: 600; font-size: 1.05rem; color: #fff; }
.mkn-roadmap__node.is-soon .mkn-roadmap__label { color: rgba(255,255,255,0.72); }
.mkn-roadmap__state {
	font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--mkn-lavender); opacity: 0.66; white-space: nowrap;
}
.mkn-roadmap__node.is-active .mkn-roadmap__state { color: var(--mkn-gold-hi); opacity: 1; }
/* "new" = a section that just graduated to live (e.g. Iglesias). Brighter than
   soon, lavender-forward rather than gold, so it reads as freshly opened. */
.mkn-roadmap__node.is-new .mkn-roadmap__dot {
	background: var(--mkn-darkest); border-color: var(--mkn-lavender);
	box-shadow: 0 0 0 5px rgba(195,168,245,0.18), 0 0 18px rgba(195,168,245,0.5);
}
.mkn-roadmap__node.is-new .mkn-roadmap__ico { color: var(--mkn-lavender); }
.mkn-roadmap__node.is-new .mkn-roadmap__label { color: #fff; }
.mkn-roadmap__node.is-new .mkn-roadmap__state { color: var(--mkn-lavender); opacity: 1; }
.mkn-vision__cta { text-align: center; margin-top: clamp(40px, 5vw, 60px); }

/* =========================================================================
   ⑥ COHORTE FUNDADORA  (unmistakably deep purple)
   ========================================================================= */
.mkn-cohort {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(88px, 11vw, 150px) clamp(24px, 6vw, 96px);
	background-image: var(--mkn-cohort-bg); background-size: cover; background-position: center;
}
.mkn-cohort__overlay {
	position: absolute; inset: 0; z-index: 0;
	/* deep purple multiply so velvet reads as jewel-purple, never mustard */
	background:
		linear-gradient(135deg, rgba(24,15,48,0.94) 0%, rgba(59,42,102,0.88) 55%, rgba(24,15,48,0.96) 100%);
	mix-blend-mode: normal;
}
.mkn-cohort::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(900px 500px at 20% 20%, rgba(157,123,234,0.22), transparent 60%);
	pointer-events: none;
}
.mkn-cohort__inner {
	position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center;
	display: flex; flex-direction: column; align-items: center;
}
.mkn-cohort__head { max-width: 720px; }
.mkn-cohort__h2 { color: #fff; }
.mkn-cohort-n {
	font-family: var(--mkn-font-display); font-weight: 700;
	color: transparent; background: var(--mkn-gold-gradient);
	-webkit-background-clip: text; background-clip: text;
	padding: 0 0.06em;
}
.mkn-cohort__sub { color: rgba(255,255,255,0.82); font-size: 1.08rem; line-height: 1.7; margin: 14px 0 0; }
.mkn-cohort__benefits {
	list-style: none; margin: clamp(36px,5vw,52px) 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 18px 34px; text-align: left; width: 100%; max-width: 680px;
}
@media (min-width: 720px) { .mkn-cohort__benefits { grid-template-columns: 1fr 1fr; } }
.mkn-cohort__benefits li { display: flex; align-items: flex-start; gap: 14px; font-size: 1.04rem; line-height: 1.5; color: #fff; }
.mkn-cohort__bullet { flex: 0 0 auto; width: 30px; height: 30px; color: var(--mkn-gold); margin-top: 1px; }
.mkn-cohort__bullet svg { width: 100%; height: 100%; }
.mkn-cohort__bullet svg text { display: none; } /* just the crown mark at bullet size */
.mkn-cohort__cta { margin-top: clamp(40px, 5vw, 56px); }

/* =========================================================================
   ⑦ APPLICATION BAND
   ========================================================================= */
.mkn-apply {
	position: relative; overflow: hidden; color: #fff;
	padding: clamp(96px, 12vw, 170px) clamp(24px, 6vw, 96px);
	background-image: var(--mkn-apply-bg); background-size: cover; background-position: center 30%;
}
.mkn-apply__overlay {
	position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(90deg, rgba(24,15,48,0.94) 0%, rgba(24,15,48,0.78) 50%, rgba(24,15,48,0.62) 100%);
}
.mkn-apply__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.mkn-apply__h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.mkn-apply__sub { color: rgba(255,255,255,0.85); font-size: 1.12rem; line-height: 1.7; margin: 18px 0 38px; }

/* =========================================================================
   ⑧ FOOTER
   ========================================================================= */
.mkn-foot {
	position: relative; overflow: hidden; background: var(--mkn-darkest); color: var(--mkn-bg);
	padding: clamp(64px, 8vw, 104px) clamp(24px, 6vw, 96px) 0;
}
.mkn-foot__watermark {
	position: absolute; right: -2%; bottom: -16%;
	font-family: var(--mkn-font-display); font-weight: 700;
	font-size: clamp(150px, 30vw, 420px); line-height: 0.8;
	color: var(--mkn-lavender); opacity: 0.04; pointer-events: none; user-select: none;
	letter-spacing: -0.04em;
}
.mkn-foot__inner {
	position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
	display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 90px); justify-content: space-between;
	padding-bottom: clamp(44px, 6vw, 68px);
}
.mkn-foot__brand { max-width: 340px; }
/* v1.76.0: Edward's batch-1 footer-logo enlargement (118px / 96px mobile)
   re-targeted to THIS footer — the v1.65.0 rule hit .mkn-footer__logo (the
   legacy footer no public page renders) and never took visual effect. */
.mkn-foot__logo { width: 118px; height: auto; margin-bottom: 18px; }
@media (max-width: 640px) { .mkn-foot__logo { width: 96px; } }
.mkn-foot__stmt { font-size: 0.98rem; line-height: 1.6; color: var(--mkn-lavender); opacity: 0.85; margin: 0; }
.mkn-foot__cols { display: flex; gap: clamp(44px, 6vw, 92px); flex-wrap: wrap; }
.mkn-foot__h { font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mkn-lavender); margin: 0 0 16px; }
.mkn-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mkn-foot__col a { color: var(--mkn-bg); opacity: 0.82; font-size: 0.96rem; transition: opacity 200ms, color 200ms; }
.mkn-foot__col a:hover { opacity: 1; color: var(--mkn-lavender); }
.mkn-foot__baseline {
	position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
	padding: 22px 0 30px; border-top: 1px solid rgba(195,168,245,0.14);
	font-size: 0.82rem; color: rgba(250,248,253,0.55);
	/* Polish v1.22.0: flex row so the credit and the legal links no longer butt
	   together ("… Valtech Works Política de Privacidad"). Credit left, legal
	   right on wide screens; both wrap cleanly and stack on narrow. */
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 8px 22px;
}
.mkn-foot__credit .sep { opacity: 0.4; margin: 0 0.15em; }
@media (max-width: 700px) { .mkn-foot__inner { flex-direction: column; } }

/* =========================================================================
   ELEVATION — signature motion + material finish
   ========================================================================= */

/* ---- Hero entrance choreography (driven by html.mkn-js + body.mkn-loaded) - */
html.mkn-js .mkn-fx { opacity: 0; transition: opacity 700ms ease-out, transform 700ms ease-out; }
html.mkn-js .mkn-fx--up { transform: translateY(26px); }
html.mkn-js body.mkn-loaded .mkn-fx { opacity: 1; transform: none; }
html.mkn-js body.mkn-loaded .mkn-hero__kicker.mkn-fx { transition-delay: 60ms; }
html.mkn-js body.mkn-loaded .mkn-hero__sub.mkn-fx { transition-delay: 640ms; }
html.mkn-js body.mkn-loaded .mkn-fx--late { transition-delay: 780ms; }
html.mkn-js body.mkn-loaded .mkn-fx--last { transition-delay: 1200ms; }
/* H1 lines rise from behind an overflow mask */
.mkn-line { display: block; overflow: hidden; }
.mkn-line__in { display: block; }
html.mkn-js .mkn-line__in {
	transform: translateY(110%);
	transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
}
html.mkn-js body.mkn-loaded .mkn-line__in { transform: translateY(0); }
html.mkn-js body.mkn-loaded .mkn-line:nth-child(1) .mkn-line__in { transition-delay: 220ms; }
html.mkn-js body.mkn-loaded .mkn-line:nth-child(2) .mkn-line__in { transition-delay: 310ms; }

/* ---- Gold sheen sweep on gold CTAs -------------------------------------- */
.mkn-btn--gold { position: relative; overflow: hidden; }
.mkn-btn--gold::after {
	content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%;
	background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
	transform: translateX(-140%) skewX(-18deg);
	transition: transform 700ms var(--mkn-ease);
	pointer-events: none;
}
.mkn-btn--gold:hover::after { transform: translateX(340%) skewX(-18deg); }

/* ---- Film grain (SVG noise, ~3% — hero + dark bands) --------------------- */
.mkn-grain { position: relative; }
.mkn-grain::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	opacity: 0.035;
	mix-blend-mode: overlay;
}

/* ---- Gentle hero parallax (JS sets --mkn-par in px; transform-only) ------ */
.mkn-hero__bg { will-change: transform; transform: translateY(calc(var(--mkn-par, 0) * 1px)); }

/* ---- Roadmap signature moment ------------------------------------------- */
.mkn-roadmap__ico {
	display: block; width: 26px; height: 26px; margin-bottom: 2px;
	color: var(--mkn-lavender);
}
.mkn-roadmap__node.is-active .mkn-roadmap__ico { color: var(--mkn-gold-hi); }
.mkn-roadmap__ico svg { width: 100%; height: 100%; display: block; }
.mkn-roadmap__ico svg path,
.mkn-roadmap__ico svg rect,
.mkn-roadmap__ico svg circle {
	stroke-dasharray: 40; stroke-dashoffset: 40;
	transition: stroke-dashoffset 900ms var(--mkn-ease);
}
/* armed = JS present: nodes wait dim until the line reaches them */
.mkn-roadmap.is-armed .mkn-roadmap__node { opacity: 0.3; transition: opacity 500ms ease-out; }
.mkn-roadmap.is-armed .mkn-roadmap__node.is-lit { opacity: 1; }
.mkn-roadmap.is-armed .mkn-roadmap__node.is-lit .mkn-roadmap__ico svg path,
.mkn-roadmap.is-armed .mkn-roadmap__node.is-lit .mkn-roadmap__ico svg rect,
.mkn-roadmap.is-armed .mkn-roadmap__node.is-lit .mkn-roadmap__ico svg circle,
.mkn-roadmap:not(.is-armed) .mkn-roadmap__ico svg path,
.mkn-roadmap:not(.is-armed) .mkn-roadmap__ico svg rect,
.mkn-roadmap:not(.is-armed) .mkn-roadmap__ico svg circle { stroke-dashoffset: 0; }
/* soft gold pulse on the active dot (transform/opacity only) */
.mkn-roadmap__dot { position: relative; }
.mkn-roadmap__node.is-active .mkn-roadmap__dot::after {
	content: ""; position: absolute; inset: -9px; border-radius: 50%;
	background: radial-gradient(circle, rgba(230,201,106,0.45) 0%, transparent 70%);
	animation: mkn-pulse 2.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mkn-pulse {
	0%, 100% { transform: scale(0.8); opacity: 0.45; }
	50%      { transform: scale(1.18); opacity: 0.9; }
}

/* ---- Step cards: icons, gradient numerals, gold hover glow ---------------- */
.mkn-how__ico {
	display: block; width: 40px; height: 40px; margin-bottom: 16px;
	color: var(--mkn-lavender);
	transition: color 400ms var(--mkn-ease);
}
.mkn-how__ico svg { width: 100%; height: 100%; display: block; }
.mkn-how__ico svg path, .mkn-how__ico svg rect {
	stroke-dasharray: 40; stroke-dashoffset: 40;
	transition: stroke-dashoffset 1100ms var(--mkn-ease) 200ms;
}
.mkn-how__card.is-visible .mkn-how__ico svg path,
.mkn-how__card.is-visible .mkn-how__ico svg rect { stroke-dashoffset: 0; }
.mkn-how__card:hover .mkn-how__ico { color: var(--mkn-gold-hi); }
.mkn-how__card:hover {
	box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.4), 0 18px 50px rgba(24, 15, 48, 0.45);
}
.mkn-how__num {
	-webkit-text-stroke: 0;
	background: linear-gradient(135deg, var(--mkn-lavender) 0%, rgba(250,248,253,0.9) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
.mkn-how__num--gold { background: var(--mkn-gold-gradient); -webkit-background-clip: text; background-clip: text; }
/* seal card keeps room for its top-right seal */
.mkn-how__card--seal { padding-top: 44px; }

/* ---- Gold-foil shimmer (slow; luxury is restraint) ------------------------ */
@keyframes mkn-foil { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.mkn-cohort-n,
.mkn-how__num--gold {
	background-image: linear-gradient(110deg,
		var(--mkn-gold-lo) 0%, var(--mkn-gold-hi) 25%, var(--mkn-gold) 50%, var(--mkn-gold-hi) 75%, var(--mkn-gold-lo) 100%);
	background-size: 200% auto;
	animation: mkn-foil 8s linear infinite;
}
.mkn-founder__badge {
	background-image: linear-gradient(110deg,
		var(--mkn-gold-lo) 0%, var(--mkn-gold-hi) 25%, var(--mkn-gold) 50%, var(--mkn-gold-hi) 75%, var(--mkn-gold-lo) 100%);
	background-size: 200% auto;
	animation: mkn-foil 8s linear infinite;
}
.mkn-credo .mkn-hairline {
	background-image: linear-gradient(110deg,
		var(--mkn-gold-lo) 0%, var(--mkn-gold-hi) 25%, var(--mkn-gold) 50%, var(--mkn-gold-hi) 75%, var(--mkn-gold-lo) 100%);
	background-size: 200% auto;
	animation: mkn-foil 8s linear infinite;
}
/* seal strokes: whisper of life via slow opacity breathing */
@keyframes mkn-breathe { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }
.mkn-how__seal, .mkn-cohort__bullet { animation: mkn-breathe 8s ease-in-out infinite; }

/* ---- Credo: skyline beneath a heavy overlay + rules drawing outward ------- */
.mkn-credo { overflow: hidden; }
.mkn-credo__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center 30%;
	opacity: 0.28;
}
.mkn-credo::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(24,15,48,0.72) 0%, rgba(24,15,48,0.5) 55%, rgba(24,15,48,0.82) 100%);
}
.mkn-credo .mkn-hairline, .mkn-credo__line { position: relative; z-index: 2; }
.mkn-credo__rule.mkn-reveal {
	opacity: 1; transform: scaleX(0); transform-origin: center;
	transition: transform 1200ms var(--mkn-ease) 150ms;
}
.mkn-credo__rule.mkn-reveal.is-visible { transform: scaleX(1); }

/* ---- Cathedral-arch section dividers --------------------------------------
   iter8 (v1.30.0): the original 72×42 tile drew a circular arc whose crown
   (radius 36 over a 72 chord ⇒ apex at y=-10) was CLIPPED above the tile —
   what rendered was stems + arc shoulders, reading as a fence of "Y" posts,
   not an arcade. New 48×42 tile keeps the full semicircle inside the box
   (radius 24, apex y=2) so the motif finally reads as the Romanesque arcade
   used across the site. Seam grammar (applied page-long): the arcade marks
   (1) every dark↔light register change and (2) the two sacred entries
   (Declaración de Fe band, La Visión); all other seams are deliberate hard
   cuts. */
.mkn-arches {
	position: absolute; top: 0; left: 0; right: 0; height: 42px; z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='42' viewBox='0 0 48 42'%3E%3Cpath d='M0 42 V26 A24 24 0 0 1 48 26 V42' fill='none' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 48px 42px;
	pointer-events: none;
}
.mkn-arches--on-light { opacity: 0.10; filter: invert(0.82) sepia(0.2) saturate(4) hue-rotate(230deg); }
.mkn-arches--on-dark { opacity: 0.08; }
.mkn-founders { position: relative; }

/* Polish v1.22.0: interior hero → body divider. Sits at the BOTTOM edge of the
   (dark) interior hero as a subtle white cathedral arcade, completing the
   homepage-level arch motif on the section, SoF, plans (+ blog) pages. The hero
   is position:relative; overflow:hidden, so this clips cleanly. Purely
   decorative + static (reduced-motion irrelevant). */
.mkn-arches--divider { top: auto; bottom: 0; opacity: 0.13; }

/* =========================================================================
   Reduced motion — static but fully visible
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.mkn-hero__img { animation: none; }
	.mkn-hero__cue-arrow { animation: none; }
	.mkn-vision { background-attachment: scroll; }
	.mkn-how__seal svg [stroke],
	.mkn-how__seal svg circle,
	.mkn-how__seal svg path,
	.mkn-how__seal svg line { stroke-dashoffset: 0; transition: none; }
	.mkn-how__seal svg text { opacity: 1; }
	/* elevation: everything visible, nothing moves */
	html.mkn-js .mkn-fx, html.mkn-js body.mkn-loaded .mkn-fx { opacity: 1; transform: none; transition: none; }
	html.mkn-js .mkn-line__in { transform: none; transition: none; }
	.mkn-hero__bg { transform: none !important; }
	.mkn-roadmap__line path { stroke-dashoffset: 0; transition: none; }
	.mkn-roadmap.is-armed .mkn-roadmap__node { opacity: 1; }
	.mkn-roadmap__ico svg path, .mkn-roadmap__ico svg rect, .mkn-roadmap__ico svg circle { stroke-dashoffset: 0 !important; transition: none; }
	.mkn-how__ico svg path, .mkn-how__ico svg rect { stroke-dashoffset: 0 !important; transition: none; }
	.mkn-roadmap__node.is-active .mkn-roadmap__dot::after { animation: none; opacity: 0.5; transform: none; }
	.mkn-cohort-n, .mkn-how__num--gold, .mkn-founder__badge, .mkn-credo .mkn-hairline { animation: none; }
	.mkn-how__seal, .mkn-cohort__bullet { animation: none; }
	.mkn-btn--gold::after { display: none; }
	.mkn-credo__rule.mkn-reveal { transform: scaleX(1); transition: none; }
}
/* Mobile: no fixed-attachment (iOS jank) */
@media (max-width: 960px) {
	.mkn-vision { background-attachment: scroll; }
}

/* SoF gate condition link inside a section-head sub (home §③ 'Cómo funciona'). */
.mkn-sec-head__sublink {
	color: var(--mkn-accent-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--mkn-gold);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color 200ms var(--mkn-ease);
}
.mkn-sec-head__sublink:hover { color: var(--mkn-primary); }


/* =========================================================================
   Horizontal roadmap scroller affordance (mobile audit item #6): a right-edge
   fade over the scroll container + a one-line "swipe" hint. Both appear only
   where the scroller actually overflows (≤960px); wow.js fades the hint after
   the first real swipe and lifts the mask at scroll end.
   ========================================================================= */
.mkn-roadmap__hint { display: none; }
@media (max-width: 960px) {
	.mkn-roadmap:not(.mkn-roadmap--vertical) {
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), rgba(0,0,0,0.06) 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), rgba(0,0,0,0.06) 100%);
	}
	.mkn-roadmap:not(.mkn-roadmap--vertical).is-at-end {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.mkn-roadmap__hint {
		display: flex; align-items: center; justify-content: flex-end; gap: 6px;
		margin: 10px 4px 0 0;
		font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
		color: var(--mkn-muted-text, #726b87); opacity: 0.9;
		transition: opacity 500ms var(--mkn-ease, ease);
	}
	.mkn-roadmap__hint.is-done { opacity: 0; }
	.mkn-roadmap__hint-arrow { animation: mkn-hint-nudge 1.8s ease-in-out infinite; }
	@keyframes mkn-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
	@media (prefers-reduced-motion: reduce) { .mkn-roadmap__hint-arrow { animation: none; } }
}

/* =========================================================================
   Polish v1.21.0 — PRINT STYLESHEET
   For members of a faith community who print the Declaración de Fe / policies.
   Strips site chrome + decoration, flattens dark bands to paper, preserves
   every word of doctrine (incl. the congregation-membership requirement) and
   legal copy. Keeps card groups from splitting across pages.
   ========================================================================= */
@media print {
	/* Hide interactive chrome + decoration that means nothing on paper */
	header.mkn-nav, #mkn-nav, .mkn-nav__drawer,
	footer.mkn-foot,
	.mkn-softcta, .mkn-secform, .mkn-secempty__actions, .mkn-secempty .mkn-btn,
	.mkn-plans__founders-wrap, .mkn-plans__close-p, .mkn-scrollcue,
	.mkn-btn, .mkn-grain,
	.mkn-secarch__ghost, .mkn-sof__seal, .mkn-legal__seal, .mkn-plans__herobg,
	.mkn-sof__cong-seal, .mkn-pagehero__overlay, .mkn-pagehero__seal, .mkn-profilehero__seal {
		display: none !important;
	}

	html, body, main, .mkn-page { background: #fff !important; color: #1a1030 !important; }
	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; text-shadow: none !important; }

	/* Heroes + dark closing bands become paper with ink text */
	.mkn-pagehero, .mkn-pagehero--plain, .mkn-sof__close, .mkn-plans__close, .mkn-plans__honest {
		background: #fff !important; color: #1a1030 !important;
		padding: 8px 0 16px !important; border-bottom: 1px solid #d8cff0 !important;
	}
	.mkn-pagehero__title, .mkn-pagehero__sub, .mkn-hero__kicker,
	.mkn-sof__close-t, .mkn-sof__cong-t, .mkn-sof__cong-p, .mkn-sof__note,
	.mkn-plans__honest-t, .mkn-plans__honest-p, .mkn-plans__close-p { color: #1a1030 !important; }
	.mkn-hero__kicker { color: #6b4fb0 !important; }

	/* The congregation-membership requirement is doctrine — keep it, flatten it */
	.mkn-sof__cong { background: #fff !important; border: 1px solid #c9a227 !important; color: #1a1030 !important; }

	/* Keep belief articles, legal sections and pricing rows whole on the page */
	.mkn-sof__article, .mkn-legal__section, .mkn-plans__card { break-inside: avoid; page-break-inside: avoid; }
	.mkn-sof__art-title, .mkn-legal__h { page-break-after: avoid; }

	a { color: #1a1030 !important; text-decoration: underline; }
	@page { margin: 18mm 16mm; }
}

/* =========================================================================
   ①b DECLARACIÓN DE FE — homepage centerpiece (iter7; Edward's emotional
   core). Second act after the hero: kicker + opening confession large and
   central over the watermark seal, three gold-ruled glass stanzas
   (Escrituras / Hijo / Espíritu), the covenant gate line, dual CTA row.
   Deep-navy cathedral register within the locked palette; typography + the
   existing inline seal only. Cathedral arches top and bottom.
   ========================================================================= */
.mkn-sofband {
	position: relative;
	/* Anchor navigation (#declaracion-de-fe) must clear the fixed header. */
	scroll-margin-top: 84px;
	min-height: 78vh;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(1100px 520px at 50% -120px, #3b2a66 0%, rgba(59, 42, 102, 0) 72%),
		linear-gradient(175deg, var(--mkn-darkest) 0%, var(--mkn-primary) 88%, #241540 100%);
	color: #fff;
	text-align: center;
	padding: clamp(72px, 9vw, 108px) clamp(28px, 6vw, 96px) clamp(80px, 10vw, 118px);
	overflow: hidden;
}
/* Watermark seal — same quiet motif as the Declaración page hero. */
.mkn-sofband__seal {
	position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
	opacity: 0.05; pointer-events: none;
}
.mkn-sofband__seal svg { width: min(560px, 92vw); height: auto; color: var(--mkn-lavender); }
.mkn-sofband__inner {
	position: relative; z-index: 2;
	max-width: 1080px; margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(16px, 2.2vw, 24px);
}
.mkn-sofband__rule { width: min(140px, 40vw); }
.mkn-sofband__kicker { margin: 0; }
.mkn-sofband__line {
	font-family: var(--mkn-font-display);
	font-style: italic; font-weight: 600;
	font-size: clamp(1.7rem, 3.8vw, 2.9rem);
	line-height: 1.24; letter-spacing: -0.01em;
	color: #fff; max-width: 24ch;
	margin: 0; padding: 0; border: 0;
	text-shadow: 0 3px 34px rgba(0, 0, 0, 0.38);
}
/* Three gold-ruled stanzas — the staged sequence. */
.mkn-sofband__stanzas {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 2vw, 24px);
	width: 100%; margin-top: clamp(6px, 1.4vw, 14px);
}
.mkn-sofband__stanza {
	position: relative;
	padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 30px) clamp(24px, 2.8vw, 36px);
	text-align: center;
}
.mkn-sofband__stanza::before {
	content: ""; position: absolute; top: 0; left: 50%;
	transform: translateX(-50%);
	width: 64px; height: 2px;
	background: var(--mkn-gold-gradient);
	border-radius: 0 0 2px 2px;
}
.mkn-sofband__stanza-k {
	margin: 0 0 12px;
	color: var(--mkn-gold-hi);
	font-size: 0.72rem; letter-spacing: 0.26em;
}
.mkn-sofband__stanza-p {
	font-family: var(--mkn-font-display);
	font-style: italic; font-weight: 500;
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.94);
	margin: 0;
}
/* Covenant framing: the gate line + dual CTA row. */
.mkn-sofband__gate {
	font-family: var(--mkn-font-body); font-weight: 600;
	font-size: clamp(1rem, 1.4vw, 1.16rem);
	line-height: 1.6; color: var(--mkn-lavender);
	letter-spacing: 0.01em;
	margin: clamp(4px, 1vw, 10px) 0 0;
}
.mkn-sofband__ctas {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 16px; margin-top: 2px;
}
/* Cathedral arches: top motif + bottom-edge divider (shared utilities). */
.mkn-sofband .mkn-arches--divider { z-index: 1; }
/* Mobile: the sequence stacks with dignity — generous insets, no cramping. */
@media (max-width: 900px) {
	.mkn-sofband__stanzas { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 600px) {
	.mkn-sofband { padding: 64px 28px 76px; min-height: 0; }
	.mkn-sofband__inner { gap: 18px; }
	.mkn-sofband__line { font-size: 1.6rem; }
	.mkn-sofband__stanza { padding: 22px 20px 24px; }
	.mkn-sofband__gate { font-size: 0.98rem; }
	.mkn-sofband__ctas { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   iter8 (v1.30.0) — FLAGSHIP ART-DIRECTION PASS
   Reveal choreography, stagger, and micro-delight. All CSS-only: transforms/
   opacity, zero new requests, reduced-motion + no-JS safe.
   ========================================================================= */

/* ---- Reveal upgrade (WOW pages): tokens.css ships a generic 300ms ease-out
   pop. At the flagship bar the entrance should settle, not snap — longer
   travel on the signature easing. Scoped to body.mkn-wow so non-WOW pages
   keep the tokens default. */
body.mkn-wow .mkn-reveal {
	transform: translateY(28px);
	transition: opacity 650ms var(--mkn-ease), transform 650ms var(--mkn-ease);
}
body.mkn-wow .mkn-reveal.is-visible { transform: translateY(0); }

/* No-JS: nothing may hide behind a reveal that will never fire. (wow.js adds
   .is-visible; without JS the tokens.css base opacity:0 would blank the page.) */
html:not(.mkn-js) .mkn-reveal { opacity: 1; transform: none; }

/* ---- Stagger: children of a grid arrive as a sequence, not a block. The
   IntersectionObserver fires per element almost simultaneously when a row
   scrolls in; per-child transition-delay turns that into choreography. */
.mkn-sofband__stanza:nth-child(2) { transition-delay: 130ms; }
.mkn-sofband__stanza:nth-child(3) { transition-delay: 260ms; }
.mkn-how__card:nth-child(2)       { transition-delay: 130ms; }
.mkn-how__card:nth-child(3)       { transition-delay: 260ms; }
.mkn-founders__grid .mkn-founder:nth-child(2) { transition-delay: 150ms; }

/* ---- SoF stanza gold rules draw outward on reveal — the same hand as the
   credo hairlines and the roadmap line. */
.mkn-sofband__stanza.mkn-reveal::before {
	transform: translateX(-50%) scaleX(0);
	transition: transform 900ms var(--mkn-ease) 350ms;
}
.mkn-sofband__stanza.mkn-reveal.is-visible::before { transform: translateX(-50%) scaleX(1); }

/* ---- Cohort benefits: the four seals light in sequence (JS-gated so no-JS
   renders them plainly visible). */
html.mkn-js .mkn-cohort__benefits.mkn-reveal li {
	opacity: 0; transform: translateY(14px);
	transition: opacity 550ms var(--mkn-ease), transform 550ms var(--mkn-ease);
}
html.mkn-js .mkn-cohort__benefits.mkn-reveal.is-visible li { opacity: 1; transform: none; }
html.mkn-js .mkn-cohort__benefits.mkn-reveal.is-visible li:nth-child(2) { transition-delay: 110ms; }
html.mkn-js .mkn-cohort__benefits.mkn-reveal.is-visible li:nth-child(3) { transition-delay: 220ms; }
html.mkn-js .mkn-cohort__benefits.mkn-reveal.is-visible li:nth-child(4) { transition-delay: 330ms; }

/* ---- Keep a number and its noun on one line (cohort h2 "50 lugares"). */
.mkn-nowrap { white-space: nowrap; }

/* ---- Reduced motion: every iter8 entrance renders static + fully visible. */
@media (prefers-reduced-motion: reduce) {
	body.mkn-wow .mkn-reveal { opacity: 1; transform: none; transition: none; }
	.mkn-sofband__stanza.mkn-reveal::before,
	.mkn-sofband__stanza.mkn-reveal.is-visible::before {
		transform: translateX(-50%) scaleX(1); transition: none;
	}
	html.mkn-js .mkn-cohort__benefits.mkn-reveal li,
	html.mkn-js .mkn-cohort__benefits.mkn-reveal.is-visible li {
		opacity: 1; transform: none; transition: none;
	}
	.mkn-founder__open-plus,
	.mkn-founder--open:hover .mkn-founder__open-plus { transition: none; transform: none; }
}

/* v1.34.0 (Edward fb 2026-07-11): MKN logo watermark replaces the crown seal on the
   purple SoF centerpiece heading. Asset-neutral (reuses the loaded nav/footer logo). */
.mkn-sofband__seal img { width: min(560px, 92vw); height: auto; display: block; }

/* =========================================================================
   Reveal fallback (v1.40.0) — wow.js-failure / prerender safety net.
   The head failsafe adds html.mkn-reveal-fallback at window 'load' ONLY when
   body.mkn-loaded was never set (wow.js never ran, or rAF was paused in a
   hidden/prerender tab). Snap every revealed element to the same static
   visible end-state as prefers-reduced-motion, with transitions OFF so a
   paused compositor can't strand content mid-fade. Scoped to the fallback
   class, so the normal choreography is untouched.
   ========================================================================= */
html.mkn-reveal-fallback .mkn-fx,
html.mkn-reveal-fallback .mkn-line__in { opacity: 1 !important; transform: none !important; transition: none !important; }
html.mkn-reveal-fallback .mkn-reveal,
html.mkn-reveal-fallback .mkn-cohort__benefits.mkn-reveal li { opacity: 1 !important; transform: none !important; transition: none !important; }
html.mkn-reveal-fallback .mkn-credo__rule.mkn-reveal { transform: scaleX(1) !important; transition: none !important; }
html.mkn-reveal-fallback .mkn-sofband__stanza.mkn-reveal::before { transform: translateX(-50%) scaleX(1) !important; transition: none !important; }
html.mkn-reveal-fallback .mkn-roadmap__line path { stroke-dashoffset: 0 !important; transition: none !important; }
html.mkn-reveal-fallback .mkn-roadmap__node { opacity: 1 !important; }
html.mkn-reveal-fallback .mkn-roadmap__ico svg path,
html.mkn-reveal-fallback .mkn-roadmap__ico svg rect,
html.mkn-reveal-fallback .mkn-roadmap__ico svg circle { stroke-dashoffset: 0 !important; }
html.mkn-reveal-fallback .mkn-how__ico svg path,
html.mkn-reveal-fallback .mkn-how__ico svg rect { stroke-dashoffset: 0 !important; }
html.mkn-reveal-fallback .mkn-how__seal svg [stroke],
html.mkn-reveal-fallback .mkn-how__seal svg circle,
html.mkn-reveal-fallback .mkn-how__seal svg path,
html.mkn-reveal-fallback .mkn-how__seal svg line { stroke-dashoffset: 0 !important; }
html.mkn-reveal-fallback .mkn-how__seal svg text { opacity: 1 !important; }

/* ============================================================================
   MOBILE SWEEP 2026-07-13 (v1.47.0) — short-viewport / landscape hero fix.
   The home hero centres its content in 100vh (align-items:center). On short
   viewports (landscape phones ~390px tall) the content is taller than the
   viewport, so the vertically-centred block rises over the fixed header and
   the H1 collides with the logo. On short viewports, flow the hero from below
   the header instead of centring it; the page scrolls normally.
   ========================================================================== */
@media (max-height: 520px) {
	.mkn-hero {
		min-height: auto;
		align-items: flex-start;
		padding-top: 120px;
		padding-bottom: 48px;
	}
	.mkn-hero__cue { display: none; }
}

/* v1.65.0 (Edward): footer logo enlarged -- was the 72px header-size lockup. */
.mkn-footer__logo { width: 118px; height: auto; }
@media (max-width: 640px) { .mkn-footer__logo { width: 96px; } }