/* Sesión 2 · Prompts del caso (diap. 10) y prompts en Claude Code (diap. 20). Todo con el prefijo pr2-; la clase
   global .tabs se redefine aquí dentro de .pr2. */
.pr2{position:relative;margin-top:16px}
.pr2 .src{margin-top:10px}

/* ---------- pasos numerados: píldoras en fila; la activa la marca una pieza que se desliza ---------- */
.pr2 .tabs{position:relative;display:flex;gap:8px;align-items:center}
.pr2 .tabs button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;height:48px;padding:0 19px 0 8px;border-radius:999px;text-align:left;white-space:nowrap;color:#C9CDD8;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .35s,border-color .35s,color .35s}
.pr2 .tabs button:hover{background:rgba(255,255,255,.08)}
.pr2 .tabs button.pr2-act{color:#fff;background:transparent;border-color:transparent}
.pr2 .tabs .pr2-num{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;margin:0;border-radius:50%;font-family:var(--tt);font-weight:600;font-size:17px;line-height:1;color:#C9D3EA;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:background .35s,color .35s,border-color .35s}
.pr2 .tabs .pr2-tit{display:inline;margin:0;font-size:18px;font-weight:500}
.pr2 .tabs button.pr2-ya .pr2-num{color:#fff;border-color:color-mix(in srgb,var(--cap) 60%,transparent)}
.pr2 .tabs button.pr2-act .pr2-num{color:#05060A;background:var(--cap);border-color:var(--cap)}
.pr2-cl .tabs button[data-p="0"]{margin-right:10px}
.pr2-thumb{position:absolute;z-index:0;left:0;top:0;width:0;height:48px;border-radius:999px;pointer-events:none;background:color-mix(in srgb,var(--cap) 15%,rgba(8,10,18,.7));border:1px solid color-mix(in srgb,var(--cap) 62%,transparent);box-shadow:0 12px 34px -12px color-mix(in srgb,var(--cap) 75%,transparent);transition:left .6s var(--ease),width .6s var(--ease)}
/* reproducción automática: un anillo se completa alrededor del número antes de pasar al siguiente */
@property --pr2-giro{syntax:'<angle>';inherits:false;initial-value:0deg}
.pr2 .tabs .pr2-num{position:relative}
.pr2 .tabs .pr2-num::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,var(--cap) var(--pr2-giro),rgba(255,255,255,.08) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));opacity:0;--pr2-giro:0deg}
.pr2 .tabs button.pr2-corre .pr2-num::after{opacity:1;--pr2-giro:360deg;transition:--pr2-giro var(--dur,6s) linear,opacity .4s}
/* los prompts que empiezan con /plan lo dicen en su paso */
.pr2 .tabs .pr2-ptag{display:inline-block;margin:0 0 0 1px;padding:1px 8px 2px;border-radius:7px;font-family:var(--mono);font-size:17px;line-height:1.3;color:#5BE0D3;background:rgba(91,224,211,.09);border:1px solid rgba(91,224,211,.32)}

/* ---------- leyenda: título, cuándo se usa y Copiar ---------- */
.pr2-pie{display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;margin-top:14px}
.pr2-pt{min-width:0}
.pr2 .pt-t{display:block;font-family:var(--tt);font-weight:500;font-size:23px;letter-spacing:-.02em;line-height:1.2;color:#fff}
.pr2 .pt-n{margin-top:3px;font-size:17px;line-height:1.4;color:#B4B8C5}
.pr2 .pt-c{flex:none;min-width:112px;justify-content:center;cursor:pointer}

/* ---------- puntos que viajan del paso al lugar donde se pega ---------- */
.pr2-capa{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
.pr2-chispa{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--cap);box-shadow:0 0 10px var(--cap),0 0 2px #fff;opacity:0}
.pr2-llega::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--cap);pointer-events:none;animation:pr2-anillo .9s var(--ease) both}
@keyframes pr2-anillo{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(1.025)}}

/* ---------- palabras: el texto está completo; solo cambia su opacidad ---------- */
.pr2-espera .pr2-w{opacity:0}
.pr2-anim .pr2-w{animation:pr2-pal .6s var(--ease) both;animation-delay:calc(var(--i) * 14ms)}
@keyframes pr2-pal{from{opacity:0;color:var(--cap)}35%{opacity:1;color:var(--cap)}}
.pr2-hueco{color:#F5C84B;background:rgba(245,200,75,.1);border-radius:5px;box-shadow:inset 0 -1px 0 rgba(245,200,75,.6);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pr2-listo::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:4px;vertical-align:-.17em;background:var(--cap);animation:parpadea 1s steps(1) infinite}

/* =====================================================================
   Diap. 10 · el proyecto «Caso SITT»
   ===================================================================== */
.pr2-proy{position:relative;margin-top:28px;padding:26px 22px 18px;border-radius:26px;background:linear-gradient(180deg,rgba(120,150,255,.075),rgba(120,150,255,.02));border:1px solid rgba(127,178,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -46px rgba(0,0,0,.95)}
.pr2-leyenda,.pr2-sim{position:absolute;top:-18px;display:flex;align-items:center;gap:10px;height:36px;padding:0 16px;border-radius:999px;background:#0A0E1C;border:1px solid rgba(127,178,255,.26);font-size:17px;white-space:nowrap}
.pr2-leyenda{left:24px;padding-left:12px}
.pr2-leyenda b{font-family:var(--tt);font-weight:600;font-size:19px;letter-spacing:-.01em;color:#fff}
.pr2-leyenda small{font-size:17px;color:var(--muted)}
.pr2-logo{width:18px;height:25px;background:url(../logo-neg.png) left center/auto 25px no-repeat}
.pr2-sim{right:24px;color:#C9D3EA;font-style:normal}
.pr2-cuerpo{position:relative;display:grid;grid-template-columns:500px 1fr;column-gap:88px;align-items:stretch}
.pr2-lado{display:grid;gap:12px;align-content:start;transition:opacity .6s var(--ease)}
.pr2-card{position:relative;padding:12px 16px 14px;border-radius:18px;background:rgba(7,9,17,.82);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:border-color .5s,box-shadow .5s}
.pr2-card header{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:17px;font-weight:600;color:#DCE5FA}
.pr2-ico{position:relative;flex:none;width:18px;height:18px;border-radius:5px;background:color-mix(in srgb,var(--cap) 18%,transparent);border:1px solid color-mix(in srgb,var(--cap) 50%,transparent)}
.pr2-ico-ins::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:2px;border-radius:1px;background:var(--cap);box-shadow:0 4px 0 var(--cap),0 8px 0 color-mix(in srgb,var(--cap) 60%,transparent)}
.pr2-ico-con::before{content:"";position:absolute;left:4px;top:3px;width:8px;height:10px;border-radius:1px 3px 1px 1px;background:var(--cap);box-shadow:2px 2px 0 -1px color-mix(in srgb,var(--cap) 50%,transparent)}
.pr2-instx{font-size:17px;line-height:1.45;color:#C9CDD8;min-height:1.45em;transition:color .5s}
.pr2-docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pr2-docs li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:opacity .45s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1)}
.pr2-docs li i{grid-row:1/3;width:21px;height:27px;border-radius:3px;background:linear-gradient(160deg,#BFD9FF,#4C9BFF);clip-path:polygon(0 0,64% 0,100% 30%,100% 100%,0 100%)}
.pr2-docs b{font-family:var(--tt);font-weight:600;font-size:18px;line-height:1.1;color:#fff}
.pr2-docs small{font-size:17px;line-height:1.25;color:var(--muted)}
.pr2-con.pr2-vacio li{opacity:0;transform:translateY(10px) scale(.9)}
.pr2-con:not(.pr2-vacio) li{transition-delay:calc(var(--j) * 150ms)}
.pr2-msj{position:relative;display:flex;flex-direction:column;padding:16px 18px 12px 20px;border-radius:22px;background:#0A0D16;border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:border-color .5s,box-shadow .5s,opacity .6s var(--ease)}
.pr2-msjx{flex:1;font-size:18px;line-height:1.45;color:#F5F5F7}
.pr2-mbar{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.pr2-mas{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:#A1A1AA}
.pr2-mas svg{width:16px;height:16px}
.pr2-env{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);color:#6E6E78;transition:background .5s,color .5s,box-shadow .5s}
.pr2-env svg{width:18px;height:18px}
.pr2-pchat .pr2-env{background:var(--grad);color:#05060A;box-shadow:0 8px 24px -8px rgba(76,155,255,.8)}
.pr2-env.pr2-late::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid #7FB2FF;animation:pr2-late 1.4s var(--ease) 2 both}
@keyframes pr2-late{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.55)}}
/* destino activo: el que recibe el prompt elegido */
.pr2-p0 .pr2-ins,.pr2-pchat .pr2-msj{border-color:color-mix(in srgb,var(--cap) 62%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cap) 10%,transparent),0 26px 60px -30px color-mix(in srgb,var(--cap) 65%,transparent)}
.pr2-p0 .pr2-instx{color:#F5F5F7}
.pr2-p0 .pr2-msj{opacity:.45}
.pr2-pchat .pr2-lado{opacity:.62}
/* trazos: instrucciones y conocimiento hacia el chat */
.pr2-hilos{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:2}
.pr2-hb{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}
.pr2-hf{fill:none;stroke:var(--cap);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 14;opacity:0;transition:opacity .6s}
.pr2-vivo .pr2-hf{opacity:.95;animation:pr2-fluye 1.2s linear infinite;animation-delay:calc(var(--h) * -.6s)}
.pr2-hilos circle{fill:#0A0D16;stroke:color-mix(in srgb,var(--cap) 75%,transparent);stroke-width:2}
@keyframes pr2-fluye{to{stroke-dashoffset:-28}}

/* =====================================================================
   Diap. 20 · la terminal de Claude Code
   ===================================================================== */
.pr2-term{margin-top:20px;border-radius:18px;background:#06070C;border:1px solid rgba(255,255,255,.13);overflow:hidden;cursor:pointer;box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 60px -30px rgba(157,140,255,.35)}
.pr2-tbar{display:flex;align-items:center;gap:7px;height:40px;padding:0 10px 0 16px;background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.08)}
.pr2-tbar>i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16)}
.pr2-tbar>span{margin-left:10px;font-size:17px;color:var(--faint)}
.pr2-tbar .pr2-sim{position:static;margin-left:auto;height:30px;padding:0 14px;background:rgba(255,255,255,.04)}
.pr2-tcu{padding:16px 26px 16px;font-family:var(--mono);font-size:19px;line-height:1.45;color:#D4D4D9}
.pr2-bienv{display:inline-flex;align-items:center;gap:14px;padding:7px 18px 7px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--cap) 50%,transparent);font-size:17px;line-height:1.4}
.pr2-bienv b{font-weight:600;color:#D3CBFF}
.pr2-bienv span{color:var(--faint)}
.pr2-sello{position:relative;flex:none;width:22px;height:22px}
.pr2-sello i{position:absolute;width:7px;height:7px;border-radius:50%;animation:pr2-sello 2.4s ease-in-out infinite}
.pr2-sello i:nth-child(1){left:7.5px;top:0;background:#2ED3C6}
.pr2-sello i:nth-child(2){left:15px;top:7.5px;background:#4C9BFF;animation-delay:.3s}
.pr2-sello i:nth-child(3){left:7.5px;top:15px;background:#9D8CFF;animation-delay:.6s}
.pr2-sello i:nth-child(4){left:0;top:7.5px;background:#7FB2FF;animation-delay:.9s}
@keyframes pr2-sello{0%,100%{opacity:.45;transform:scale(.8)}30%{opacity:1;transform:scale(1.15)}}
.pr2-entrada{position:relative;display:grid;grid-template-columns:20px 1fr;column-gap:8px;margin-top:16px;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.015)}
.pr2-gt{color:#8A8A93}
.pr2-tx{color:#F5F5F7;overflow-wrap:anywhere}
.pr2-tx .pr2-cmd{color:#5BE0D3;font-weight:600}
.pr2-tx.pr2-listo::after{width:.55em;height:1.15em;vertical-align:-.22em;margin-left:2px;background:#F5F5F7;opacity:.85}
.pr2-estado{display:flex;align-items:center;gap:18px;margin-top:10px;padding-left:6px}
/* «modo plan» hereda la clase global .plan (una tarjeta con relleno): aquí se anula */
.pr2-estado .modo{display:inline-flex;gap:9px;margin:0;padding:0;font-size:17px}
.pr2-glosa{font-family:'Inter',sans-serif;font-size:17px;color:var(--faint)}
.pr2-estado.pr2-cambia .modo{animation:pr2-modo 1.1s var(--ease)}
@keyframes pr2-modo{0%{text-shadow:0 0 0 transparent}25%{text-shadow:0 0 14px currentColor}100%{text-shadow:0 0 0 transparent}}