/* ============================================================
   Alumne Flex — Mockups de producto (M-*)
   Animación por máquina de estados: el JS solo cambia data-step
   en el root; todo el aspecto se resuelve aquí con [data-step].
   ============================================================ */

/* ---------- marco común ---------- */
.af-m{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);background:var(--surface-card)}
.af-m__bar{background:var(--gradient-ink);padding:12px 16px;display:flex;align-items:center;gap:8px}
.af-m__dot{width:9px;height:9px;border-radius:999px;opacity:.85}
.af-m__path{font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.5);margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.af-m__body{padding:18px;background:var(--surface-sunken);display:flex;flex-direction:column;gap:14px}
.af-m--flat{box-shadow:var(--shadow-md);border-radius:var(--radius-lg)}
.af-m--flat .af-m__body{padding:16px;background:var(--surface-card)}
.af-m--bare{border:none;box-shadow:none;background:transparent;overflow:visible}
.af-m--bare .af-m__body{padding:0;background:transparent}

/* piezas compartidas */
.af-prog{display:block;height:7px;border-radius:999px;background:var(--sand-200);overflow:hidden}
.af-prog__fill{display:block;height:100%;border-radius:999px;background:var(--gradient-brand)}
.af-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.af-pill--ok{background:var(--green-100);color:var(--green-700)}
.af-pill--draft{background:var(--amber-100);color:var(--amber-700)}
.af-new-pill{display:inline-flex;align-items:center;font-size:10px;font-weight:700;color:var(--green-700);background:var(--green-100);border-radius:999px;padding:2px 8px;margin-left:7px}
.af-m-spin{width:22px;height:22px;border:2.5px solid var(--sand-200);border-top-color:var(--orange-500);border-radius:50%;animation:af-spin .7s linear infinite}
@keyframes af-spin{to{transform:rotate(360deg)}}
@keyframes af-pop{from{opacity:0;transform:scale(.94) translateY(6px)}}
@keyframes af-fade{from{opacity:0}}

/* ============================================================
   M-DASH
   ============================================================ */
.af-m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.af-m-stat{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px}
.af-m-stat__top{display:flex;align-items:center;justify-content:space-between}
.af-m-stat__ic{width:30px;height:30px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--sand-100);color:var(--navy-600)}
.af-m-stat__ic i{width:15px;height:15px}
.af-m-stat__ic--teal{background:var(--teal-50);color:var(--teal-700)}
.af-m-delta{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--green-700);background:var(--green-100);border-radius:999px;padding:3px 8px}
.af-m-delta i{width:12px;height:12px}
.af-m-stat__v{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--text-strong);letter-spacing:var(--tracking-display);margin-top:10px}
.af-m-stat__l{font-size:12px;color:var(--text-muted)}
.af-m-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.af-m-panel{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px}
.af-m-panel__t{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-strong)}
.af-m-panel__s{font-size:12px;color:var(--text-muted);margin-bottom:6px}
.af-m-spark{width:100%;height:96px;display:block}
.af-m-spark__line{stroke-dasharray:640;stroke-dashoffset:640;animation:af-draw 2.4s var(--ease-out) forwards}
.af-m-spark__area{opacity:0;animation:af-fade .9s var(--ease-out) 1.2s forwards}
@keyframes af-draw{to{stroke-dashoffset:0}}
.af-m-ai{background:var(--gradient-ink);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;color:#fff}
.af-m-ai__badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--violet-100);background:rgba(124,92,255,.22);border-radius:var(--radius-pill);padding:4px 10px}
.af-m-ai__badge i{width:13px;height:13px}
.af-m-ai__t{font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;margin-top:12px}
.af-m-ai__d{font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.5;margin:6px 0 12px}
.af-m-ai__cta{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;font-size:12px;font-weight:600;background:var(--action-primary);color:#fff;border-radius:var(--radius-sm);padding:7px 12px}
.af-m-ai__cta i{width:13px;height:13px}
.af-m-table{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.af-m-row{display:grid;grid-template-columns:1.6fr 1fr 1.2fr auto;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.af-m-row:last-child{border-bottom:none}
.af-m-row__name{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--text-strong)}
.af-m-row__ic{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--sand-100);color:var(--navy-600);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.af-m-row__ic i{width:14px;height:14px}
.af-m-row__cat{color:var(--text-muted)}

/* ============================================================
   M-CERT · app frame + diplomas
   ============================================================ */
.af-m-app{display:flex;height:470px;overflow:hidden;text-align:left;background:var(--sand-0);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}
.af-m-app__side{width:186px;flex:none;background:var(--sand-0);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:16px 12px}
.af-m-app__logo{height:22px;width:auto;align-self:flex-start;margin:0 0 16px 6px}
.af-m-nav{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--text-body)}
.af-m-nav__i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.af-m-nav__i i{width:15px;height:15px}
.af-m-nav__i.is-on{background:var(--surface-brand-soft);color:var(--orange-700);font-weight:600}
.af-m-user{margin-top:auto;border-top:1px solid var(--border-subtle);padding-top:12px;display:flex;align-items:center;gap:9px}
.af-m-user__av{width:28px;height:28px;border-radius:999px;background:var(--surface-brand-soft);color:var(--orange-700);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.af-m-user b{display:block;font-size:12px;color:var(--text-strong)}
.af-m-user i{display:block;font-size:10.5px;color:var(--text-muted);font-style:normal}
.af-m-app__main{flex:1;background:var(--sand-50);display:flex;flex-direction:column;min-width:0}
.af-m-app__top{background:var(--sand-0);border-bottom:1px solid var(--border-subtle);padding:10px 18px;display:flex;align-items:center;gap:10px}
.af-m-crumb{font-size:12px;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}
.af-m-crumb i{width:13px;height:13px}
.af-m-search{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--sand-50);border:1px solid var(--border-subtle);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--text-subtle)}
.af-m-search i{width:13px;height:13px}
.af-m-chip{font-size:12px;color:var(--text-body);border:1px solid var(--border-subtle);border-radius:10px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.af-m-chip i{width:13px;height:13px}
.af-m-bell i{width:16px;height:16px;color:var(--text-body)}
.af-m-app__page{padding:20px 22px;overflow:hidden}
.af-m-page__head{display:flex;align-items:flex-start;gap:12px}
.af-m-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--sand-500)}
.af-m-title{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--text-strong);margin-top:4px}
.af-m-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.af-m-btn{margin-left:auto;background:var(--action-primary);color:#fff;font-size:12.5px;font-weight:600;border-radius:10px;padding:9px 15px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:var(--shadow-sm)}
.af-m-btn i{width:14px;height:14px}
.af-m-cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}

