/* Monkufy · Creator Cloud — web pública.
   Diseño claro derivado de la landing de Kamvas (del mismo autor): papel blanco, tinta casi negra,
   titulares Satoshi grandes con tracking ajustado, navegación que se recoge en una píldora de cristal,
   secciones fijas, medios a sangre y animaciones de aparición con IntersectionObserver. */

@font-face { font-family: Satoshi; src: url(../fonts/Satoshi-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Satoshi; src: url(../fonts/Satoshi-Medium.otf) format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Satoshi; src: url(../fonts/Satoshi-Bold.otf) format("opentype"); font-weight: 700; font-display: swap; }

:root {
	--mk-paper: #ffffff;
	--mk-ink: #0e0e0e;
	--mk-gray: #6e6e73;
	--mk-gray-2: #86868b;
	--mk-soft: #f5f5f7;
	--mk-soft-2: #ececee;
	--mk-line: rgba(0, 0, 0, .08);
	--mk-photo: #2f80ff;
	--mk-vector: #ff8a00;
	--mk-effects: #8e5cff;
	--mk-hub: #5e5ce6;
	--mk-accent: var(--mk-ink);
	--mk-ok: #1f9d55;
	--mk-warn: #b7791f;
	--mk-bad: #d93025;
	--mk-ease: cubic-bezier(.22, .9, .24, 1);
	--mk-ease-soft: cubic-bezier(.25, .1, .25, 1);
	--mk-radius: 22px;
	--mk-radius-sm: 14px;
	--mk-pill: 980px;
	--mk-font: Satoshi, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
	--mk-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* Base (solo en páginas de Monkufy o dentro de componentes) */
body.mk-site { margin: 0; background: var(--mk-paper); color: var(--mk-ink); font-family: var(--mk-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
.mk-site *, .mk-site *::before, .mk-site *::after, [class^="mk-"], [class^="mk-"] * { box-sizing: border-box; }
[class^="mk-"], [class*=" mk-"] { font-family: var(--mk-font); }
.mk-site a { color: inherit; text-decoration: none; }
.mk-site img, .mk-site video, .mk-site canvas { display: block; max-width: 100%; }
.mk-main { min-height: 60vh; }
.mk-wrap { width: min(1200px, 100% - 40px); margin: 0 auto; }
.mk-narrow { width: min(980px, 100% - 40px); margin: 0 auto; }
.mk-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tipografía */
.mk-eyebrow { font-size: 21px; font-weight: 500; color: var(--mk-gray); letter-spacing: -.005em; margin: 0; }
.mk-h1 { font-size: clamp(40px, 6.4vw, 88px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.mk-h2 { font-size: clamp(40px, 6.6vw, 92px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
.mk-h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.mk-eyebrow + .mk-h1, .mk-eyebrow + .mk-h2 { margin-top: 8px; }
.mk-lede { margin: 26px auto 0; max-width: 720px; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.42; color: var(--mk-gray); }
.mk-lede b, .mk-lede strong { color: var(--mk-ink); font-weight: 500; }
.mk-fine { font-size: 14px; line-height: 1.65; color: var(--mk-gray); }
.mk-center { text-align: center; }
.mk-head { max-width: 980px; margin: 0 auto; text-align: center; }

/* Botones y enlaces */
.mk-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 17px/1 var(--mk-font); padding: 14px 26px; border-radius: var(--mk-pill); background: var(--mk-ink); color: #fff !important; border: 0; cursor: pointer; transition: transform .25s var(--mk-ease), background .2s, box-shadow .25s; text-decoration: none; }
.mk-button:hover { background: #2a2a2d; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.mk-button:active { transform: scale(.97); }
.mk-button[disabled], .mk-button.is-busy { opacity: .55; cursor: default; pointer-events: none; }
.mk-button--ghost { background: transparent; color: var(--mk-ink) !important; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-button--ghost:hover { background: var(--mk-soft); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.mk-button--small { font-size: 14px; padding: 9px 16px; }
.mk-button--danger { background: var(--mk-bad); }
.mk-link { font-size: 17px; font-weight: 500; color: var(--mk-accent-link, var(--mk-photo)); }
.mk-link::after { content: " ›"; }
.mk-link:hover { text-decoration: underline; }
.mk-actions { margin-top: 32px; display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mk-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .02em; padding: 4px 10px; border-radius: var(--mk-pill); background: var(--mk-soft); color: var(--mk-ink); }
.mk-badge--beta { background: linear-gradient(120deg, rgba(47, 128, 255, .12), rgba(142, 92, 255, .14), rgba(255, 138, 0, .12)); }
.mk-badge--ok { background: rgba(31, 157, 85, .1); color: var(--mk-ok); }
.mk-badge--warn { background: rgba(183, 121, 31, .12); color: var(--mk-warn); }

/* Navegación: transparente arriba, píldora de cristal al bajar */
.mk-nav { position: fixed; z-index: 90; top: var(--mk-bar); left: 50%; transform: translateX(-50%); width: min(1100px, 100vw); height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 22px; border-radius: 0;
	transition: top .5s var(--mk-ease), width .5s var(--mk-ease), height .5s var(--mk-ease), border-radius .5s var(--mk-ease), background .4s, padding .5s var(--mk-ease), box-shadow .4s; }
.mk-nav__brand { display: flex; align-items: center; gap: 10px; color: var(--mk-ink); flex-shrink: 0; }
.mk-nav__brand svg { height: 20px; width: auto; }
.mk-nav__links { display: flex; gap: 30px; font-size: 14px; color: rgba(14, 14, 14, .72); transition: opacity .3s; }
.mk-nav__links a:hover, .mk-nav__links .current-menu-item > a { color: var(--mk-ink); }
.mk-nav__links ul { display: contents; list-style: none; margin: 0; padding: 0; }
.mk-nav__links li { list-style: none; }
.mk-nav__links .sub-menu { display: none; }
.mk-nav__end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mk-nav__cta { font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: var(--mk-pill); background: var(--mk-ink); color: #fff !important; white-space: nowrap; transition: transform .2s var(--mk-ease); }
.mk-nav__cta:active { transform: scale(.96); }
.mk-nav__account { font-size: 13px; color: rgba(14, 14, 14, .72); white-space: nowrap; }
.mk-nav.is-pill { top: calc(var(--mk-bar) + 12px); width: 340px; height: 48px; padding: 0 7px 0 20px; border-radius: var(--mk-pill); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 12px 40px -18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.mk-nav.is-pill .mk-nav__links, .mk-nav.is-pill .mk-nav__account, .mk-nav.is-pill .mk-badge { opacity: 0; pointer-events: none; position: absolute; }
.mk-nav__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--mk-ink); }
.mk-nav__toggle .mk-icon { width: 22px; height: 22px; }
@media (max-width: 860px) {
	.mk-nav__links, .mk-nav__account { display: none; }
	.mk-nav__toggle { display: block; }
	.mk-nav.is-open { height: auto; flex-wrap: wrap; padding-bottom: 16px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
	.mk-nav.is-open .mk-nav__links { display: flex; order: 3; width: 100%; flex-direction: column; gap: 14px; font-size: 17px; padding: 8px 4px; opacity: 1; position: static; pointer-events: auto; }
	.mk-nav.is-open.is-pill { width: calc(100vw - 24px); border-radius: var(--mk-radius); }
}

/* Píldora de secciones: aparece al volver a subir */
.mk-sections { position: fixed; z-index: 89; left: 50%; bottom: 22px; display: flex; gap: 4px; padding: 5px; border-radius: var(--mk-pill); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .06); transform: translate(-50%, 140%); opacity: 0; transition: transform .5s var(--mk-ease), opacity .4s; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.mk-sections.is-visible { transform: translate(-50%, 0); opacity: 1; }
.mk-sections a { font-size: 13px; padding: 8px 16px; border-radius: var(--mk-pill); color: rgba(14, 14, 14, .64); white-space: nowrap; transition: background .3s, color .3s; }
.mk-sections a.is-on { background: var(--mk-ink); color: #fff; }

/* Película de apertura (hero con scroll: secuencia de imágenes, vídeo o imagen) */
.mk-film { position: relative; height: var(--mk-film-height, 300vh); background: var(--mk-paper); }
.mk-film__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.mk-film__media, .mk-film canvas, .mk-film video, .mk-film__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-film__image { will-change: transform; transform-origin: 50% 40%; }
.mk-film__shade { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, var(--mk-paper)); pointer-events: none; }
.mk-film--dark { background: #000; color: #f5f5f7; }
.mk-film--dark .mk-film__shade { background: linear-gradient(transparent, #000); }
.mk-film--dark .mk-lede { color: #a1a1a6; }
.mk-film--dark .mk-button { background: #f5f5f7; color: #000 !important; }
.mk-film__say { position: absolute; left: 0; right: 0; text-align: center; padding: 0 20px; opacity: 0; will-change: opacity, transform; }
.mk-film__say--top { top: 18vh; }
.mk-film__say--center { top: 50%; transform: translateY(-50%); }
.mk-film__say--bottom { bottom: 11vh; }
.mk-film__say .mk-lede { margin-top: 14px; }
.mk-film__placeholder { position: absolute; inset: -20%; background:
	radial-gradient(40% 35% at 30% 40%, rgba(47, 128, 255, .28), transparent 70%),
	radial-gradient(35% 30% at 70% 35%, rgba(142, 92, 255, .26), transparent 70%),
	radial-gradient(38% 34% at 55% 70%, rgba(255, 138, 0, .22), transparent 70%);
	filter: blur(30px); animation: mk-drift 18s var(--mk-ease-soft) infinite alternate; }
.mk-film--dark .mk-film__placeholder { opacity: .9; }
@keyframes mk-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } }
.mk-film__mark { width: min(420px, 70vw); margin: 0 auto 10px; color: currentColor; }
.mk-film__mark svg { width: 100%; height: auto; }

/* Secciones */
.mk-section { padding: 160px 20px 0; }
.mk-section--tight { padding-top: 100px; }
.mk-section:last-child { padding-bottom: 40px; }
.mk-grow { margin: 80px auto 0; width: min(1200px, 100%); border-radius: var(--mk-radius); overflow: hidden; transform-origin: 50% 20%; will-change: transform; background: var(--mk-soft); aspect-ratio: 16 / 9; }
.mk-grow img, .mk-grow video { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder de medios (el propietario los sustituye desde Elementor) */
.mk-placeholder { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 240px; overflow: hidden; background: var(--mk-soft); color: var(--mk-gray); font-size: 14px; text-align: center; }
.mk-placeholder::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(45% 40% at 30% 40%, color-mix(in srgb, var(--mk-accent-color, var(--mk-photo)) 32%, transparent), transparent 70%), radial-gradient(40% 35% at 72% 62%, rgba(142, 92, 255, .2), transparent 70%); filter: blur(24px); animation: mk-drift 16s var(--mk-ease-soft) infinite alternate; }
.mk-placeholder span { position: relative; padding: 8px 14px; border-radius: var(--mk-pill); background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Sección dividida: las palabras quedan fijas mientras avanza el medio */
.mk-split { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.mk-split--reverse { grid-template-columns: 7fr 5fr; }
.mk-split--reverse .mk-split__words { order: 2; }
.mk-split__words { position: sticky; top: calc(30vh + var(--mk-bar)); }
.mk-split__words .mk-h2 { font-size: clamp(38px, 5vw, 64px); }
.mk-split__words .mk-lede { margin-left: 0; }
.mk-split__media { border-radius: var(--mk-radius); overflow: hidden; background: var(--mk-soft); min-height: 420px; }
.mk-split__media img, .mk-split__media video { width: 100%; height: auto; }
.mk-bullets { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 17px; color: var(--mk-gray); }
.mk-bullets li { display: flex; gap: 12px; align-items: baseline; }
.mk-bullets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-accent-color, var(--mk-ink)); transform: translateY(-3px); flex-shrink: 0; }
@media (max-width: 860px) { .mk-split, .mk-split--reverse { grid-template-columns: 1fr; gap: 40px; } .mk-split__words { position: static; order: 0 !important; } }

/* Medio a sangre con texto encima */
.mk-bleed { position: relative; margin-top: 160px; background: var(--mk-soft); }
.mk-bleed__media { width: 100%; height: min(90vh, 56vw); min-height: 420px; object-fit: cover; }
.mk-bleed .mk-placeholder { height: min(90vh, 56vw); min-height: 420px; }
.mk-bleed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--mk-paper), transparent 18%, transparent 72%, var(--mk-paper)), linear-gradient(90deg, rgba(255, 255, 255, .85), transparent 58%); }
.mk-bleed--dark::after { background: linear-gradient(var(--mk-paper), transparent 18%, transparent 72%, var(--mk-paper)), linear-gradient(90deg, rgba(0, 0, 0, .65), transparent 60%); }
.mk-bleed--dark .mk-bleed__over { color: #fff; }
.mk-bleed--dark .mk-bleed__over .mk-lede, .mk-bleed--dark .mk-bleed__over .mk-eyebrow { color: rgba(255, 255, 255, .78); }
.mk-bleed__over { position: absolute; z-index: 1; left: max(20px, calc((100vw - 1100px) / 2)); bottom: 10%; max-width: 560px; }
.mk-bleed__over .mk-h2 { font-size: clamp(40px, 6vw, 80px); }
.mk-bleed__over .mk-lede { margin-left: 0; }

/* Datos en rejilla */
.mk-facts { max-width: 1040px; margin: 90px auto 0; display: grid; grid-template-columns: repeat(var(--mk-cols, 3), 1fr); gap: 64px 48px; }
.mk-facts h3 { font-size: 24px; font-weight: 700; letter-spacing: -.012em; margin: 0; }
.mk-facts p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--mk-gray); }
.mk-facts__icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; background: var(--mk-soft); color: var(--mk-accent-color, var(--mk-ink)); font-weight: 700; }
@media (max-width: 860px) { .mk-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-facts { grid-template-columns: 1fr; } }

/* Tarjetas de apps con acento sutil por app */
.mk-apps { max-width: 1200px; margin: 80px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mk-app { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: 34px; border-radius: 28px; background: color-mix(in srgb, var(--mk-app) 4%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-app) 14%, transparent); overflow: hidden; transition: transform .5s var(--mk-ease), box-shadow .5s var(--mk-ease); isolation: isolate; }
.mk-app::before { content: ""; position: absolute; z-index: -1; inset: auto -30% -40% -30%; height: 70%; background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--mk-app) 26%, transparent), transparent 70%); filter: blur(20px); opacity: .7; transition: opacity .5s, transform .6s var(--mk-ease); }
.mk-app:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-app) 26%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--mk-app) 55%, transparent); }
.mk-app:hover::before { opacity: 1; transform: scale(1.1); }
.mk-app__icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--mk-app) 60%, transparent); }
.mk-app__name { margin: 28px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.mk-app__tagline { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--mk-gray); }
.mk-app__meta { margin-top: auto; padding-top: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mk-gray); }
.mk-app__more { font-size: 15px; font-weight: 500; color: var(--mk-app); }
.mk-app__more::after { content: " ›"; }

