/* ═══════════════════════════════════════════════════════════════════════════════════════
   MK NEXT — rediseño «épico» de la web de marketing de My Psico Agenda (2026-09-30)
   Capa que va DESPUÉS de marketing.css en todas las páginas de marketing (no en la agenda).
   Conserva la paleta (violeta #6a4bff · menta #00c2a8 · coral · oro · rosa · cielo) y la
   tipografía (Inter + Space Grotesk). No toca textos: reestiliza los componentes existentes
   (mk-*, aop-*, blog-*, article-*, auth-*) y añade el escenario, las viñetas y el movimiento.
   Todo animado con transform/opacity (GPU) y apagado con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Space Grotesk alojada aquí (variable 300–700, latin + latin-ext, 41 KB): sin depender de Google
   Fonts en las ~280 páginas que no la cargaban y sin conexión a terceros (RGPD). Nombre propio para
   no descargarla dos veces donde también está la de Google. */
@font-face { font-family: "SG Next"; font-style: normal; font-weight: 300 700; font-display: swap;
    src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "SG Next"; font-style: normal; font-weight: 300 700; font-display: swap;
    src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --mk-font-display: "SG Next", "Space Grotesk", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --nx-night: #0d0b1a;
    --nx-night-2: #120e26;
    --nx-night-3: #1a1433;
    --nx-violet: #6a4bff;
    --nx-violet-hi: #8a72ff;
    --nx-violet-lo: #4527c0;
    --nx-mint: #00c2a8;
    --nx-mint-hi: #2ee0c3;
    --nx-coral: #ff7b5c;
    --nx-rose: #ff5f8f;
    --nx-gold: #f5b301;
    --nx-sky: #3aa1ff;
    --nx-grad: linear-gradient(115deg, #8a72ff 0%, #6a4bff 38%, #00c2a8 100%);
    --nx-grad-text: linear-gradient(100deg, #c9bcff 0%, #8a72ff 28%, #2ee0c3 72%, #a8f7ea 100%);
    --nx-grad-text-light: linear-gradient(100deg, #6a4bff 0%, #5838e6 35%, #00a38d 75%, #00c2a8 100%);
    --nx-grad-warm: linear-gradient(115deg, #ff7b5c 0%, #ff5f8f 100%);
    --nx-ease: cubic-bezier(.16, 1, .3, 1);
    --nx-ease-io: cubic-bezier(.65, 0, .35, 1);
    --nx-hh: 84px;                      /* alto reservado para la cabecera flotante */
    --nx-r: 28px;
    --nx-r-lg: 36px;
    --nx-glass: rgba(255, 255, 255, .06);
    --nx-glass-line: rgba(255, 255, 255, .12);
    --nx-maxw: 1240px;
}

/* ─────────────────────────────── BASE ─────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nx-hh) + 16px); }
body.mk {
    font-size: 17px;
    letter-spacing: -0.006em;
    overflow-x: clip;
}
body.mk h1, body.mk h2, body.mk h3, body.mk h4 { letter-spacing: -0.035em; text-wrap: balance; }
body.mk h1 { font-size: clamp(2.55rem, 1.2rem + 5.4vw, 6.1rem); line-height: .98; letter-spacing: -0.045em; }
body.mk h2 { font-size: clamp(2.05rem, 1.1rem + 3.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; }
body.mk h3 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.95rem); line-height: 1.12; }
body.mk h4 { font-size: clamp(1.12rem, 1rem + .45vw, 1.32rem); line-height: 1.2; letter-spacing: -0.02em; }
body.mk p { text-wrap: pretty; }
body.mk .mk-wrap { max-width: var(--nx-maxw); }
body.mk ::selection { background: var(--nx-violet); color: #fff; }

/* Barra de progreso de lectura (arriba del todo) */
.nx-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1002; pointer-events: none;
    background: var(--nx-grad); transform-origin: 0 50%; transform: scaleX(var(--nx-p, 0));
    box-shadow: 0 0 18px rgba(106, 75, 255, .55);
}

/* Grano de película (reutilizable) */
.nx-grain::after, body.mk .mk-hero::after, body.mk .article-hero::after, body.mk .blog-hero::after,
body.mk .mk-footer-rich::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .05;
    width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; filter: none !important; transform: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────── INTRO DE CARGA (una vez por sesión) ───────────────────
   La activa un script mínimo en <head> (clase html.nx-intro) solo en la primera página de la
   sesión, sin bots y sin reduced-motion. Es CSS puro con salida automática: aunque el JS
   fallara, desaparece sola a los ~1,5 s. */
html.nx-intro body.mk::before {
    content: ""; position: fixed; inset: 0; z-index: 3000; pointer-events: none;
    background:
        radial-gradient(40% 50% at 30% 35%, rgba(106, 75, 255, .35), transparent 70%),
        radial-gradient(45% 55% at 72% 70%, rgba(0, 194, 168, .28), transparent 70%),
        var(--nx-night);
    animation: nxCurtain 1.35s var(--nx-ease-io) .15s forwards;
}
html.nx-intro body.mk .nx-intro-mark {
    position: fixed; z-index: 3001; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px;
    pointer-events: none; animation: nxMarkOut .78s linear .1s forwards;
}
.nx-intro-mark { display: none; }
html.nx-intro .nx-intro-mark { display: block; }
.nx-intro-mark img { width: 100%; height: 100%; border-radius: 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 30px 80px rgba(106,75,255,.55); animation: nxMarkIn .55s var(--nx-ease) both; }
.nx-intro-mark b { position: absolute; left: 50%; top: calc(100% + 20px); transform: translateX(-50%); white-space: nowrap; color: #fff; font: 700 1.45rem/1 var(--mk-font-display); letter-spacing: -.03em; animation: nxMarkTxt .7s var(--nx-ease) .12s both; }
@keyframes nxMarkTxt { from { opacity: 0; transform: translateX(-50%) translateY(12px); filter: blur(8px); } to { opacity: 1; transform: translateX(-50%); filter: none; } }
.nx-intro-mark i { position: absolute; left: -35%; right: -35%; bottom: -78px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.nx-intro-mark i::after { content: ""; position: absolute; inset: 0; background: var(--nx-grad); transform-origin: 0 50%; animation: nxLoad .8s var(--nx-ease) .1s both; }
@keyframes nxCurtain { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
html.nx-intro body.mk::after {
    content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 3002; pointer-events: none;
    background: linear-gradient(90deg, transparent, #8a72ff 20%, #2ee0c3 80%, transparent);
    box-shadow: 0 0 24px 4px rgba(106, 75, 255, .55), 0 0 60px 10px rgba(0, 194, 168, .25);
    transform: translateY(100vh); animation: nxEdge 1.35s var(--nx-ease-io) .15s forwards;
}
@keyframes nxEdge { 0% { transform: translateY(100vh); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; } }
@keyframes nxMarkIn { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nxMarkOut { 0%, 58% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-28px) scale(.94); visibility: hidden; } }
@keyframes nxLoad { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─────────────────────────────── CABECERA ───────────────────────────────
   Píldora de cristal flotante. Sobre el escenario oscuro va en blanco; al bajar se vuelve
   cristal claro (o oscuro en modo noche). */
body.mk { --nx-hdr-ink: #fff; }
body.mk .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    padding: 14px var(--mk-pad-x) 0; pointer-events: none;
    transition: padding .5s var(--nx-ease);
}
body.mk .topbar .header-container {
    pointer-events: auto;
    max-width: var(--nx-maxw); margin: 0 auto; padding: 10px 12px 10px 16px;
    border-radius: 999px; position: relative;
    background: rgba(13, 11, 26, .28);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: background .45s var(--nx-ease), border-color .45s, box-shadow .45s, max-width .6s var(--nx-ease), padding .45s var(--nx-ease);
}
body.mk.nx-scrolled .topbar { padding-top: 10px; }
body.mk.nx-scrolled .topbar .header-container { max-width: 1120px; padding-top: 7px; padding-bottom: 7px; }
body.mk.nx-light-hdr .topbar .header-container {
    background: rgba(255, 255, 255, .78); border-color: rgba(26, 20, 51, .08);
    box-shadow: 0 12px 40px rgba(26, 20, 51, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-theme="dark"] body.mk.nx-light-hdr .topbar .header-container {
    background: rgba(21, 18, 42, .82); border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.mk.nx-light-hdr { --nx-hdr-ink: var(--mk-ink); }
body.mk .topbar .brand { color: var(--nx-hdr-ink); gap: .6rem; transition: color .35s; }
body.mk .topbar .brand .logo-img { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(106,75,255,.35); }
body.mk .topbar .brand-name { font-family: var(--mk-font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; color: var(--nx-hdr-ink); }
body.mk .topbar .nav-primary .nav-link,
body.mk .topbar .nav-primary > ul > li > a,
body.mk .topbar .nav-primary > ul > li > button {
    color: var(--nx-hdr-ink); opacity: .86; font-weight: 600; font-size: .95rem;
    border-radius: 999px; padding: .5rem .9rem; transition: opacity .25s, background .25s, color .35s;
}
body.mk .topbar .nav-primary .nav-link:hover,
body.mk .topbar .nav-primary .nav-link.active,
body.mk .topbar .nav-primary > ul > li > button:hover { opacity: 1; background: rgba(255, 255, 255, .10); color: var(--nx-hdr-ink); }
body.mk.nx-light-hdr .topbar .nav-primary .nav-link:hover,
body.mk.nx-light-hdr .topbar .nav-primary .nav-link.active { background: rgba(106, 75, 255, .08); }
body.mk .topbar .nav-actions .button.ghost { color: var(--nx-hdr-ink); background: transparent; border-color: transparent; }
body.mk .topbar .nav-actions .button.ghost:hover { background: rgba(255, 255, 255, .1); }
body.mk.nx-light-hdr .topbar .nav-actions .button.ghost:hover { background: rgba(106, 75, 255, .08); }
body.mk .topbar .nav-actions .button.primary { padding: .62rem 1.15rem; font-size: .92rem; }
body.mk .topbar .hdr-dropdown-trigger {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--nx-hdr-ink);
    border-radius: 999px; width: 38px; height: 38px;
}
body.mk.nx-light-hdr .topbar .hdr-dropdown-trigger { background: rgba(26, 20, 51, .04); border-color: rgba(26, 20, 51, .08); }
body.mk .topbar .hamburger span { background: var(--nx-hdr-ink); }
/* mega-menú (lo construye app.js): disparadores como los enlaces y paneles de cristal oscuro */
body.mk .topbar .nav-primary .mk-nav-item > .mk-navtrigger { color: var(--nx-hdr-ink); background: transparent; }
body.mk .topbar .nav-primary .mk-nav-item > .mk-navtrigger:hover,
body.mk .topbar .nav-primary .mk-nav-item.open > .mk-navtrigger,
body.mk .topbar .nav-primary .mk-nav-item.active > .mk-navtrigger { background: rgba(255, 255, 255, .12); color: var(--nx-hdr-ink); opacity: 1; }
body.mk.nx-light-hdr .topbar .nav-primary .mk-nav-item > .mk-navtrigger:hover,
body.mk.nx-light-hdr .topbar .nav-primary .mk-nav-item.open > .mk-navtrigger,
body.mk.nx-light-hdr .topbar .nav-primary .mk-nav-item.active > .mk-navtrigger { background: rgba(106, 75, 255, .09); color: var(--nx-hdr-ink); }
html[data-theme="dark"] body.mk .topbar .nav-primary .mk-nav-item.active > .mk-navtrigger { color: var(--nx-hdr-ink); }
@media (min-width: 861px) {
    body.mk .topbar .mk-dropdown {
        top: calc(100% + 14px); border-radius: 22px; padding: .55rem; color: #fff;
        background: rgba(18, 14, 38, .92); border: 1px solid rgba(255, 255, 255, .12);
        backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
        box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
        transition: opacity .35s var(--nx-ease), transform .45s var(--nx-ease), visibility .35s;
    }
    body.mk .topbar .mk-dropdown.mk-mega { min-width: 520px; }
    body.mk .topbar .mk-dditem { color: #fff; border-radius: 14px; transition: background .25s, transform .35s var(--nx-ease); }
    body.mk .topbar .mk-dditem:hover, body.mk .topbar .mk-dditem:focus-visible { background: rgba(255, 255, 255, .08); transform: translateX(3px); }
    body.mk .topbar .mk-dditem span { color: rgba(236, 234, 245, .62); }
    body.mk .topbar .mk-dditem.mk-mega-lead { border-bottom-color: rgba(255, 255, 255, .10); background: linear-gradient(135deg, rgba(106, 75, 255, .22), rgba(0, 194, 168, .14)); }
    body.mk .topbar .mk-col-title { color: rgba(236, 234, 245, .5); }
}
@media (max-width: 860px) {
    body.mk .topbar .mk-dditem { color: #fff !important; }
    body.mk .topbar .mk-dditem span, body.mk .topbar .mk-col-title { color: rgba(236, 234, 245, .6) !important; }
    body.mk .topbar .mk-dditem:hover { background: rgba(255, 255, 255, .06); }
    body.mk .topbar .nav-primary .mk-nav-item > .mk-navtrigger { color: #fff !important; }
}
/* reserva del alto de la cabecera flotante en todas las páginas */
body.mk main.page { padding-top: 0; padding-left: 0; padding-right: 0; max-width: none; width: 100%; }
body.mk main.page > :first-child:not(.mk-hero):not(.article-hero):not(.blog-hero):not(.nx-dark-first):not(.auth-container) { margin-top: calc(var(--nx-hh) + 12px); }
body.mk .mk-hero, body.mk .article-hero, body.mk .blog-hero, body.mk .nx-dark-first { padding-top: calc(var(--nx-hh) + clamp(3rem, 7vw, 6.5rem)) !important; }

/* Menú móvil: pantalla completa con cascada */
@media (max-width: 860px) {
    :root { --nx-hh: 76px; }
    body.mk .topbar { padding: 10px 12px 0; }
    /* sin backdrop-filter en móvil: convertiría la píldora en el «containing block» del menú fijo
       (el menú a pantalla completa quedaría encerrado en la píldora) */
    body.mk .topbar .header-container { padding: 8px 8px 8px 12px; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(13, 11, 26, .78); }
    body.mk.nx-light-hdr .topbar .header-container { background: rgba(255, 255, 255, .94); }
    html[data-theme="dark"] body.mk.nx-light-hdr .topbar .header-container { background: rgba(21, 18, 42, .94); }
    body.mk .topbar .brand-name { font-size: 1rem; }
    body.mk .topbar .nav-primary {
        position: fixed; inset: 0; top: 0 !important; z-index: -1; padding: calc(var(--nx-hh) + 24px) 28px 40px;
        background: radial-gradient(60% 40% at 20% 10%, rgba(106,75,255,.35), transparent 70%), radial-gradient(60% 40% at 90% 90%, rgba(0,194,168,.25), transparent 70%), rgba(13, 11, 26, .96) !important;
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto;
        box-shadow: none !important; border: 0 !important; max-height: none !important; height: 100dvh; bottom: 0;
        clip-path: circle(0% at calc(100% - 40px) 40px);
        opacity: 1 !important; visibility: hidden; transform: none !important;
        transition: clip-path .7s var(--nx-ease), visibility 0s linear .7s !important;
    }
    body.mk .topbar .nav-primary.nav-open, body.mk .topbar .nav-primary.open {
        clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible;
        transition: clip-path .8s var(--nx-ease), visibility 0s !important;
    }
    body.mk .topbar .nav-primary > ul { flex-direction: column; align-items: stretch; gap: 4px; }
    body.mk .topbar .nav-primary > ul > li { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--nx-ease), transform .6s var(--nx-ease); }
    body.mk .topbar .nav-primary.nav-open > ul > li, body.mk .topbar .nav-primary.open > ul > li { opacity: 1; transform: none; }
    body.mk .topbar .nav-primary.nav-open > ul > li:nth-child(2), body.mk .topbar .nav-primary.open > ul > li:nth-child(2) { transition-delay: .06s; }
    body.mk .topbar .nav-primary.nav-open > ul > li:nth-child(3), body.mk .topbar .nav-primary.open > ul > li:nth-child(3) { transition-delay: .12s; }
    body.mk .topbar .nav-primary.nav-open > ul > li:nth-child(4), body.mk .topbar .nav-primary.open > ul > li:nth-child(4) { transition-delay: .18s; }
    body.mk .topbar .nav-primary .nav-link,
    body.mk .topbar .nav-primary > ul > li > a,
    body.mk .topbar .nav-primary > ul > li > button {
        color: #fff !important; font-family: var(--mk-font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em;
        padding: .55rem .2rem; opacity: 1; background: transparent !important; border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    body.mk .topbar .nav-primary .mk-dropdown, body.mk .topbar .nav-primary .mk-mega { color: #fff; }
    body.mk .topbar .hamburger { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
    body.mk.nx-light-hdr .topbar .hamburger { background: rgba(26,20,51,.04); border-color: rgba(26,20,51,.08); }
    body.mk .topbar .hamburger.active span { background: #fff; }
    body.mk .topbar .nav-actions .button.ghost { display: none; }
    /* acceso y registro dentro del menú (en la píldora solo cabe «Crear cuenta») */
    body.mk .topbar .nav-primary li.nx-menu-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; border: 0; }
    body.mk .topbar .nav-primary li.nx-menu-cta a { flex: 1 1 140px; justify-content: center; font-family: var(--mk-font); font-size: 1rem !important; font-weight: 650; letter-spacing: 0; padding: .95rem 1.2rem !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .16) !important; }
    body.mk .topbar .nav-primary li.nx-menu-cta a.primary { border: 0 !important; background: var(--nx-grad) !important; }
}
.nx-menu-cta { display: none; }
@media (max-width: 860px) {
    body.mk .topbar .nav-primary > ul > li > a.nav-link { display: flex; width: 100%; align-items: center; gap: .55rem; }
    body.mk:has(.nav-primary.open) .promo50-sticky, body.mk:has(.nav-primary.open) .mk-wa-fab, body.mk:has(.nav-primary.open) #wa-support-btn { opacity: 0; pointer-events: none; transition: opacity .3s; }
}

/* ─────────────────────────────── BOTONES ─────────────────────────────── */
body.mk .button {
    border-radius: 999px; font-weight: 650; letter-spacing: -.01em; position: relative; overflow: hidden; isolation: isolate;
    transition: transform .45s var(--nx-ease), box-shadow .45s var(--nx-ease), background .3s, color .3s, border-color .3s;
}
body.mk .button.primary, body.mk .button.accent, body.mk .mk-price-cta.button {
    background: var(--nx-grad) !important; background-size: 160% 100% !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 10px 30px rgba(106, 75, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 8px rgba(0, 0, 0, .12);
}
body.mk .button.primary::after, body.mk .button.accent::after {
    content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 45%, transparent 60%);
    transform: translateX(-120%); transition: transform .9s var(--nx-ease);
}
body.mk .button.primary:hover::after, body.mk .button.accent:hover::after { transform: translateX(120%); }
body.mk .button.primary:hover, body.mk .button.accent:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(106, 75, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
body.mk .button.btn-lg { padding: 1.02rem 1.7rem; font-size: 1.05rem; }
body.mk .button:not(.primary):not(.ghost):not(.accent) {
    background: var(--mk-bg-soft); color: var(--mk-ink); border: 1px solid var(--mk-line-strong);
    box-shadow: 0 6px 18px rgba(26, 20, 51, .06);
}
body.mk .button:not(.primary):not(.ghost):not(.accent):hover { transform: translateY(-2px); border-color: rgba(106, 75, 255, .35); box-shadow: 0 14px 34px rgba(26, 20, 51, .10); }
/* Sobre fondos oscuros (héroe, bandas oscuras, pie): cristal */
.nx-dark .button:not(.primary):not(.accent), body.mk .mk-hero .button:not(.primary):not(.accent),
body.mk .mk-cta-banner .button:not(.primary):not(.accent), body.mk .nx-dark-first .button:not(.primary):not(.accent),
body.mk .mk-footer-rich .button:not(.primary):not(.accent), body.mk #seguridad .button:not(.primary):not(.accent),
body.mk .nx-dark-band .button:not(.primary):not(.accent) {
    background: rgba(255, 255, 255, .07) !important; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nx-dark .button:not(.primary):not(.accent):hover, body.mk .mk-hero .button:not(.primary):not(.accent):hover,
body.mk .mk-cta-banner .button:not(.primary):not(.accent):hover, body.mk .nx-dark-first .button:not(.primary):not(.accent):hover,
body.mk .mk-footer-rich .button:not(.primary):not(.accent):hover, body.mk #seguridad .button:not(.primary):not(.accent):hover,
body.mk .nx-dark-band .button:not(.primary):not(.accent):hover { background: rgba(255, 255, 255, .14) !important; transform: translateY(-2px); }
/* Botón «Crear cuenta · 1 mes gratis» del héroe: ya tenía su pulso; se afina */
body.mk .cta-freemonth { animation: nxGlow 3.2s ease-in-out infinite !important; }
/* en la banda de llamada a la acción, el primer botón es blanco macizo: el que más convierte */
body.mk .mk-cta-banner .mk-hero-ctas > .button:first-child:not(.primary):not(.ghost) {
    background: #fff !important; color: var(--nx-night) !important; border-color: #fff !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .06) !important;
}
body.mk .mk-cta-banner .mk-hero-ctas > .button:first-child:not(.primary):not(.ghost):hover { background: #f1eeff !important; }
@keyframes nxGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(106, 75, 255, .38), 0 0 0 0 rgba(46, 224, 195, 0); } 50% { box-shadow: 0 18px 50px rgba(106, 75, 255, .6), 0 0 0 6px rgba(46, 224, 195, .10); } }

/* ─────────────────────────────── HÉROE (todas las páginas) ───────────────────────────────
   Escenario oscuro de cine: aurora violeta/menta que respira, rejilla en perspectiva y grano. */
body.mk .mk-hero, body.mk .article-hero, body.mk .blog-hero, body.mk .nx-dark-first {
    position: relative; isolation: isolate; overflow: clip;
    background: var(--nx-night) !important; color: #fff;
    padding-bottom: clamp(4rem, 9vw, 8rem);
}
body.mk .mk-hero::before, body.mk .article-hero::before, body.mk .blog-hero::before, body.mk .nx-dark-first::before,
body.mk .auth-container::before, body.mk .nx-legal-band::before {
    content: ""; position: absolute; inset: -20% -10% -10%; z-index: -1; pointer-events: none; opacity: 1;
    /* marketing.css les daba tamaño fijo (70vw, máx. 900 px…): el degradado se cortaba a mitad del héroe */
    width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
    background:
        radial-gradient(38% 42% at 18% 28%, rgba(106, 75, 255, .55), transparent 70%),
        radial-gradient(34% 40% at 82% 22%, rgba(0, 194, 168, .38), transparent 70%),
        radial-gradient(30% 36% at 60% 78%, rgba(255, 95, 143, .16), transparent 70%),
        radial-gradient(60% 60% at 50% 120%, rgba(106, 75, 255, .35), transparent 70%);
    animation: nxAurora 18s ease-in-out infinite alternate;
    filter: none; transform: translateZ(0);
}
/* Home: la aurora RODEA el escenario 3D en vez de quedar detrás. El fondo del vídeo es noche y, con un brillo
   detrás, se veía el «cuadrado» del vídeo. PC (escenario a la derecha): menta debajo del escenario. Móvil y tableta
   (escenario arriba): los brillos van debajo, junto al texto, y la franja del vídeo queda en noche. */
body.mk .mk-hero.nx-hero-stage::before {
    background:
        radial-gradient(38% 42% at 18% 30%, rgba(106, 75, 255, .55), transparent 70%),
        radial-gradient(30% 30% at 84% 97%, rgba(0, 194, 168, .30), transparent 70%),
        radial-gradient(30% 36% at 40% 86%, rgba(255, 95, 143, .14), transparent 70%),
        radial-gradient(60% 60% at 50% 120%, rgba(106, 75, 255, .35), transparent 70%);
}
@media (max-width: 1100px) {
    body.mk .mk-hero.nx-hero-stage::before {
        background:
            radial-gradient(48% 22% at 18% 63%, rgba(106, 75, 255, .55), transparent 70%),
            radial-gradient(44% 20% at 86% 72%, rgba(0, 194, 168, .30), transparent 70%),
            radial-gradient(40% 20% at 50% 90%, rgba(255, 95, 143, .14), transparent 70%),
            radial-gradient(70% 36% at 50% 120%, rgba(106, 75, 255, .35), transparent 70%);
    }
}
@keyframes nxAurora {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}
/* rejilla del suelo en perspectiva */
body.mk .mk-hero > .mk-wrap::before, body.mk .blog-hero > .mk-wrap::before, body.mk .nx-dark-first > .mk-wrap::before, body.mk .auth-container::after {
    content: ""; position: absolute; left: -30%; right: -30%; bottom: -8%; height: 55%; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}
body.mk .mk-hero > .mk-wrap, body.mk .blog-hero > .mk-wrap, body.mk .nx-dark-first > .mk-wrap { position: relative; }
body.mk .mk-hero h1, body.mk .article-hero h1, body.mk .blog-hero h1, body.mk .nx-dark-first h1, body.mk .nx-dark-first h2 { color: #fff; }
body.mk .mk-hero h1 { font-size: clamp(2.35rem, 1.05rem + 2.9vw, 4.35rem); line-height: 1.02; }
body.mk .mk-hero h1.nx-long { font-size: clamp(2.1rem, .95rem + 2.35vw, 3.6rem); }
body.mk .mk-hero .mk-grad-text, body.mk .article-hero .mk-grad-text, body.mk .blog-hero .mk-grad-text {
    background: var(--nx-grad-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: nxShine 7s linear infinite;
}
@keyframes nxShine { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
body.mk .mk-hero p, body.mk .mk-hero .mk-hero-lead, body.mk .nx-dark-first p, body.mk .nx-dark-first .mk-lead, body.mk .blog-hero .mk-lead { color: rgba(236, 234, 245, .78); }
body.mk .mk-hero .mk-hero-lead strong, body.mk .mk-hero p strong, body.mk .nx-dark-first p strong { color: #fff; font-weight: 650; }
body.mk .mk-hero a:not(.button), body.mk .nx-dark-first a:not(.button) { color: var(--nx-mint-hi); }
body.mk .mk-hero .mk-eyebrow, body.mk .blog-hero .mk-eyebrow, body.mk .nx-dark-first .mk-eyebrow {
    background: rgba(255, 255, 255, .06); color: #d9d2ff; border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-transform: none; letter-spacing: 0;
    font-size: .88rem; font-weight: 600; padding: .45rem .95rem .45rem .75rem; line-height: 1.35;
}
body.mk .mk-hero .mk-eyebrow::before, body.mk .blog-hero .mk-eyebrow::before, body.mk .nx-dark-first .mk-eyebrow::before {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-mint-hi);
    box-shadow: 0 0 0 4px rgba(46, 224, 195, .18), 0 0 14px var(--nx-mint-hi); animation: nxPing 2.4s ease-in-out infinite;
}
@keyframes nxPing { 0%, 100% { box-shadow: 0 0 0 3px rgba(46, 224, 195, .18), 0 0 12px var(--nx-mint-hi); } 50% { box-shadow: 0 0 0 7px rgba(46, 224, 195, .06), 0 0 18px var(--nx-mint-hi); } }
body.mk .mk-hero .mk-hero-lead { font-size: clamp(1.08rem, .98rem + .4vw, 1.3rem); line-height: 1.62; max-width: 62ch; }
body.mk .mk-hero .mk-hero-ctas { gap: .8rem; margin-top: 2rem; flex-wrap: wrap; }
body.mk .mk-hero .mk-hero-trust { gap: .5rem .6rem; margin-top: 1.8rem; flex-wrap: wrap; }
body.mk .mk-hero .mk-hero-trust span {
    color: rgba(236, 234, 245, .82); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px; padding: .38rem .8rem .38rem .55rem; font-size: .86rem; font-weight: 550; gap: .35rem;
}
body.mk .mk-hero .mk-hero-trust svg { color: var(--nx-mint-hi); width: 1.05em; height: 1.05em; }
/* El visual del héroe (capturas / slideshow) dentro de un marco de cristal con halo */
body.mk .mk-hero .mk-hero-visual { position: relative; perspective: 1400px; }
body.mk .mk-hero .mk-hero-visual::before {
    content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 40px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(106, 75, 255, .55), transparent), radial-gradient(closest-side at 70% 70%, rgba(0, 194, 168, .35), transparent);
    filter: blur(40px); opacity: .9;
}
body.mk .mk-hero .mk-hero-mockup, body.mk .mk-hero .mk-hero-visual > img, body.mk .mk-hero .mk-hero-visual > picture img,
body.mk .mk-hero .aop-hero-img, body.mk .mk-hero .mk-hero-visual .mk-browser {
    border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
    transform: rotateX(var(--nx-rx, 6deg)) rotateY(var(--nx-ry, -8deg)); transform-style: preserve-3d;
    transition: transform 1.2s var(--nx-ease);
}

/* ──────────────── ESCENARIO 3D del héroe de la HOME (agenda → portátil) ────────────────
   Arriba del todo: en PC, texto a la izquierda y el escenario a la derecha (sangra hacia el borde;
   los bordes del vídeo son exactamente --nx-night, así que el portátil «flota» en el héroe).
   En móvil el escenario va PRIMERO, a todo el ancho, y el texto debajo. */
body.mk .mk-hero.nx-hero-stage { padding-bottom: clamp(3rem, 7vw, 6rem); }
/* home: vídeo, H1 y texto más cerca de la cabecera (el resto de héroes mantienen su aire) */
body.mk .mk-hero.nx-hero-stage { padding-top: calc(var(--nx-hh) + clamp(1.25rem, 3vw, 2.75rem)) !important; }
/* home en PC: la PRIMERA PANTALLA es solo héroe. La tarjeta de datos (.mk-stats) muerde el héroe con un margen negativo
   de clamp(2.5rem, 5vw, 4.5rem); con el héroe más bajo que la pantalla asomaba su borde blanco (58–213 px según la
   resolución). El héroe mide al menos la pantalla + ese mordisco: la tarjeta empieza justo bajo el pliegue. */
@media (min-width: 1101px) {
    body.mk .mk-hero.nx-hero-stage { min-height: calc(100vh + clamp(2.5rem, 5vw, 4.5rem)); min-height: calc(100svh + clamp(2.5rem, 5vw, 4.5rem)); }
}
body.mk .mk-hero.nx-hero-stage .mk-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;   /* H1 en las mismas líneas que antes (1280/1440/1920) */
    gap: clamp(1rem, 2vw, 2rem);
}
body.mk .mk-hero.nx-hero-stage > .mk-wrap { max-width: 1420px; }
body.mk .mk-hero.nx-hero-stage .mk-hero-grid > :first-child { position: relative; z-index: 2; }
body.mk .mk-hero.nx-hero-stage h1 { font-size: clamp(2.35rem, 1.1rem + 2.35vw, 3.75rem); line-height: 1.02; }
body.mk .mk-hero.nx-hero-stage .mk-hero-lead { font-size: clamp(1rem, .95rem + .22vw, 1.12rem); line-height: 1.58; }
body.mk .mk-hero.nx-hero-stage .mk-hero-ctas { margin-top: 1.6rem; }
body.mk .mk-hero.nx-hero-stage .mk-hero-visual { perspective: none; align-self: start; margin-top: clamp(-3rem, -2vw, -1rem); }
body.mk .mk-hero.nx-hero-stage .mk-hero-visual::before { display: none; }
.nx-stage {
    position: relative; aspect-ratio: 5 / 4; isolation: isolate; z-index: 1;
    /* en PC el escenario llega hasta el borde derecho de la ventana (en pantallas anchas, más allá de los 1420 px) */
    --nx-bleed: max(var(--mk-pad-x, 24px), calc((100vw - 1420px) / 2 + var(--mk-pad-x, 24px)));
    width: calc(100% + var(--nx-bleed)); margin-left: 0; margin-right: calc(-1 * var(--nx-bleed));
}
.nx-stage-media, .nx-stage-media > picture, .nx-stage-media > video, .nx-stage-media > picture img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.nx-stage-media {
    overflow: hidden;
    /* fundido suave en los 4 lados: el fondo del vídeo es --nx-night pero el héroe lleva aurora encima, y con la
       elipse anterior el borde superior/izquierdo quedaba opaco → «salto brusco» de color contra el brillo */
    --nx-fade-y: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
    --nx-fade-x: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: var(--nx-fade-y), var(--nx-fade-x); -webkit-mask-composite: source-in;
    mask-image: var(--nx-fade-y), var(--nx-fade-x); mask-composite: intersect;
}
.nx-stage-media > picture img { background: var(--nx-night); }
.nx-stage-media .nx-final { opacity: 0; }
.nx-stage.is-static .nx-stage-media .nx-final { opacity: 1; }
.nx-stage-media > video { opacity: 0; transition: opacity .5s var(--nx-ease); background: transparent; }
.nx-stage.is-playing .nx-stage-media > video, .nx-stage.is-done .nx-stage-media > video { opacity: 1; }
.nx-stage.is-static .nx-stage-media > video { display: none; }
/* pantalla del portátil: cuando acaba la transformación se proyectan encima las capturas reales */
.nx-screen {
    position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0;
    opacity: 0; pointer-events: none; overflow: hidden; border-radius: 6px; background: #fff;
    transition: opacity .9s var(--nx-ease) .2s;
}
.nx-stage.has-screen.is-done .nx-screen, .nx-stage.has-screen.is-static .nx-screen { opacity: 1; }
.nx-screen .mk-slideshow { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #fff; }
.nx-screen .mk-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.nx-screen .mk-slide-dots, .nx-screen .mk-slide-caption { display: none !important; }
.nx-screen::after { /* reflejo de la pantalla */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%);
}
/* pantalla del móvil (a la derecha del portátil en el vídeo): mismas funciones, versión móvil, cambia a la vez */
.nx-pscreen {
    position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0;
    opacity: 0; pointer-events: none; overflow: hidden; border-radius: 51px; background: #f4f2ec;
    transition: opacity .9s var(--nx-ease) .2s;
}
.nx-stage.has-screen.is-done .nx-pscreen, .nx-stage.has-screen.is-static .nx-pscreen { opacity: 1; }
.nx-pscreen img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block;
    opacity: 0; transform: scale(1.02); transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform 4s cubic-bezier(.25, .46, .45, .94);
}
.nx-pscreen img.is-on { opacity: 1; transform: none; z-index: 1; }
.nx-pscreen::after { /* reflejo del cristal, como en el portátil */
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .05) 100%);
}
@media (prefers-reduced-motion: reduce) { .nx-pscreen img { transition: opacity .25s linear; transform: none; } }
/* leyenda viva debajo del escenario: qué función se ve en la pantalla */
.nx-stage-caption {
    position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 4;
    display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .9rem; border-radius: 999px;
    background: rgba(20, 16, 42, .6); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .82rem; font-weight: 600;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .6s var(--nx-ease); white-space: nowrap;
}
.nx-stage-caption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-mint-hi); box-shadow: 0 0 10px var(--nx-mint-hi); }
.nx-stage.has-screen.is-done .nx-stage-caption { opacity: 1; }
.nx-stage-glow {
    position: absolute; inset: 14% 16% 0; z-index: -1; pointer-events: none; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(106, 75, 255, .42), transparent), radial-gradient(closest-side at 65% 60%, rgba(0, 194, 168, .26), transparent);
    filter: blur(50px); opacity: .8;
}
/* chips flotantes alrededor del portátil (salen cuando termina la transformación) */
.nx-float {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem; text-align: left;
    padding: .65rem .9rem .65rem .65rem; border-radius: 18px; color: #fff; white-space: nowrap;
    background: rgba(20, 16, 42, .62); border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: .9rem; line-height: 1.25; opacity: 0; transform: translateY(18px) scale(.94);
    transition: opacity .8s var(--nx-ease), transform 1s var(--nx-ease);
}
.nx-float b { display: block; font-weight: 700; font-size: .92rem; }
.nx-float small { display: block; color: rgba(236, 234, 245, .7); font-size: .78rem; }
.nx-float .nx-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; font-style: normal; }
.nx-float.f1 { left: -2%; top: 10%; } .nx-float.f1 .nx-ico { background: linear-gradient(135deg, #25d366, #128c7e); }
.nx-float.f2 { right: 3%; top: 4%; } .nx-float.f2 .nx-ico { background: var(--nx-grad); }
.nx-float.f3 { left: -4%; bottom: 16%; } .nx-float.f3 .nx-ico { background: linear-gradient(135deg, #f5b301, #ff7b5c); }
.nx-float.f4 { right: 4%; bottom: 12%; } .nx-float.f4 .nx-ico { background: linear-gradient(135deg, #3aa1ff, #6a4bff); }
.nx-stage.is-done .nx-float, .nx-stage.is-static .nx-float { opacity: 1; transform: none; }
.nx-stage.is-done .nx-float.f2 { transition-delay: .25s; } .nx-stage.is-done .nx-float.f3 { transition-delay: .5s; } .nx-stage.is-done .nx-float.f4 { transition-delay: .75s; }
.nx-stage.is-done .nx-float { animation: nxBob 6s ease-in-out 1.4s infinite; }
.nx-stage.is-done .nx-float.f2 { animation-delay: 2.2s; } .nx-stage.is-done .nx-float.f3 { animation-delay: 2.8s; } .nx-stage.is-done .nx-float.f4 { animation-delay: 1.8s; }
@keyframes nxBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 1100px) {
    body.mk .mk-hero.nx-hero-stage .mk-hero-grid { grid-template-columns: minmax(0, 1fr); }
    body.mk .mk-hero.nx-hero-stage .mk-hero-visual { order: -1; margin: -.5rem calc(-1 * var(--mk-pad-x, 20px)) 0; }
    .nx-stage { width: 100%; margin: 0 auto; max-width: 980px; }
    .nx-float.f1 { left: 3%; top: 6%; } .nx-float.f2 { right: 3%; top: 4%; } .nx-float.f3 { left: 3%; bottom: 12%; } .nx-float.f4 { right: 3%; bottom: 10%; }
}
@media (max-width: 760px) {
    .nx-stage { aspect-ratio: 4 / 3; }
    .nx-stage-media > video, .nx-stage-media > picture img { object-position: 50% 50%; }
    .nx-stage-media { --nx-fade-y: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); --nx-fade-x: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); }
    .nx-float { font-size: .74rem; padding: .42rem .6rem .42rem .42rem; border-radius: 13px; gap: .4rem; }
    .nx-float b { font-size: .76rem; } .nx-float small { display: none; }
    .nx-float .nx-ico { width: 26px; height: 26px; border-radius: 8px; font-size: .85rem; }
    .nx-float.f1 { left: 3%; top: 4%; } .nx-float.f2 { right: 3%; top: 4%; left: auto; } .nx-float.f3 { left: 3%; bottom: 6%; } .nx-float.f4 { right: 3%; bottom: 6%; }
    .nx-stage-caption { font-size: .72rem; bottom: -2%; }
}

/* ─────────────────────────────── SECCIONES ─────────────────────────────── */
body.mk .mk-section { padding: clamp(3.4rem, 6.6vw, 6.2rem) 0; }
body.mk .mk-section.tight { padding: clamp(3rem, 6vw, 5rem) 0; }
body.mk .mk-section.alt { background: linear-gradient(180deg, var(--mk-bg-soft) 0%, var(--mk-bg) 100%); }
body.mk .mk-section-head { max-width: 900px; margin-bottom: clamp(2.8rem, 5vw, 4.5rem); }
body.mk .mk-section-head h2 { margin-bottom: .55em; }
body.mk .mk-section-head .mk-lead, body.mk .mk-lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.66; }
/* numerador de capítulo (lo pone el JS: «01 — Agenda») */
.nx-kicker {   /* en su propia línea, ENCIMA del subtítulo (en PC y móvil); sigue el centrado de la cabecera */
    display: block; margin: 0 0 1rem; line-height: 1;
    font: 700 .82rem/1 var(--mk-font); letter-spacing: .14em; text-transform: uppercase; color: var(--mk-primary);
}
.nx-kicker::before { content: attr(data-n); display: inline-block; vertical-align: middle; font-family: var(--mk-font-display); letter-spacing: 0; color: var(--mk-ink-muted); }
.nx-kicker::after { content: ""; display: inline-block; vertical-align: middle; margin-left: .6rem; width: 42px; height: 2px; border-radius: 2px; background: var(--nx-grad); }
/* palabras clave del título con degradado (el JS envuelve la última idea en <em class="nx-em">) */
body.mk .nx-em { font-style: normal; background: var(--nx-grad-text-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] body.mk .nx-em { background-image: var(--nx-grad-text); }

/* ─────────────────────────── REVELADO AL HACER SCROLL ───────────────────────────
   Se reutiliza el observador que ya trae cada página (.mk-reveal → .revealed). */
body.mk .mk-reveal {
    opacity: 0; transform: translate3d(0, 36px, 0);
    transition: opacity 1s var(--nx-ease), transform 1.1s var(--nx-ease);
}
body.mk .mk-reveal.revealed { opacity: 1; transform: none; filter: none; }
body.mk .mk-reveal.delay-1 { transition-delay: .1s; } body.mk .mk-reveal.delay-2 { transition-delay: .2s; } body.mk .mk-reveal.delay-3 { transition-delay: .3s; }
/* En el héroe (lo primero que se ve) la entrada es rápida y NUNCA desde opacidad 0: así el contenido cuenta
   para el LCP desde el primer pintado (Chrome ignora lo que está a opacidad 0) y no retrasa la métrica. */
body.mk .mk-hero .mk-reveal, body.mk .nx-dark-first .mk-reveal, body.mk .article-hero .mk-reveal, body.mk .blog-hero .mk-reveal {
    opacity: .01; filter: none; transform: translate3d(0, 22px, 0);
    transition: opacity .7s var(--nx-ease), transform .9s var(--nx-ease);
}
body.mk .mk-hero .mk-reveal.revealed, body.mk .nx-dark-first .mk-reveal.revealed, body.mk .article-hero .mk-reveal.revealed, body.mk .blog-hero .mk-reveal.revealed { opacity: 1; transform: none; }
/* hijos en cascada (grids): el JS les pone --i */
body.mk .nx-stagger > * { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .9s var(--nx-ease), transform 1s var(--nx-ease); transition-delay: calc(var(--i, 0) * 70ms); }
body.mk .nx-stagger.is-in > * { opacity: 1; transform: none; }
/* titulares por palabras (split): cada palabra sube desde su máscara */
.nx-split .nx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.nx-split .nx-w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--nx-ease); transition-delay: calc(var(--i, 0) * 45ms + var(--nx-d, 0ms)); }
.nx-split.is-in .nx-w > span { transform: none; }
.nx-split .nx-w.nx-inl, .nx-split .nx-w.nx-inl > span { display: inline; overflow: visible; padding: 0; margin: 0; }
.nx-split .nx-w.nx-inl > span { transform: none; opacity: 0; filter: blur(14px); transition: opacity 1.1s var(--nx-ease), filter 1.1s var(--nx-ease); transition-delay: calc(var(--i, 0) * 45ms + var(--nx-d, 0ms)); }
.nx-split.is-in .nx-w.nx-inl > span { opacity: 1; filter: none; }

/* ═════════════════════════════════ COMPONENTES ═════════════════════════════════ */

/* Tarjeta con canto degradado + foco de luz que sigue al ratón (--mx/--my los pone el JS) */
.nx-card, body.mk .mk-audience-card, body.mk .mk-mini, body.mk .aop-card, body.mk .mk-testimonial, body.mk .mk-step, body.mk .aop-step {
    position: relative; isolation: isolate;
    background:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(106, 75, 255, .10), transparent 45%) padding-box,
        linear-gradient(var(--mk-bg-soft), var(--mk-bg-soft)) padding-box,
        linear-gradient(145deg, rgba(106, 75, 255, .28), rgba(26, 20, 51, .06) 38%, rgba(0, 194, 168, .26)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: var(--nx-r) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 50px rgba(26, 20, 51, .06) !important;
    transition: transform .7s var(--nx-ease), box-shadow .7s var(--nx-ease) !important;
}
.nx-card:hover, body.mk .mk-audience-card:hover, body.mk .mk-mini:hover, body.mk .aop-card:hover, body.mk .mk-testimonial:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 70px rgba(26, 20, 51, .12), 0 0 0 1px rgba(106, 75, 255, .08) !important;
}
html[data-theme="dark"] .nx-card, html[data-theme="dark"] body.mk .mk-audience-card, html[data-theme="dark"] body.mk .mk-mini,
html[data-theme="dark"] body.mk .aop-card, html[data-theme="dark"] body.mk .mk-testimonial, html[data-theme="dark"] body.mk .mk-step, html[data-theme="dark"] body.mk .aop-step {
    background:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(138, 114, 255, .16), transparent 45%) padding-box,
        linear-gradient(var(--mk-bg-soft), var(--mk-bg-soft)) padding-box,
        linear-gradient(145deg, rgba(138, 114, 255, .40), rgba(255, 255, 255, .05) 38%, rgba(46, 224, 195, .32)) border-box !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35) !important;
}

/* ── Fila de datos del héroe (mk-stats): panel de cristal que muerde el héroe ── */
body.mk .mk-hero + .mk-section.tight { padding-top: 0; position: relative; z-index: 2; }
body.mk .mk-stats {
    margin-top: calc(-1 * clamp(2.5rem, 5vw, 4.5rem)); padding: clamp(1.2rem, 2.5vw, 2rem);
    background: rgba(255, 255, 255, .82) !important; border: 1px solid rgba(26, 20, 51, .06) !important;
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-radius: var(--nx-r-lg) !important; box-shadow: 0 40px 100px rgba(26, 20, 51, .14) !important; gap: 0 !important;
}
html[data-theme="dark"] body.mk .mk-stats { background: rgba(21, 18, 42, .82) !important; border-color: rgba(255, 255, 255, .08) !important; box-shadow: 0 40px 100px rgba(0, 0, 0, .5) !important; }
body.mk .mk-stat { padding: .6rem 1.4rem; position: relative; min-width: 0; }
@media (max-width: 520px) { body.mk .mk-stat { padding: .6rem .7rem; } body.mk .mk-stat-n { font-size: clamp(1.1rem, 6vw, 1.45rem) !important; overflow-wrap: anywhere; } body.mk .mk-stat-l { font-size: .84rem; } }
body.mk .mk-stat + .mk-stat::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--mk-line-strong); }
body.mk .mk-stat-n { font-size: clamp(1.45rem, 1rem + 1.4vw, 2.2rem) !important; letter-spacing: -.04em; background: var(--nx-grad-text-light); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-theme="dark"] body.mk .mk-stat-n { background-image: var(--nx-grad-text); }
body.mk .mk-stat-l { color: var(--mk-ink-soft); font-size: .92rem; line-height: 1.45; }
@media (max-width: 760px) {
    body.mk .mk-stats { grid-template-columns: 1fr 1fr !important; }
    body.mk .mk-stat:nth-child(3)::before { display: none; }
    body.mk .mk-stat:nth-child(n+3) { border-top: 1px solid var(--mk-line-strong); }
}

/* ── Cinta infinita de funcionalidades (la construye el JS; decorativa) ── */
.nx-marquee { position: relative; overflow: hidden; padding: 1.1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nx-marquee + .nx-marquee { margin-top: -.4rem; }
.nx-marquee-track { display: flex; gap: .9rem; width: max-content; animation: nxMarquee var(--nx-mq, 46s) linear infinite; will-change: transform; }
.nx-marquee.rev .nx-marquee-track { animation-direction: reverse; }
.nx-marquee:hover .nx-marquee-track { animation-play-state: paused; }
@keyframes nxMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.nx-chip {
    display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; padding: .7rem 1.15rem .7rem .8rem;
    border-radius: 999px; font: 650 .98rem/1 var(--mk-font); color: var(--mk-ink);
    background: var(--mk-bg-soft); border: 1px solid var(--mk-line-strong); box-shadow: 0 8px 24px rgba(26, 20, 51, .06);
}
.nx-chip i { font-style: normal; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; background: var(--mk-primary-50); }
.nx-dark .nx-chip { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.nx-dark .nx-chip i { background: rgba(255, 255, 255, .08); }

/* ── Audiencias ── */
body.mk .mk-audience { gap: clamp(1rem, 2vw, 1.6rem) !important; }
body.mk .mk-audience-card { padding: clamp(1.8rem, 3vw, 2.6rem) !important; display: flex; flex-direction: column; }
body.mk .mk-audience-card h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); margin-top: 1.2rem; }
body.mk .mk-audience-card p { flex: 1; }
body.mk .mk-audience-icon { width: 64px !important; height: 64px !important; border-radius: 20px !important; background: var(--nx-grad) !important; color: #fff !important; box-shadow: 0 16px 36px rgba(106, 75, 255, .35); display: grid !important; place-items: center; font-size: 1.7rem; }
body.mk .mk-audience-card .button { align-self: flex-start; margin-top: 1.2rem; }

/* ── Tour: capítulos con número gigante y dispositivo en 3D ── */
body.mk #tour .mk-feature, body.mk .mk-feature { margin: clamp(3rem, 7vw, 6.5rem) 0; gap: clamp(2rem, 6vw, 6rem); position: relative; }
body.mk .mk-wrap > .mk-feature:last-child { margin-bottom: 0; }
body.mk .mk-feature h3 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.04; letter-spacing: -.04em; }
body.mk .mk-feature p { font-size: 1.08rem; }
.nx-chapter-n {
    display: block; font: 700 clamp(4.2rem, 3rem + 5vw, 8rem)/.82 var(--mk-font-display); letter-spacing: -.06em; margin-bottom: -.12em;
    background: linear-gradient(180deg, rgba(106, 75, 255, .42) 0%, rgba(0, 194, 168, .16) 55%, rgba(0, 194, 168, 0) 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
    pointer-events: none; user-select: none;
}
body.mk .mk-feature-visual { position: relative; perspective: 1600px; overflow: visible; }
body.mk .mk-feature-visual::after { display: none; }
body.mk .mk-feature-visual::before {
    content: ""; position: absolute; inset: 6% 8%; z-index: -1; border-radius: 40px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(106, 75, 255, .28), transparent), radial-gradient(closest-side at 70% 70%, rgba(0, 194, 168, .22), transparent);
    filter: blur(36px);
}
body.mk .mk-feature-visual > *:not(.nx-vg-float) {
    border-radius: 24px !important; overflow: hidden;
    box-shadow: 0 50px 110px rgba(26, 20, 51, .20), 0 0 0 1px rgba(26, 20, 51, .06) !important;
    transform: rotateY(var(--nx-ry, 0deg)) rotateX(var(--nx-rx, 0deg)); transform-style: preserve-3d;
}
body.mk .mk-checklist li { padding-left: 2.1rem; position: relative; margin: .55rem 0; }
body.mk .mk-checklist li::before {
    content: "" !important; position: absolute; left: 0; top: .3em; width: 1.3rem; height: 1.3rem; border-radius: 8px;
    background: var(--nx-grad) !important; box-shadow: 0 6px 14px rgba(106, 75, 255, .3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M5 0h10a5 5 0 015 5v10a5 5 0 01-5 5H5a5 5 0 01-5-5V5a5 5 0 015-5zm9.7 6.3a1 1 0 00-1.4 0L8.5 11.1 6.7 9.3a1 1 0 10-1.4 1.4l2.5 2.5a1 1 0 001.4 0l5.5-5.5a1 1 0 000-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M5 0h10a5 5 0 015 5v10a5 5 0 01-5 5H5a5 5 0 01-5-5V5a5 5 0 015-5zm9.7 6.3a1 1 0 00-1.4 0L8.5 11.1 6.7 9.3a1 1 0 10-1.4 1.4l2.5 2.5a1 1 0 001.4 0l5.5-5.5a1 1 0 000-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Bento de funcionalidades (mk-mini-grid) ── */
body.mk .mk-mini-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(.9rem, 1.6vw, 1.3rem) !important; grid-auto-flow: dense; }
body.mk .mk-mini { padding: clamp(1.4rem, 2.4vw, 2rem) !important; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1) { grid-column: span 2; }
body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1) h4 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); }
body.mk .mk-mini-grid:has(> .mk-mini:nth-child(7)) > .mk-mini:nth-child(4) { grid-row: span 2; }
body.mk .mk-mini-icon {
    width: 52px !important; height: 52px !important; border-radius: 16px !important; margin-bottom: auto !important;
    display: grid !important; place-items: center; font-size: 1.45rem; color: #fff !important;
    background: var(--nx-grad) !important; box-shadow: 0 14px 30px rgba(106, 75, 255, .30);
    transition: transform .8s var(--nx-ease);
}
body.mk .mk-mini:nth-child(4n+2) .mk-mini-icon { background: linear-gradient(135deg, #00c2a8, #3aa1ff) !important; box-shadow: 0 14px 30px rgba(0, 194, 168, .3); }
body.mk .mk-mini:nth-child(4n+3) .mk-mini-icon { background: linear-gradient(135deg, #ff7b5c, #ff5f8f) !important; box-shadow: 0 14px 30px rgba(255, 95, 143, .28); }
body.mk .mk-mini:nth-child(4n+4) .mk-mini-icon { background: linear-gradient(135deg, #f5b301, #ff7b5c) !important; box-shadow: 0 14px 30px rgba(245, 179, 1, .28); }
body.mk .mk-mini:hover .mk-mini-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
body.mk .mk-mini h4 { margin-top: 1.4rem; }
body.mk .mk-mini p { margin: 0; font-size: .96rem; }
@media (min-width: 1081px) { body.mk .mk-mini-grid > .mk-mini.nx-last { grid-column: span var(--span4, 1); } }
@media (max-width: 1080px) and (min-width: 561px) { body.mk .mk-mini-grid > .mk-mini.nx-last2 { grid-column: span 2; } }
@media (max-width: 1080px) { body.mk .mk-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.mk .mk-mini-grid:has(> .mk-mini:nth-child(7)) > .mk-mini:nth-child(4) { grid-row: auto; } }
@media (max-width: 560px) { body.mk .mk-mini-grid { grid-template-columns: 1fr !important; } body.mk .mk-mini-grid > .mk-mini { grid-column: auto !important; min-height: 0; } }

/* ── Pasos (mk-steps / aop-steps): línea de tiempo que se dibuja al hacer scroll ── */
body.mk .mk-steps, body.mk .aop-steps { position: relative; gap: clamp(1rem, 2vw, 1.6rem) !important; padding-top: 3.4rem; }
body.mk .mk-steps::before, body.mk .aop-steps::before {
    content: ""; position: absolute; top: 1.35rem; left: 4%; right: 4%; height: 2px; border-radius: 2px; background: var(--mk-line-strong); z-index: 0;
}
body.mk .mk-steps > *, body.mk .aop-steps > * { position: relative; z-index: 1; }
body.mk .mk-steps::after, body.mk .aop-steps::after {
    content: ""; position: absolute; top: 1.35rem; left: 4%; right: 4%; height: 2px; border-radius: 2px; background: var(--nx-grad);
    transform-origin: 0 50%; transform: scaleX(var(--nx-line, 0)); box-shadow: 0 0 16px rgba(106, 75, 255, .6); z-index: 0;
}
body.mk .mk-step, body.mk .aop-step { padding: 2.2rem 1.6rem 1.7rem !important; }
body.mk .mk-step::before {
    top: -3.3rem !important; left: 1.4rem !important; width: 48px !important; height: 48px !important; border-radius: 16px !important;
    font-size: 1.05rem !important; box-shadow: 0 0 0 6px var(--mk-bg), 0 14px 30px rgba(106, 75, 255, .35) !important;
}
@media (max-width: 900px) { body.mk .mk-steps::before, body.mk .mk-steps::after, body.mk .aop-steps::before, body.mk .aop-steps::after { display: none; } body.mk .mk-steps, body.mk .aop-steps { padding-top: 1.8rem; } }

/* ── Opiniones ── */
body.mk .mk-testimonials { gap: clamp(1rem, 2vw, 1.6rem) !important; align-items: start; }
body.mk .mk-testimonial { padding: clamp(1.8rem, 3vw, 2.5rem) !important; }
body.mk .mk-testimonials > .mk-testimonial:nth-child(2) { margin-top: 3rem; }
body.mk .mk-testimonial blockquote { font-size: 1.1rem; line-height: 1.65; color: var(--mk-ink); position: relative; }
body.mk .mk-testimonial::before { color: rgba(106, 75, 255, .22) !important; }
body.mk .mk-rating { color: var(--nx-gold) !important; letter-spacing: .15em; }
body.mk .mk-avatar { background: var(--nx-grad) !important; box-shadow: 0 10px 24px rgba(106, 75, 255, .3); }
@media (max-width: 900px) { body.mk .mk-testimonials > .mk-testimonial:nth-child(2) { margin-top: 0; } }

/* ── Precios ── */
@property --nx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body.mk .mk-pricing { gap: clamp(1rem, 2vw, 1.6rem) !important; align-items: stretch; }
body.mk .mk-price {
    border-radius: var(--nx-r-lg) !important; padding: clamp(1.8rem, 3vw, 2.4rem) !important; position: relative; isolation: isolate;
    background: var(--mk-bg-soft) !important; border: 1px solid var(--mk-line-strong) !important;
    box-shadow: 0 20px 60px rgba(26, 20, 51, .07) !important; transition: transform .7s var(--nx-ease), box-shadow .7s var(--nx-ease) !important;
}
body.mk .mk-price:hover { transform: translateY(-8px) !important; box-shadow: 0 34px 80px rgba(26, 20, 51, .14) !important; }
body.mk .mk-price.popular {
    border: 2px solid transparent !important; transform: translateY(-14px) !important;
    background: linear-gradient(var(--mk-bg-soft), var(--mk-bg-soft)) padding-box, conic-gradient(from var(--nx-ang), #6a4bff, #00c2a8, #ff5f8f, #6a4bff) border-box !important;
    animation: nxSpin 6s linear infinite; box-shadow: 0 40px 100px rgba(106, 75, 255, .28) !important;
}
body.mk .mk-price.popular:hover { transform: translateY(-20px) !important; }
@keyframes nxSpin { to { --nx-ang: 360deg; } }
body.mk .mk-price-name { font-family: var(--mk-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
body.mk .mk-price-amount { font-size: clamp(2.3rem, 1.75rem + 1.15vw, 3rem) !important; letter-spacing: -.05em !important; white-space: nowrap; flex-wrap: wrap; row-gap: 0; }
body.mk .mk-price-amount .price-iva, body.mk .mk-price-amount .per { letter-spacing: 0; }
body.mk .mk-price.popular .mk-price-amount { color: var(--mk-primary) !important; }
html[data-theme="dark"] body.mk .mk-price.popular .mk-price-amount { color: #a996ff !important; }
body.mk .mk-price-badge { background: var(--nx-grad) !important; box-shadow: 0 10px 24px rgba(106, 75, 255, .35); border-radius: 999px !important; }
body.mk .mk-price-cta { width: 100%; justify-content: center; }
@media (max-width: 720px) { body.mk .mk-price.popular { transform: none !important; } }

/* ── Bandas OSCURAS (seguridad, llamadas a la acción): mismo escenario que el héroe ── */
body.mk #seguridad, body.mk .nx-dark-band {
    background: var(--nx-night) !important; color: #fff; position: relative; isolation: isolate; overflow: clip;
}
body.mk #seguridad::before, body.mk .nx-dark-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 50% at 15% 20%, rgba(106, 75, 255, .40), transparent 70%), radial-gradient(40% 50% at 90% 80%, rgba(0, 194, 168, .28), transparent 70%);
}
body.mk #seguridad h2, body.mk #seguridad h3, body.mk #seguridad h4, body.mk .nx-dark-band h2, body.mk .nx-dark-band h3, body.mk .nx-dark-band h4 { color: #fff; }
body.mk #seguridad p, body.mk #seguridad .mk-lead, body.mk .nx-dark-band p { color: rgba(236, 234, 245, .74); }
body.mk #seguridad a:not(.button), body.mk .nx-dark-band a:not(.button) { color: var(--nx-mint-hi); }
body.mk #seguridad .nx-em, body.mk .nx-dark-band .nx-em { background-image: var(--nx-grad-text); }
body.mk #seguridad .nx-kicker::before, body.mk .nx-dark-band .nx-kicker::before { color: rgba(236, 234, 245, .55); }
body.mk #seguridad .nx-kicker, body.mk .nx-dark-band .nx-kicker { color: var(--nx-mint-hi); }
body.mk #seguridad .mk-mini, body.mk .nx-dark-band .mk-mini, body.mk .nx-dark-band .aop-card {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(46, 224, 195, .14), transparent 45%) padding-box, linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)) padding-box, linear-gradient(145deg, rgba(138,114,255,.45), rgba(255,255,255,.06) 40%, rgba(46,224,195,.40)) border-box !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35) !important; backdrop-filter: blur(8px);
}
body.mk #seguridad .mk-mini p, body.mk .nx-dark-band .mk-mini p { color: rgba(236, 234, 245, .72); }

/* ── Banner final de llamada a la acción ── */
body.mk .mk-cta-banner {
    background: var(--nx-night) !important; border-radius: clamp(28px, 4vw, 44px) !important; padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem) !important;
    isolation: isolate; box-shadow: 0 60px 140px rgba(26, 20, 51, .35) !important; border: 1px solid rgba(255, 255, 255, .08);
}
body.mk .mk-cta-banner::before {
    content: "" !important; position: absolute !important; inset: -30% -10% !important; z-index: -1; pointer-events: none; opacity: 1 !important;
    background: radial-gradient(35% 45% at 20% 30%, rgba(106, 75, 255, .75), transparent 70%), radial-gradient(35% 45% at 80% 70%, rgba(0, 194, 168, .55), transparent 70%), radial-gradient(25% 30% at 60% 20%, rgba(255, 95, 143, .30), transparent 70%) !important;
    animation: nxAurora 14s ease-in-out infinite alternate;
}
body.mk .mk-cta-banner h2 { color: #fff !important; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); max-width: 18ch; margin-inline: auto; }
body.mk .mk-cta-banner p { color: rgba(236, 234, 245, .8) !important; font-size: 1.15rem; max-width: 60ch; margin-inline: auto; }
body.mk .mk-cta-banner .mk-hero-ctas { justify-content: center; margin-top: 2rem; }

/* ── FAQ ── */
body.mk .mk-faq { max-width: 920px; margin-inline: auto; display: grid; gap: .8rem; }
body.mk .mk-faq details { border-radius: 22px !important; border: 1px solid var(--mk-line-strong) !important; background: var(--mk-bg-soft) !important; transition: border-color .4s, box-shadow .5s var(--nx-ease), transform .5s var(--nx-ease) !important; }
body.mk .mk-faq details:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(26, 20, 51, .08) !important; }
body.mk .mk-faq details[open] { border-color: rgba(106, 75, 255, .45) !important; box-shadow: 0 24px 60px rgba(106, 75, 255, .12) !important; }
body.mk .mk-faq summary { font-family: var(--mk-font-display); font-weight: 700; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); letter-spacing: -.02em; padding: 1.3rem 4rem 1.3rem 1.5rem !important; position: relative; list-style: none; cursor: pointer; }
body.mk .mk-faq summary::-webkit-details-marker { display: none; }
body.mk .mk-faq summary::after {
    content: "" !important; position: absolute; right: 1.2rem; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
    background: var(--mk-primary-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236a4bff'%3E%3Cpath d='M10 4a1 1 0 011 1v4h4a1 1 0 110 2h-4v4a1 1 0 11-2 0v-4H5a1 1 0 110-2h4V5a1 1 0 011-1z'/%3E%3C/svg%3E") center/16px no-repeat;
    transition: transform .6s var(--nx-ease), background-color .3s; border: 0 !important;
}
body.mk .mk-faq details[open] summary::after { transform: rotate(135deg); background-color: rgba(106, 75, 255, .16); }
body.mk .mk-faq .mk-faq-body { padding: 0 1.5rem 1.4rem !important; }

/* ═════════════════════════════════ PIE ÉPICO ═════════════════════════════════ */
body.mk .mk-footer-rich {
    position: relative; isolation: isolate; overflow: clip; margin-top: 0 !important; border-top: 0 !important;
    background: var(--nx-night) !important; color: rgba(236, 234, 245, .72); padding: clamp(4rem, 8vw, 7rem) 0 2rem !important;
}
body.mk .mk-footer-rich::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 38% at 12% 38%, rgba(106, 75, 255, .15), transparent 72%), radial-gradient(40% 36% at 92% 60%, rgba(0, 194, 168, .09), transparent 72%);
}
body.mk .mk-footer-rich .mk-wrap { position: relative; z-index: 1; }
body.mk .mk-footer-rich h5 { color: #fff !important; font-family: var(--mk-font-display); font-size: .95rem; letter-spacing: .02em; }
body.mk .mk-footer-rich a { color: rgba(236, 234, 245, .72) !important; transition: color .25s, transform .35s var(--nx-ease); display: inline-block; }
body.mk .mk-footer-rich a:hover { color: #fff !important; transform: translateX(3px); }
body.mk .mk-footer-rich p, body.mk .mk-footer-rich .mk-footer-brand-block { color: rgba(236, 234, 245, .66); }
body.mk .mk-footer-rich .mk-footer-brand-block strong, body.mk .mk-footer-rich .brand-name { color: #fff; }
body.mk .mk-footer-rich .mk-footer-social-label { color: rgba(236, 234, 245, .5); }
body.mk .mk-footer-rich a.mk-social-link { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
body.mk .mk-footer-rich a.mk-social-link:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); }
body.mk .mk-footer-legal { border-top: 1px solid rgba(255, 255, 255, .10) !important; color: rgba(236, 234, 245, .55); }
body.mk .mk-footer-company { color: rgba(236, 234, 245, .45) !important; }
body.mk .mk-footer-social a { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .10) !important; }
/* llamada antes del pie (la añade el JS) */
.nx-prefoot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(255, 255, 255, .10); }
.nx-prefoot .nx-prefoot-t { color: #fff !important; font: 700 clamp(2.2rem, 1.2rem + 3.6vw, 4.8rem)/1.02 var(--mk-font-display); letter-spacing: -.045em; margin: 0; }
.nx-prefoot p { margin: 0 0 1.2rem; color: rgba(236, 234, 245, .72); font-size: 1.1rem; }
.nx-prefoot .nx-prefoot-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 860px) { .nx-prefoot { grid-template-columns: 1fr; } }
/* marca gigante al final (decorativa) */
.nx-wordmark {
    margin-top: clamp(2.5rem, 6vw, 5rem); font: 700 clamp(2.6rem, 10.2vw, 11.5rem)/.8 var(--mk-font-display); overflow: hidden; padding-bottom: .06em; letter-spacing: -.06em; white-space: nowrap; text-align: center;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14);
    background: linear-gradient(100deg, #8a72ff, #2ee0c3) 0 0 / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
    user-select: none; pointer-events: none; transition: background-size 2.6s var(--nx-ease) .1s;
}
.nx-wordmark.is-in { background-size: 100% 100%; }
/* Donde el navegador sabe animar con el scroll (sin JS, en el hilo del compositor): se rellena al bajar */
@supports (animation-timeline: view()) {
    .nx-wordmark { transition: none; animation: nxWm linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes nxWm { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
    body.mk .article-cover img { animation: nxCoverPar linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes nxCoverPar { from { transform: scale(1.1) translateY(-3%); } to { transform: scale(1.02) translateY(3%); } }
    body.mk .blog-card-image img { animation: nxCardPar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes nxCardPar { from { translate: 0 -4%; scale: 1.1; } to { translate: 0 4%; scale: 1.1; } }
}

/* ─────────────────────── Flotantes (promo y WhatsApp) a juego ─────────────────────── */
body.mk .mpa-promo-sticky, body.mk #mpa-promo-sticky, body.mk .promo-sticky {
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ─────────────── PARTE 5 · Tour pegajoso (PC ≥ 1200 px, lo monta mk-next.js) ───────────────
   Los textos de cada función pasan por la izquierda; a la derecha el dispositivo se queda fijo y
   cambia de pantalla con un giro 3D. Debajo, «01 / 05» con barra de progreso. */
.nx-story { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }
.nx-story-texts { display: flex; flex-direction: column; }
body.mk .nx-story .mk-feature.nx-story-step { display: flex !important; flex-direction: column; justify-content: center; min-height: 82vh; margin: 0 !important; padding: 6vh 0; grid-template-columns: none !important; }
body.mk .nx-story .mk-feature.nx-story-step > div { max-width: 560px; transition: opacity .6s var(--nx-ease); }
body.mk .nx-story .mk-feature.nx-story-step:not(.is-on) > div { opacity: .28; }
.nx-story-stage { position: relative; height: 100%; container-type: inline-size; }
.nx-story-sticky { --sh: calc(62.5cqw + 120px); position: sticky; top: calc(50vh - var(--sh) / 2 + var(--nx-hh) / 2); height: var(--sh); perspective: 1800px; }
body.mk .nx-story-sticky > .mk-feature-visual {
    position: absolute; left: 0; right: 0; top: 0; margin: 0; opacity: 0; pointer-events: none;
    transform: translate3d(0, 60px, -120px) rotateX(10deg) scale(.94); transform-origin: 50% 100%;
    transition: opacity .7s var(--nx-ease), transform 1.1s var(--nx-ease);
}
body.mk .nx-story-sticky > .mk-feature-visual.is-past { transform: translate3d(0, -60px, -160px) rotateX(-12deg) scale(.92); }
body.mk .nx-story-sticky > .mk-feature-visual.is-on { opacity: 1; pointer-events: auto; transform: none; transition-delay: .08s; }
body.mk .nx-story-sticky > .mk-feature-visual > *:not(.nx-vg-float) { transform: none !important; }
.nx-story-count {
    position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: .8rem;
    font: 700 .9rem/1 var(--mk-font-display); color: var(--mk-ink-muted); letter-spacing: .06em;
}
.nx-story-count b { color: var(--mk-primary); font-size: 1.35rem; letter-spacing: -.02em; }
.nx-story-count i { position: relative; width: 120px; height: 3px; border-radius: 3px; background: var(--mk-line); overflow: hidden; }
.nx-story-count i::after { content: ""; position: absolute; inset: 0; background: var(--nx-grad); transform-origin: 0 50%; transform: scaleX(var(--nx-sp, .2)); transition: transform .8s var(--nx-ease); }
html[data-theme="dark"] .nx-story-count b { color: var(--nx-mint-hi); }

/* (Se probó `@view-transition { navigation: auto }` para fundir entre páginas y SE QUITÓ: en Chromium 140,
   tras login → dashboard → /precios/ la página dejaba de producir fotogramas —rAF a 0, sin scroll suave, clics
   que no llegaban—. Detectado con los E2E el 2026-09-30. No volver a ponerlo sin repetir esa prueba.) */

/* ─────────────────────────────── Accesibilidad ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.mk *, body.mk *::before, body.mk *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    body.mk .mk-reveal, body.mk .nx-stagger > *, .nx-split .nx-w > span { opacity: 1 !important; transform: none !important; filter: none !important; }
    .nx-marquee-track { animation: none !important; }
    html.nx-intro body.mk::before, html.nx-intro body.mk::after, html.nx-intro .nx-intro-mark { display: none !important; }
}
body.mk :focus-visible { outline: 3px solid var(--nx-mint-hi); outline-offset: 3px; border-radius: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PARTE 3 · TIPOS DE PÁGINA (landings, comparativas, blog, artículo, acceso, precios, legal)
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* 3.1 · Héroe «lite»: páginas cuyo primer bloque es una .mk-section con el H1 (alternativas,
   comparativas, sobre nosotros, precios). El transformador le pone .nx-dark-first. */
body.mk .nx-dark-first { padding-bottom: clamp(3.5rem, 8vw, 7rem) !important; }
body.mk .nx-dark-first .mk-section-head { margin-bottom: 0; }
body.mk .nx-dark-first h1 { font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.1rem); line-height: 1; }
body.mk .nx-dark-first .mk-lead { font-size: clamp(1.08rem, .98rem + .4vw, 1.28rem); line-height: 1.6; }
body.mk .nx-dark-first .mk-eyebrow.accent { color: #b9fff2; }
body.mk .nx-dark-first .security-banner {
    background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .12) !important; color: rgba(236, 234, 245, .85);
    border-radius: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none !important;
}
body.mk .nx-dark-first .security-banner strong { color: #fff; }
body.mk .nx-dark-first + .mk-section, body.mk .nx-dark-first + #planes { position: relative; z-index: 1; }

/* 3.2 · Landings de funcionalidad: «el problema» como una declaración grande que se enciende al leer */
body.mk #problema .mk-reveal > p, body.mk #problem .mk-reveal > p {
    font-family: var(--mk-font-display); font-size: clamp(1.28rem, 1rem + 1.05vw, 1.85rem); line-height: 1.42;
    letter-spacing: -.02em; color: var(--mk-ink); font-weight: 500; margin-bottom: 1.3rem;
}
body.mk #problema .mk-reveal > p strong, body.mk #problem .mk-reveal > p strong { color: var(--mk-primary); font-weight: 650; }
html[data-theme="dark"] body.mk #problema .mk-reveal > p strong, html[data-theme="dark"] body.mk #problem .mk-reveal > p strong { color: var(--nx-mint-hi); }
body.mk #problema .mk-reveal[style], body.mk #problem .mk-reveal[style] { max-width: 980px !important; }
/* párrafos largos de las alternativas: columna de lectura cómoda */
body.mk .mk-section .mk-reveal[style*="max-width:820px"] > p { font-size: 1.08rem; line-height: 1.8; }
/* 2 columnas «para quién» */
body.mk .aop-2col { gap: clamp(1rem, 2.5vw, 1.8rem) !important; }
body.mk .aop-2col > * { border-radius: var(--nx-r) !important; padding: clamp(1.4rem, 3vw, 2.2rem) !important; }
/* comparativas: tarjetas de competidores */
body.mk .comp-grid { gap: clamp(1rem, 2.5vw, 1.6rem); }
body.mk .comp-card { border-radius: var(--nx-r); overflow: hidden; border: 1px solid var(--mk-line); background: var(--mk-bg-soft); transition: transform .6s var(--nx-ease), box-shadow .6s var(--nx-ease), border-color .4s; }
body.mk .comp-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(26, 20, 51, .14); border-color: rgba(106, 75, 255, .35); }
body.mk .comp-card-media { overflow: hidden; }
body.mk .comp-card-media img { transition: transform 1.2s var(--nx-ease); }
body.mk .comp-card:hover .comp-card-media img { transform: scale(1.06); }
/* tablas comparativas (alternativas, precios) */
body.mk .mk-section table { border-collapse: separate; border-spacing: 0; }
body.mk .cmp-wrap, body.mk .mk-section .table-wrap { border-radius: 24px; border: 1px solid var(--mk-line); background: var(--mk-bg-soft); box-shadow: 0 20px 60px rgba(26, 20, 51, .06); }

/* 3.3 · Blog: portada */
body.mk .blog-hero h1 {
    background: var(--nx-grad-text) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important; animation: nxShine 9s linear infinite;
    font-size: clamp(2.6rem, 1.2rem + 5vw, 5.8rem);
}
body.mk .blog-hero .mk-lead { max-width: 60ch; margin-inline: auto; font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); }
body.mk .blog-filters { gap: .5rem; margin-top: 2.2rem; }
body.mk .blog-filter-btn {
    background: rgba(255, 255, 255, .06) !important; color: rgba(236, 234, 245, .86) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 600; padding: .55rem 1.05rem;
    transition: background .3s, color .3s, transform .4s var(--nx-ease), border-color .3s;
}
body.mk .blog-filter-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12) !important; }
body.mk .blog-filter-btn.active { background: var(--nx-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 28px rgba(106, 75, 255, .45); }
body.mk .blog-hero + .mk-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
body.mk .blog-featured {
    border-radius: var(--nx-r-lg); overflow: hidden; border: 1px solid var(--mk-line); background: var(--mk-bg-soft);
    box-shadow: 0 40px 100px rgba(26, 20, 51, .12); transition: transform .7s var(--nx-ease), box-shadow .7s var(--nx-ease);
}
body.mk .blog-featured:hover { transform: translateY(-6px); box-shadow: 0 50px 120px rgba(106, 75, 255, .18); }
body.mk .blog-featured h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.08; }
body.mk .blog-card-image { overflow: hidden; }
body.mk .blog-card-image img { transition: transform 1.2s var(--nx-ease); }
body.mk .blog-card:hover .blog-card-image img, body.mk .blog-featured:hover .blog-card-image img { transform: scale(1.07); }
body.mk .blog-grid { gap: clamp(1.2rem, 2.5vw, 2rem); }
body.mk .blog-card {
    position: relative; border-radius: var(--nx-r); border: 1px solid var(--mk-line); background: var(--mk-bg-soft);
    transition: transform .6s var(--nx-ease), box-shadow .6s var(--nx-ease), border-color .4s;
}
body.mk .blog-card:hover { transform: translateY(-8px); box-shadow: 0 34px 80px rgba(26, 20, 51, .14); border-color: rgba(106, 75, 255, .35); }
body.mk .blog-card h2, body.mk .blog-card h3 { font-size: clamp(1.12rem, 1rem + .4vw, 1.32rem) !important; line-height: 1.25; letter-spacing: -.02em; }
body.mk .blog-pagination button, body.mk .blog-pagination a { border-radius: 999px !important; }

/* 3.4 · Artículo */
body.mk .article-hero { padding-bottom: clamp(7rem, 14vw, 11rem); text-align: left; }
body.mk .article-hero-inner { max-width: 980px; }
body.mk .article-hero h1 { font-size: clamp(2.1rem, 1.1rem + 3.3vw, 4.1rem); line-height: 1.04; letter-spacing: -.04em; margin: .4rem 0 1.4rem; }
body.mk .article-breadcrumb { color: rgba(236, 234, 245, .55); font-size: .85rem; }
body.mk .article-breadcrumb a { color: rgba(236, 234, 245, .8); }
body.mk .article-breadcrumb a:hover { color: var(--nx-mint-hi); }
body.mk .article-meta { border-color: rgba(255, 255, 255, .12) !important; color: rgba(236, 234, 245, .7); gap: .6rem 1.1rem; }
body.mk .article-meta .category { background: rgba(46, 224, 195, .12) !important; color: var(--nx-mint-hi) !important; border: 1px solid rgba(46, 224, 195, .25); }
body.mk .article-cover {
    position: relative; z-index: 2; max-width: 1080px; margin-top: calc(-1 * clamp(5.5rem, 11vw, 9rem)); margin-bottom: clamp(2.5rem, 5vw, 4rem);
    border-radius: var(--nx-r-lg); box-shadow: 0 50px 120px rgba(13, 11, 26, .35), 0 0 0 1px rgba(255, 255, 255, .06);
}
body.mk .article-layout { max-width: 1180px; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); }
/* lateral pegajoso que cabe en pantalla: el índice se desplaza por dentro y la tarjeta de la función queda siempre entera */
body.mk .article-toc-wrap {
    position: sticky; top: calc(var(--nx-hh) + 20px); max-height: calc(100vh - var(--nx-hh) - 40px); overflow: visible;
    display: flex; flex-direction: column; gap: .9rem;
}
body.mk .article-toc {
    position: static; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    border-radius: 22px; padding: 1.2rem 1.1rem;
    background: var(--mk-bg-soft); border: 1px solid var(--mk-line); box-shadow: 0 16px 40px rgba(26, 20, 51, .06);
}
body.mk .article-toc h4 { font-size: .74rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-ink-muted); }
body.mk .article-toc li a { transition: color .25s, transform .35s var(--nx-ease); display: inline-block; }
body.mk .article-toc li a:hover { transform: translateX(3px); }
body.mk .article-toc li:has(a.nx-active) { border-left-color: var(--mk-primary); }
body.mk .article-toc li a.nx-active { color: var(--mk-primary); font-weight: 650; }
html[data-theme="dark"] body.mk .article-toc li a.nx-active { color: var(--nx-mint-hi); }
body.mk .article-body { font-size: 1.09rem; line-height: 1.82; }
body.mk .article-body > p:first-child, body.mk .article-body #intro { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.32rem); line-height: 1.7; color: var(--mk-ink); }
body.mk .article-body h2 { font-size: clamp(1.65rem, 1.15rem + 1.6vw, 2.45rem) !important; line-height: 1.1; margin-top: 3.4rem; scroll-margin-top: calc(var(--nx-hh) + 20px); }
body.mk .article-body h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin-top: .75rem; background: var(--nx-grad); }
body.mk .article-body h3 { font-size: clamp(1.22rem, 1.05rem + .55vw, 1.5rem) !important; margin-top: 2rem; }
body.mk .article-body ul li::marker, body.mk .article-body ol li::marker { color: var(--mk-primary); font-weight: 700; }
body.mk .article-body a:not(.button) {
    color: var(--mk-primary); text-decoration: none; background: linear-gradient(90deg, rgba(106, 75, 255, .35), rgba(0, 194, 168, .35)) 0 100% / 100% 2px no-repeat;
    transition: background-size .35s var(--nx-ease), color .25s;
}
body.mk .article-body a:not(.button):hover { background-size: 100% 100%; color: var(--mk-ink); }
html[data-theme="dark"] body.mk .article-body a:not(.button) { color: #b9aaff; }
html[data-theme="dark"] body.mk .article-body a:not(.button):hover { color: #fff; }
body.mk .article-body .callout {
    border-radius: 22px; border: 1px solid rgba(106, 75, 255, .22); background: linear-gradient(135deg, rgba(106, 75, 255, .07), rgba(0, 194, 168, .06));
    box-shadow: 0 14px 40px rgba(26, 20, 51, .05);
}
body.mk .article-body .faq-section { margin-top: 3.2rem; }
body.mk .article-body .faq-item {
    border-radius: 18px !important; border: 1px solid var(--mk-line) !important; background: var(--mk-bg-soft); margin-bottom: .7rem; overflow: hidden;
    transition: border-color .3s, box-shadow .4s var(--nx-ease);
}
body.mk .article-body .faq-item[open] { border-color: rgba(106, 75, 255, .35) !important; box-shadow: 0 18px 44px rgba(106, 75, 255, .10); }
body.mk .article-body .faq-item summary { font-weight: 650; }
body.mk .article-body img { border-radius: 18px; }
/* tarjeta lateral (bajo el índice) con la función relacionada animada + CTA */
.nx-aside { flex: 0 0 auto; }
@media (max-height: 780px) { .nx-aside .nx-vg { display: none; } }
.nx-aside-card {
    border-radius: 24px; padding: 1rem; color: #fff; position: relative; overflow: hidden; isolation: isolate;
    background: var(--nx-night); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 24px 60px rgba(13, 11, 26, .28);
}
.nx-aside-card::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(40% 40% at 20% 20%, rgba(106, 75, 255, .55), transparent 70%), radial-gradient(40% 40% at 90% 80%, rgba(0, 194, 168, .35), transparent 70%); }
.nx-aside-card p { color: rgba(236, 234, 245, .8) !important; font-size: .88rem !important; line-height: 1.45 !important; margin: .8rem .2rem .8rem !important; }
.nx-aside-card .button { width: 100%; justify-content: center; font-size: .92rem; padding: .75rem 1rem; }
.nx-inline-cta { margin: 3rem 0 1rem; }
.nx-inline-cta .nx-aside-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.2rem; align-items: center; padding: 1.2rem; }
@media (max-width: 640px) { .nx-inline-cta .nx-aside-card { grid-template-columns: 1fr; } }

/* 3.5 · Acceso (login, registro, contraseña, verificación): escenario oscuro a pantalla completa */
body.mk .auth-container {
    position: relative; isolation: isolate; overflow: clip; background: var(--nx-night);
    min-height: 100svh; padding: calc(var(--nx-hh) + clamp(2rem, 5vw, 4rem)) var(--mk-pad-x) clamp(3rem, 7vw, 6rem);
}
body.mk .auth-container::before { inset: -20% -10% -10%; width: auto; height: auto; max-width: none; filter: none; }
body.mk .auth-container::after { bottom: -6%; height: 45%; }
body.mk main.page:has(> .auth-container:first-child) { padding-bottom: 0; }
body.mk .auth-card {
    border-radius: 30px; border: 1px solid rgba(255, 255, 255, .14); background: var(--mk-bg-soft);
    box-shadow: 0 50px 140px rgba(0, 0, 0, .55), 0 0 0 1px rgba(106, 75, 255, .18), 0 0 80px rgba(106, 75, 255, .18);
    animation: nxCardIn 1s var(--nx-ease) both .15s;
}
@keyframes nxCardIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
body.mk .auth-header h1 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem) !important; letter-spacing: -.04em; }
body.mk .auth-form .input-wrapper { border-radius: 14px; }
body.mk .btn-submit {
    border-radius: 999px !important; background: var(--nx-grad) !important; background-size: 160% 100% !important; border: 0 !important; color: #fff !important;
    box-shadow: 0 12px 32px rgba(106, 75, 255, .42) !important; font-weight: 700 !important; transition: transform .45s var(--nx-ease), box-shadow .45s var(--nx-ease), background-position .6s !important;
}
body.mk .btn-submit:hover { transform: translateY(-2px); background-position: 100% 0 !important; box-shadow: 0 18px 44px rgba(106, 75, 255, .55) !important; }
body.mk .role-card { border-radius: 24px !important; transition: transform .5s var(--nx-ease), box-shadow .5s var(--nx-ease), border-color .3s !important; }
body.mk .role-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(106, 75, 255, .18) !important; }
/* viñetas decorativas alrededor de la tarjeta (solo PC ancho) */
.nx-auth-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nx-auth-deco .nx-vg { position: absolute; width: 290px; }
.nx-auth-deco .nx-vg:nth-child(1) { left: max(2vw, calc(50% - 640px)); top: 22%; transform: rotate(-4deg); }
.nx-auth-deco .nx-vg:nth-child(2) { right: max(2vw, calc(50% - 640px)); top: 16%; transform: rotate(3deg); }
.nx-auth-deco .nx-vg:nth-child(3) { right: max(4vw, calc(50% - 600px)); bottom: 10%; transform: rotate(-2deg); }
@media (max-width: 1180px) { .nx-auth-deco { display: none; } }