/* diploma */
.af-diploma{background:var(--sand-0);border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.af-diploma__sheet{background:radial-gradient(circle at 50% 45%,#F6EFF7 0%,#FDFBFD 65%);border-bottom:1px solid var(--border-subtle);padding:15px 13px;text-align:center}
.af-diploma__logo{height:13px;opacity:.9}
.af-diploma__name{font-family:var(--font-display);font-size:12.5px;font-weight:700;color:#1a1a2e;margin-top:8px}
.af-diploma__txt{font-size:7.5px;color:#6b6b80;max-width:24ch;margin:5px auto 0;line-height:1.5}
.af-diploma__sign{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;padding:0 6px;font-size:6.5px;color:#6b6b80}
.af-diploma__sign>span:not(.af-diploma__qr){border-top:1px solid #cfcfe0;padding-top:3px}
.af-diploma__qr{width:16px;height:16px;background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0);border:2px solid #fff;outline:1px solid #ddd;flex-shrink:0}
.af-diploma__foot{padding:11px 13px}
.af-diploma__cap{display:flex;align-items:center;font-size:12.5px;font-weight:700;color:var(--text-strong)}
.af-diploma__meta{font-size:10.5px;color:var(--text-muted);margin-top:6px}

/* slots animados */
.af-m-slot{position:relative;min-height:196px}
.af-m-slot>*{position:absolute;inset:0;opacity:0;pointer-events:none}
.af-m-slot__dashed{border:1.5px dashed var(--border-default);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-subtle);font-size:12px}
.af-m-slot__dashed i{width:18px;height:18px}
.af-m-slot__gen{background:var(--sand-0);border:1px solid var(--border-subtle);border-radius:14px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;font-size:11.5px;color:var(--text-muted)}
.af-m-slot .af-diploma{position:absolute;inset:0}
/* máquina de estados de M-CERT */
.af-m--cert[data-step="0"] .af-m-slot__dashed,
.af-m--cert[data-step="4"] .af-m-slot__dashed{opacity:1}
.af-m--cert[data-step="1"] .af-m-slot--a .af-m-slot__gen{opacity:1}
.af-m--cert[data-step="1"] .af-m-slot--b .af-m-slot__dashed{opacity:1}
.af-m--cert[data-step="2"] .af-m-slot--a .af-diploma{opacity:1;animation:af-pop .45s var(--ease-out)}
.af-m--cert[data-step="2"] .af-m-slot--b .af-m-slot__gen{opacity:1}
.af-m--cert[data-step="3"] .af-m-slot--a .af-diploma,
.af-m--cert[data-step="3"] .af-m-slot--b .af-diploma{opacity:1}
.af-m--cert[data-step="3"] .af-m-slot--b .af-diploma{animation:af-pop .45s var(--ease-out)}
.af-m-verify{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--sand-0);border:1px solid var(--border-subtle);border-radius:12px;padding:12px 14px;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.af-m--cert[data-step="3"] .af-m-verify,.af-m--cert[data-step="4"] .af-m-verify{opacity:1}
.af-m-verify__qr{width:34px;height:34px;flex-shrink:0;background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0);border:3px solid #fff;outline:1px solid var(--border-subtle);border-radius:4px}
.af-m-verify__txt b{display:block;font-size:12.5px;color:var(--text-strong)}
.af-m-verify__txt i{display:block;font-size:11.5px;color:var(--text-muted);font-style:normal;margin-top:2px}
.af-m-verify__ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--green-700);background:var(--green-100);border-radius:999px;padding:5px 11px;white-space:nowrap}
.af-m-verify__ok i{width:14px;height:14px}

/* ============================================================
   M-PLAYER
   ============================================================ */
.af-m-player{display:grid;grid-template-columns:200px 1fr;gap:14px;min-height:280px}
.af-m-player__side{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px}
.af-m-player__course{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-strong);line-height:1.3}
.af-m-player__prog{display:flex;align-items:center;gap:8px;margin:10px 0 12px;font-size:11px;color:var(--text-muted)}
.af-m-player__prog .af-prog{flex:1}
.af-m-player__list{display:flex;flex-direction:column;gap:3px}
.af-m-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;font-size:11.5px;color:var(--text-body);transition:background var(--dur-base)}
.af-m-item__ic{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--sand-100);color:var(--navy-600);flex-shrink:0}
.af-m-item__ic i{width:12px;height:12px}
.af-m-item__t{line-height:1.25}
.af-m-item__t i{display:block;font-size:10px;color:var(--text-subtle);font-style:normal}
.af-m-item--done .af-m-item__ic{background:var(--green-100);color:var(--green-700)}
.af-m-item--lock{opacity:.55}
.af-m-player__stage{position:relative;border-radius:var(--radius-md);overflow:hidden;min-height:240px}
.af-m-player__stage>*{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.af-m-video{background:var(--gradient-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.af-m-video__play{width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.af-m-video__play i{width:24px;height:24px}
.af-m-video__label{font-size:13px;color:rgba(255,255,255,.8)}
.af-m-video__bar{position:absolute;left:16px;right:16px;bottom:14px;height:5px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.af-m-video__seek{display:block;height:100%;width:0;background:var(--orange-400);border-radius:999px}
.af-m-doc{background:var(--sand-0);border:1px solid var(--border-subtle);padding:26px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.af-m-doc__l{height:10px;border-radius:5px;background:var(--sand-200)}
.af-m-doc__l--s{width:55%}
.af-m-scorm{background:var(--surface-accent-soft);border:1px solid var(--teal-100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--teal-700);font-size:13px;font-weight:600}
.af-m-scorm i{width:30px;height:30px}
.af-m--player[data-step="0"] .af-m-video{opacity:1}
.af-m--player[data-step="0"] .af-m-video__seek{width:64%;transition:width 2.4s linear}
.af-m--player[data-step="1"] .af-m-doc{opacity:1}
.af-m--player[data-step="2"] .af-m-scorm{opacity:1}
.af-m--player[data-step="1"] .af-m-item[data-i="3"],
.af-m--player[data-step="2"] .af-m-item[data-i="4"]{background:var(--surface-brand-soft);color:var(--orange-700);font-weight:600}
.af-m--player[data-step="0"] .af-m-item[data-i="2"]{background:var(--surface-brand-soft);color:var(--orange-700);font-weight:600}

/* ============================================================
   M-GAMI
   ============================================================ */
.af-m-gami{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px}
.af-m-gami__streak{display:flex;align-items:center;gap:10px}
.af-m-flame{width:42px;height:42px;border-radius:13px;background:var(--surface-brand-soft);color:var(--orange-600);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.af-m-flame i,.af-m-flame svg{width:21px;height:21px}
.af-m--gami[data-step="1"] .af-m-flame,.af-m--gami[data-step="3"] .af-m-flame{animation:af-beat .6s var(--ease-out)}
@keyframes af-beat{50%{transform:scale(1.16)}}
.af-m-gami__n{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--text-strong);line-height:1}
.af-m-gami__l{font-size:11.5px;color:var(--text-muted);margin-top:3px}
.af-m-gami__goal-t{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:8px}
.af-m-gami__goal{text-align:center}
.af-m-ring{position:relative;width:58px;height:58px;margin:0 auto}
.af-m-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.af-m-ring circle{fill:none;stroke-width:5}
.af-m-ring__bg{stroke:var(--sand-200)}
.af-m-ring__fg{stroke:var(--teal-500);stroke-linecap:round;stroke-dasharray:107;stroke-dashoffset:107;transition:stroke-dashoffset 1.2s var(--ease-out)}
.af-m--gami[data-step="1"] .af-m-ring__fg,.af-m--gami[data-step="2"] .af-m-ring__fg,.af-m--gami[data-step="3"] .af-m-ring__fg{stroke-dashoffset:21}
.af-m-ring b{position:absolute;inset:0;display:grid;place-content:center;font-size:13px;font-weight:700;color:var(--text-strong)}
.af-m-medals{display:flex;gap:6px}
.af-m-medal{width:29px;height:29px;border-radius:9px;background:var(--sand-100);color:var(--sand-400);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-base),color var(--dur-base),transform var(--dur-base)}
.af-m-medal i,.af-m-medal svg{width:15px;height:15px}
.af-m--gami[data-step="2"] .af-m-medal[data-i="0"],.af-m--gami[data-step="2"] .af-m-medal[data-i="1"],
.af-m--gami[data-step="3"] .af-m-medal[data-i="0"],.af-m--gami[data-step="3"] .af-m-medal[data-i="1"],
.af-m--gami[data-step="3"] .af-m-medal[data-i="2"]{background:var(--gradient-brand);color:#fff;transform:translateY(-2px)}
.af-m-confetti{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:var(--radius-lg);overflow:hidden}
.af-m--gami[data-step="3"] .af-m-confetti{opacity:1}
.af-m-confetti i{position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;opacity:0}
.af-m--gami[data-step="3"] .af-m-confetti i{animation:af-conf 1.6s ease-in forwards}
@keyframes af-conf{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(190px) rotate(300deg)}}
.af-m-confetti i:nth-child(3n){background:var(--orange-500)}
.af-m-confetti i:nth-child(3n+1){background:var(--teal-500)}
.af-m-confetti i:nth-child(3n+2){background:var(--amber-500)}
.af-m-confetti i:nth-child(1){left:6%;animation-delay:0s}.af-m-confetti i:nth-child(2){left:14%;animation-delay:.1s}
.af-m-confetti i:nth-child(3){left:22%;animation-delay:.22s}.af-m-confetti i:nth-child(4){left:30%;animation-delay:.06s}
.af-m-confetti i:nth-child(5){left:38%;animation-delay:.3s}.af-m-confetti i:nth-child(6){left:46%;animation-delay:.16s}
.af-m-confetti i:nth-child(7){left:54%;animation-delay:.26s}.af-m-confetti i:nth-child(8){left:62%;animation-delay:.04s}
.af-m-confetti i:nth-child(9){left:70%;animation-delay:.2s}.af-m-confetti i:nth-child(10){left:78%;animation-delay:.12s}
.af-m-confetti i:nth-child(11){left:86%;animation-delay:.28s}.af-m-confetti i:nth-child(12){left:92%;animation-delay:.08s}
.af-m-confetti i:nth-child(13){left:50%;animation-delay:.34s}.af-m-confetti i:nth-child(14){left:18%;animation-delay:.38s}
.af-m-confetti__msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;background:var(--navy-800);color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:9px 18px;box-shadow:var(--shadow-lg);opacity:0}
.af-m--gami[data-step="3"] .af-m-confetti__msg{opacity:1;animation:af-pop .5s var(--ease-out)}
.af-m-confetti__msg i{width:16px;height:16px;position:static;background:none;border-radius:0}

/* ============================================================
   M-DRIP
   ============================================================ */
.af-m-drip{display:flex;flex-direction:column;gap:10px}
.af-m-drip__mod{display:flex;align-items:center;gap:12px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px}
.af-m-drip__ic{width:34px;height:34px;border-radius:10px;background:var(--sand-100);color:var(--sand-500);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.af-m-drip__ic i{width:16px;height:16px}
.af-m-drip__mod.is-open .af-m-drip__ic{background:var(--green-100);color:var(--green-700)}
.af-m-drip__mod b{display:block;font-size:13px;color:var(--text-strong)}
.af-m-drip__mod i{display:block;font-size:11.5px;color:var(--text-muted);font-style:normal;margin-top:2px}
.af-m-drip__now{display:none !important;color:var(--green-700) !important;font-weight:600}
.af-m--drip[data-step="1"] .af-m-drip__mod--target{border-color:var(--teal-300);box-shadow:var(--ring-accent)}
.af-m--drip[data-step="1"] .af-m-drip__mod--target .af-m-drip__ic{background:var(--teal-50);color:var(--teal-700)}
.af-m--drip[data-step="1"] .af-m-drip__when{display:none !important}
.af-m--drip[data-step="1"] .af-m-drip__now{display:block !important}

/* ============================================================
   M-CAL
   ============================================================ */
.af-m-cal{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px}
.af-m-cal__head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-strong);margin-bottom:10px}
.af-m-cal__views{display:flex;gap:4px}
.af-m-cal__views i{font-style:normal;font-size:11px;font-weight:600;color:var(--text-muted);padding:4px 9px;border-radius:999px;border:1px solid var(--border-subtle)}
.af-m-cal__views i.is-on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.af-m--cal[data-step="1"] .af-m-cal__views i:nth-child(1){background:transparent;color:var(--text-muted);border-color:var(--border-subtle)}
.af-m--cal[data-step="1"] .af-m-cal__views i:nth-child(2){background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.af-m--cal[data-step="2"] .af-m-cal__views i:nth-child(1){background:transparent;color:var(--text-muted);border-color:var(--border-subtle)}
.af-m--cal[data-step="2"] .af-m-cal__views i:nth-child(3){background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.af-m-cal__dow,.af-m-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.af-m-cal__dow span{text-align:center;font-size:10px;font-weight:700;color:var(--text-subtle);padding-bottom:4px}
.af-m-cal__d{min-height:38px;border-radius:7px;background:var(--sand-50);padding:4px 5px;font-size:10px;color:var(--text-muted)}
.af-m-cal__d b{font-weight:600;font-size:10.5px;color:var(--text-body)}
.af-m-cal__d i{display:block;font-style:normal;font-size:8.5px;font-weight:700;color:#fff;background:var(--orange-500);border-radius:4px;padding:1px 4px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.af-m-cal__d.has-ev{background:var(--surface-brand-soft)}
.af-m--cal[data-step="1"] .af-m-cal__d i,.af-m--cal[data-step="2"] .af-m-cal__d i{opacity:1}

/* ============================================================
   M-TREE
   ============================================================ */
.af-m-tree{display:flex;flex-direction:column;gap:7px}
.af-m-tree__row{display:flex;align-items:center;gap:10px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:11px 13px;font-size:12.5px;color:var(--text-body)}
.af-m-tree__row i{width:15px;height:15px;flex-shrink:0;color:var(--text-subtle)}
.af-m-tree__row i:last-child{margin-left:auto;color:var(--sand-300)}
.af-m-tree__row--mod{font-weight:600;color:var(--text-strong);background:var(--sand-50)}
.af-m-tree__row--sub{margin-left:22px}
.af-m-tree__row--drag{transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-base)}
.af-m-tree__drop{height:0;border-radius:6px;border:1.5px dashed transparent;margin-left:22px;transition:height var(--dur-base),border-color var(--dur-base)}
.af-m--tree[data-step="1"] .af-m-tree__row--drag{transform:translateY(6px) rotate(-1deg);box-shadow:var(--shadow-lg);border-color:var(--orange-300)}
.af-m--tree[data-step="1"] .af-m-tree__drop{height:34px;border-color:var(--orange-300);background:var(--surface-brand-soft)}
.af-m--tree[data-step="2"] .af-m-tree__row--drag{transform:translateY(41px)}
.af-m--tree[data-step="2"] .af-m-tree__drop{height:34px;border-color:transparent}

/* ============================================================
   M-CATALOG
   ============================================================ */
.af-m-cat__head{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-strong)}
.af-m-cat__tabs{margin-left:auto;display:flex;gap:5px}
.af-m-cat__tabs i{font-style:normal;font-size:11px;font-weight:600;color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 10px}
.af-m-cat__tabs i.is-on{background:var(--surface-brand-soft);color:var(--orange-700);border-color:var(--orange-200)}
.af-m-cat{overflow:hidden}
.af-m-cat__track{display:flex;gap:12px;width:max-content;animation:af-marquee 26s linear infinite}
@keyframes af-marquee{to{transform:translateX(-50%)}}
.af-m-cat__card{width:150px;flex:none;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px;display:flex;flex-direction:column}
.af-m-cat__img{height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--navy-600);margin-bottom:9px}
.af-m-cat__img i{width:22px;height:22px}
.af-m-cat__card b{font-size:12px;color:var(--text-strong);line-height:1.25}
.af-m-cat__card i{font-size:10.5px;color:var(--text-muted);font-style:normal;margin-top:2px}
.af-m-cat__cta{margin-top:9px;text-align:center;font-size:11px;font-weight:600;color:#fff;background:var(--action-primary);border-radius:7px;padding:6px}

/* ============================================================
   M-ORG
   ============================================================ */
.af-m-org{position:relative;height:230px;background:var(--sand-50);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.af-m-org__wires{position:absolute;inset:0;width:100%;height:100%}
.af-m-org__wires path{fill:none;stroke:var(--sand-300);stroke-width:1.5}
.af-m-org__n{position:absolute;display:inline-flex;align-items:center;gap:7px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:9px;padding:7px 11px;font-size:11.5px;font-weight:600;color:var(--text-strong);box-shadow:var(--shadow-xs);white-space:nowrap;transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base)}
.af-m-org__n i{width:13px;height:13px;color:var(--navy-500)}
.af-m-org__n--root{left:50%;top:10%;transform:translateX(-50%)}
.af-m-org__n--a{left:6%;top:41%}.af-m-org__n--b{left:50%;top:41%;transform:translateX(-50%)}.af-m-org__n--c{right:6%;top:41%}
.af-m-org__n--leaf{font-weight:500;color:var(--text-muted);font-size:10.5px;padding:5px 9px}
.af-m-org__n--d{left:8%;top:74%}.af-m-org__n--e{left:50%;top:74%;transform:translateX(-50%)}.af-m-org__n--f{right:8%;top:74%}
.af-m-org__assign{position:absolute;left:50%;top:10%;transform:translate(-50%,-140%);display:inline-flex;align-items:center;gap:6px;background:var(--navy-800);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:6px 12px;white-space:nowrap;opacity:0;transition:opacity var(--dur-base)}
.af-m-org__assign i{width:13px;height:13px}
.af-m--org[data-step="1"] .af-m-org__assign,.af-m--org[data-step="2"] .af-m-org__assign,.af-m--org[data-step="3"] .af-m-org__assign{opacity:1}
.af-m--org[data-step="1"] .af-m-org__n--root,
.af-m--org[data-step="2"] .af-m-org__n[data-l="1"],
.af-m--org[data-step="3"] .af-m-org__n{background:var(--surface-brand-soft);border-color:var(--orange-200);color:var(--orange-700)}
.af-m--org[data-step="3"] .af-m-org__n i{color:var(--orange-600)}

/* ============================================================
   M-TEST
   ============================================================ */
.af-m-test{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px}
.af-m-test__head{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text-muted)}
.af-m-test__timer{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);color:var(--text-body)}
.af-m-test__timer i{width:13px;height:13px}
.af-m-test__prog{margin:9px 0 13px}
.af-m-test__t{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text-strong);margin-bottom:11px}
.af-m-test__t i{font-style:italic}
.af-m-test__opts{display:flex;flex-direction:column;gap:7px}
.af-m-test__o{display:flex;align-items:center;gap:10px;border:1px solid var(--border-subtle);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--text-body);transition:border-color var(--dur-base),background var(--dur-base)}
.af-m-test__o i{width:14px;height:14px;border-radius:999px;border:2px solid var(--border-default);flex-shrink:0}
.af-m--test[data-step="1"] .af-m-test__o[data-i="0"],
.af-m--test[data-step="2"] .af-m-test__o[data-i="0"],
.af-m--test[data-step="3"] .af-m-test__o[data-i="0"]{border-color:var(--teal-400);background:var(--teal-50)}
.af-m--test[data-step="1"] .af-m-test__o[data-i="0"] i,
.af-m--test[data-step="2"] .af-m-test__o[data-i="0"] i,
.af-m--test[data-step="3"] .af-m-test__o[data-i="0"] i{border-color:var(--teal-500);background:var(--teal-500);box-shadow:inset 0 0 0 2px #fff}
.af-m-test__types{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}
.af-m-test__types span{font-size:10px;font-weight:600;color:var(--text-muted);background:var(--sand-100);border-radius:999px;padding:3px 8px}
.af-m--test[data-step="2"] .af-m-test__types span,.af-m--test[data-step="3"] .af-m-test__types span{background:var(--surface-accent-soft);color:var(--teal-700)}
.af-m-test__result{display:none;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--green-700);background:var(--green-100);border-radius:8px;padding:9px 12px}
.af-m-test__result i{width:16px;height:16px}
.af-m--test[data-step="3"] .af-m-test__result{display:flex;animation:af-pop .4s var(--ease-out)}

/* ============================================================
   M-PRACT
   ============================================================ */
.af-m-pract{display:flex;flex-direction:column;gap:11px}
.af-m-pract__drop{border:1.5px dashed var(--border-default);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text-subtle);font-size:11.5px;transition:border-color var(--dur-base),background var(--dur-base)}
.af-m-pract__drop i{width:20px;height:20px}
.af-m-pract__drop b{font-size:12.5px;color:var(--text-body)}
.af-m--pract[data-step="0"] .af-m-pract__drop{border-color:var(--orange-300);background:var(--surface-brand-soft)}
.af-m-pract__file{display:flex;align-items:center;gap:11px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 14px;opacity:0;transition:opacity var(--dur-base)}
.af-m-pract__file>i{width:18px;height:18px;color:var(--navy-600);flex-shrink:0}
.af-m-pract__file b{display:block;font-size:12.5px;color:var(--text-strong)}
.af-m-pract__file i{font-style:normal}
.af-m-pract__file span i{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}
.af-m-pract__bar{margin-left:auto;width:70px;height:6px;border-radius:999px;background:var(--sand-200);overflow:hidden}
.af-m-pract__bar i{display:block;height:100%;width:0;background:var(--gradient-brand);transition:width 1.4s var(--ease-out)}
.af-m--pract[data-step="1"] .af-m-pract__file,.af-m--pract[data-step="2"] .af-m-pract__file{opacity:1}
.af-m--pract[data-step="1"] .af-m-pract__bar i,.af-m--pract[data-step="2"] .af-m-pract__bar i{width:100%}
.af-m-pract__grade{display:flex;align-items:center;gap:14px;background:var(--surface-accent-soft);border:1px solid var(--teal-100);border-radius:var(--radius-md);padding:13px 15px;opacity:0;transition:opacity var(--dur-base)}
.af-m--pract[data-step="2"] .af-m-pract__grade{opacity:1;animation:af-pop .45s var(--ease-out)}
.af-m-pract__mark{font-family:var(--font-display);color:var(--teal-700);flex-shrink:0}
.af-m-pract__mark b{font-size:30px;font-weight:600}
.af-m-pract__mark i{font-size:12px;font-style:normal}
.af-m-pract__fb b{display:block;font-size:12px;color:var(--text-strong)}
.af-m-pract__fb i{display:block;font-size:11.5px;color:var(--text-muted);margin-top:3px;line-height:1.45}