/* Precios */
.mk-pricing { max-width: 1240px; margin: 60px auto 0; }
.mk-billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--mk-pill); background: var(--mk-soft); margin: 32px auto 0; }
.mk-billing button { font: 500 14px var(--mk-font); border: 0; background: transparent; padding: 9px 18px; border-radius: var(--mk-pill); cursor: pointer; color: var(--mk-gray); transition: background .3s var(--mk-ease), color .3s; }
.mk-billing button.is-on { background: #fff; color: var(--mk-ink); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .25); }
.mk-plans { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.mk-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); transition: transform .4s var(--mk-ease), box-shadow .4s var(--mk-ease); }
.mk-plan:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 24px 50px -30px rgba(0, 0, 0, .35); }
.mk-plan--recommended { background: var(--mk-ink); color: #fff; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); transform: scale(1.03); }
.mk-plan--recommended:hover { transform: scale(1.03) translateY(-4px); }
.mk-plan--recommended .mk-plan__desc, .mk-plan--recommended .mk-plan__features, .mk-plan--recommended .mk-plan__per { color: rgba(255, 255, 255, .7); }
.mk-plan--recommended .mk-button { background: #fff; color: var(--mk-ink) !important; }
.mk-plan--decoy { opacity: .92; }
.mk-plan__badge { position: absolute; top: -12px; left: 24px; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--mk-pill); background: linear-gradient(120deg, var(--mk-photo), var(--mk-effects), var(--mk-vector)); color: #fff; }
.mk-plan__name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.mk-plan__desc { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--mk-gray); min-height: 40px; }
.mk-plan__price { margin-top: 22px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.mk-plan__price [data-period] { transition: opacity .25s; }
.mk-plan__per { margin-top: 6px; font-size: 13px; color: var(--mk-gray); min-height: 18px; }
.mk-plan__features { margin: 22px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--mk-gray); }
.mk-plan__features li { display: flex; gap: 10px; align-items: flex-start; }
.mk-plan__features .mk-icon { flex-shrink: 0; margin-top: 2px; color: var(--mk-ok); }
.mk-plan--recommended .mk-plan__features .mk-icon { color: #7ee2a8; }
.mk-plan .mk-button { margin-top: auto; width: 100%; }
.mk-beta-note { margin: 28px auto 0; max-width: 640px; text-align: center; font-size: 15px; color: var(--mk-gray); }

/* Descarga del launcher y guía «Abrir igualmente» */
.mk-download { max-width: 980px; margin: 0 auto; text-align: center; }
.mk-download__meta { margin-top: 16px; font-size: 14px; color: var(--mk-gray); }
.mk-guide { margin: 70px auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: mk-step; text-align: left; }
.mk-guide__step { position: relative; padding: 24px; border-radius: 22px; background: var(--mk-soft); opacity: .45; transform: translateY(12px); transition: opacity .6s var(--mk-ease), transform .6s var(--mk-ease), background .6s; }
.mk-guide__step.is-active, .mk-guide.is-static .mk-guide__step { opacity: 1; transform: none; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line), 0 20px 40px -28px rgba(0, 0, 0, .35); }
.mk-guide__step::before { counter-increment: mk-step; content: counter(mk-step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mk-ink); color: #fff; font-size: 14px; font-weight: 700; }
.mk-guide__step h4 { margin: 16px 0 6px; font-size: 17px; font-weight: 700; }
.mk-guide__step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mk-gray); }
.mk-guide__ui { margin-top: 16px; height: 86px; border-radius: 12px; background: var(--mk-soft); position: relative; overflow: hidden; }
.mk-guide__ui i { position: absolute; left: 12px; right: 12px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .08); }
.mk-guide__ui i:nth-child(1) { top: 14px; width: 60%; }
.mk-guide__ui i:nth-child(2) { top: 30px; width: 80%; }
.mk-guide__ui b { position: absolute; right: 12px; bottom: 12px; font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 6px; background: var(--mk-ink); color: #fff; }
@media (max-width: 860px) { .mk-guide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mk-guide { grid-template-columns: 1fr; } }

/* Galería de fuentes */
.mk-fonts { max-width: 1200px; margin: 50px auto 0; }
.mk-fonts__bar { position: sticky; top: calc(var(--mk-bar) + 76px); z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-input, .mk-fonts__bar input[type=search], .mk-fonts__bar input[type=text] { flex: 1 1 200px; font: 16px var(--mk-font); padding: 12px 16px; border: 0; border-radius: 12px; background: var(--mk-soft); color: var(--mk-ink); outline: none; transition: background .2s, box-shadow .2s; }
.mk-input:focus, .mk-fonts__bar input:focus { background: #fff; box-shadow: 0 0 0 2px var(--mk-ink); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { font: 500 13px var(--mk-font); padding: 8px 14px; border-radius: var(--mk-pill); border: 0; background: var(--mk-soft); color: var(--mk-gray); cursor: pointer; transition: background .25s, color .25s, transform .2s var(--mk-ease); }
.mk-chip:active { transform: scale(.95); }
.mk-chip.is-on { background: var(--mk-ink); color: #fff; }
.mk-fonts__size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mk-gray); }
.mk-fonts__size input { accent-color: var(--mk-ink); width: 110px; }
.mk-fonts__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.mk-font { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); transition: box-shadow .3s, transform .4s var(--mk-ease); min-height: 230px; }
.mk-font:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 20px 40px -28px rgba(0, 0, 0, .35); }
.mk-font__head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mk-gray); }
.mk-font__name { color: var(--mk-ink); font-weight: 500; font-size: 15px; }
.mk-font__sample { margin: 22px 0; font-size: var(--mk-sample, 44px); line-height: 1.12; word-break: break-word; overflow-wrap: anywhere; flex: 1; }
.mk-font__foot { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-font__foot .mk-badge { font-size: 11px; }
.mk-fonts__empty, .mk-empty { margin: 60px auto; text-align: center; color: var(--mk-gray); font-size: 17px; }
.mk-fonts__more { display: flex; justify-content: center; margin-top: 30px; }

/* Novedades y FAQ */
.mk-changelog { max-width: 820px; margin: 60px auto 0; display: grid; gap: 18px; }
.mk-release { padding: 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-release__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mk-release__app { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.mk-release__app img { width: 28px; height: 28px; border-radius: 8px; }
.mk-release__date { margin-left: auto; font-size: 13px; color: var(--mk-gray); }
.mk-md { font-size: 16px; line-height: 1.6; color: #3a3a3c; }
.mk-md p, .mk-md ul, .mk-md ol { margin: 12px 0 0; }
.mk-md ul, .mk-md ol { padding-left: 22px; }
.mk-md h3, .mk-md h4 { margin: 18px 0 0; font-size: 17px; color: var(--mk-ink); }
.mk-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--mk-soft); }
.mk-md a { color: var(--mk-photo); text-decoration: underline; }
.mk-faq { max-width: 820px; margin: 60px auto 0; }
.mk-faq details { border-bottom: 1px solid var(--mk-line); }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--mk-gray); transition: transform .35s var(--mk-ease); }
.mk-faq details[open] .mk-faq__icon { transform: rotate(45deg); }
.mk-faq__answer { padding: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--mk-gray); animation: mk-fade .45s var(--mk-ease); }
@keyframes mk-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Avisos */
.mk-notices { max-width: 980px; margin: 0 auto; display: grid; gap: 10px; }
.mk-notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 16px; background: var(--mk-soft); font-size: 15px; line-height: 1.5; }
.mk-notice strong { display: block; }
.mk-notice--warning { background: #fff7e6; }
.mk-notice--critical { background: #fdecea; }
.mk-notice__icon { flex-shrink: 0; font-size: 20px; line-height: 1; color: var(--mk-photo); margin-top: 1px; }
.mk-notice--warning .mk-notice__icon { color: var(--mk-warn); }
.mk-notice--critical .mk-notice__icon { color: var(--mk-bad); }

/* Formularios (acceso, registro, activación, cuenta) */
.mk-auth { width: min(440px, 100% - 40px); margin: 0 auto; padding: calc(var(--mk-bar) + 150px) 0 60px; }
.mk-auth .mk-h3 { text-align: center; }
.mk-auth .mk-lede { text-align: center; font-size: 17px; margin-top: 12px; }
.mk-form { margin-top: 30px; display: grid; gap: 12px; }
.mk-field { display: grid; gap: 6px; }
.mk-field label, .mk-label { font-size: 13px; font-weight: 500; color: var(--mk-gray); }
.mk-field input[type=text], .mk-field input[type=email], .mk-field input[type=password], .mk-field select, .mk-field textarea { width: 100%; font: 17px var(--mk-font); padding: 14px 16px; color: var(--mk-ink); background: var(--mk-soft); border: 0; border-radius: 12px; outline: none; transition: background .2s, box-shadow .2s; }
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus { background: #fff; box-shadow: 0 0 0 2px var(--mk-ink); }
.mk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mk-gray); line-height: 1.45; }
.mk-check input { accent-color: var(--mk-ink); width: 16px; height: 16px; margin-top: 2px; }
.mk-check a { color: var(--mk-ink); text-decoration: underline; }
.mk-form .mk-button { width: 100%; margin-top: 8px; }
.mk-form__alt { margin-top: 18px; text-align: center; font-size: 14px; color: var(--mk-gray); }
.mk-form__alt a { color: var(--mk-ink); font-weight: 500; }
.mk-trap { position: absolute !important; left: -9999px !important; }
.mk-alert { padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; background: var(--mk-soft); }
.mk-alert--error { background: #fdecea; color: #a1231b; }
.mk-alert--ok { background: #e8f6ee; color: #156c3b; }
.mk-code { font: 700 clamp(28px, 7vw, 40px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.mk-device { margin-top: 24px; display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 18px; background: var(--mk-soft); }
.mk-device__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--mk-ink); color: #fff; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.mk-row { display: flex; gap: 10px; }
.mk-row > * { flex: 1; }

/* Mi cuenta */
.mk-account { width: min(1160px, 100% - 40px); margin: 0 auto; padding: calc(var(--mk-bar) + 120px) 0 80px; display: grid; grid-template-columns: 230px 1fr; gap: 48px; }
.mk-account__nav { position: sticky; top: calc(var(--mk-bar) + 90px); align-self: start; display: grid; gap: 2px; }
.mk-account__user { margin-bottom: 18px; }
.mk-account__user strong { display: block; font-size: 17px; }
.mk-account__user span { font-size: 13px; color: var(--mk-gray); }
.mk-account__nav a { padding: 10px 14px; border-radius: 12px; font-size: 15px; color: var(--mk-gray); transition: background .2s, color .2s; }
.mk-account__nav a:hover { background: var(--mk-soft); color: var(--mk-ink); }
.mk-account__nav a.is-on { background: var(--mk-ink); color: #fff; }
.mk-account__body { min-width: 0; }
.mk-account__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 26px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mk-card { padding: 24px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-card + .mk-card { margin-top: 0; }
.mk-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.mk-card p { margin: 0; color: var(--mk-gray); font-size: 15px; line-height: 1.5; }
.mk-card__big { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0; }
.mk-stack { display: grid; gap: 16px; }
.mk-meter { height: 8px; border-radius: 4px; background: var(--mk-soft-2); overflow: hidden; margin-top: 12px; }
.mk-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mk-photo), var(--mk-effects)); transform-origin: left; animation: mk-grow-x 1.1s var(--mk-ease) both; }
@keyframes mk-grow-x { from { transform: scaleX(0); } }
.mk-list { display: grid; }
.mk-list__row { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--mk-line); }
.mk-list__row:last-child { border-bottom: 0; }
.mk-list__main { flex: 1; min-width: 0; }
.mk-list__main strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-list__main span { font-size: 13px; color: var(--mk-gray); }
@media (max-width: 860px) { .mk-account { grid-template-columns: 1fr; gap: 24px; } .mk-account__nav { position: static; display: flex; overflow-x: auto; gap: 6px; } .mk-account__nav a { white-space: nowrap; } .mk-account__user { display: none; } }

/* Explorador de Creator Files */
.mk-files__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mk-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; }
.mk-crumbs button { font: inherit; border: 0; background: none; padding: 4px 6px; border-radius: 8px; cursor: pointer; color: var(--mk-gray); }
.mk-crumbs button:hover { background: var(--mk-soft); color: var(--mk-ink); }
.mk-crumbs button:last-child { color: var(--mk-ink); font-weight: 500; }
.mk-drop { border-radius: 22px; box-shadow: inset 0 0 0 1px var(--mk-line); padding: 6px 20px; transition: box-shadow .2s, background .2s; min-height: 160px; }
.mk-drop.is-over { background: rgba(47, 128, 255, .05); box-shadow: inset 0 0 0 2px var(--mk-photo); }
.mk-file__icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--mk-soft); font-size: 12px; font-weight: 700; color: var(--mk-gray); flex-shrink: 0; text-transform: uppercase; }
.mk-file__icon--folder { background: rgba(47, 128, 255, .12); color: var(--mk-photo); }
.mk-file__icon--photo { background: rgba(47, 128, 255, .12); color: var(--mk-photo); }
.mk-file__icon--vector { background: rgba(255, 138, 0, .14); color: var(--mk-vector); }
.mk-file__icon--effects { background: rgba(142, 92, 255, .14); color: var(--mk-effects); }
.mk-file__name { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.mk-file__actions { display: flex; gap: 6px; opacity: .55; transition: opacity .2s; }
.mk-list__row:hover .mk-file__actions { opacity: 1; }
.mk-icon-btn { border: 0; background: var(--mk-soft); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; color: var(--mk-ink); font-size: 14px; transition: background .2s, transform .2s var(--mk-ease); }
.mk-icon-btn:hover { background: var(--mk-soft-2); }
.mk-icon-btn:active { transform: scale(.92); }
.mk-progress { margin-top: 12px; display: grid; gap: 8px; }
.mk-progress__item { font-size: 13px; color: var(--mk-gray); }
.mk-progress__bar { height: 4px; border-radius: 2px; background: var(--mk-soft-2); overflow: hidden; margin-top: 4px; }
.mk-progress__bar span { display: block; height: 100%; width: 0; background: var(--mk-ink); transition: width .2s; }

/* Pie */
.mk-footer { margin-top: 140px; padding: 60px 20px 50px; background: var(--mk-soft); font-size: 13px; line-height: 1.6; color: var(--mk-gray); }
.mk-footer__inner { max-width: 1100px; margin: 0 auto; }
.mk-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.mk-footer__brand svg { height: 22px; width: auto; color: var(--mk-ink); }
.mk-footer__brand p { margin: 14px 0 0; max-width: 300px; }
.mk-footer h4 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--mk-ink); }
.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-footer a:hover { color: var(--mk-ink); }
.mk-footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--mk-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.mk-signature { display: inline-flex; align-items: center; gap: 12px; color: var(--mk-gray); transition: color .2s; }
.mk-signature:hover { color: var(--mk-ink); }
.mk-signature svg { height: 16px; width: auto; }
.mk-signature svg path { fill: currentColor; }
@media (max-width: 860px) { .mk-footer__top { grid-template-columns: 1fr 1fr; } }