/* 3.6 · Precios */
body.mk .pricing-tabs { border-radius: 999px !important; padding: 6px !important; background: var(--mk-bg-soft) !important; border: 1px solid var(--mk-line); box-shadow: 0 14px 40px rgba(26, 20, 51, .08); }
body.mk .pricing-tabs-pill { border-radius: 999px !important; background: var(--nx-grad) !important; box-shadow: 0 10px 26px rgba(106, 75, 255, .4) !important; transition: transform .6s var(--nx-ease) !important; }
body.mk .pricing-tab { border-radius: 999px !important; }
body.mk .pricing-grid { gap: clamp(1rem, 2.2vw, 1.6rem) !important; }
body.mk .pricing-card {
    position: relative; border-radius: var(--nx-r) !important; border: 1px solid var(--mk-line) !important; background: var(--mk-bg-soft) !important;
    box-shadow: 0 20px 60px rgba(26, 20, 51, .07) !important; transition: transform .6s var(--nx-ease), box-shadow .6s var(--nx-ease) !important;
}
body.mk .pricing-card:hover { transform: translateY(-8px); box-shadow: 0 40px 90px rgba(106, 75, 255, .16) !important; }
body.mk .pricing-card.popular, body.mk .pricing-card.featured { border: 0 !important; }
body.mk .pricing-card.popular::before, body.mk .pricing-card.featured::before {
    content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none; z-index: 0;
    background: conic-gradient(from var(--nx-ang, 0deg), #6a4bff, #00c2a8, #ff5f8f, #f5b301, #6a4bff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: nxSpin 6s linear infinite;
}
body.mk .plan-price { font-family: var(--mk-font-display); letter-spacing: -.04em; }
body.mk .mg-step { border-radius: 24px !important; }
body.mk .promo-code-box { border-radius: 20px !important; }

/* 3.7 · Legal: banda oscura arriba y el documento como una hoja flotante */
body.mk main.legal-page { max-width: none; margin: 0; padding: 0 var(--mk-pad-x) clamp(3rem, 7vw, 6rem); position: relative; isolation: isolate; display: flow-root; }
.nx-legal-band { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nx-hh) + 300px); z-index: -1; overflow: hidden; background: var(--nx-night); }
.nx-legal-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--mk-bg)); }
body.mk .legal-container {
    position: relative; max-width: 900px; margin: calc(var(--nx-hh) + 90px) auto 0; padding: clamp(1.6rem, 5vw, 4rem);
    border-radius: var(--nx-r-lg); background: var(--mk-bg-soft); border: 1px solid var(--mk-line);
    box-shadow: 0 40px 120px rgba(13, 11, 26, .18); animation: nxCardIn 1s var(--nx-ease) both .1s;
}
body.mk .legal-container h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem) !important; letter-spacing: -.04em; line-height: 1.05; }
body.mk .legal-container h2 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem) !important; margin-top: 2rem; }

