/* Sesión 2 · Agenda de la sesión: la mañana en dos partes (parte 1 en Claude, pausa, parte 2 en Claude Code).
   Texto mínimo de 17 px; todas las clases llevan el prefijo ag2-. */
.ag2{display:grid;grid-template-columns:1fr 180px 1fr;height:488px;margin-top:30px}

/* ---------- las dos partes ---------- */
.ag2-parte{display:flex;flex-direction:column;padding:18px 16px 14px;border-radius:24px;transition:border-color .6s,box-shadow .6s}
.ag2-parte[data-parte="1"]{--pc:#2ED3C6}
.ag2-parte[data-parte="2"]{--pc:#9D8CFF}
.ag2-parte.ag2-aqui{border-color:color-mix(in srgb,var(--pc) 40%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px color-mix(in srgb,var(--pc) 12%,transparent),0 34px 70px -40px color-mix(in srgb,var(--pc) 60%,transparent)}
.ag2-cab{position:relative;display:flex;align-items:center;gap:14px;height:50px;padding:0 2px;margin-bottom:10px}
.ag2-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#0B0E19;border:1px solid rgba(127,178,255,.2);transition:background .6s,border-color .6s,box-shadow .6s}
.ag2-ico svg{width:26px;height:26px;display:block}
.ag2-aqui .ag2-ico{background:color-mix(in srgb,var(--pc) 12%,#0B0E19);border-color:color-mix(in srgb,var(--pc) 55%,transparent);box-shadow:0 0 24px -6px color-mix(in srgb,var(--pc) 80%,transparent)}
.ag2-ct{display:flex;flex-direction:column;gap:1px}
.ag2-ct small{font-size:17px;line-height:1.15;color:var(--muted)}
.ag2-ct b{font-family:var(--tt);font-weight:500;font-size:26px;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.ag2-cur{animation:ag2-parpadea 1.1s steps(1) infinite}
@keyframes ag2-parpadea{50%{opacity:0}}
/* el riel nace en el ícono de cada parte */
.ag2-ent{position:absolute;left:24px;top:48px;width:2px;height:19px;background:rgba(255,255,255,.1)}
.ag2-ent i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--pc),var(--c0));transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.55,0,.25,1)}
.ag2-dentro .ag2-ent i{transform:scaleY(1)}
/* al entrar a la parte 2: primero cruza el puente de la pausa, luego baja del ícono y se enciende el bloque 8 */
.ag2-parte[data-parte="2"].ag2-dentro .ag2-ent i{transition-delay:.4s}
.ag2-parte[data-parte="2"] .ag2-f:first-child.ag2-on .ag2-n{transition-delay:.75s}

/* ---------- filas: número, actividad, versión y lo que sale ---------- */
.ag2-filas{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}
.ag2-f{position:relative;flex:1 1 0;display:grid;grid-template-columns:32px 1fr auto;column-gap:14px;align-content:start;align-items:start;padding:6px 12px 6px 8px;border-radius:16px;border:1px solid transparent;text-align:left;cursor:pointer;transition:background .5s,border-color .5s,flex-grow .6s var(--ease)}
.ag2-f:hover .ag2-a{color:#fff}
.ag2-f:hover .ag2-n{border-color:var(--c)}
.ag2-f.ag2-on{flex-grow:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 15%,transparent),color-mix(in srgb,var(--c) 4%,transparent) 75%);border-color:color-mix(in srgb,var(--c) 30%,transparent)}
/* riel: cada fila dibuja el tramo hasta la siguiente; la luz lo llena al pasar */
.ag2-f::before,.ag2-f::after{content:"";position:absolute;left:23px;top:22px;width:2px;height:calc(100% + 6px);border-radius:2px;pointer-events:none}
.ag2-f::before{background:rgba(255,255,255,.1)}
.ag2-f::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,transparent),var(--c2));box-shadow:0 0 10px color-mix(in srgb,var(--c2) 60%,transparent);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.55,0,.25,1)}
.ag2-f.ag2-ya::after{transform:scaleY(1)}
.ag2-f:last-child::before,.ag2-f:last-child::after,.ag2-f:last-child .ag2-chispa{display:none}
.ag2-chispa{position:absolute;z-index:2;left:19px;top:18px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--c2),0 0 20px 5px color-mix(in srgb,var(--c2) 55%,transparent);opacity:0;pointer-events:none}
.ag2-chispa::before{content:"";position:absolute;left:4px;bottom:5px;width:2px;height:38px;border-radius:2px;background:linear-gradient(0deg,#fff,color-mix(in srgb,var(--c2) 50%,transparent) 45%,transparent)}
.ag2-f.ag2-ya .ag2-chispa{animation:ag2-baja .6s cubic-bezier(.55,0,.25,1) both}
@keyframes ag2-baja{0%{top:18px;opacity:0}18%{opacity:1}80%{opacity:1}100%{top:calc(100% + 24px);opacity:0}}
.ag2-n{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-family:var(--tt);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--c) 55%,#fff);background:#0A0D18;border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);transition:background .45s,color .45s,border-color .45s,box-shadow .45s}
.ag2-f.ag2-ya .ag2-n{background:color-mix(in srgb,var(--c) 24%,#0A0D18);border-color:color-mix(in srgb,var(--c) 80%,transparent);color:#fff}
.ag2-f.ag2-on .ag2-n{background:var(--c);border-color:var(--c);color:#05060A;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent),0 0 24px color-mix(in srgb,var(--c) 80%,transparent);transition-delay:.4s}
.ag2-f.ag2-on .ag2-n::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--c);opacity:0;animation:ag2-onda 2.2s ease-out 1s infinite}
@keyframes ag2-onda{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.6)}}
.ag2-a{padding-top:3px;font-size:20px;line-height:1.3;color:#C4C9D6;text-wrap:pretty;transition:color .4s}
.ag2-f.ag2-ya .ag2-a{color:#E2E5EE}
.ag2-f.ag2-on .ag2-a{color:#fff}
/* versiones: contorno mientras la luz no llega, llenas cuando la alcanza */
.ag2-v{align-self:start;margin-top:2px;padding:1px 11px;border-radius:999px;border:1.5px solid transparent;font-family:var(--tt);font-weight:600;font-size:17px;line-height:22px;color:color-mix(in srgb,var(--v1) 60%,#fff);background:linear-gradient(#0B0E19,#0B0E19) padding-box,linear-gradient(90deg,var(--v1),var(--v2)) border-box;transition:color .4s,box-shadow .5s}
.ag2-f.ag2-ya .ag2-v,.ag2-f.ag2-on .ag2-v{color:#05060A;background:linear-gradient(90deg,var(--v1),var(--v2)) padding-box,linear-gradient(90deg,var(--v1),var(--v2)) border-box;box-shadow:0 0 18px -2px color-mix(in srgb,var(--v2) 70%,transparent)}
.ag2-f.ag2-on .ag2-v{animation:ag2-hito .9s cubic-bezier(.34,1.56,.64,1) .45s}
@keyframes ag2-hito{40%{transform:scale(1.22)}}
.ag2-sale{grid-column:2/4;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .25s}
.ag2-sale>span{min-height:0;overflow:hidden;font-size:19px;line-height:1.36;color:#E4E7EF;text-wrap:pretty}
.ag2-sale>span::before{content:"";display:block;height:5px}
.ag2-sale em{font-style:normal;font-weight:600;font-size:17px;margin-right:10px;color:color-mix(in srgb,var(--c) 65%,#fff)}
.ag2-f.ag2-on .ag2-sale{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s var(--ease) .12s,opacity .5s .3s}

/* ---------- la pausa: el corte de la mañana y la mesa donde rotan los roles ---------- */
.ag2-pausa{position:relative}
.ag2-corte{position:absolute;left:50%;top:18px;bottom:18px;border-left:1.5px dashed rgba(255,255,255,.16)}
.ag2-puente{position:absolute;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.12)}
.ag2-pa{left:0;right:50%}
.ag2-pb{left:50%;right:0}
.ag2-puente i{display:block;height:100%;background:linear-gradient(90deg,#2ED3C6,#7FB2FF);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.55,0,.25,1)}
.ag2-pb i{background:linear-gradient(90deg,#7FB2FF,#4C9BFF)}
.ag2-izq .ag2-pa i,.ag2-der .ag2-pb i{transform:scaleX(1)}
.ag2-puente b{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #7FB2FF;opacity:0}
.ag2-izq .ag2-pa b,.ag2-der .ag2-pb b{animation:ag2-cruza .55s cubic-bezier(.55,0,.25,1) both}
@keyframes ag2-cruza{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
.ag2-nodo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 16px;border-radius:22px;background:#0A0D18;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:border-color .5s,box-shadow .5s}
.ag2-nodo:hover{border-color:rgba(255,255,255,.26)}
.ag2-nodo.ag2-ya{border-color:rgba(127,178,255,.3)}
.ag2-nodo.ag2-on{border-color:rgba(127,178,255,.6);box-shadow:0 0 0 4px rgba(127,178,255,.1),0 20px 50px -20px rgba(127,178,255,.65);transition-delay:.35s}
.ag2-nodo strong{margin-top:4px;font-family:var(--tt);font-weight:500;font-size:24px;letter-spacing:-.02em;color:#E8EBF3}
.ag2-nodo small{font-size:17px;line-height:1.3;text-align:center;color:var(--muted);transition:color .4s}
.ag2-nodo.ag2-on strong,.ag2-nodo.ag2-on small{color:#fff}
.ag2-mesa{position:relative;width:58px;height:58px;display:grid;place-items:center}
.ag2-mesa b{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);font-family:var(--tt);font-weight:600;font-size:17px;color:#E8EBF3;transition:background .45s,color .45s,border-color .45s}
.ag2-nodo.ag2-ya .ag2-mesa b{border-color:rgba(127,178,255,.6)}
.ag2-nodo.ag2-on .ag2-mesa b{background:#7FB2FF;border-color:#7FB2FF;color:#05060A;transition-delay:.35s}
.ag2-sillas{position:absolute;inset:0}
.ag2-sillas i{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--r);opacity:.5;transition:opacity .4s,box-shadow .4s}
.ag2-sillas i:nth-child(1){left:12%;top:12%}
.ag2-sillas i:nth-child(2){left:88%;top:12%}
.ag2-sillas i:nth-child(3){left:88%;top:88%}
.ag2-sillas i:nth-child(4){left:12%;top:88%}
.ag2-nodo.ag2-on .ag2-sillas i,.ag2-nodo.ag2-ya .ag2-sillas i{opacity:1;box-shadow:0 0 10px var(--r)}
.ag2-nodo.ag2-on .ag2-sillas{animation:ag2-gira 4.4s var(--ease) .7s infinite}
@keyframes ag2-gira{0%,12%{transform:rotate(0)}25%,37%{transform:rotate(90deg)}50%,62%{transform:rotate(180deg)}75%,87%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ag2-cur,.ag2-f.ag2-on .ag2-n::after,.ag2-nodo.ag2-on .ag2-sillas,.ag2-chispa,.ag2-puente b{animation:none!important}}