/* ============================================================
   M-VC
   ============================================================ */
.af-m-vc{display:flex;flex-direction:column;gap:11px}
.af-m-vc__card{display:flex;align-items:center;gap:13px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px}
.af-m-vc__ic{width:40px;height:40px;border-radius:11px;background:var(--surface-accent-soft);color:var(--teal-700);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.af-m-vc__ic i{width:19px;height:19px}
.af-m-vc__card b{display:block;font-size:13px;color:var(--text-strong)}
.af-m-vc__card i{display:block;font-size:11.5px;color:var(--text-muted);font-style:normal;margin-top:2px}
.af-m-vc__live{display:none !important;color:var(--red-500) !important;font-weight:600}
.af-m-vc__live i{width:12px;height:12px;display:inline-block !important;margin-right:5px}
.af-m-vc__join{margin-left:auto;background:var(--action-primary);color:#fff;font-size:12.5px;font-weight:600;border-radius:9px;padding:9px 16px;opacity:.35;transition:opacity var(--dur-base)}
.af-m--vc[data-step="1"] .af-m-vc__join,.af-m--vc[data-step="2"] .af-m-vc__join{opacity:1}
.af-m--vc[data-step="1"] .af-m-vc__count,.af-m--vc[data-step="2"] .af-m-vc__count{display:none !important}
.af-m--vc[data-step="1"] .af-m-vc__live,.af-m--vc[data-step="2"] .af-m-vc__live{display:block !important}
.af-m-vc__att{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:13px 15px;opacity:0;transition:opacity var(--dur-base)}
.af-m--vc[data-step="2"] .af-m-vc__att{opacity:1}
.af-m-vc__att>b{font-size:12px;color:var(--text-strong)}
.af-m-vc__rows{display:flex;flex-direction:column;gap:6px;margin:9px 0 8px}
.af-m-vc__rows span{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-body)}
.af-m-vc__rows i:first-child{width:13px;height:13px;color:var(--green-500)}
.af-m-vc__rows i{font-style:normal;margin-left:auto;color:var(--text-muted);font-family:var(--font-mono);font-size:10.5px}
.af-m-vc__note{font-size:10.5px;color:var(--text-subtle);font-style:normal}

/* ============================================================
   M-REPORT
   ============================================================ */
.af-m-rep{display:grid;grid-template-columns:150px 1fr;gap:12px;min-height:230px}
.af-m-rep__side{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;gap:5px}
.af-m-rep__side b{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:3px}
.af-m-rep__side span{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-body);border:1px solid var(--border-subtle);border-radius:7px;padding:6px 9px}
.af-m-rep__side span i{width:13px;height:13px;color:var(--navy-500)}
.af-m-rep__xls{margin-top:auto;background:var(--green-100);border-color:var(--green-100) !important;color:var(--green-700) !important;font-weight:600}
.af-m-rep__xls i{color:var(--green-700) !important}
.af-m-rep__canvas{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(64px,auto);gap:10px;background:var(--sand-50);border:1px dashed var(--border-default);border-radius:var(--radius-md);padding:12px}
.af-m-rep__b{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:11px;opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.af-m-rep__b--kpi b{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--text-strong)}
.af-m-rep__b--kpi i{font-size:11px;color:var(--text-muted);font-style:normal}
.af-m-rep__b--line,.af-m-rep__b--bars{grid-column:span 2}
.af-m-rep__b--line svg{width:100%;height:52px}
.af-m-rep__b--bars{display:flex;align-items:flex-end;gap:8px;height:74px}
.af-m-rep__b--bars i{flex:1;background:var(--gradient-brand);border-radius:4px 4px 0 0}
.af-m--report[data-step="1"] .af-m-rep__b[data-i="0"],
.af-m--report[data-step="2"] .af-m-rep__b[data-i="0"],.af-m--report[data-step="2"] .af-m-rep__b[data-i="1"],
.af-m--report[data-step="3"] .af-m-rep__b[data-i="0"],.af-m--report[data-step="3"] .af-m-rep__b[data-i="1"],.af-m--report[data-step="3"] .af-m-rep__b[data-i="2"],
.af-m--report[data-step="4"] .af-m-rep__b{opacity:1;transform:none}

