/* ---------- Sesión 2 · Iteración con instrucciones: conversación simulada con Claude y artefacto con versiones ---------- */
.it2{position:relative;margin-top:24px;height:522px}
.it2::before{content:"";position:absolute;inset:6% 3% 0;border-radius:48px;pointer-events:none;filter:blur(36px);
 background:radial-gradient(55% 65% at 22% 70%,rgba(46,211,198,.13),transparent 70%),radial-gradient(50% 60% at 82% 35%,rgba(157,140,255,.12),transparent 70%)}

/* marcador, a la derecha del titular */
.it2-marcador{position:absolute;right:2px;bottom:calc(100% + 38px);display:flex;align-items:flex-end}
.it2-marcador div{display:flex;flex-direction:column;gap:8px;padding:0 0 0 30px;margin-left:30px;border-left:1px solid rgba(255,255,255,.1)}
.it2-marcador div:first-child{border-left:0;margin-left:0;padding-left:0}
.it2-marcador b{font-family:var(--tt);font-weight:500;font-size:42px;line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink)}
.it2-marcador span{font-size:17px;color:var(--muted);white-space:nowrap}

/* ventana */
.it2-win{position:relative;display:grid;grid-template-columns:620px 1fr;height:100%;border-radius:22px;overflow:hidden;
 background:rgba(9,11,17,.9);backdrop-filter:blur(16px);border:1px solid rgba(127,178,255,.16);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 46px 90px -50px rgba(76,155,255,.55),0 30px 60px -30px rgba(0,0,0,.9)}
.it2-win::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad);opacity:.6;z-index:2}

