/* Sesión 2 · Qué debe hacer el prototipo: maqueta anotada de la pantalla con seis zonas, un foco que las recorre en
   orden y un globo con la definición de cada una. Todas las clases llevan el prefijo .re2- */

/* la sección conserva la clase .via del recorrido de la sesión 1; su regla .via svg ensancha cualquier SVG */
.via .re2 svg{display:block;width:auto;margin:0;overflow:visible}
.re2 .re2-ico{flex:none;width:20px;height:20px}

.re2{--re2-c:var(--cap,#5AC8FA);margin-top:22px}

/* ---------- ventana ---------- */
.re2-win{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(17,23,37,.95),rgba(9,13,22,.97));border:1px solid rgba(127,178,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 50px 100px -50px rgba(0,0,0,.95),0 0 90px -50px rgba(76,155,255,.45)}
.re2-barra{display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.re2-barra>i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.15)}
.re2-barra>span{margin-left:12px;font-size:17px;color:#C9D3EA}
.re2-barra>em{margin-left:auto;font-style:normal;font-size:17px;line-height:1;color:var(--muted);padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.13)}

/* ---------- cuerpo: franja superior y tres columnas ---------- */
.re2-cuerpo{position:relative;display:grid;grid-template-columns:400px 480px 1fr;grid-template-rows:58px 120px 132px;gap:12px 14px;padding:14px 18px 16px}
.re2-zona{position:relative;min-width:0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.075);cursor:pointer;transition:border-color .4s,background .4s}
.re2-zona:hover{border-color:rgba(255,255,255,.22)}
.re2-zona>*{transition:opacity .45s var(--ease)}
.re2-zona.re2-tapada>*{opacity:.08}
.re2-zona header{display:flex;align-items:center;gap:12px;height:28px;font-size:18px;font-weight:500;color:#E9EEF8;white-space:nowrap}
.re2-zona u,.re2-papel u{display:block;flex:none;height:9px;border-radius:5px;text-decoration:none}

/* marcas numeradas */
.re2-pin{position:relative;flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:var(--tt);font-weight:600;font-size:17px;line-height:1;color:#DCE5FA;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.re2-on .re2-pin,.re2-globo .re2-pin{color:#04121C;background:var(--re2-c);border-color:var(--re2-c);box-shadow:0 0 16px color-mix(in srgb,var(--re2-c) 70%,transparent)}
.re2-on .re2-pin::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--re2-c);animation:re2-onda 1.7s ease-out infinite}
@keyframes re2-onda{from{transform:scale(1);opacity:.85}to{transform:scale(1.8);opacity:0}}
.re2-todo .re2-cuerpo .re2-pin{animation:re2-salta .6s var(--ease) both;animation-delay:calc(var(--i) * 120ms)}
@keyframes re2-salta{35%{transform:scale(1.3);color:#04121C;background:var(--re2-c);border-color:var(--re2-c)}}
@keyframes re2-entra{from{opacity:0;transform:translateY(8px) scale(.85)}}

/* 1 · insumos */
.re2-ins{grid-column:1/3;grid-row:1;justify-self:start;display:flex;align-items:center;gap:24px;padding:0 16px 0 14px}
.re2-fichas{display:flex;gap:10px}
.re2-fichas span{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px 0 11px;border-radius:10px;font-size:17px;font-weight:500;color:#E9EEF8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.re2-fichas span::before{content:"";flex:none;width:11px;height:14px;border-radius:2px 5px 2px 2px;background:rgba(220,229,250,.5)}
.re2-fichas .re2-falta{color:#FFA092;background:rgba(255,107,90,.07);border:1.5px dashed rgba(255,107,90,.65)}
.re2-fichas .re2-falta::before{background:none;border:1.5px dashed rgba(255,140,125,.9)}
.re2-ins.re2-on .re2-fichas span{animation:re2-entra .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 130ms + 150ms)}

/* 6 · exportar */
.re2-exp{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;padding:0;background:none;border-color:transparent}
.re2-exp:hover{border-color:transparent}
.re2-expg{display:flex;align-items:center;gap:12px}
.re2-boton{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px 0 16px;border-radius:999px;font-size:18px;font-weight:500;color:#06101C;background:#EEF3FC;box-shadow:0 10px 26px -12px rgba(127,178,255,.7)}
.re2-exp.re2-on .re2-boton{animation:re2-pulsa .55s var(--ease) .15s both}
@keyframes re2-pulsa{40%{transform:scale(.92)}}

/* 2 · requisitos: el estado en palabras */
.re2-req{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;gap:10px}
.re2-filas{display:grid;gap:8px}
.re2-fila{position:relative;display:flex;align-items:center;gap:12px;height:44px;padding:0 10px 0 14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid transparent}
.re2-fila u{background:rgba(255,255,255,.22)}
.re2-fila.re2-sel{background:color-mix(in srgb,var(--re2-c) 9%,transparent);border-color:color-mix(in srgb,var(--re2-c) 40%,transparent)}
.re2-fila.re2-sel::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--re2-c)}
.re2-est{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 10px;border-radius:999px;font-style:normal;font-size:17px;font-weight:500;white-space:nowrap;color:color-mix(in srgb,var(--c) 70%,#fff);background:color-mix(in srgb,var(--c) 14%,transparent)}
.re2-est::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.re2-req.re2-on .re2-est{animation:re2-entra .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 170ms + 200ms)}

/* 3 · evidencia: fragmento del documento y su ubicación */
.re2-evi{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;gap:10px}
.re2-hoja{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:12px;background:rgba(4,7,14,.55);border:1px solid rgba(255,255,255,.08)}
.re2-hoja u{background:rgba(255,255,255,.15)}
.re2-hoja .re2-tit{width:42%;height:11px;margin-bottom:3px;background:rgba(255,255,255,.3)}
.re2-mk{display:block;margin:0 -8px;padding:6px 8px;border-radius:7px;background:linear-gradient(color-mix(in srgb,var(--re2-c) 24%,transparent),color-mix(in srgb,var(--re2-c) 24%,transparent)) no-repeat left/100% 100%;box-shadow:inset 3px 0 0 var(--re2-c)}
.re2-hoja .re2-mk u{background:rgba(255,255,255,.62)}
.re2-cita{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px 0 12px;border-radius:10px;font-size:18px;font-weight:500;color:#E3F4FF;background:color-mix(in srgb,var(--re2-c) 12%,transparent);border:1px solid color-mix(in srgb,var(--re2-c) 48%,transparent)}
.re2-cita::before{content:"";flex:none;width:11px;height:14px;border-radius:2px 5px 2px 2px;background:var(--re2-c)}
.re2-evi.re2-on .re2-mk{animation:re2-resalta 1s var(--ease) .3s both}
@keyframes re2-resalta{from{background-size:0% 100%;box-shadow:inset 0 0 0 var(--re2-c)}}
.re2-evi.re2-on .re2-cita{animation:re2-entra .55s cubic-bezier(.34,1.56,.64,1) 1s both}

/* 4 · cambios: valor anterior y valor nuevo, cada uno con su documento */
.re2-cam{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:8px}
.re2-delta{display:flex;align-items:center;gap:12px}
.re2-val{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;height:58px;padding:0 14px;border-radius:11px;font-size:18px;line-height:1.25;white-space:nowrap}
.re2-val small{font-size:17px;color:var(--muted)}
.re2-ant{color:#A4A7B3;background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.2)}
.re2-ant s{position:relative;text-decoration:none}
.re2-ant s::after{content:"";position:absolute;left:-3px;right:-3px;top:55%;height:2px;border-radius:2px;background:#FF6B5A;transform-origin:left}
.re2-nue{color:#F3F0FF;background:rgba(157,140,255,.12);border:1px solid rgba(157,140,255,.5)}
.re2-nue small{color:#C8BEFF}
.re2-flecha{flex:none;position:relative;width:22px;height:2px;margin-right:6px;border-radius:2px;background:rgba(255,255,255,.55)}
.re2-flecha::after{content:"";position:absolute;right:-7px;top:-5px;border-left:9px solid rgba(255,255,255,.55);border-top:6px solid transparent;border-bottom:6px solid transparent}
.re2-cam.re2-on .re2-ant s::after{animation:re2-tacha .55s var(--ease) .35s both}
@keyframes re2-tacha{from{transform:scaleX(0)}}
.re2-cam.re2-on .re2-flecha{animation:re2-avanza .5s var(--ease) .8s both}
@keyframes re2-avanza{from{opacity:0;transform:translateX(-12px)}}
.re2-cam.re2-on .re2-nue{animation:re2-entra .55s cubic-bezier(.34,1.56,.64,1) 1.05s both}

/* 5 · observación: el campo de quien revisa */
.re2-obs{grid-column:3;grid-row:3;display:flex;flex-direction:column;gap:10px}
.re2-campo{position:relative;flex:1;padding:10px 14px;border-radius:11px;background:rgba(3,6,12,.6);border:1px solid rgba(255,255,255,.14)}
.re2-ph{font-size:17px;color:var(--faint);transition:opacity .3s}
.re2-escr{position:absolute;left:14px;right:14px;top:15px;display:grid;gap:13px}
.re2-escr div{display:flex;align-items:center;gap:3px;height:10px}
.re2-escr u{width:0;background:rgba(255,255,255,.42)}
.re2-escr i{flex:none;width:2px;height:20px;border-radius:1px;background:#fff;opacity:0}
.re2-escrito .re2-ph,.re2-obs.re2-on .re2-ph{opacity:0}
.re2-escrito .re2-escr u{width:var(--w)}
.re2-obs.re2-on .re2-escr div:first-child u{animation:re2-teclea 1.1s steps(16) .5s both}
.re2-obs.re2-on .re2-escr div:last-child u{animation:re2-teclea .8s steps(11) 1.7s both}
@keyframes re2-teclea{from{width:0}to{width:var(--w)}}
.re2-obs.re2-on .re2-escr div:first-child i{animation:re2-cursor 1.2s steps(1) .5s both}
@keyframes re2-cursor{from{opacity:1}to{opacity:0}}
.re2-obs.re2-on .re2-escr div:last-child i{animation:re2-parpadea 1s steps(1) 1.7s infinite}
@keyframes re2-parpadea{0%{opacity:1}50%{opacity:0}}

/* archivo exportado: repite las filas de la pantalla */
.re2-archivo{position:absolute;right:18px;top:94px;z-index:6;width:262px;height:222px;opacity:0;transform:translate(14px,-66px) scale(.32) rotate(9deg);transform-origin:top right;filter:drop-shadow(0 26px 30px rgba(0,0,0,.75));transition:opacity .35s,transform .75s cubic-bezier(.34,1.3,.64,1);pointer-events:none}
.re2-archivo.re2-sale{opacity:1;transform:rotate(-2.5deg);pointer-events:auto}
.re2-papel{position:relative;height:100%;display:flex;flex-direction:column;gap:14px;padding:26px 24px;border-radius:9px;background:#EEF2F8;clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,0 100%)}
.re2-papel::after{content:"";position:absolute;right:0;top:0;width:38px;height:38px;border-radius:0 0 0 8px;background:linear-gradient(225deg,transparent 50%,#C3CBDA 50%)}
.re2-papel u{background:#C9D0DD}
.re2-papel .re2-pt{width:56%;height:12px;margin-bottom:4px;background:#7E889C}
.re2-pf{display:flex;align-items:center;gap:10px}
.re2-pf i{flex:none;width:10px;height:10px;border-radius:50%}
.re2-papel .re2-po{height:8px;background:#DCE1EA}

/* ---------- foco: oscurece todo menos la zona activa ---------- */
.re2-foco{position:absolute;left:0;top:0;width:0;height:0;z-index:5;border-radius:18px;pointer-events:none;opacity:0;box-shadow:0 0 0 1.5px var(--re2-c),0 0 36px -4px color-mix(in srgb,var(--re2-c) 55%,transparent),0 0 0 2400px rgba(3,5,11,.6);transition:left .75s var(--ease),top .75s var(--ease),width .75s var(--ease),height .75s var(--ease),opacity .6s}
.re2-foco.re2-vis{opacity:1}
.re2-foco.re2-sin{transition:opacity .6s}

/* ---------- globo con la definición ---------- */
.re2-globo{position:absolute;left:0;top:0;z-index:7;width:400px;padding:16px 20px 24px;border-radius:18px;background:#111A2B;border:1px solid color-mix(in srgb,var(--re2-c) 50%,transparent);box-shadow:0 34px 70px -24px rgba(0,0,0,.95);cursor:pointer;opacity:0;scale:.96;pointer-events:none;transition:opacity .45s,scale .45s var(--ease),left .7s var(--ease),top .7s var(--ease)}
.re2-globo.re2-vis{opacity:1;scale:1;pointer-events:auto}
.re2-globo.re2-sin{transition:opacity .45s,scale .45s var(--ease)}
.re2-globo header{position:relative;display:flex;align-items:center;gap:12px}
.re2-globo strong{font-family:var(--tt);font-weight:500;font-size:28px;line-height:1.1;letter-spacing:-.025em;color:#fff}
.re2-globo p{position:relative;margin-top:10px;font-size:20px;line-height:1.45;color:#D9DFEB}
.re2-sig{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#DCE5FA;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);transition:background .3s}
.re2-globo:hover .re2-sig{background:color-mix(in srgb,var(--re2-c) 32%,transparent)}
.re2-prog{position:absolute;left:20px;right:20px;bottom:11px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;transition:opacity .4s}
.re2-prog::after{content:"";display:block;height:100%;background:var(--re2-c);transform-origin:left;transform:scaleX(0)}
.re2-prog.re2-corre::after{animation:re2-llena var(--dur,5s) linear both}
@keyframes re2-llena{to{transform:scaleX(1)}}
.re2-fijo .re2-prog{opacity:0}
.re2-cola{position:absolute;width:16px;height:16px;background:#111A2B;border:0 solid color-mix(in srgb,var(--re2-c) 50%,transparent);transform:rotate(45deg)}
.re2-globo[data-lado="der"] .re2-cola{left:-9px;top:calc(var(--cy) - 8px);border-width:0 0 1px 1px}
.re2-globo[data-lado="izq"] .re2-cola{right:-9px;top:calc(var(--cy) - 8px);border-width:1px 1px 0 0}
.re2-globo[data-lado="abajo"] .re2-cola{top:-9px;left:calc(var(--cx) - 8px);border-width:1px 0 0 1px}

/* ---------- pie: recorrido y regla ---------- */
.re2-pie{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:20px}
.re2-pie p{display:flex;align-items:flex-start;gap:14px;font-size:20px;line-height:1.45;color:#D4D9E5}
.re2-term{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.re2-ruta{flex:none;display:inline-flex;align-items:center;margin-top:1px}
.re2-ruta b{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;font-family:var(--tt);font-weight:600;font-size:17px;line-height:1;color:#04121C;background:var(--re2-c)}
.re2-ruta b:last-child{color:#DCE5FA;background:none;border:1px solid rgba(255,255,255,.3)}
.re2-ruta i{width:30px;height:2px;margin:0 4px;border-radius:2px;background:linear-gradient(90deg,var(--re2-c),rgba(255,255,255,.3))}
.re2-no{flex:none;position:relative;display:inline-flex;align-items:center;margin-top:1px;padding:2px 13px;border-radius:999px;font-size:17px;font-weight:500;text-decoration:none;color:#A4A7B3;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.re2-no::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:#FF6B5A;transform:rotate(-8deg)}