/* ============================================================
   M-API
   ============================================================ */
.af-m-api{position:relative;height:250px;background:var(--sand-50);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.af-m-api__wires{position:absolute;inset:0;width:100%;height:100%}
.af-m-api__wires path{fill:none;stroke:var(--sand-300);stroke-width:1.5;stroke-dasharray:5 4}
.af-m-api__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface-card);border:1px solid var(--orange-200);border-radius:14px;padding:12px 18px;box-shadow:var(--shadow-md);z-index:2}
.af-m-api__core img{height:22px;width:auto;margin-bottom:4px}
.af-m-api__core b{font-size:12px;color:var(--text-strong)}
.af-m-api__core i{font-size:10px;color:var(--text-muted);font-style:normal}
.af-m-api__n{position:absolute;display:inline-flex;align-items:center;gap:6px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:600;color:var(--text-body);box-shadow:var(--shadow-xs);white-space:nowrap;opacity:.35;transition:opacity var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.af-m-api__n i{width:13px;height:13px;color:var(--navy-500)}
.af-m-api__n--a{left:4%;top:10%}.af-m-api__n--b{left:4%;top:46%}.af-m-api__n--c{left:6%;bottom:10%}
.af-m-api__n--d{right:4%;top:10%}.af-m-api__n--e{right:4%;top:46%}.af-m-api__n--f{right:6%;bottom:10%}
.af-m--api[data-step="1"] .af-m-api__n[data-i="0"],
.af-m--api[data-step="2"] .af-m-api__n[data-i="0"],.af-m--api[data-step="2"] .af-m-api__n[data-i="1"],
.af-m--api[data-step="3"] .af-m-api__n[data-i="0"],.af-m--api[data-step="3"] .af-m-api__n[data-i="1"],.af-m--api[data-step="3"] .af-m-api__n[data-i="2"],
.af-m--api[data-step="4"] .af-m-api__n:not([data-i="4"]):not([data-i="5"]),
.af-m--api[data-step="5"] .af-m-api__n{opacity:1;border-color:var(--teal-200);color:var(--text-strong)}

/* ============================================================
   M-AIACT
   ============================================================ */
.af-m-aiact{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:15px}
.af-m-aiact__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.af-m-aiact__head b{display:block;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-strong)}
.af-m-aiact__head i{display:block;font-size:11px;color:var(--text-muted);font-style:normal;margin-top:2px}
.af-m-badge-eu{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--navy-700);background:var(--navy-50);border:1px solid var(--navy-100);border-radius:999px;padding:5px 11px;white-space:nowrap}
.af-m-badge-eu i{width:13px;height:13px}
.af-m-aiact__rows{display:flex;flex-direction:column;gap:6px}
.af-m-ai__row{display:flex;align-items:center;gap:10px;border:1px solid var(--border-subtle);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--text-body);opacity:.3;transition:opacity var(--dur-base)}
.af-m-ai__row>span:first-child{display:inline-flex;align-items:center;gap:8px}
.af-m-ai__row i{width:14px;height:14px;color:var(--navy-500)}
.af-m-risk{margin-left:auto;font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.af-m-risk--lim{background:var(--amber-100);color:var(--amber-700)}
.af-m-risk--min{background:var(--green-100);color:var(--green-700)}
.af-m-risk--ban{background:var(--red-100);color:var(--red-700)}
.af-m--aiact[data-step="1"] .af-m-ai__row[data-i="0"],
.af-m--aiact[data-step="2"] .af-m-ai__row[data-i="0"],.af-m--aiact[data-step="2"] .af-m-ai__row[data-i="1"],
.af-m--aiact[data-step="3"] .af-m-ai__row{opacity:1}
.af-m-aiact__foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--text-muted)}
.af-m-aiact__foot i{width:14px;height:14px;flex-shrink:0}

