/* Sesión 2 · Modelos y esfuerzo: escalera de seis etapas y simulación del lugar donde se ajustan (prefijo mo2-,
   también en los modificadores, porque .on, .ver y .cur ya existen en otras hojas) */
.mo2{display:grid;grid-template-columns:570px 1fr;gap:40px;align-items:start;margin-top:22px}

/* ---------- escalera: cada etapa es un peldaño; la bola sube del boceto al MVP ---------- */
.mo2-esc{position:relative;height:432px}
.mo2-pel{position:absolute;left:calc(var(--k) * 40px);top:calc(22px + (5 - var(--k)) * 70px);width:368px;height:60px;display:flex;align-items:center;gap:10px;padding:0 12px 0 12px;border-radius:16px;text-align:left;
 background:linear-gradient(180deg,rgba(150,175,255,.075),rgba(150,175,255,.02));border:1px solid rgba(127,178,255,.15);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -26px rgba(0,0,0,.9);
 transition:background .5s,border-color .5s,box-shadow .5s,opacity .5s,translate .5s var(--ease);
 animation:mo2-entra .8s var(--ease) backwards;animation-delay:calc(var(--k) * 90ms + 420ms)}
@keyframes mo2-entra{from{opacity:0;translate:-16px 12px;filter:blur(5px)}}
.mo2-pel:hover{border-color:rgba(127,178,255,.36)}
.mo2-esc.mo2-vivo .mo2-pel{opacity:.66}
.mo2-esc.mo2-vivo .mo2-pel:hover{opacity:.86}
.mo2-esc.mo2-vivo .mo2-pel.mo2-on{opacity:1;translate:0 -2px;border-color:color-mix(in srgb,var(--c) 64%,transparent);
 background:linear-gradient(180deg,color-mix(in srgb,var(--c) 20%,transparent),color-mix(in srgb,var(--c) 5%,transparent));
 box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent),0 22px 54px -24px var(--c)}