/* 3.8 · Flotantes (WhatsApp, promo): por encima del contenido pero por debajo de la cabecera y los avisos */
body.mk .nx-progress { z-index: 1001; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PARTE 4 · VIÑETAS VIVAS — la agenda enseñando lo que hace, en bucle (CSS puro, 60 fps).
   Las crea mk-vignettes.js (aria-hidden, decorativas). Solo se animan cuando se ven (.on).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.nx-vg {
    --vg-bg: rgba(22, 18, 46, .82); --vg-line: rgba(255, 255, 255, .14); --vg-ink: #fff; --vg-soft: rgba(236, 234, 245, .66);
    --vg-card: rgba(255, 255, 255, .07); --vg-card-line: rgba(255, 255, 255, .10); --vg-d: 9s;
    position: relative; width: 300px; max-width: 100%; border-radius: 22px; padding: 13px 13px 14px; color: var(--vg-ink);
    background: var(--vg-bg); border: 1px solid var(--vg-line);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
    font: 500 13px/1.38 var(--mk-font, Inter, system-ui, sans-serif); letter-spacing: 0; text-align: left;
    contain: layout paint; user-select: none; pointer-events: none;
}
.nx-vg.light { --vg-bg: rgba(255, 255, 255, .94); --vg-line: rgba(26, 20, 51, .08); --vg-ink: #1a1433; --vg-soft: #6b6585; --vg-card: #f4f2fb; --vg-card-line: rgba(26, 20, 51, .06); box-shadow: 0 30px 80px rgba(26, 20, 51, .16); }
html[data-theme="dark"] .nx-vg.light { --vg-bg: rgba(22, 18, 46, .9); --vg-line: rgba(255, 255, 255, .12); --vg-ink: #fff; --vg-soft: rgba(236, 234, 245, .66); --vg-card: rgba(255, 255, 255, .07); --vg-card-line: rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.nx-vg *, .nx-vg *::before, .nx-vg *::after { box-sizing: border-box; }
.nx-vg:not(.on) *, .nx-vg:not(.on)::before, .nx-vg:not(.on)::after { animation-play-state: paused !important; }
.nx-vg b { font-weight: 700; }
.nx-vg-top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.nx-vg-top .ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-style: normal; background: var(--nx-grad); box-shadow: 0 6px 16px rgba(106, 75, 255, .35); }
.nx-vg-top b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-vg-top small { margin-left: auto; color: var(--vg-soft); font-size: 11px; white-space: nowrap; }
.nx-vg .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.nx-vg .pill.ok { background: rgba(34, 197, 94, .16); color: #22c55e; }
.nx-vg .pill.warn { background: rgba(245, 158, 11, .18); color: #f59e0b; }
.nx-vg .pill.vio { background: rgba(138, 114, 255, .18); color: #b3a3ff; }
.nx-vg.light .pill.vio { color: #5838e6; }
html[data-theme="dark"] .nx-vg.light .pill.vio { color: #b3a3ff; }
/* dedo que pulsa */
.nx-tap { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); opacity: 0; transform: scale(.4); animation: vgTap var(--vg-d) var(--nx-ease) infinite; animation-delay: var(--tap-at, 0s); }
.nx-vg.light .nx-tap { background: rgba(106, 75, 255, .75); box-shadow: 0 0 0 6px rgba(106, 75, 255, .2); }
@keyframes vgTap { 0%, 44% { opacity: 0; transform: scale(1.6); } 48% { opacity: 1; transform: scale(.9); } 52% { opacity: .9; transform: scale(.7); } 58%, 100% { opacity: 0; transform: scale(.5); } }

/* ── WhatsApp: recordatorio → «Confirmar» → cita confirmada ── */
.vg-wa .wa-chat { position: relative; border-radius: 16px; padding: 12px 10px 10px; min-height: 168px; background: #0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.025'/%3E%3C/svg%3E"); }
.vg-wa.light .wa-chat, .nx-vg.light.vg-wa .wa-chat { background-color: #efeae2; }
.vg-wa .wa-typing { display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: #202c33; animation: vgWaTyping var(--vg-d) infinite; }
.nx-vg.light.vg-wa .wa-typing { background: #fff; }
.vg-wa .wa-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: vgDot 1s ease-in-out infinite; }
.vg-wa .wa-typing i:nth-child(2) { animation-delay: .15s; } .vg-wa .wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vgDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes vgWaTyping { 0%, 11% { opacity: 1; transform: none; } 13%, 100% { opacity: 0; transform: scale(.8); } }
.vg-wa .wa-msg { position: absolute; left: 10px; right: 26px; top: 12px; padding: 8px 10px 16px; border-radius: 4px 12px 12px 12px; background: #202c33; color: #e9edef; font-size: 12.5px; line-height: 1.4; transform-origin: 0 0; animation: vgWaMsg var(--vg-d) var(--nx-ease) infinite; }
.nx-vg.light.vg-wa .wa-msg { background: #fff; color: #111b21; }
.vg-wa .wa-msg .t { position: absolute; right: 8px; bottom: 3px; font-size: 10px; color: #8696a0; }
.vg-wa .wa-msg .t em { color: #53bdeb; font-style: normal; }
@keyframes vgWaMsg { 0%, 12% { opacity: 0; transform: scale(.85) translateY(6px); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.vg-wa .wa-btns { position: absolute; left: 10px; right: 26px; top: 92px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; animation: vgWaBtns var(--vg-d) var(--nx-ease) infinite; }
.vg-wa .wa-b { text-align: center; padding: 7px 4px; border-radius: 10px; background: #202c33; color: #53bdeb; font-weight: 600; font-size: 12px; transition: none; }
.nx-vg.light.vg-wa .wa-b { background: #fff; color: #027eb5; }
.vg-wa .wa-b.ok { animation: vgWaPress var(--vg-d) infinite; }
@keyframes vgWaBtns { 0%, 20% { opacity: 0; transform: translateY(8px); } 24%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes vgWaPress { 0%, 47% { background: #202c33; color: #53bdeb; transform: none; } 49% { transform: scale(.95); } 52%, 92% { background: #00a884; color: #fff; transform: none; } 100% { background: #202c33; } }
.vg-wa .nx-tap { left: 22%; top: 96px; }
.vg-wa .wa-ok { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); animation: vgPop var(--vg-d) var(--nx-ease) infinite; animation-delay: 0s; }
@keyframes vgPop { 0%, 55% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); } 60%, 92% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 97%, 100% { opacity: 0; transform: translateX(-50%); } }

/* ── Factura: borrador → emitida con QR VERI*FACTU ── */
.vg-inv .inv-st { position: relative; margin-left: auto; width: 86px; height: 22px; }
.vg-inv .inv-st .pill { position: absolute; right: 0; top: 0; }
.vg-inv .s1 { animation: vgS1 var(--vg-d) infinite; } .vg-inv .s2 { animation: vgS2 var(--vg-d) var(--nx-ease) infinite; }
@keyframes vgS1 { 0%, 40% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vgS2 { 0%, 42% { opacity: 0; transform: scale(.7); } 47%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.vg-inv .inv-doc { position: relative; border-radius: 14px; padding: 10px 11px; background: var(--vg-card); border: 1px solid var(--vg-card-line); }
.vg-inv .inv-l, .vg-inv .inv-t { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--vg-soft); }
.vg-inv .inv-l b { color: var(--vg-ink); font-weight: 600; }
.vg-inv .inv-l .n { position: relative; display: inline-block; min-width: 86px; text-align: right; }
.vg-inv .inv-l .n span { position: absolute; right: 0; top: 0; }
.vg-inv .inv-t { border-top: 1px dashed var(--vg-card-line); margin-top: 4px; padding-top: 8px; color: var(--vg-ink); font-size: 13px; }
.vg-inv .inv-t b { font-family: var(--mk-font-display); font-size: 16px; }
.vg-inv .inv-qr { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.vg-inv .qr { display: grid; grid-template-columns: repeat(7, 7px); gap: 1px; padding: 4px; background: #fff; border-radius: 6px; }
.vg-inv .qr i { width: 7px; height: 7px; background: #111; border-radius: 1px; opacity: 0; transform: scale(.2); animation: vgQr var(--vg-d) var(--nx-ease) infinite; animation-delay: calc(var(--i) * 18ms); }
.vg-inv .qr i.w { background: transparent; }
@keyframes vgQr { 0%, 46% { opacity: 0; transform: scale(.2); } 52%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
.vg-inv .vf { font-family: var(--mk-font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; opacity: 0; animation: vgFade var(--vg-d) infinite; }
.vg-inv .vf small { display: block; font-family: var(--mk-font); font-weight: 500; letter-spacing: 0; color: var(--vg-soft); font-size: 10.5px; }
@keyframes vgFade { 0%, 52% { opacity: 0; transform: translateX(-6px); } 58%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* ── Consentimiento: firma que se dibuja ── */
.vg-sign .sg-doc { position: relative; border-radius: 14px; padding: 12px; background: #fff; color: #1a1433; min-height: 150px; }
.vg-sign .sg-doc .ln { display: block; height: 6px; border-radius: 3px; background: #ece9f6; margin: 0 0 7px; }
.vg-sign .sg-doc .ln:nth-child(2) { width: 88%; } .vg-sign .sg-doc .ln:nth-child(3) { width: 94%; } .vg-sign .sg-doc .ln:nth-child(4) { width: 60%; }
.vg-sign svg { position: absolute; left: 14px; right: 14px; bottom: 30px; width: calc(100% - 28px); height: 54px; overflow: visible; }
.vg-sign svg path { fill: none; stroke: #3b2bb3; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: vgSig var(--vg-d) cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes vgSig { 0%, 14% { stroke-dashoffset: 520; } 50%, 94% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.vg-sign .sg-line { position: absolute; left: 14px; right: 14px; bottom: 12px; border-top: 1px solid #d9d4ea; padding-top: 3px; font-size: 10.5px; color: #8a84a3; }
.vg-sign .sg-ok { display: flex; justify-content: center; margin-top: 10px; }
.vg-sign .sg-ok .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; }
@keyframes vgPop2 { 0%, 54% { opacity: 0; transform: translateY(8px) scale(.9); } 60%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* ── Estadísticas: barras que crecen ── */
.vg-stats .st-k { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.vg-stats .st-k > div { border-radius: 12px; padding: 7px 9px; background: var(--vg-card); border: 1px solid var(--vg-card-line); }
.vg-stats .st-k small { display: block; color: var(--vg-soft); font-size: 10.5px; }
.vg-stats .st-k b { font-family: var(--mk-font-display); font-size: 19px; letter-spacing: -.02em; }
.vg-stats .st-b { display: flex; align-items: flex-end; gap: 7px; height: 84px; padding: 0 2px; border-bottom: 1px solid var(--vg-card-line); }
.vg-stats .st-b i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8a72ff, #6a4bff); transform-origin: 50% 100%; transform: scaleY(0); animation: vgBar var(--vg-d) var(--nx-ease) infinite; animation-delay: calc(var(--i) * 90ms); }
.vg-stats .st-b i:last-child { background: linear-gradient(180deg, #2ee0c3, #00c2a8); }
@keyframes vgBar { 0%, 8% { transform: scaleY(0); } 26%, 90% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
.vg-stats .st-x { display: flex; justify-content: space-between; margin-top: 4px; color: var(--vg-soft); font-size: 10px; padding: 0 2px; }

/* ── Bono: una sesión se descuenta sola ── */
.vg-bono .bn-d { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 4px 0 12px; }
.vg-bono .bn-d i { aspect-ratio: 1; border-radius: 50%; background: var(--nx-grad); box-shadow: 0 3px 8px rgba(106, 75, 255, .35); }
.vg-bono .bn-d i:first-child { animation: vgUse var(--vg-d) var(--nx-ease) infinite; }
@keyframes vgUse { 0%, 38% { transform: none; opacity: 1; } 44% { transform: scale(1.35); } 50%, 94% { transform: scale(.8); opacity: .25; } 100% { opacity: 1; transform: none; } }
.vg-bono .bn-r { display: flex; align-items: center; justify-content: space-between; border-radius: 12px; padding: 8px 10px; background: var(--vg-card); border: 1px solid var(--vg-card-line); }
.vg-bono .bn-r span { color: var(--vg-soft); font-size: 12px; }
.vg-bono .bn-n { position: relative; display: inline-block; width: 34px; height: 26px; overflow: hidden; font-family: var(--mk-font-display); font-size: 22px; line-height: 26px; text-align: right; }
.vg-bono .bn-n span { position: absolute; right: 0; top: 0; }
.vg-bono .bn-n .a { animation: vgOut var(--vg-d) var(--nx-ease) infinite; } .vg-bono .bn-n .b { animation: vgIn var(--vg-d) var(--nx-ease) infinite; }
@keyframes vgOut { 0%, 44% { transform: none; opacity: 1; } 50%, 96% { transform: translateY(-100%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes vgIn { 0%, 44% { transform: translateY(100%); opacity: 0; } 50%, 96% { transform: none; opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
.vg-bono .bn-s { display: flex; justify-content: center; margin-top: 10px; }
.vg-bono .bn-s .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; }

/* ── Ficha: fecha de nacimiento → edad automática ── */
.vg-ficha .fc-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vg-ficha .fc-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #ff7b5c, #ff5f8f); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.vg-ficha .fc-h small { display: block; color: var(--vg-soft); font-size: 11px; }
.vg-ficha .fc-f { border-radius: 12px; padding: 7px 10px; background: var(--vg-card); border: 1px solid var(--vg-card-line); margin-bottom: 8px; }
.vg-ficha .fc-f small { display: block; color: var(--vg-soft); font-size: 10.5px; }
.vg-ficha .fc-ty { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; font-weight: 600; width: 0; animation: vgType var(--vg-d) steps(10, end) infinite; border-right: 2px solid transparent; }
@keyframes vgType { 0%, 10% { width: 0; border-color: #8a72ff; } 34% { width: 10ch; border-color: #8a72ff; } 36%, 94% { width: 10ch; border-color: transparent; } 98%, 100% { width: 0; } }
.vg-ficha .fc-age { display: flex; gap: 6px; align-items: center; }
.vg-ficha .fc-age .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; animation-delay: -1.1s; }
.vg-ficha .fc-lines { margin-top: 8px; }
.vg-ficha .fc-lines i { display: block; height: 5px; border-radius: 3px; background: var(--vg-card-line); margin-top: 6px; transform-origin: 0 50%; animation: vgLine var(--vg-d) var(--nx-ease) infinite; animation-delay: calc(var(--i) * 140ms); }
@keyframes vgLine { 0%, 50% { transform: scaleX(0); } 64%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* ── Agenda de centro: la semana de cada terapeuta ── */
.vg-team .tm-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vg-team .tm-c { position: relative; height: 128px; border-radius: 12px; background: var(--vg-card); border: 1px solid var(--vg-card-line); overflow: hidden; }
.vg-team .tm-c > span { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--c); }
.vg-team .tm-c i { position: absolute; left: 5px; right: 5px; top: var(--y); height: var(--h); border-radius: 7px; background: color-mix(in srgb, var(--c) 78%, transparent); opacity: 0; transform: translateY(-10px); animation: vgDrop var(--vg-d) var(--nx-ease) infinite; animation-delay: calc(var(--i) * 160ms); }
@keyframes vgDrop { 0%, 6% { opacity: 0; transform: translateY(-10px); } 14%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.vg-team .tm-r { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

/* ── Seguridad: PIN + 2FA + cifrado ── */
.vg-sec .sc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 12px; padding: 8px 10px; margin-bottom: 7px; background: var(--vg-card); border: 1px solid var(--vg-card-line); }
.vg-sec .sc-row > span { color: var(--vg-soft); font-size: 12px; }
.vg-sec .pin { display: flex; gap: 6px; }
.vg-sec .pin i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(138, 114, 255, .7); animation: vgPin var(--vg-d) infinite; animation-delay: calc(var(--i) * 300ms); }
@keyframes vgPin { 0%, 8% { background: transparent; } 12%, 92% { background: #8a72ff; } 100% { background: transparent; } }
.vg-sec .code { font-family: var(--mk-font-display); font-weight: 700; letter-spacing: .18em; font-size: 14px; }
.vg-sec .code i { font-style: normal; display: inline-block; opacity: 0; animation: vgFade2 var(--vg-d) infinite; animation-delay: calc(1.6s + var(--i) * 120ms); }
@keyframes vgFade2 { 0% { opacity: 0; transform: translateY(4px); } 4%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
.vg-sec .sc-ok { display: flex; justify-content: center; margin-top: 9px; }
.vg-sec .sc-ok .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; }

/* ── Espacio del paciente: pide hora en un hueco libre ── */
.vg-portal .pt-phone { border-radius: 18px; padding: 10px; background: var(--vg-card); border: 1px solid var(--vg-card-line); position: relative; }
.vg-portal .pt-d, .vg-portal .pt-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.vg-portal .pt-d span, .vg-portal .pt-s span { text-align: center; padding: 6px 2px; border-radius: 9px; font-size: 11.5px; font-weight: 600; background: rgba(138, 114, 255, .10); color: var(--vg-ink); border: 1px solid rgba(138, 114, 255, .18); }
.vg-portal .pt-d span.on { background: var(--nx-grad); color: #fff; border-color: transparent; }
.vg-portal .pt-s span.pick { animation: vgPick var(--vg-d) infinite; }
@keyframes vgPick { 0%, 47% { background: rgba(138, 114, 255, .10); color: inherit; } 51%, 94% { background: #00c2a8; color: #fff; } 100% { background: rgba(138, 114, 255, .10); } }
.vg-portal .nx-tap { left: 44%; top: 50px; }
.vg-portal .pt-ok { display: flex; justify-content: center; }
.vg-portal .pt-ok .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; }

/* ── Google Calendar (de la agenda a Google) ── */
.vg-gcal .gc-row { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 6px; }
.vg-gcal .gc-cal { position: relative; height: 104px; border-radius: 12px; background: var(--vg-card); border: 1px solid var(--vg-card-line); overflow: hidden; }
.vg-gcal .gc-cal > small { position: absolute; left: 7px; top: 5px; font-size: 10px; color: var(--vg-soft); font-weight: 600; }
.vg-gcal .gc-cal i { position: absolute; left: 7px; right: 7px; top: 34px; height: 30px; border-radius: 7px; }
.vg-gcal .gc-cal.a i { background: linear-gradient(135deg, #8a72ff, #6a4bff); }
.vg-gcal .gc-cal.b i { background: #4285f4; opacity: 0; transform: translateX(-16px); animation: vgSync var(--vg-d) var(--nx-ease) infinite; }
@keyframes vgSync { 0%, 36% { opacity: 0; transform: translateX(-16px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.vg-gcal .gc-ar { font-size: 20px; text-align: center; color: #8a72ff; animation: vgArrow var(--vg-d) infinite; }
@keyframes vgArrow { 0%, 26% { opacity: .3; transform: none; } 34% { opacity: 1; transform: translateX(4px); } 42%, 100% { opacity: .5; transform: none; } }
.vg-gcal .gc-ok { display: flex; justify-content: center; margin-top: 9px; }
.vg-gcal .gc-ok .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; }

/* ── Agenda semanal: citas que entran y un hueco que se libera ── */
.vg-week .wk-h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 5px; }
.vg-week .wk-h span { text-align: center; font-size: 10px; color: var(--vg-soft); font-weight: 600; }
.vg-week .wk-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 132px; }
.vg-week .wk-c { position: relative; border-radius: 9px; background: var(--vg-card); border: 1px solid var(--vg-card-line); overflow: hidden; }
.vg-week .wk-c i { position: absolute; left: 3px; right: 3px; top: var(--y); height: var(--h); border-radius: 6px; background: var(--c, #6a4bff); opacity: 0; transform: scale(.6); animation: vgPopIn var(--vg-d) var(--nx-ease) infinite; animation-delay: calc(var(--i) * 110ms); }
@keyframes vgPopIn { 0%, 5% { opacity: 0; transform: scale(.6); } 11%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.vg-week .wk-c i.cx { animation-name: vgFree; }
@keyframes vgFree { 0%, 5% { opacity: 0; transform: scale(.6); } 11%, 44% { opacity: 1; transform: none; background: var(--c); } 50%, 92% { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1.5px #22c55e; } 97%, 100% { opacity: 0; } }
.vg-week .wk-n { display: flex; justify-content: center; margin-top: 9px; }
.vg-week .wk-n .pill { animation: vgPop2 var(--vg-d) var(--nx-ease) infinite; }

/* colocación: sobre los visuales de funciones y del héroe */
.nx-vg-float { position: absolute; z-index: 5; }
body.mk .mk-feature-visual, body.mk .mk-hero-visual { position: relative; }
/* la viñeta asoma hacia el texto (nunca hacia el borde de la pantalla) */
.mk-feature-visual > .nx-vg-float { left: -9%; right: auto; bottom: -9%; transform: translateZ(40px); }
.mk-feature.reverse .mk-feature-visual > .nx-vg-float { left: auto; right: -9%; }
.mk-hero-visual > .nx-vg-float { left: -6%; bottom: -10%; }
.nx-vg-float .nx-vg { animation: nxVgIn 1s var(--nx-ease) both; }
@keyframes nxVgIn { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .mk-feature-visual > .nx-vg-float, .mk-feature.reverse .mk-feature-visual > .nx-vg-float { position: relative; left: auto; right: auto; bottom: auto; margin: -2.2rem auto 0; display: flex; justify-content: center; transform: none; }
    .mk-hero-visual > .nx-vg-float { position: relative; left: auto; bottom: auto; margin: -2rem auto 0; display: flex; justify-content: center; }
    .nx-vg { width: 280px; }
}
/* franja de viñetas (home): «la agenda, en directo» */
.nx-live { position: relative; }
.nx-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.nx-live-grid .nx-vg { width: 100%; }
.nx-live-grid > :nth-child(even) { margin-top: 2.4rem; }
@media (max-width: 1100px) { .nx-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .nx-live-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .nx-live-grid > :nth-child(even) { margin-top: 0; } .nx-live-grid .nx-vg { max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .nx-vg *, .nx-vg *::before, .nx-vg *::after { animation: none !important; opacity: 1 !important; transform: none !important; } .vg-sign svg path { stroke-dashoffset: 0 !important; } .vg-ficha .fc-ty { width: 10ch !important; } .vg-inv .s1, .vg-bono .bn-n .a { display: none; } }
/* viñetas dentro del bento */
.nx-mini-vg { order: -1; margin: 0 0 auto; display: flex; justify-content: flex-start; padding-bottom: 1.2rem; }
.nx-mini-vg .nx-vg { width: 100%; max-width: 320px; box-shadow: 0 24px 60px rgba(26, 20, 51, .16); }
body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1):has(.nx-mini-vg) { min-height: 300px; padding-right: min(46%, 350px) !important; position: relative; }
body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1) > .nx-mini-vg { position: absolute; right: clamp(1rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%) perspective(900px) rotateY(-8deg) rotateX(4deg); width: min(42%, 310px); padding: 0; }
/* el giro al pasar el ratón SOLO donde la viñeta va a la derecha centrada (translateY(-50%)): en móvil/tableta el :hover
   se queda «pegado» al tocar la tarjeta y subía media viñeta, que el overflow de la tarjeta cortaba (2026-10-01) */
@media (min-width: 1081px) { body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1):hover > .nx-mini-vg { transform: translateY(-50%) perspective(900px) rotateY(0) rotateX(0); } }
body.mk .mk-mini-grid > .mk-mini > .nx-mini-vg { transition: transform 1s var(--nx-ease); }
@media (max-width: 1080px) {
    body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1):has(.nx-mini-vg) { padding-right: clamp(1.4rem, 2.4vw, 2rem) !important; min-height: 0; }
    body.mk .mk-mini-grid > .mk-mini:nth-child(6n+1) > .nx-mini-vg { position: static; transform: none; width: 100%; padding-bottom: 1.2rem; }
}
/* decorado de los héroes «lite»: solo si hay sitio a los lados del título */
.nx-lite-deco { display: none; }
@media (min-width: 1500px) {
    .nx-lite-deco { display: block; }
    .nx-lite-deco .nx-vg { width: 260px; }
    .nx-lite-deco .nx-vg:nth-child(1) { left: 2.5vw; top: 34%; }
    .nx-lite-deco .nx-vg:nth-child(2) { right: 2.5vw; top: 26%; }
}
.auth-container:has(.auth-card-wide, .auth-card.wide) .nx-auth-deco { display: none; }
@media (min-width: 1640px) { .auth-container:has(.auth-card-wide, .auth-card.wide) .nx-auth-deco { display: block; } }
@media (max-width: 880px) {
    .nx-aside { display: none; }
    body.mk .article-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-left: var(--mk-pad-x); padding-right: var(--mk-pad-x); }
    body.mk .article-toc-wrap { display: none; }
    body.mk .article-cover { margin-left: var(--mk-pad-x); margin-right: var(--mk-pad-x); border-radius: 22px; }
    body.mk .article-hero-inner { padding-left: var(--mk-pad-x); padding-right: var(--mk-pad-x); }
}
@media (min-width: 881px) { .nx-inline-cta { display: none; } }

/* ─────────────── Rendimiento en móvil: sin desenfoques de fondo (caros en GPU pequeñas) ─────────────── */
@media (max-width: 760px) {
    .nx-vg, .nx-float, .nx-stage-caption, body.mk .blog-filter-btn, body.mk .mk-hero .mk-eyebrow, body.mk .nx-dark-first .mk-eyebrow,
    body.mk .mk-hero .button:not(.primary):not(.accent), body.mk .nx-dark-first .security-banner {
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    .nx-vg { --vg-bg: rgba(24, 20, 50, .96); }
    .nx-vg.light { --vg-bg: #fff; }
    html[data-theme="dark"] .nx-vg.light { --vg-bg: rgba(24, 20, 50, .96); }
    .nx-float { background: rgba(24, 20, 50, .9); }
}

/* ─────────────── Impresión (artículos y legales): papel limpio, sin decorado ni cabecera ─────────────── */
@media print {
    body.mk .topbar, .nx-progress, .nx-marquees, .nx-vg, .nx-vg-float, .nx-float, .nx-prefoot, .nx-wordmark, .nx-legal-band,
    .nx-aside, .nx-inline-cta, .nx-auth-deco, .nx-intro-mark, .nx-stage-caption, .promo50-sticky, .mk-wa-fab, #wa-support-btn { display: none !important; }
    body.mk, body.mk .mk-hero, body.mk .article-hero, body.mk .blog-hero, body.mk .nx-dark-first, body.mk .mk-footer-rich,
    body.mk #seguridad, body.mk .nx-dark-band, body.mk .mk-cta-banner { background: #fff !important; color: #111 !important; }
    body.mk .mk-hero::before, body.mk .article-hero::before, body.mk .blog-hero::before, body.mk .nx-dark-first::before,
    body.mk .mk-hero::after, body.mk .article-hero::after, body.mk .mk-footer-rich::after, body.mk .mk-footer-rich::before { display: none !important; }
    body.mk h1, body.mk h2, body.mk h3, body.mk .article-hero h1 { color: #111 !important; }
    body.mk .mk-grad-text, body.mk .nx-em { color: #111 !important; background: none !important; -webkit-text-fill-color: #111 !important; }
    body.mk .mk-reveal, body.mk .nx-stagger > *, .nx-split .nx-w > span { opacity: 1 !important; transform: none !important; filter: none !important; }
    body.mk .article-cover { margin-top: 0; box-shadow: none; }
    body.mk .article-layout { grid-template-columns: minmax(0, 1fr) !important; }
    body.mk .article-toc-wrap { display: none !important; }
    body.mk .legal-container { box-shadow: none; border: 0; margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PARTE 6 · Ajustes tras la revisión en un móvil real (2026-09-30 tarde)
   En Chrome Android había zonas en negro, contenido duplicado al hacer scroll y titulares borrosos:
   GPU saturada por desenfoques de fondo, grano con modo de fusión y desenfoques animados.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    /* efecto «cristal» en móvil con fondos translúcidos en vez de desenfoque real: el desenfoque de fondo
       (backdrop-filter) era lo que dejaba zonas en negro y capas repetidas al hacer scroll en Chrome Android */
    body.mk *, body.mk *::before, body.mk *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    body.mk .mk-stats { background: #fff !important; }
    html[data-theme="dark"] body.mk .mk-stats { background: #15122a !important; }
    .nx-stage-caption { background: rgba(20, 16, 42, .9); }
    /* la pieza con degradado del H1 entra solo con opacidad (sin desenfoque) */
    .nx-split .nx-w.nx-inl > span { filter: none !important; }
}

/* Paso suave de la última sección al pie: la noche «cae» en un degradado largo, sin línea dura */
body.mk .mk-footer-rich {
    background: linear-gradient(180deg, var(--mk-bg) 0, #d9d5ea 34px, #8f88b3 96px, #3a3460 170px, #1a1633 240px, var(--nx-night) 320px) !important;
    padding-top: calc(clamp(4rem, 8vw, 7rem) + 150px) !important;
}
html[data-theme="dark"] body.mk .mk-footer-rich { background: linear-gradient(180deg, var(--mk-bg) 0, var(--nx-night) 200px) !important; padding-top: calc(clamp(4rem, 8vw, 7rem) + 40px) !important; }
@media (max-width: 760px) { body.mk .mk-footer-rich { padding-top: calc(3rem + 150px) !important; } }

/* /subscribe/ y /precios/: las pestañas «Soy autónomo · Soy un centro» con aire respecto al héroe */
body.mk section#planes { padding-top: clamp(2.4rem, 4.2vw, 3.6rem) !important; }

/* tour pegajoso: el primero y el último no dejan medio viewport vacío */
body.mk .nx-story .mk-feature.nx-story-step { min-height: 72vh; }
body.mk .nx-story-texts > .nx-story-step:first-child { min-height: 58vh; padding-top: 0; }
body.mk .nx-story-texts > .nx-story-step:last-child { min-height: 62vh; padding-bottom: 0; }

/* Cámara del escenario 3D: al abrirse el portátil, acercamiento cinematográfico a la pantalla (JS) */
.nx-stage { --nx-z: 1.7; --nx-fill: .92; }   /* zoom máximo · parte del ancho que ocupan portátil + móvil */
@media (max-width: 1100px) { .nx-stage { --nx-z: 1.6; } }
@media (max-width: 760px) { .nx-stage { --nx-z: 1.5; --nx-fill: .95; } }
.nx-stage-media > picture, .nx-stage-media > video { transition: transform 1.8s cubic-bezier(.45, .05, .15, 1); }
.nx-stage.is-static .nx-stage-media > picture, .nx-stage.is-static .nx-stage-media > video { transition: none; }
/* si lo último antes del pie ya es oscuro (acceso, bandas oscuras), el pie empieza oscuro: sin banda clara */
body.mk .mk-footer-rich.nx-foot-dark { background: var(--nx-night) !important; padding-top: clamp(4rem, 8vw, 7rem) !important; }

/* Revelado con desenfoque solo en PC (en móvil entra igual, con fundido y desplazamiento, pero sin desenfoque) */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    body.mk .mk-reveal { filter: blur(8px); transition: opacity 1s var(--nx-ease), transform 1.1s var(--nx-ease), filter 1s var(--nx-ease); }
    body.mk .mk-reveal.revealed { filter: none; }
    body.mk .mk-hero .mk-reveal, body.mk .nx-dark-first .mk-reveal, body.mk .article-hero .mk-reveal, body.mk .blog-hero .mk-reveal { filter: none; }
}
/* Entrada suave de cada página (sustituye a las View Transitions, que congelaban /precios/ con sesión) */
@media (prefers-reduced-motion: no-preference) {
    body.mk > main { animation: nxPageIn .5s var(--nx-ease) both; }
    @keyframes nxPageIn { from { opacity: .01; } to { opacity: 1; } }
}
/* Home: «Crear cuenta» y «Guía de uso» siempre uno al lado del otro */
body.mk .mk-hero.nx-hero-stage .mk-hero-ctas { flex-wrap: nowrap; }
body.mk .mk-hero.nx-hero-stage .mk-hero-ctas > .button { flex: 0 1 auto; justify-content: center; text-align: center; }
@media (max-width: 520px) {
    body.mk .mk-hero.nx-hero-stage .mk-hero-ctas { gap: .55rem; }
    body.mk .mk-hero.nx-hero-stage .mk-hero-ctas > .button { flex: 1 1 0; padding: .85rem .7rem; font-size: .95rem; min-width: 0; }
}

/* Comparativa de planes en móvil: tabla de 880 px en una ventana de 358 → solo se veía media columna. Ahora de borde a
   borde, etiquetas fijas más estrechas y columnas compactas (se ven ~3 planes a la vez) + aviso «desliza» (JS). */
@media (max-width: 760px) {
    body.mk .cmp-wrap { margin-left: calc(-1 * var(--mk-pad-x, 16px)); margin-right: calc(-1 * var(--mk-pad-x, 16px)); border-radius: 0; border-left: 0; border-right: 0; }
    body.mk table.cmp { min-width: 0; width: max-content; font-size: .8rem; }
    body.mk table.cmp th, body.mk table.cmp td { padding: .6rem .5rem; min-width: 94px; }
    body.mk table.cmp tr > :first-child { min-width: 0; width: 112px; max-width: 118px; padding-left: var(--mk-pad-x, 16px); font-size: .78rem; line-height: 1.3; box-shadow: 8px 0 12px -10px rgba(26, 20, 51, .35); }
    body.mk table.cmp .cmp-plan { font-size: .9rem; }
    body.mk table.cmp .cmp-price { font-size: .74rem; }
}
.nx-swipe-hint { display: none; }
@media (max-width: 760px) {
    .nx-swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin: .9rem 0 -.6rem; font-size: .8rem; font-weight: 600; color: var(--mk-ink-soft); }
    .nx-swipe-hint::after { content: "→"; animation: nxSwipe 1.6s ease-in-out infinite; }
}
@keyframes nxSwipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .nx-swipe-hint::after { animation: none; } }


/* ═══════════════════════════════════════════════════════════════════════════════════════
   PARTE 7 · RENDERS 3D DE LAS FUNCIONES (#tour de la home, 2026-10-01)
   Vídeo cuadrado de Blender (mismo estudio que el héroe) que se reproduce al llegar; al pararse la cámara, la web
   pone ENCIMA los textos nítidos y traducidos (.nx-fx-ov, homografía → matrix3d, maquetado en cqw = % de la hoja).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
body.mk .mk-feature-visual:has(> .nx-fx) { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.nx-fx {
    position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
    background: #0d0b1a; border-radius: 28px; contain: layout paint;
}
body.mk .mk-feature-visual > .nx-fx { border-radius: 28px !important; box-shadow: 0 46px 110px rgba(26, 20, 51, .30), 0 0 0 1px rgba(255, 255, 255, .06) !important; }
.nx-fx > picture, .nx-fx > picture img, .nx-fx > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-fx > video { opacity: 0; transition: opacity .25s linear; }
.nx-fx.is-playing > video, .nx-fx.is-done:not(.is-static) > video { opacity: 1; }
/* textos sobre la hoja: capa proyectada (su ancho CSS = ancho visible × 2–3, ver mk-next.js) */
.nx-fx-ov {
    position: absolute; left: 0; top: 0; transform-origin: 0 0; container-type: inline-size; pointer-events: none;
    font-family: var(--mk-font-display); color: #1a1433; -webkit-font-smoothing: antialiased; line-height: 1.12;
}
.nx-fx-ov > * { position: absolute; opacity: 0; transform: translateY(1.4cqw); transition: opacity .55s var(--nx-ease), transform .7s var(--nx-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.nx-fx.is-done .nx-fx-ov > * { opacity: 1; transform: none; }
/* factura (hoja A5 148 × 210 mm: x% = mm/148, y% = mm/210; 1 mm = .676cqw) */
.fx-inv .k { left: 22.97%; top: 3.9%; font-size: 5.3cqw; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.fx-inv .n { left: 22.97%; top: 7.4%; font-size: 7.6cqw; font-weight: 700; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.fx-inv .pl { left: 6.76%; top: 19.4%; font-size: 5.3cqw; font-weight: 500; color: #6b6590; }
.fx-inv .pn { left: 6.76%; top: 23.2%; font-size: 6.4cqw; font-weight: 700; }
.fx-inv .ln { left: 6.76%; right: 6.76%; top: 34.3%; display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; font-size: 5.74cqw; font-weight: 500; }
.fx-inv .ln b { font-weight: 700; white-space: nowrap; }
.fx-inv .nt { left: 6.76%; top: 46.4%; font-size: 5.3cqw; color: #6b6590; white-space: nowrap; }
.fx-inv .tt { left: 10.8%; right: 10.8%; top: 51.43%; height: 11.43%; display: flex; justify-content: space-between; align-items: center; }
.fx-inv .tt span { font-size: 5.74cqw; font-weight: 600; }
.fx-inv .tt b { font-size: 7.6cqw; font-weight: 700; color: #00a38d; letter-spacing: -.01em; }
.fx-inv .st { left: 6.76%; top: 67.2%; width: 57.4%; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqw; font-size: 5.3cqw; }
.fx-inv .st .pill { display: inline-flex; align-items: center; padding: .3em .62em; border-radius: 999px; background: #e4fbf6; color: #00866f; font-weight: 700; box-shadow: 0 0 0 .25cqw rgba(0, 194, 168, .45) inset; white-space: nowrap; }
.fx-inv .st .h { color: #6b6590; font-weight: 500; white-space: nowrap; font-size: 4.9cqw; }
.fx-inv .st .h b { color: #1a1433; font-weight: 700; letter-spacing: .02em; }
/* tarjeta del mensaje de WhatsApp (150 × 112 mm: x% = mm/150, y% = mm/112; 1 mm = .667cqw) */
.fx-wa .n { left: 17.33%; top: 4.2%; font-size: 4.65cqw; font-weight: 700; white-space: nowrap; }
.fx-wa .s { left: 17.33%; top: 10.6%; font-size: 4.2cqw; font-weight: 500; color: #00866f; white-space: nowrap; }
.fx-wa .m { left: 5.33%; right: 5.33%; top: 24.6%; font-size: 4.65cqw; font-weight: 500; line-height: 1.32; color: #1f1a3a; font-family: var(--mk-font); }
.fx-wa .t { right: 5.33%; top: 59.2%; font-size: 4.3cqw; color: #8e89ad; white-space: nowrap; }
.fx-wa .t i { font-style: normal; color: #34b7f1; letter-spacing: -.12em; margin-left: .15em; }
.fx-wa .b { top: 71.43%; height: 18.75%; width: 43.33%; display: flex; align-items: center; justify-content: center; font-size: 4.65cqw; font-weight: 700; white-space: nowrap; }
.fx-wa .b.ok { left: 5.33%; color: #fff; }
.fx-wa .b.no { left: 51.33%; color: #3c3560; }
/* panel de estadísticas (200 × 150 mm: x% = mm/200, y% = mm/150; 1 mm = .5cqw) */
.fx-st .tt { left: 12.5%; top: 5.1%; font-size: 4.3cqw; font-weight: 700; white-space: nowrap; }
.fx-st .kp { top: 16.67%; width: 30%; height: 18.67%; display: flex; flex-direction: column; justify-content: center; padding-left: 3cqw; gap: .45cqw; }
.fx-st .kp0 { left: 4.5%; } .fx-st .kp1 { left: 35%; } .fx-st .kp2 { left: 65.5%; }
.fx-st .kp span { font-size: 3.7cqw; font-weight: 600; color: #6b6590; white-space: nowrap; }
.fx-st .kp b { font-size: 6cqw; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-st .mo { top: 92.3%; transform: translate(-50%, 1.4cqw); font-size: 3.8cqw; font-weight: 700; color: #6b6590; }
.fx-st .mo.on { color: #00a38d; font-weight: 800; }
.fx-st.nx-fx-ov > .mo { transform: translate(-50%, 1.4cqw); }
.nx-fx.is-done .fx-st.nx-fx-ov > .mo { transform: translate(-50%, 0); }
/* tablero semanal (200 × 150 mm: x% = mm/200, y% = mm/150; 1 mm = .5cqw) */
.fx-ag .dy { top: 6.67%; font-size: 3.9cqw; font-weight: 700; color: #3c3560; white-space: nowrap; }
.fx-ag .dy.on { color: #fff; }
.fx-ag.nx-fx-ov > .dy { transform: translate(-50%, calc(-50% + 1.4cqw)); }
.nx-fx.is-done .fx-ag.nx-fx-ov > .dy { transform: translate(-50%, -50%); }
.fx-ag .hr { right: 89.75%; font-size: 3.3cqw; font-weight: 600; color: #8e89ad; white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: .5cqw; }
.fx-ag .tl { display: flex; align-items: center; padding-left: 1.5cqw; font-size: 3.7cqw; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-shadow: 0 .2cqw .5cqw rgba(26, 20, 51, .28); }
/* ficha del paciente (160 × 110 mm: x% = mm/160, y% = mm/110; 1 mm = .625cqw) */
.fx-fi .n { left: 25%; top: 10.9%; font-size: 6.6cqw; font-weight: 700; white-space: nowrap; }
.fx-fi .s { left: 25%; top: 22.7%; font-size: 5.2cqw; font-weight: 500; color: #6b6590; white-space: nowrap; }
.fx-fi .r { left: 6.25%; width: 88.75%; height: 12.73%; display: flex; justify-content: space-between; align-items: center; padding: 0 3cqw; }
.fx-fi .r0 { top: 40%; } .fx-fi .r1 { top: 55.45%; } .fx-fi .r2 { top: 70.9%; }
.fx-fi .r span { font-size: 5.2cqw; font-weight: 500; color: #6b6590; white-space: nowrap; }
.fx-fi .r b { font-size: 5.3cqw; font-weight: 700; white-space: nowrap; }
.fx-fi .c { left: 6.25%; top: 86%; font-size: 5.2cqw; font-weight: 700; color: #00866f; background: #e4fbf6; border-radius: 999px; padding: .22em .65em; box-shadow: 0 0 0 .2cqw rgba(0, 194, 168, .45) inset; white-space: nowrap; }
/* consentimiento (105 × 148 mm: 1 mm = .952cqw) */
.fx-doc .dt { left: 9.5%; top: 7.4%; width: 81%; font-size: 9.6cqw; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
/* tour pegajoso (PC): escenario cuadrado que cabe en la ventana */
.nx-story-sticky:has(.nx-fx) { --sq: min(100cqw, calc(100vh - var(--nx-hh) - 150px)); --sh: calc(var(--sq) + 64px); }
body.mk .nx-story-sticky > .mk-feature-visual:has(> .nx-fx) { right: auto; width: var(--sq); left: calc((100cqw - var(--sq)) / 2); }
body.mk .nx-story-sticky > .mk-feature-visual > .nx-fx { max-width: none; }
@media (max-width: 760px) { .nx-fx { border-radius: 22px; } body.mk .mk-feature-visual > .nx-fx { border-radius: 22px !important; } }
@media (prefers-reduced-motion: reduce) { .nx-fx-ov > * { transition: none; } }
@media print { .nx-fx > video, .nx-fx-ov { display: none; } }
/* seguridad (home): «escáner» de luz que se queda en mitad de la pantalla al recorrer la sección; cada tarjeta se
   ilumina al cruzarlo (mk-next.js 12c). Sticky = sin JS por fotograma; #seguridad tiene overflow: clip (no rompe sticky). */
.nx-scan { position: sticky; top: 50vh; height: 0; z-index: 4; pointer-events: none; }
.nx-scan i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent 0, rgba(46, 224, 195, .25) 12%, #2ee0c3 50%, rgba(46, 224, 195, .25) 88%, transparent 100%); box-shadow: 0 0 26px 4px rgba(46, 224, 195, .42); }
.nx-scan i::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 90px; background: linear-gradient(to top, rgba(46, 224, 195, .13), transparent); }
body.mk #seguridad .mk-mini { transition: transform .7s var(--nx-ease), box-shadow 1s var(--nx-ease) !important; }
body.mk #seguridad .mk-mini.is-scanned { box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(46, 224, 195, .5), 0 0 44px rgba(46, 224, 195, .18) !important; }
body.mk #seguridad .mk-mini .mk-mini-icon { transition: transform .7s var(--nx-ease), box-shadow 1s var(--nx-ease); }
body.mk #seguridad .mk-mini.is-scanned .mk-mini-icon { box-shadow: 0 0 0 4px rgba(46, 224, 195, .16), 0 14px 34px rgba(46, 224, 195, .35); }
@media print { .nx-scan { display: none; } }