/* ============================================================
   M-CODE
   ============================================================ */
.af-m-code__tabs{display:flex;gap:4px;margin-bottom:10px}
.af-m-code__tabs i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:7px 7px 0 0;padding:6px 11px}
.af-m-code__tabs i.is-on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.af-m-code__activate{display:flex;align-items:center;gap:11px;margin-top:12px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:11px 14px;font-size:12.5px;color:var(--text-strong)}
.af-m-code__sw{width:36px;height:21px;border-radius:999px;background:var(--sand-300);position:relative;flex-shrink:0;transition:background var(--dur-base)}
.af-m-code__sw i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform var(--dur-base)}
.af-m--code[data-step="1"] .af-m-code__sw,.af-m--code[data-step="2"] .af-m-code__sw{background:var(--teal-500)}
.af-m--code[data-step="1"] .af-m-code__sw i,.af-m--code[data-step="2"] .af-m-code__sw i{transform:translateX(15px)}
.af-m-code__ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green-700);background:var(--green-100);border-radius:999px;padding:5px 11px;opacity:0;transition:opacity var(--dur-base)}
.af-m-code__ok i{width:13px;height:13px}
.af-m--code[data-step="2"] .af-m-code__ok{opacity:1}

/* ============================================================
   M-BRAND
   ============================================================ */
