/* Capturas simuladas de la app de Vector. Tokens del design system de Afer
   (los mismos que vector.aferapp.com/_design/_base.css), encerrados en .mk
   para no chocar con el tema oscuro de la web. */
.mk{
  /* App simulada en oscuro, con la paleta de la web. Todo sale de estos tokens. */
  --m-warm:#0B0E17; --m-surf:#111522; --m-surf-2:#0E1220;
  --m-n50:#151A28; --m-n100:rgba(255,255,255,.06); --m-n200:rgba(255,255,255,.09); --m-n300:rgba(255,255,255,.18);
  --m-n400:#6E7790; --m-n500:#8D96AC; --m-n600:#AEB6C8; --m-n700:#C9D0DE; --m-n900:#F2F4FA;
  --m-acc:#4C77FF; --m-acc-s:rgba(76,119,255,.16); --m-acc-t:#9DB4FF;
  --m-ok:#5BE3A4; --m-ok-s:rgba(91,227,164,.13); --m-warn:#F5C46B; --m-warn-s:rgba(245,196,107,.14);
  --m-dang:#FF8A8A; --m-dang-s:rgba(255,122,122,.14);
  container-type:inline-size;
  margin:0; position:relative; border-radius:16px; overflow:hidden; isolation:isolate;
  background:var(--m-warm); color:var(--m-n700);
  font:400 12.5px/1.45 var(--sans); letter-spacing:0; text-align:left;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06) inset,0 60px 120px -40px rgba(61,108,245,.55),0 30px 60px -30px rgba(0,0,0,.8);
}
/* borde de luz arriba, como el cristal de una ventana */
.mk::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(157,180,255,.7),rgba(70,224,240,.6),transparent);pointer-events:none}
.mk *{box-sizing:border-box}
.mk p,.mk ol,.mk ul{margin:0}
.mk b{font-weight:600;color:var(--m-n900)}
.mk-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--m-surf-2);border-bottom:1px solid var(--m-n200)}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12)}
.mk-url{margin-left:10px;flex:1;max-width:340px;height:19px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--m-n500);font:400 10.5px/19px var(--mono);padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mk-app{display:grid;grid-template-columns:138px minmax(0,1fr);min-height:330px}
.mk-side{background:var(--m-surf-2);border-right:1px solid var(--m-n200);padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.mk-brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--m-n900);padding:0 6px 4px}
.mk-logo{width:18px;height:15px;flex:none}
.mk-logo path:first-child,.mk-ai-av svg path:first-child{fill:#3F66D6}
.mk-emp{font-size:10.5px;color:var(--m-n400);padding:0 6px 10px}
.mk-nav{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:7px;color:var(--m-n600);font-weight:500;font-size:12px}
.mk-nav svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-nav.on{background:var(--m-acc-s);color:var(--m-acc-t);font-weight:600}
.mk-main{display:flex;flex-direction:column;min-width:0}
.mk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 14px;background:var(--m-surf-2);border-bottom:1px solid var(--m-n200)}
.mk-crumb{color:var(--m-n500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-crumb i{font-style:normal;color:var(--m-n300);margin:0 3px}
.mk-search{height:24px;border:1px solid var(--m-n200);border-radius:7px;padding:0 10px;font-size:11px;line-height:22px;color:var(--m-n400);background:var(--m-n50);white-space:nowrap}
.mk-body{padding:14px;display:grid;gap:12px;align-content:start}
.mk-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mk-h{margin:0;font:600 16px/1.2 var(--sans);letter-spacing:-.01em;color:var(--m-n900)}
.mk-sub{color:var(--m-n500);font-size:11.5px;margin-top:2px}
.mk-btn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--m-n200);background:var(--m-surf);font-weight:600;font-size:11.5px;color:var(--m-n700);white-space:nowrap}
.mk-btn.pri{background:var(--m-acc);border-color:var(--m-acc);color:#fff}
.mk-card{background:var(--m-surf);border:1px solid var(--m-n200);border-radius:10px;overflow:hidden}
.mk-pad{padding:12px;display:grid;gap:8px;align-content:start}
.mk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mk-kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-kpi{background:var(--m-surf);border:1px solid var(--m-n200);border-radius:10px;padding:9px 10px;display:grid;gap:2px}
.mk-kpi span{font-size:10.5px;color:var(--m-n500)}
.mk-kpi b{font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-kpi small{font-size:10.5px;color:var(--m-n400)}
.mk .ok{color:var(--m-ok)} .mk .warn{color:var(--m-warn)} .mk .dang{color:var(--m-dang)}
.mk-chips{display:flex;gap:6px;flex-wrap:wrap}
.mk-chip{height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--m-n200);background:var(--m-surf);font-size:11px;line-height:22px;color:var(--m-n600)}
.mk-chip.on{background:var(--m-acc-s);border-color:transparent;color:var(--m-acc-t);font-weight:600}
.mk-t{width:100%;border-collapse:collapse}
.mk-t th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--m-n400);padding:8px 10px;background:var(--m-n50);border-bottom:1px solid var(--m-n200)}
.mk-t td{padding:8px 10px;border-bottom:1px solid var(--m-n100);vertical-align:middle;white-space:nowrap}
.mk-t tr:last-child td{border-bottom:0}
.mk-t td b{display:block;font-weight:600}
.mk-t td small{display:block;font-size:10.5px;color:var(--m-n400)}
.mk-mono{font-family:var(--mono);font-size:11px}
.mk-tag{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:999px;font-size:10.5px;font-weight:600;background:var(--m-acc-s);color:var(--m-acc-t);white-space:nowrap}
.mk-tag.ok{background:var(--m-ok-s);color:var(--m-ok)}
.mk-tag.warn{background:var(--m-warn-s);color:var(--m-warn)}
.mk-tag.dang{background:var(--m-dang-s);color:var(--m-dang)}
.mk-tag.mut{background:var(--m-n100);color:var(--m-n500)}
.mk-tag.acc{background:var(--m-acc);color:#fff}
.mk-split{grid-template-columns:minmax(0,1fr) 170px;gap:14px}
.mk-split--mitad{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mk-steps{list-style:none;padding:0;counter-reset:p;display:grid;gap:6px}
.mk-steps li{counter-increment:p;display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;background:var(--m-surf);border:1px solid var(--m-n200);border-radius:9px;padding:8px 10px 8px 36px;position:relative}
.mk-steps li::before{content:counter(p);position:absolute;left:9px;top:8px;width:19px;height:19px;border-radius:6px;background:var(--m-acc-s);color:var(--m-acc-t);font:600 10.5px/19px var(--mono);text-align:center}
.mk-steps li b{font-weight:600;margin-right:4px}
.mk-steps--mini li{padding:6px 8px 6px 32px}
.mk-steps--mini li::before{top:6px;left:7px}
.mk-aside{display:grid;gap:6px;align-content:start;border-left:1px solid var(--m-n200);padding-left:12px}
.mk-lbl{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--m-n400);margin-top:4px}
.mk-hist{list-style:none;padding:0;display:grid;gap:4px;font-size:11.5px;color:var(--m-n500)}
.mk-small{font-size:11.5px;color:var(--m-n500)}
.mk-big{font-size:20px;font-weight:600;color:var(--m-n900)}
.mk-big small{font-size:11px;font-weight:400;color:var(--m-n400)}
.mk-wave{display:flex;align-items:center;gap:2px;height:40px;padding:6px 10px;background:var(--m-surf);border:1px solid var(--m-n200);border-radius:9px}
.mk-wave i{flex:1;border-radius:2px;background:linear-gradient(180deg,#5A84FF,#46E0F0)}
.mk-tr{display:grid;gap:7px}
.mk-tr p{font-size:11.5px;line-height:1.45;color:var(--m-n600)}
.mk-tr i{font-style:normal;font:400 10px var(--mono);color:var(--m-n400);margin-right:6px}
.mk-who{display:inline-block;font-weight:600;font-size:10.5px;padding:1px 6px;border-radius:5px;margin-right:6px}
.mk-who.a{background:var(--m-acc-s);color:var(--m-acc-t)}
.mk-who.b{background:var(--m-n100);color:var(--m-n600)}
.mk-row{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}
.mk-av{width:24px;height:24px;border-radius:50%;background:var(--m-acc);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.mk-todo{list-style:none;padding:0}
.mk-todo li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--m-n100)}
.mk-todo li:last-child{border-bottom:0}
.mk-todo li b{font-weight:500;color:var(--m-n700);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-todo em{font-style:normal;font-size:10.5px;color:var(--m-n400);min-width:34px;text-align:right}
.mk-todo li.done b{text-decoration:line-through;color:var(--m-n400)}
.mk-ck{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--m-n300);flex:none}
.mk-todo li.done .mk-ck{background:var(--m-ok);border-color:var(--m-ok)}
.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-link{font-size:12px;color:var(--m-acc-t);font-weight:500}
.mk-prog{height:6px;border-radius:3px;background:var(--m-n100);overflow:hidden}
.mk-prog i{display:block;height:100%;background:var(--m-acc);border-radius:3px}
.mk-lvls{display:flex;gap:4px;flex-wrap:wrap}
.mk-lvls span{font:500 10px/1 var(--mono);padding:4px 6px;border-radius:5px;background:var(--m-n100);color:var(--m-n500)}
.mk-lvls span.on{background:var(--m-ok-s);color:var(--m-ok)}
.mk-chat{gap:12px}
.mk-me{justify-self:end;max-width:80%;background:var(--m-acc);color:#fff;padding:8px 12px;border-radius:12px 12px 3px 12px;font-size:12px}
.mk-ai{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;background:var(--m-surf);border:1px solid var(--m-n200);border-radius:12px;padding:12px}
.mk-ai-av{width:24px;height:24px;border-radius:7px;background:rgba(76,119,255,.18);display:grid;place-items:center}
.mk-ai-av svg{width:15px;height:13px}
.mk-ai > div{display:grid;gap:8px;font-size:12px;color:var(--m-n600)}
.mk-ai ol{padding-left:17px;display:grid;gap:3px}
.mk-cite{display:inline-flex;height:17px;align-items:center;padding:0 6px;border-radius:5px;background:var(--m-acc-s);color:var(--m-acc-t);font:500 10px var(--mono);white-space:nowrap}
.mk-src{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--m-n100);padding-top:8px}
.mk-src span{font-size:10.5px;border:1px solid var(--m-n200);border-radius:999px;padding:2px 8px;color:var(--m-n500)}
.mk-input{display:flex;justify-content:space-between;border:1px solid var(--m-n300);border-radius:10px;padding:8px 12px;background:var(--m-surf);color:var(--m-n400)}
.mk-diff{border:1px solid var(--m-n200);border-radius:10px;overflow:hidden;font:400 11.5px/1.4 var(--mono);background:var(--m-surf)}
.mk-diff p{padding:7px 12px;display:flex;gap:10px}
.mk-diff i{font-style:normal;width:8px;opacity:.7}
.mk-diff .del{background:rgba(255,122,122,.1);color:#FFB3B3}
.mk-diff .add{background:rgba(91,227,164,.1);color:#A8F2CF}
.mk-diff .ctx{color:var(--m-n500)}
.mk-foot{font-size:11.5px;color:var(--m-n500);text-align:right}
.mk-phases{display:grid;grid-template-columns:repeat(6,1fr) 1.3fr;gap:3px}
.mk-phases i{height:7px;border-radius:3px;background:var(--m-n200)}
.mk-phases i.d{background:var(--m-acc)}
.mk-phases i.n{background:linear-gradient(90deg,var(--m-acc) 55%,var(--m-n200) 55%)}
.mk-phases i.v{background:repeating-linear-gradient(90deg,var(--m-acc-s) 0 5px,var(--m-acc) 5px 7px)}
.mk-obj{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 52px;gap:10px;align-items:center;font-size:11.5px}
.mk-obj b{text-align:right;font-variant-numeric:tabular-nums}
.mk-bar3{position:relative;height:6px;border-radius:3px}
.mk-bar3 i{position:absolute;top:0;height:100%;border-radius:3px;background:var(--m-acc)}
.mk-bar3 i.b{background:var(--m-n100)}
.mk-bar3 em{position:absolute;top:-3px;width:2px;height:12px;background:var(--m-n900);border-radius:1px}
.mk-cap{margin-left:auto;font:400 10px/1 var(--mono);color:var(--m-n400);white-space:nowrap;padding:4px 8px;border:1px solid var(--m-n200);border-radius:999px}

/* Columnas estrechas: fuera la barra lateral y lo accesorio */
.mk--compacta .mk-app{grid-template-columns:minmax(0,1fr)}
.mk--compacta .mk-side{display:none}
@container (max-width:620px){
  .mk-app{grid-template-columns:minmax(0,1fr)}
  .mk-side{display:none}
}
@container (max-width:470px){
  .mk-hide-s{display:none!important}
  .mk-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-split,.mk-split--mitad,.mk-two{grid-template-columns:minmax(0,1fr)}
  .mk-search{display:none}
  .mk-body{padding:12px}
}

/* ── Colocación en la web ── */
.phero__grid--mk{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.phero__mk{min-width:0}
.phero__txt .checks{margin-top:4px}
.showcase{border-top:1px solid var(--line)}
.showcase__mk{max-width:1000px;margin-inline:auto}
.gal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.gal-tabs button{font:500 14px/1 var(--sans);color:var(--ink-2);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;cursor:pointer}
.gal-tabs button[aria-selected="true"]{background:var(--ink);color:#07080D;border-color:var(--ink)}
@media (max-width:960px){.phero__grid--mk{grid-template-columns:minmax(0,1fr)}}

/* ── Integración con la página ── */
/* Halo detrás de cada pantalla: la une con el fondo en lugar de «pegarla» */
.mk-stage{position:relative;isolation:isolate}
.mk-stage::before{content:"";position:absolute;inset:8% 6% -4%;z-index:-1;border-radius:40px;background:radial-gradient(60% 60% at 50% 40%,rgba(61,108,245,.45),transparent 70%),radial-gradient(40% 40% at 80% 80%,rgba(70,224,240,.22),transparent 70%);filter:blur(40px);pointer-events:none}
/* Hero: ligera perspectiva que se endereza al pasar el ratón */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  .mk-stage--tilt{perspective:1800px}
  .mk-stage--tilt .mk{transform:rotateY(-10deg) rotateX(4deg) translateZ(0);transform-origin:70% 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .mk-stage--tilt:hover .mk{transform:rotateY(-3deg) rotateX(1deg)}
}
/* Pantallas anchas: el pie se funde con la página */
.mk-stage--fade .mk{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
@container (max-width:470px){.mk-cap{display:none}}
/* Hero: la pantalla es la protagonista y sale por el borde derecho */
@media (min-width:1200px){
  .phero__grid--mk{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .phero__grid--mk .phero__mk{margin-right:-160px}
}