/* App: detalles */
.mk-appdetail { max-width: 1000px; margin: 70px auto 0; display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
.mk-appdetail__side { display: grid; gap: 14px; align-self: start; }
.mk-kv { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mk-line); font-size: 15px; }
.mk-kv span:first-child { color: var(--mk-gray); }
@media (max-width: 860px) { .mk-appdetail { grid-template-columns: 1fr; } }

/* Iconos Phosphor (en línea, currentColor) con microanimaciones sutiles */
.mk-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -.16em; transition: transform .3s var(--mk-ease); }
.mk-button .mk-icon { width: 18px; height: 18px; }
.mk-button:hover .mk-icon, .mk-icon-btn:hover .mk-icon { transform: translateY(-1px) scale(1.06); }
.mk-button--download:hover .mk-icon { transform: translateY(2px); }
.mk-icon-btn .mk-icon { width: 17px; height: 17px; }
.mk-file__icon .mk-icon, .mk-device__icon .mk-icon { width: 20px; height: 20px; }
.mk-device__icon .mk-icon { width: 26px; height: 26px; }
.mk-list__row:hover .mk-file__icon .mk-icon { transform: scale(1.08); }

/* Aparición al hacer scroll */
.mk-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--mk-ease-soft), transform 1.2s var(--mk-ease-soft); }
.mk-reveal.is-in { opacity: 1; transform: none; }
.mk-reveal[data-delay="1"] { transition-delay: .08s; }
.mk-reveal[data-delay="2"] { transition-delay: .16s; }
.mk-reveal[data-delay="3"] { transition-delay: .24s; }
.elementor-editor-active .mk-reveal, .mk-no-js .mk-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mk-reveal { opacity: 1; transform: none; transition: none; }
	.mk-film__placeholder, .mk-placeholder::before, .mk-meter span { animation: none; }
	.mk-nav, .mk-sections, .mk-app, .mk-plan, .mk-font, .mk-guide__step, .mk-icon, .mk-faq__icon { transition: none; }
	.mk-button:hover .mk-icon, .mk-icon-btn:hover .mk-icon, .mk-list__row:hover .mk-file__icon .mk-icon { transform: none; }
	html { scroll-behavior: auto; }
}