.af-m-brand{display:grid;grid-template-columns:150px 1fr;gap:14px;--bc:#FF5A2D}
.af-m--brand[data-step="1"] .af-m-brand{--bc:#12B2A6}
.af-m--brand[data-step="2"] .af-m-brand{--bc:#7C5CFF}
.af-m-brand__ctrl{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:13px}
.af-m-brand__ctrl b{font-size:12.5px;color:var(--text-strong)}
.af-m-brand__ctrl i{display:block;font-size:10.5px;color:var(--text-muted);font-style:normal;margin-top:8px}
.af-m-brand__sw{display:flex;gap:7px;margin-top:10px}
.af-m-brand__sw span{width:24px;height:24px;border-radius:7px;border:2px solid transparent}
.af-m-brand__sw span[data-c="0"]{background:#FF5A2D}
.af-m-brand__sw span[data-c="1"]{background:#12B2A6}
.af-m-brand__sw span[data-c="2"]{background:#7C5CFF}
.af-m--brand[data-step="0"] .af-m-brand__sw span[data-c="0"],
.af-m--brand[data-step="1"] .af-m-brand__sw span[data-c="1"],
.af-m--brand[data-step="2"] .af-m-brand__sw span[data-c="2"]{border-color:var(--navy-800);transform:scale(1.08)}
.af-m-brand__prev{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.af-m-brand__top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.af-m-brand__logo{width:56px;height:16px;border-radius:4px;background:var(--bc);transition:background var(--dur-slow)}
.af-m-brand__nav{display:flex;gap:7px;margin-left:auto}
.af-m-brand__nav i{width:26px;height:7px;border-radius:4px;background:var(--sand-200)}
.af-m-brand__body{padding:14px 12px;display:flex;flex-direction:column;gap:9px}
.af-m-brand__btn{align-self:flex-start;font-size:11px;font-weight:600;color:#fff;background:var(--bc);border-radius:7px;padding:7px 13px;transition:background var(--dur-slow)}
.af-m-brand__card{height:24px;border-radius:6px;background:var(--sand-100);border-left:3px solid var(--bc);transition:border-color var(--dur-slow)}

/* ============================================================
   M-i18n
   ============================================================ */
.af-m-i18n__bar{display:flex;align-items:center;gap:10px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 13px}
.af-m-i18n__bar>i{width:15px;height:15px;color:var(--navy-500)}
.af-m-i18n__ls{display:flex;gap:5px}
.af-m-i18n__l{font-size:11px;font-weight:700;color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 10px;transition:background var(--dur-base),color var(--dur-base)}
.af-m-i18n__ui{margin-top:11px;display:flex;flex-direction:column;gap:8px}
.af-m-i18n__w{display:block;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:8px;padding:10px 13px;font-size:12.5px;color:var(--text-strong);position:relative;min-height:39px}
.af-m-i18n__w i{position:absolute;left:13px;top:10px;font-style:normal;opacity:0;transition:opacity var(--dur-base)}
.af-m--i18n[data-step="0"] .af-m-i18n__l[data-i="0"],.af-m--i18n[data-step="1"] .af-m-i18n__l[data-i="1"],
.af-m--i18n[data-step="2"] .af-m-i18n__l[data-i="2"],.af-m--i18n[data-step="3"] .af-m-i18n__l[data-i="3"],
.af-m--i18n[data-step="4"] .af-m-i18n__l[data-i="4"],.af-m--i18n[data-step="5"] .af-m-i18n__l[data-i="5"]{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.af-m--i18n[data-step="0"] .af-m-i18n__w i[data-i="0"],.af-m--i18n[data-step="1"] .af-m-i18n__w i[data-i="1"],
.af-m--i18n[data-step="2"] .af-m-i18n__w i[data-i="2"],.af-m--i18n[data-step="3"] .af-m-i18n__w i[data-i="3"],
.af-m--i18n[data-step="4"] .af-m-i18n__w i[data-i="4"],.af-m--i18n[data-step="5"] .af-m-i18n__w i[data-i="5"]{opacity:1}

/* ============================================================
   M-DEPLOY
   ============================================================ */
.af-code{margin:0;padding:18px;background:#050F2B;color:#EAF0FF;font-family:var(--font-mono);font-size:12.5px;line-height:1.85;overflow-x:auto;border-radius:var(--radius-md)}
.af-code .c-cmd{color:#FFA038}
.af-code .c-ok{color:#5FCFC5}
.af-code .c-arrow{color:#8E9BC0}
.af-m-deploy__stack{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.af-m-deploy__chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--navy-700);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:6px 12px}
.af-m-deploy__chip i{width:14px;height:14px;color:var(--navy-500)}
.af-m-deploy__code span[class*="af-m-deploy__l"]{opacity:0;transition:opacity var(--dur-base)}
.af-m--deploy[data-step="1"] .af-m-deploy__l1,
.af-m--deploy[data-step="2"] .af-m-deploy__l1,.af-m--deploy[data-step="2"] .af-m-deploy__l2,
.af-m--deploy[data-step="3"] .af-m-deploy__l1,.af-m--deploy[data-step="3"] .af-m-deploy__l2,.af-m--deploy[data-step="3"] .af-m-deploy__l3,
.af-m--deploy[data-step="4"] span[class*="af-m-deploy__l"]{opacity:1}
.af-m-deploy__shield{display:flex;align-items:center;gap:10px;margin-top:12px;background:var(--surface-accent-soft);border:1px solid var(--teal-100);border-radius:var(--radius-md);padding:12px 15px;font-size:13px;color:var(--teal-800);opacity:0;transition:opacity var(--dur-slow)}
.af-m-deploy__shield i{width:19px;height:19px;flex-shrink:0}
.af-m--deploy[data-step="4"] .af-m-deploy__shield{opacity:1}

/* ============================================================
   M-MODELO
   ============================================================ */
/* Raíl de la timeline: por ENCIMA de las tarjetas, no por detrás. */
/* Los nodos se alinean con el CENTRO de cada tarjeta. Con un grid de 4 columnas
   y gap G, el centro de la columna i está en  i*(25% + G/4) + 12.5% − 3G/8.
   Con G=16px eso da los calc() de abajo; así encaja exacto a cualquier ancho. */
.af-m-modelo{--mg:16px}
.af-m-modelo__rail{position:relative;height:64px;margin-bottom:4px}
.af-m-modelo__track{position:absolute;top:29px;height:3px;border-radius:2px;background:var(--sand-200);
  left:calc(12.5% - 3 * var(--mg) / 8);right:calc(12.5% - 3 * var(--mg) / 8)}
.af-m-modelo__fill{position:absolute;top:29px;height:3px;width:0;border-radius:2px;background:var(--gradient-brand);
  left:calc(12.5% - 3 * var(--mg) / 8);transition:width .9s var(--ease-out)}
.af-m--modelo[data-step="1"] .af-m-modelo__fill{width:calc(25% + var(--mg) / 4)}
.af-m--modelo[data-step="2"] .af-m-modelo__fill{width:calc(50% + var(--mg) / 2)}
.af-m--modelo[data-step="3"] .af-m-modelo__fill,
.af-m--modelo[data-step="4"] .af-m-modelo__fill{width:calc(75% + 3 * var(--mg) / 4)}

.af-m-modelo__node{position:absolute;top:6px;transform:translateX(-50%);width:50px;height:50px;border-radius:16px;
  background:var(--surface-card);border:2px solid var(--sand-200);color:var(--sand-400);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-base),border-color var(--dur-base),color var(--dur-base),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.af-m-modelo__node[data-i="0"]{left:calc(12.5% - 3 * var(--mg) / 8)}
.af-m-modelo__node[data-i="1"]{left:calc(37.5% - var(--mg) / 8)}
.af-m-modelo__node[data-i="2"]{left:calc(62.5% + var(--mg) / 8)}
.af-m-modelo__node[data-i="3"]{left:calc(87.5% + 3 * var(--mg) / 8)}
.af-m-modelo__ic,.af-m-modelo__tick{position:absolute;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--dur-fast)}
.af-m-modelo__ic i{width:22px;height:22px}
.af-m-modelo__tick{opacity:0}
.af-m-modelo__tick i{width:22px;height:22px}
/* nodo ACTIVO (el paso en curso): degradado de marca y elevado */
.af-m--modelo[data-step="0"] .af-m-modelo__node[data-i="0"],
.af-m--modelo[data-step="1"] .af-m-modelo__node[data-i="1"],
.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="2"],
.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="3"]{background:var(--gradient-brand);border-color:transparent;color:#fff;transform:translateX(-50%) scale(1.1);box-shadow:var(--shadow-brand)}
/* nodos YA COMPLETADOS: check en teal */
.af-m--modelo[data-step="1"] .af-m-modelo__node[data-i="0"],
.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="0"],.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="1"],
.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="0"],.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="1"],.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="2"],
.af-m--modelo[data-step="4"] .af-m-modelo__node{background:var(--teal-50);border-color:var(--teal-300);color:var(--teal-700)}
.af-m--modelo[data-step="1"] .af-m-modelo__node[data-i="0"] .af-m-modelo__ic,
.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="0"] .af-m-modelo__ic,.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="1"] .af-m-modelo__ic,
.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="0"] .af-m-modelo__ic,.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="1"] .af-m-modelo__ic,.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="2"] .af-m-modelo__ic,
.af-m--modelo[data-step="4"] .af-m-modelo__ic{opacity:0}
.af-m--modelo[data-step="1"] .af-m-modelo__node[data-i="0"] .af-m-modelo__tick,
.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="0"] .af-m-modelo__tick,.af-m--modelo[data-step="2"] .af-m-modelo__node[data-i="1"] .af-m-modelo__tick,
.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="0"] .af-m-modelo__tick,.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="1"] .af-m-modelo__tick,.af-m--modelo[data-step="3"] .af-m-modelo__node[data-i="2"] .af-m-modelo__tick,
.af-m--modelo[data-step="4"] .af-m-modelo__tick{opacity:1}