.mo2-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--tt);font-weight:600;font-size:17px;color:#C9D3EA;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:background .5s,color .5s,border-color .5s}
.mo2-pel.mo2-on .mo2-num{background:var(--c);border-color:transparent;color:#05060A}
.mo2-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.mo2-tx b{font-family:var(--tt);font-weight:500;font-size:20px;line-height:1.18;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.mo2-tx small{font-size:17px;line-height:1.3;color:#B4B6C2;white-space:nowrap}
/* medidor: cinco barras que suben, encendidas hasta el nivel de esfuerzo */
.mo2-med{flex:none;display:flex;align-items:flex-end;gap:3px;height:22px}
.mo2-med i{width:6px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .4s}
.mo2-med i:nth-child(1){height:6px}.mo2-med i:nth-child(2){height:10px}.mo2-med i:nth-child(3){height:14px}.mo2-med i:nth-child(4){height:18px}.mo2-med i:nth-child(5){height:22px}
.mo2-med i.mo2-si{background:var(--b)}
.mo2-pel.mo2-on .mo2-med i.mo2-si{box-shadow:0 0 10px -1px var(--b)}
.mo2-nv{flex:none;min-width:64px;white-space:nowrap;font-size:17px;color:color-mix(in srgb,var(--c) 52%,#fff)}

/* bola: descansa sobre el peldaño de la etapa activa y salta al siguiente */
.mo2-bola{position:absolute;left:0;top:0;z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;pointer-events:none;transition:transform var(--dur,.5s) cubic-bezier(.45,0,.35,1)}
.mo2-bola i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c,#2ED3C6) 30%,transparent),0 0 22px 3px var(--c,#2ED3C6);transition:box-shadow .5s;animation:mo2-cae .8s cubic-bezier(.34,1.5,.64,1) 1.05s backwards}
@keyframes mo2-cae{from{opacity:0;translate:0 -46px}}
.mo2-bola.mo2-salta i{animation:mo2-salto var(--dur,.5s) cubic-bezier(.3,0,.4,1)}
@keyframes mo2-salto{50%{translate:0 -28px}}
.mo2-bola::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--c,#2ED3C6);opacity:0}
.mo2-bola.mo2-toca::after{animation:mo2-onda .8s ease-out}
@keyframes mo2-onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}

/* ---------- a la derecha: dónde se ajusta, en una simulación ---------- */
.mo2-der{display:flex;flex-direction:column;gap:12px}
.mo2-cab{display:flex;align-items:center;gap:14px;height:34px}
.mo2-hn{font-family:var(--tt);font-weight:500;font-size:28px;letter-spacing:-.03em;color:var(--ink)}
.mo2-sim{margin-left:auto;font-size:17px;color:var(--faint);padding:3px 12px;border-radius:999px;border:1px dashed rgba(255,255,255,.2)}
.mo2-mock{position:relative;height:248px;border-radius:20px;background:linear-gradient(180deg,#0C0E18,#07080D);border:1px solid rgba(255,255,255,.11);overflow:hidden;box-shadow:0 40px 80px -46px rgba(76,155,255,.55),0 30px 60px -34px rgba(0,0,0,.9)}
.mo2-cl,.mo2-tm{position:absolute;inset:0;transition:opacity .55s var(--ease),translate .7s var(--ease)}
.mo2-mock[data-h="1"] .mo2-cl,.mo2-mock[data-h="0"] .mo2-tm{opacity:0;translate:0 16px;pointer-events:none}

/* Claude: caja de mensaje con el menú del modelo abierto */
.mo2-hilo{position:absolute;left:24px;top:24px;width:380px;display:grid;gap:11px}
.mo2-hilo i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.065)}
.mo2-hilo i.mo2-u{justify-self:end;width:200px;height:34px;margin-bottom:6px;border-radius:14px 14px 4px 14px;background:rgba(255,255,255,.075)}
.mo2-menu{position:absolute;right:16px;bottom:80px;width:256px;padding:6px;border-radius:14px;background:#191B26;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 50px -20px rgba(0,0,0,.95);transform-origin:80% 100%}
.mo2-menu{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.mo2-cl.mo2-cerrado .mo2-menu{opacity:0;transform:translateY(10px) scale(.95);pointer-events:none}
.mo2-mi{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px;padding:0 12px;border-radius:9px;font-size:18px;color:#C9CDD8;transition:background .4s,color .4s,box-shadow .4s}
.mo2-mi:hover{background:rgba(255,255,255,.05)}
.mo2-mi.mo2-on{background:rgba(255,255,255,.1);color:#fff}
.mo2-mi.mo2-ver{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.mo2-mi b{font-weight:500}
.mo2-ck{width:13px;height:7px;margin-top:-4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);opacity:0;transition:opacity .3s}
.mo2-mi.mo2-on .mo2-ck{opacity:1}
.mo2-ef{display:flex;align-items:center;justify-content:space-between;height:36px;margin-top:5px;padding:5px 12px 0;border-top:1px solid rgba(255,255,255,.09);font-size:17px;color:var(--muted)}
.mo2-ef b{font-weight:600;color:color-mix(in srgb,var(--c) 60%,#fff);transition:color .4s}
.mo2-comp{position:absolute;left:16px;right:16px;bottom:16px;height:54px;display:flex;align-items:center;gap:12px;padding:0 10px 0 12px;border-radius:16px;background:#141621;border:1px solid rgba(255,255,255,.12)}
.mo2-mas{flex:none;position:relative;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.mo2-mas::before,.mo2-mas::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;border-radius:1px;background:#C9CDD8}
.mo2-mas::after{transform:rotate(90deg)}
.mo2-ph{flex:1;font-size:18px;color:#6F7282}
.mo2-sel{flex:none;display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.1);font-size:18px;color:#fff}
.mo2-cl:not(.mo2-cerrado) .mo2-sel{background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mo2-sel b{font-weight:500}
.mo2-sel i{width:7px;height:7px;margin-top:-4px;border-right:1.6px solid #C9CDD8;border-bottom:1.6px solid #C9CDD8;transform:rotate(45deg)}
.mo2-env{flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:#F5F5F7}
.mo2-env::before{content:"";position:absolute;left:50%;top:10px;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:#0A0B10}
.mo2-env::after{content:"";position:absolute;left:50%;top:10px;width:8px;height:8px;margin-left:-5px;border-left:2px solid #0A0B10;border-top:2px solid #0A0B10;transform:rotate(45deg)}

/* puntero simulado: muestra dónde se hace clic */
.mo2-ptr{position:absolute;left:0;top:0;z-index:3;width:22px;height:26px;pointer-events:none;opacity:0;transition:opacity .3s;filter:drop-shadow(0 5px 9px rgba(0,0,0,.7))}
.mo2-ptr.mo2-ve{opacity:1}
.mo2-ptr svg{display:block;width:100%;height:100%}
.mo2-ptr::after{content:"";position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;opacity:0}
.mo2-ptr.mo2-clic::after{animation:mo2-clic .55s ease-out}
@keyframes mo2-clic{from{opacity:.95;transform:scale(.35)}to{opacity:0;transform:scale(1.9)}}

/* Claude Code: terminal donde se escriben /model y /effort */
.mo2-tm{cursor:pointer;display:flex;flex-direction:column}
.mo2-tbar{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.mo2-tbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.mo2-tbar span{margin-left:8px;font-size:17px;color:var(--faint)}
.mo2-tb{flex:1;padding:20px 24px;font-family:var(--mono);font-size:20px;line-height:1.7;color:#D4D4D9}
.mo2-tb p{opacity:0;transition:opacity .25s}
.mo2-tb p.mo2-on{opacity:1}
.mo2-tb p>span{color:#6F7282}
.mo2-tb b{font-weight:400;color:#F5F5F7}
.mo2-tb em{font-style:normal;color:color-mix(in srgb,var(--c) 70%,#fff)}
.mo2-cur{display:inline-block;width:10px;height:1.1em;vertical-align:-3px;background:#F5F5F7;animation:parpadea 1s steps(1) infinite}
.mo2-tst{flex:none;display:flex;align-items:center;height:36px;padding:0 24px;border-top:1px solid rgba(255,255,255,.08)}

/* ficha: dónde, para qué sirve el modelo y el consejo de la etapa; alto fijo para que nada salte */
.mo2-ficha{display:grid;align-content:start;gap:7px;height:124px;margin:2px 0 0}
.mo2-ficha>div{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:baseline}
.mo2-ficha dt{font-size:17px;color:var(--faint)}
.mo2-ficha dd{margin:0;font-size:19px;line-height:1.4;color:#DADDE7}
.mo2-mod b{font-family:var(--tt);font-weight:600;color:#fff;margin-right:6px}
.mo2-ficha code{font-family:var(--mono);font-size:18px;padding:1px 8px;border-radius:7px;background:rgba(255,255,255,.08);color:#EEF0F6}
.mo2-cons dd{color:#fff}
.mo2-cons dt{color:color-mix(in srgb,var(--c) 60%,#fff);transition:color .4s}

.mo2-pie{margin-top:18px;max-width:none}