/* conversación */
.it2-chat{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 45%)}
.it2-cab{flex:none;display:flex;align-items:center;gap:14px;height:48px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.it2-sim{flex:none;display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 10px;border-radius:999px;font-size:17px;color:#BFEFEA;background:rgba(46,211,198,.1);border:1px solid rgba(46,211,198,.3)}
.it2-sim i{width:7px;height:7px;border-radius:50%;background:#2ED3C6;box-shadow:0 0 8px #2ED3C6}
.it2-tit{font-size:17px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it2-hilo{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:10px 18px 12px;overflow:hidden;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px);mask-image:linear-gradient(180deg,transparent 0,#000 44px)}
.it2-m{flex:none;display:flex;gap:10px;align-items:flex-start;animation:it2-sube .55s var(--ease) both}
.it2-m p{padding:9px 14px;border-radius:16px;font-size:17px;line-height:1.4}
.it2-m.u{align-self:flex-end;max-width:90%}
.it2-m.u p{background:rgba(255,255,255,.09);border-bottom-right-radius:5px;color:#EEEFF4}
.it2-m.u.corto{max-width:84%}
.it2-m.u.corto p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#C9CBD3}
.it2-m.a{align-self:flex-start;max-width:93%}
.it2-m.a p{min-height:44px;background:rgba(127,178,255,.065);border:1px solid rgba(127,178,255,.17);border-bottom-left-radius:5px;color:#E6E9F2}
.it2-av{flex:none;width:28px;height:28px;margin-top:8px;border-radius:9px;box-shadow:0 0 14px rgba(76,155,255,.4);
 background:radial-gradient(circle at 50% 31%,#fff 0 2.1px,transparent 2.6px),radial-gradient(circle at 31% 66%,#fff 0 2.1px,transparent 2.6px),radial-gradient(circle at 69% 66%,#fff 0 2.1px,transparent 2.6px),linear-gradient(135deg,#2ED3C6,#4C9BFF 55%,#9D8CFF)}
.it2-pen{display:inline-flex;align-items:center;gap:5px;height:24px}
.it2-pen i{width:7px;height:7px;border-radius:50%;background:#9FB4D9;animation:it2-pen 1s ease-in-out infinite}
.it2-pen i:nth-child(2){animation-delay:.15s}
.it2-pen i:nth-child(3){animation-delay:.3s}
@keyframes it2-pen{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes it2-sube{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}

/* cuadro de mensaje con las instrucciones candidatas */
.it2-comp{flex:none;margin:0 14px 14px;padding:10px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .5s,box-shadow .5s}
.it2-comp.turno{border-color:color-mix(in srgb,var(--cap) 48%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--cap) 9%,transparent),inset 0 1px 0 rgba(255,255,255,.05)}
.it2-comp-cab{display:flex;align-items:center;gap:12px;min-height:30px;padding:0 2px 0 6px}
.it2-ph{flex:1;font-size:17px;color:var(--muted)}
.it2-der{flex:none;display:flex}
.it2-env{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#8A8A93;background:rgba(255,255,255,.07);transition:background .3s,color .3s,box-shadow .3s}
.it2-comp:has(.it2-op:hover) .it2-env{color:#05141A;background:var(--cap);box-shadow:0 0 16px color-mix(in srgb,var(--cap) 60%,transparent)}
.it2-opsw{display:grid;grid-template-rows:1fr;margin-top:7px;transition:grid-template-rows .5s var(--ease),margin-top .5s var(--ease)}
.it2-opsw.cerrado{grid-template-rows:0fr;margin-top:0}
.it2-opsw>.it2-ops{min-height:0;overflow:hidden}
.it2-ops{display:grid;gap:7px}
.it2-op{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;text-align:left;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);cursor:pointer;
 transition:background .3s,border-color .3s,opacity .3s;animation:it2-sube .6s var(--ease) backwards;animation-delay:var(--t,0ms)}
.it2-op:hover{background:color-mix(in srgb,var(--cap) 10%,transparent);border-color:color-mix(in srgb,var(--cap) 55%,transparent)}
.it2-l{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-family:var(--tt);font-weight:600;font-size:17px;color:#C9D3EA;background:rgba(255,255,255,.07);transition:background .3s,color .3s}
.it2-op:hover .it2-l,.it2-op.envia .it2-l{color:#05141A;background:var(--cap)}
.it2-tx{font-size:18px;line-height:1.38;color:#E9EAF0;padding-top:1px}
.it2-op.envia{background:color-mix(in srgb,var(--cap) 16%,transparent);border-color:color-mix(in srgb,var(--cap) 80%,transparent)}
.it2-ops.ocupado .it2-op{pointer-events:none}
.it2-ops.ocupado .it2-op:not(.envia){opacity:.4}
.it2-ops.sale .it2-op{animation:it2-sale .35s var(--ease) both}
@keyframes it2-sale{to{opacity:0;transform:translateY(8px);filter:blur(4px)}}
.it2-op.usada{cursor:default;pointer-events:none;background:rgba(255,69,58,.05);border-color:rgba(255,105,90,.28)}
.it2-op.usada .it2-tx{color:#8E8E96;text-decoration:line-through;text-decoration-color:rgba(255,105,90,.8);text-decoration-thickness:1.5px}
.it2-op.usada .it2-l{color:#FF8A80;background:rgba(255,69,58,.16)}

/* cierre: las cuatro reglas */
.it2-comp.fin{border-color:rgba(157,140,255,.35)}
.it2-comp.fin .it2-ph{color:var(--ink);font-size:18px;line-height:1.35}
.it2-otra.btn{padding:6px 16px}
.it2-reglas{grid-template-columns:1fr 1fr}
.it2-regla{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;font-size:17px;line-height:1.38;color:#E9EAF0;
 background:color-mix(in srgb,var(--c) 9%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,transparent);animation:it2-sube .6s var(--ease) backwards;animation-delay:var(--t,0ms)}
.it2-regla i{flex:none;position:relative;width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 60%,transparent)}
.it2-regla i::after{content:"";position:absolute;left:8px;top:4.5px;width:5px;height:10px;border:solid #06121A;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* artefacto */
.it2-art{display:flex;flex-direction:column;min-width:0;min-height:0;background:rgba(255,255,255,.012)}
.it2-acab{flex:none;display:flex;align-items:center;gap:14px;height:48px;padding:0 16px 0 18px}
.it2-acab>b{font-weight:500;font-size:17px;color:#E6E8EF;white-space:nowrap}
.it2-chips{margin-left:auto;display:flex;align-items:center}
.it2-chip{height:30px;min-width:46px;padding:0 10px;border-radius:999px;font-family:var(--tt);font-weight:600;font-size:17px;color:#8A8A93;border:1px dashed rgba(255,255,255,.24);cursor:pointer;
 transition:color .4s,background .4s,border-color .4s,box-shadow .4s}
.it2-chip:hover{color:var(--ink);border-color:var(--c)}
.it2-chip.ya{color:#06121A;background:var(--c);border:1px solid var(--c)}
.it2-chip.on{box-shadow:0 0 0 2px #0A0C13,0 0 0 4px color-mix(in srgb,var(--c) 75%,transparent),0 0 22px color-mix(in srgb,var(--c) 70%,transparent)}
.it2-chip.nace{animation:pop .6s cubic-bezier(.34,1.56,.64,1) both}
.it2-chip.fallo{color:#FF8A80;background:rgba(255,69,58,.1);border:1px dashed #FF6B5A}
.it2-con{display:flex;gap:4px;margin:0 7px}
.it2-con i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .4s,box-shadow .4s}
.it2-con.ya i{background:var(--c);box-shadow:0 0 6px var(--c)}
.it2-con.ya i:nth-child(2){transition-delay:.12s}
.it2-con.ya i:nth-child(3){transition-delay:.24s}

.it2-lienzo{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;margin:0 14px 14px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -30px rgba(0,0,0,.9)}
.it2-lienzo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
 background:linear-gradient(100deg,transparent 30%,rgba(76,155,255,.13) 50%,transparent 70%);background-size:250% 100%}
.it2-lienzo.carga::after{opacity:1;animation:it2-brillo 1.3s linear infinite}
.it2-vista{position:relative;flex:1;min-height:0;overflow:hidden;transition:filter .4s}
.it2-lienzo.carga .it2-vista{filter:saturate(.5) brightness(.96)}
.it2-capa{position:absolute;inset:0;background:#fff;overflow:hidden}
.it2-capa.img{padding:14px 18px}
.it2-capa.img img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
.it2-capa.entra{animation:it2-revela .9s cubic-bezier(.65,0,.35,1) both}
@keyframes it2-revela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.it2-barrido{position:absolute;left:0;right:0;top:0;height:3px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,#2ED3C6 20%,#4C9BFF 50%,#9D8CFF 80%,transparent);box-shadow:0 0 18px rgba(76,155,255,.85);animation:it2-barre .9s cubic-bezier(.65,0,.35,1) both}
.it2-barrido.mal{background:linear-gradient(90deg,transparent,#FF6B5A 20%,#FF453A 50%,#FF6B5A 80%,transparent);box-shadow:0 0 18px rgba(255,69,58,.85)}
@keyframes it2-barre{from{top:0}92%{opacity:1}to{top:100%;opacity:0}}

/* esqueleto mientras Claude construye la versión 1 */
.it2-esq{height:100%;padding:22px 24px;display:grid;gap:14px;align-content:start}
.it2-esq u{display:block;height:18px;border-radius:8px;background:linear-gradient(90deg,#ECEEF2 0%,#F8F9FB 45%,#ECEEF2 90%);background-size:220% 100%;animation:it2-brillo 1.3s linear infinite}
.it2-esq u.t{width:42%;height:28px}
.it2-esq u.st{width:28%;margin-top:-6px}
.it2-esq div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 8px}
.it2-esq div u{height:78px;border-radius:14px}
.it2-esq u.f{height:24px}
@keyframes it2-brillo{from{background-position:130% 0}to{background-position:-130% 0}}

/* maquetas de cada falla (estilos .mk2 de la sesión 1), con texto de al menos 17 px */
.it2-capa .mk2{font-size:17px;padding:12px 16px;min-height:0}
.it2-capa .mk2-cab{margin:-12px -16px 10px;padding:8px 16px;font-size:19px}
.it2-capa .mk2-kp div{font-size:17px;padding:5px 12px;line-height:1.3}
.it2-capa .mk2-kp b{font-size:22px}
.it2-capa .mk2 table,.it2-capa .mk2 table.apretada{font-size:17px;margin-top:8px}
.it2-capa .mk2 th{padding:5px 6px}
.it2-capa .mk2 td{padding:5px 6px;line-height:1.3}
.it2-capa .mk2 td.bug{font-family:inherit}
.it2-capa .mk2 .inv{font-size:17px;padding:0 8px;white-space:nowrap}
.it2-capa .mk2-log{font-size:17px;padding:8px 16px}
.it2-capa .mk2-nota{font-size:17px}
.it2-capa.mk-columnas .mk2-kp{display:none}

/* franja sobre el artefacto: roja si falló, azul verdosa si se logró el cambio */
.it2-banda{position:relative;z-index:5;flex:none;max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.it2-banda.mal,.it2-banda.bien{max-height:190px}
.it2-banda>div{display:flex;gap:14px;align-items:flex-start;padding:12px 20px 14px;color:#fff;animation:enfoca .5s var(--ease)}
.it2-banda.mal>div{background:linear-gradient(95deg,#D9352B,#B3241D)}
.it2-banda.bien>div{background:linear-gradient(95deg,#0B7C75,#1A64B0)}
.it2-banda i{flex:none;position:relative;width:24px;height:24px;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.22)}
.it2-banda.bien i::after{content:"";position:absolute;left:8.5px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.it2-banda.mal i::before{content:"";position:absolute;left:10.8px;top:5px;width:2.4px;height:9px;border-radius:2px;background:#fff}
.it2-banda.mal i::after{content:"";position:absolute;left:10.3px;top:16px;width:3.4px;height:3.4px;border-radius:50%;background:#fff}
.it2-banda p{min-width:0}
.it2-banda b{display:block;font-weight:600;font-size:18px;line-height:1.35}
.it2-banda span{display:block;margin-top:3px;font-size:17px;line-height:1.4;color:rgba(255,255,255,.9)}
.it2-banda em{font-style:normal;font-weight:600;color:#fff}