/* Tarjetas bajo el raíl */
.af-m-modelo__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.af-m-modelo__s{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:18px;box-shadow:var(--shadow-xs);opacity:.5;transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base)}
.af-m-modelo__n{display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--orange-600);margin-bottom:6px}
.af-m-modelo__s b{display:block;font-family:var(--font-display);font-size:15.5px;font-weight:600;color:var(--text-strong);line-height:1.3}
.af-m-modelo__s i{display:block;font-size:12.5px;color:var(--text-muted);font-style:normal;line-height:1.55;margin-top:6px}
/* tarjeta del paso en curso: destacada */
.af-m--modelo[data-step="0"] .af-m-modelo__s[data-i="0"],
.af-m--modelo[data-step="1"] .af-m-modelo__s[data-i="1"],
.af-m--modelo[data-step="2"] .af-m-modelo__s[data-i="2"],
.af-m--modelo[data-step="3"] .af-m-modelo__s[data-i="3"]{opacity:1;transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--orange-200)}
/* tarjetas ya recorridas: legibles pero sin protagonismo */
.af-m--modelo[data-step="1"] .af-m-modelo__s[data-i="0"],
.af-m--modelo[data-step="2"] .af-m-modelo__s[data-i="0"],.af-m--modelo[data-step="2"] .af-m-modelo__s[data-i="1"],
.af-m--modelo[data-step="3"] .af-m-modelo__s[data-i="0"],.af-m--modelo[data-step="3"] .af-m-modelo__s[data-i="1"],.af-m--modelo[data-step="3"] .af-m-modelo__s[data-i="2"],
.af-m--modelo[data-step="4"] .af-m-modelo__s{opacity:1}

/* Cierre: el recorrido completo */
.af-m-modelo__end{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding:14px 20px;border-radius:var(--radius-pill);
  background:var(--surface-accent-soft);border:1px solid var(--teal-100);
  opacity:0;transform:translateY(6px);transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-out)}
.af-m-modelo__end i{width:19px;height:19px;color:var(--teal-600);flex-shrink:0}
.af-m-modelo__end b{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--teal-800)}
.af-m-modelo__end i:last-child{width:auto;height:auto;font-style:normal;font-size:12.5px;color:var(--teal-700)}
.af-m--modelo[data-step="4"] .af-m-modelo__end{opacity:1;transform:none}

/* ============================================================
   M-AHORRO
   ============================================================ */
.af-m-ah{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.af-m-ah__head{margin-bottom:14px}
.af-m-ah__title{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-strong);line-height:1.3}
.af-m-ah__cap{display:block;font-style:normal;font-size:11px;line-height:1.45;color:var(--text-muted);margin-top:4px}
.af-m-ah__legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.af-m-ah__k{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-muted)}
.af-m-ah__k::before{content:"";width:12px;height:12px;border-radius:3px}
.af-m-ah__k--saas::before{background:var(--navy-300)}
.af-m-ah__k--flex::before{background:var(--orange-500)}
.af-m-ah__k--gap::before{background:var(--orange-100)}
.af-m-ah__plot{position:relative;height:214px}
.af-m-ah__plot svg{width:100%;height:180px;display:block}
.af-m-ah__grid{stroke:var(--border-subtle);stroke-width:1;stroke-dasharray:3 4}
.af-m-ah__area{fill:var(--orange-100);opacity:0;transition:opacity 1.8s var(--ease-out)}
.af-m-ah__area2{fill:var(--navy-300);opacity:0;transition:opacity 1.6s var(--ease-out)}
.af-m--ahorro[data-step="2"] .af-m-ah__area2{opacity:.12}
.af-m-ah__saas,.af-m-ah__flex{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:460;stroke-dashoffset:460;transition:stroke-dashoffset 3.2s var(--ease-out)}
.af-m-ah__flex{transition-delay:.5s}
.af-m-ah__saas{stroke:var(--navy-300)}
.af-m-ah__flex{stroke:var(--orange-500)}
.af-m--ahorro[data-step="1"] .af-m-ah__saas,.af-m--ahorro[data-step="1"] .af-m-ah__flex,
.af-m--ahorro[data-step="2"] .af-m-ah__saas,.af-m--ahorro[data-step="2"] .af-m-ah__flex{stroke-dashoffset:0}
.af-m--ahorro[data-step="2"] .af-m-ah__area{opacity:1}
.af-m-ah__beline{stroke:var(--text-muted);stroke-width:1.4;stroke-dasharray:4 4;opacity:0;transition:opacity var(--dur-slow) var(--ease-out);transition-delay:.6s}
.af-m-ah__gap{stroke:var(--orange-500);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.af-m-ah__gap--y3{transition-delay:.9s}
.af-m-ah__gap--y5{transition-delay:1.1s;stroke-width:2.6}
.af-m--ahorro[data-step="2"] .af-m-ah__gap{opacity:.55}
.af-m-ah__bedot{fill:var(--surface-card);stroke:var(--navy-800);stroke-width:2.4;opacity:0;transition:opacity var(--dur-slow) var(--ease-out);transition-delay:.7s}
.af-m-ah__ref{fill:var(--navy-300);opacity:0;transition:opacity var(--dur-slow) var(--ease-out);transition-delay:.3s}
.af-m--ahorro[data-step="2"] .af-m-ah__beline,.af-m--ahorro[data-step="2"] .af-m-ah__bedot,.af-m--ahorro[data-step="2"] .af-m-ah__ref{opacity:1}
.af-m-ah__tag{position:absolute;right:2%;top:20%;background:var(--navy-800);color:#fff;font-family:var(--font-display);font-size:19px;font-weight:600;border-radius:12px;padding:9px 14px;text-align:center;box-shadow:var(--shadow-lg);opacity:0;transform:scale(.9);transition:opacity var(--dur-slow),transform var(--dur-slow) var(--ease-out);transition-delay:.4s}
.af-m-ah__tag i{display:block;font-size:10.5px;font-style:normal;font-weight:500;color:rgba(255,255,255,.7);margin-top:1px}
.af-m--ahorro[data-step="2"] .af-m-ah__tag{opacity:1;transform:none}
.af-m-ah__tag3{position:absolute;transform:translate(-50%,-50%);background:var(--orange-500);color:#fff;font-family:var(--font-display);font-size:12px;font-weight:700;border-radius:9px;padding:3px 8px;text-align:center;line-height:1.05;box-shadow:var(--shadow-md);white-space:nowrap;opacity:0;transition:opacity var(--dur-slow) var(--ease-out);transition-delay:.9s}
.af-m-ah__tag3 i{display:block;font-size:8.5px;font-style:normal;font-weight:500;color:rgba(255,255,255,.85);margin-top:0}
.af-m--ahorro[data-step="2"] .af-m-ah__tag3{opacity:1}
.af-m-ah__reflabel{position:absolute;transform:translate(-50%,-140%);font-size:10.5px;font-weight:700;color:var(--navy-300);background:var(--surface-card);padding:0 3px;border-radius:4px}
.af-m-ah__belabel{position:absolute;bottom:20px;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:700;color:var(--navy-800);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:20px;padding:2px 9px;box-shadow:var(--shadow-sm);opacity:0;transition:opacity var(--dur-slow) var(--ease-out);transition-delay:.8s}
.af-m--ahorro[data-step="2"] .af-m-ah__belabel{opacity:1}
.af-m-ah__x{position:absolute;bottom:0;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--text-muted)}

/* ============================================================
   Reduced motion: nada se mueve; los mockups quedan en su
   estado final legible (el JS fija data-step al último paso).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .af-m *,.af-m *::before,.af-m *::after{animation:none !important;transition:none !important}
  .af-m-cat__track{animation:none !important}
  .af-m-spark__line{stroke-dashoffset:0}
  .af-m-spark__area{opacity:1}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .af-m-cols,.af-m-rep,.af-m-brand{grid-template-columns:1fr}
  .af-m-player{grid-template-columns:1fr}
  .af-m-player__side{order:2}
  /* 2 columnas: el raíl horizontal deja de tener sentido */
  .af-m-modelo__cards{grid-template-columns:repeat(2,1fr)}
  .af-m-modelo__rail{display:none}
  .af-m-modelo__s{opacity:1 !important}
}
@media (max-width:720px){
  .af-m-stats{grid-template-columns:repeat(2,1fr)}
  .af-m-app{height:auto;min-height:420px}
  .af-m-app__side{display:none}
  .af-m-cert-grid{grid-template-columns:1fr 1fr}
  .af-m-row{grid-template-columns:1fr auto;row-gap:6px}
  .af-m-row__cat,.af-m-row .af-prog{display:none}
  .af-m-modelo__cards{grid-template-columns:1fr}
  .af-m-org,.af-m-api{height:210px}
  .af-m-org__n,.af-m-api__n{font-size:10px;padding:5px 8px}
  .af-m-verify{flex-wrap:wrap}
  .af-m-verify__ok{margin-left:0}
}
@media (max-width:460px){
  .af-m-cert-grid{grid-template-columns:1fr}
  .af-m-stats{grid-template-columns:1fr}
}