// === Escena 07 — "Rápido de leer. Vigilado siempre" (SERVIR Y PROTEGER) ===
// Duración real del mp3: 34.2s. SlideCanvas variant="light". Energía DESCENDENTE:
// va después del clímax; no introduce sorpresa, cierra el sistema con serenidad.
// Dos mitades: (1) servir rápido — origen replicado (el gemelo) + caché + CDN de
// imágenes con miniaturas que cargan al instante · (2) proteger — panel de
// monitorización + escudo 24/7 + chips caídas/ataques. Cierra "JUNTA LAS PIEZAS →".
// LOCUCIÓN (audio/escena-07.mp3): "Servir un archivo también está resuelto. Un
// sistema replicado, con copia y con memoria rápida. Lo pides, y llega al momento,
// desde el punto más cercano a ti. Las imágenes que enseñas a tus clientes van por
// una red de entrega mundial. Cargan al instante, estés donde estés. Y encima de
// todo, alguien vigila. La infraestructura está supervisada y protegida, a todas
// horas. Contra caídas. Contra ataques. Sin que tú tengas que hacer nada, nunca.
// Ahora junta todas las piezas."
function EscenaIN07({ t }){
  const T = {
    nodo:     0.25,  // "Servir un archivo también"   → nodo central storage.dinaup.com
    replicas: 5.51,  // "con memoria rápida"          → 2 réplicas gemelas + capa caché delante
    cercano:  9.60,  // "punto más cercano a ti"      → usuario pide; llega del edge; chip 80 ms
    cdn:      14.97, // "red de entrega mundial"      → banda CDN de nodos (imágenes públicas)
    minis:    16.70, // "Cargan al instante"          → miniaturas que aparecen (stagger rápido)
    vigila:   21.21, // "alguien vigila"              → panel de monitorización (uptime, 99,9%)
    escudo:   23.90, // "supervisada y protegida"     → escudo 24/7 sobre el panel
    caidas:   26.90, // "Contra caídas"               → chip verde caídas ✓
    ataques:  28.27, // "Contra ataques"              → chip verde ataques ✓ (ataque bloqueado)
    salida:   32.63, // "junta todas las piezas"      → píldora salida JUNTA LAS PIEZAS →
  };

  // ---- Paleta (contrato del deck) ----
  const C = {
    azul:'#0085FF', verde:'#10B981', verde2:'#56E16A', naranja:'#FB8C00',
    rojo:'#EF4444', tinta:'#0F172A', gris:'#64748B', gris2:'#94A3B8', borde:'#E2E8F0',
  };

  // ---- Actos: 1 (servir) se atenúa y sale al entrar el panel; 2 (proteger) entra ----
  const act1Op   = 1 - Easing.easeOutCubic(clamp((t-(T.vigila-0.35))/0.55, 0, 1));
  const showAct1 = t < T.vigila + 0.35;
  const showAct2 = t >= T.vigila - 0.35;

  // Foco se desplaza a la derecha cuando entra el CDN: el origen (izq.) se atenúa
  const stDim    = 0.45 * Easing.easeOutCubic(clamp((t-T.cdn)/0.7, 0, 1));
  // Edge + 80 ms cumplieron su papel al llegar el CDN → se apagan con dignidad
  const rightDim = Easing.easeOutCubic(clamp((t-T.cdn)/0.6, 0, 1));

  // =========================================================================
  // ICONOS locales
  // =========================================================================
  const IcoDB = ({ c=C.azul, s=26 })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <ellipse cx="12" cy="5.5" rx="7" ry="2.6" stroke={c} strokeWidth="1.8"/>
      <path d="M5 5.5 V12 C5 13.4 8.1 14.6 12 14.6 C15.9 14.6 19 13.4 19 12 V5.5" stroke={c} strokeWidth="1.8"/>
      <path d="M5 12 V18 C5 19.4 8.1 20.6 12 20.6 C15.9 20.6 19 19.4 19 18 V12" stroke={c} strokeWidth="1.8"/>
    </svg>
  );
  const IcoGlobe = ({ c=C.azul, s=18 })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke={c} strokeWidth="1.8"/>
      <path d="M3 12 H21 M12 3 C15 6.5 15 17.5 12 21 C9 17.5 9 6.5 12 3" stroke={c} strokeWidth="1.6"/>
    </svg>
  );
  const IcoBolt = ({ c='#fff', s=14 })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M13 2 L4 14 H11 L10 22 L19 9 H12 Z" fill={c}/>
    </svg>
  );
  const IcoImg = ({ s=30 })=>(
    <svg width={s} height={s} viewBox="0 0 40 30" fill="none">
      <circle cx="11" cy="9" r="3.2" fill="#FBBF6B"/>
      <path d="M2 26 L14 15 L22 22 L30 13 L38 22 V28 H2 Z" fill="#7DB7F0"/>
    </svg>
  );

  // =========================================================================
  // ACTO 1 — SERVIR RÁPIDO
  // =========================================================================
  // Nodo central (origen)
  const nodoP = clamp((t-T.nodo)/0.7, 0, 1), nodoE = Easing.easeOutBack(nodoP);
  // Réplicas gemelas + conectores + caché + sync
  const repAP = clamp((t-T.replicas)/0.55, 0, 1),        repAE = Easing.easeOutCubic(repAP);
  const repBP = clamp((t-(T.replicas+0.18))/0.55, 0, 1), repBE = Easing.easeOutBack(repBP); // el gemelo B remata el beat
  const connP = Easing.easeInOutCubic(clamp((t-(T.replicas+0.05))/0.7, 0, 1));
  const cacheP = clamp((t-(T.replicas+0.5))/0.45, 0, 1),  cacheE = Easing.easeOutBack(cacheP);
  const syncDraw = Easing.easeInOutCubic(clamp((t-(T.replicas+0.7))/0.7, 0, 1));
  const syncPulse = clamp((t-(T.replicas+1.0))/1.2, 0, 1); // punto que viaja A→B UNA vez

  // Petición: usuario pide, llega del edge más cercano
  const cliP  = clamp((t-T.cercano)/0.6, 0, 1),        cliE  = Easing.easeOutCubic(cliP);
  const edgeP = clamp((t-(T.cercano+0.2))/0.5, 0, 1),  edgeE = Easing.easeOutBack(edgeP);
  const reqPulse = clamp((t-(T.cercano+0.55))/1.0, 0, 1); // pulso edge→cliente
  const msP   = clamp((t-(T.cercano+1.1))/0.4, 0, 1),  msE   = Easing.easeOutBack(msP);

  // CDN — red de entrega mundial
  const cdnLineP = Easing.easeInOutCubic(clamp((t-T.cdn)/0.9, 0, 1));
  const cdnPillP = clamp((t-(T.cdn+0.1))/0.5, 0, 1),   cdnPillE = Easing.easeOutBack(cdnPillP);
  const cdnPulse = clamp((t-(T.cdn+0.4))/1.2, 0, 1);   // pulso recorre la banda
  const cdnLinkP = Easing.easeInOutCubic(clamp((t-(T.cdn+0.3))/0.7, 0, 1)); // banda→cliente

  // ---- Geometría origen (izquierda) ----
  const N = { l:255, tp:250, w:300, h:108 };          // nodo central
  const Ncx = N.l+N.w/2, Nbot = N.tp+N.h;             // 405 · 358
  const RA = { l:165, tp:470, w:170, h:96 };          // réplica A
  const RB = { l:475, tp:470, w:170, h:96 };          // réplica B
  const RAcx = RA.l+RA.w/2, RBcx = RB.l+RB.w/2, Rcy = RA.tp+RA.h/2; // 250 · 560 · 518
  const LA = 191, LB = 191;                            // longitudes conectores (dash)

  // ---- Geometría entrega (derecha) ----
  const EDG = { l:1120, tp:300, w:160, h:72 };         // edge cercano
  const CLI = { l:1360, tp:420, w:380, h:270 };        // navegador del cliente
  const EDGcx = EDG.l+EDG.w/2, EDGbot = EDG.tp+EDG.h;  // 1200 · 372
  const CLIcx = CLI.l+CLI.w/2;                          // 1550
  // CDN band
  const cdnNodesX = [700, 880, 1060, 1240, 1420], cdnY = 236;
  // Coords RELATIVAS al navegador (el div tiene overflow:hidden): rejilla 2×2 bajo la barra.
  const THUMBS = [ {x:18,y:54}, {x:197,y:54}, {x:18,y:152}, {x:197,y:152} ];

  // =========================================================================
  // ACTO 2 — PROTEGER
  // =========================================================================
  const PL=540, PT=260, PW=840, PH=320;                // panel monitorización
  const panelP = clamp((t-T.vigila)/0.6, 0, 1),   panelE = Easing.easeOutCubic(panelP);
  const chartDraw = Easing.easeInOutCubic(clamp((t-(T.vigila+0.35))/1.0, 0, 1));
  const up = useCountUp(0, 999, T.vigila+0.5, 1.3, t);
  const uptimeStr = (up/10).toFixed(1).replace('.', ',');
  const dotsBase = T.vigila + 0.5;                     // dots de servicio (cascada)
  const escP = clamp((t-T.escudo)/0.6, 0, 1),     escE = Easing.easeOutBack(escP);
  const escDraw = Easing.easeOutCubic(clamp((t-(T.escudo+0.2))/0.5, 0, 1));
  const caiP = clamp((t-T.caidas)/0.4, 0, 1),     caiE = Easing.easeOutBack(caiP);
  const caiCheck = Easing.easeOutCubic(clamp((t-(T.caidas+0.15))/0.35, 0, 1));
  // Ataque: un proyectil rojo viaja y es bloqueado; luego el chip queda verde
  const atkFly  = clamp((t-T.ataques)/0.55, 0, 1);          // viaje del proyectil
  const atkHit  = clamp((t-(T.ataques+0.45))/0.3, 0, 1);    // impacto/flash
  const ataP = clamp((t-(T.ataques+0.55))/0.4, 0, 1), ataE = Easing.easeOutBack(ataP);
  const ataCheck = Easing.easeOutCubic(clamp((t-(T.ataques+0.75))/0.35, 0, 1));
  // Salida
  const salP = clamp((t-T.salida)/0.5, 0, 1), salE = Easing.easeOutBack(salP);

  // ---- Sub-componentes locales ----
  const NodeCard = ({ box, title, sub, icon, e, p, big, z=8 })=>(
    <div style={{position:'absolute', left:box.l, top:box.tp, width:box.w, height:box.h, zIndex:z,
      background:'#fff', border:'1px solid '+C.borde, borderRadius:16,
      boxShadow: big ? '0 20px 46px rgba(15,23,42,0.10)' : '0 12px 28px rgba(15,23,42,0.07)',
      opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*18}px) scale(${lerp(0.9,1,e)})`,
      display:'flex', alignItems:'center', gap:12, padding:'0 16px'}}>
      <div style={{width:44, height:44, borderRadius:12, background:'rgba(0,133,255,0.08)', border:'1px solid rgba(0,133,255,0.18)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>{icon}</div>
      <div style={{minWidth:0}}>
        <div className="f-mono" style={{fontSize: big?17:14, fontWeight:800, color:C.tinta, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{title}</div>
        <div className="f-mono" style={{fontSize:10, fontWeight:600, letterSpacing:'1px', color:C.gris2, marginTop:3, whiteSpace:'nowrap'}}>{sub}</div>
      </div>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="INFRAESTRUCTURA · SERVIR Y PROTEGER"
        title={<span>Rápido de leer. <span className="grad-text">Vigilado siempre</span></span>}/>

      {/* =================== ACTO 1 — SERVIR RÁPIDO =================== */}
      {showAct1 && (
        <div style={{position:'absolute', inset:0, opacity:act1Op}}>

          {/* Conectores del origen (se dibujan) + zona atenuable */}
          <div style={{position:'absolute', inset:0, opacity:1-stDim, filter:`saturate(${1-stDim*1.1})`}}>
            <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
              {/* central → réplica A / B */}
              <line x1={Ncx} y1={Nbot} x2={RAcx} y2={RA.tp} stroke={C.borde} strokeWidth="2.5" strokeLinecap="round" strokeDasharray={LA} strokeDashoffset={LA*(1-connP)}/>
              <line x1={Ncx} y1={Nbot} x2={RBcx} y2={RB.tp} stroke={C.borde} strokeWidth="2.5" strokeLinecap="round" strokeDasharray={LB} strokeDashoffset={LB*(1-connP)}/>
              {/* línea de sincronía viva entre gemelos */}
              <line x1={RAcx+RA.w/2-10} y1={Rcy} x2={RBcx-RB.w/2+10} y2={Rcy} stroke={C.verde} strokeWidth="2.5" strokeLinecap="round" strokeDasharray={RBcx-RAcx-RA.w} strokeDashoffset={(RBcx-RAcx-RA.w)*(1-syncDraw)} opacity="0.85"/>
            </svg>

            {/* Nodo central — origen */}
            {nodoP > 0 && <NodeCard box={N} big title="storage.dinaup.com" sub="ORIGEN · S3" e={nodoE} p={nodoP} icon={<IcoDB/>}/>}

            {/* Réplicas gemelas (el motivo conductor: la pieza doblada) */}
            {repAP > 0 && <NodeCard box={RA} title="réplica A" sub="EN CALIENTE" e={repAE} p={repAP} icon={<IcoDB c={C.verde} s={22}/>}/>}
            {repBP > 0 && <NodeCard box={RB} title="réplica B" sub="EN CALIENTE" e={repBE} p={repBP} icon={<IcoDB c={C.verde} s={22}/>}/>}

            {/* Punto-pulso que viaja A→B: "en tiempo real" (una vez) */}
            {syncPulse > 0 && syncPulse < 1 && (
              <div style={{position:'absolute', left:lerp(RAcx,RBcx,syncPulse)-5, top:Rcy-5, width:10, height:10, borderRadius:100, background:C.verde, boxShadow:'0 0 12px '+C.verde, zIndex:9}}/>
            )}

            {/* Capa caché delante (memoria rápida) */}
            {cacheP > 0 && (
              <div style={{position:'absolute', left:Ncx-95, top:398, width:190, zIndex:11,
                display:'flex', alignItems:'center', gap:8, padding:'8px 14px',
                background:'linear-gradient(135deg,'+C.azul+','+C.verde+')', borderRadius:100,
                boxShadow:'0 12px 26px rgba(0,133,255,0.28)',
                opacity:clamp(cacheP*1.3,0,1), transform:`scale(${lerp(0.7,1,cacheE)})`}}>
                <IcoBolt/>
                <span className="f-mono" style={{fontSize:13, fontWeight:800, color:'#fff', whiteSpace:'nowrap'}}>caché · en memoria</span>
              </div>
            )}
          </div>

          {/* ---- Entrega al cliente (derecha) ---- */}
          {/* Banda CDN — red de entrega mundial */}
          <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
            <line x1="680" y1={cdnY} x2="1440" y2={cdnY} stroke={C.borde} strokeWidth="2.5" strokeLinecap="round" strokeDasharray="760" strokeDashoffset={760*(1-cdnLineP)}/>
            {/* enlace banda→cliente (imágenes llegan por CDN) */}
            <line x1="1420" y1={cdnY} x2={CLIcx} y2={CLI.tp} stroke={C.borde} strokeWidth="2.5" strokeLinecap="round" strokeDasharray="220" strokeDashoffset={220*(1-cdnLinkP)}/>
            {cdnNodesX.map((x,i)=>{
              const np = clamp((t-(T.cdn+0.15+i*0.08))/0.4, 0, 1);
              if (np<=0) return null;
              return <circle key={i} cx={x} cy={cdnY} r={7*np} fill="#fff" stroke={C.azul} strokeWidth="2.5"/>;
            })}
          </svg>
          {/* pulso que recorre la banda */}
          {cdnPulse > 0 && cdnPulse < 1 && (
            <div style={{position:'absolute', left:lerp(700,1420,cdnPulse)-5, top:cdnY-5, width:10, height:10, borderRadius:100, background:C.azul, boxShadow:'0 0 12px '+C.azul}}/>
          )}
          {/* píldora CDN */}
          {cdnPillP > 0 && (
            <div style={{position:'absolute', left:1060-108, top:176, width:216, display:'flex', alignItems:'center', justifyContent:'center', gap:9, padding:'8px 14px', background:'#fff', border:'1px solid '+C.borde, borderRadius:100, boxShadow:'0 10px 24px rgba(15,23,42,0.08)', opacity:clamp(cdnPillP*1.3,0,1), transform:`scale(${lerp(0.7,1,cdnPillE)})`}}>
              <IcoGlobe/>
              <span className="f-mono" style={{fontSize:12, fontWeight:800, color:C.tinta, whiteSpace:'nowrap'}}>CDN · imágenes públicas</span>
            </div>
          )}

          {/* Edge cercano (se apaga cuando entra el CDN) */}
          <div style={{opacity:1-0.7*rightDim, filter:`saturate(${1-0.5*rightDim})`}}>
            {edgeP > 0 && <NodeCard box={EDG} title="edge · cercano" sub="A TI" e={edgeE} p={edgeP} icon={<IcoGlobe c={C.azul} s={22}/>}/>}
            {/* pulso edge→cliente */}
            {reqPulse > 0 && reqPulse < 1 && (
              <div style={{position:'absolute', left:lerp(EDGcx,CLIcx,reqPulse)-6, top:lerp(EDGbot,CLI.tp,reqPulse)-6, width:12, height:12, borderRadius:100, background:C.azul, boxShadow:'0 0 14px '+C.azul, zIndex:9}}/>
            )}
            {/* chip 80 ms */}
            {msP > 0 && (
              <div className="f-mono" style={{position:'absolute', left:1568, top:384, zIndex:12, display:'inline-flex', alignItems:'center', gap:6, padding:'6px 12px', background:'rgba(16,185,129,0.12)', border:'1px solid rgba(16,185,129,0.35)', borderRadius:100, color:'#059669', fontSize:14, fontWeight:800, opacity:clamp(msP*1.3,0,1), transform:`scale(${lerp(0.6,1,msE)})`}}>
                80 ms
              </div>
            )}
          </div>

          {/* Navegador del cliente + miniaturas */}
          {cliP > 0 && (
            <div style={{position:'absolute', left:CLI.l, top:CLI.tp, width:CLI.w, height:CLI.h, zIndex:7, background:'#fff', border:'1px solid '+C.borde, borderRadius:16, boxShadow:'0 22px 50px rgba(15,23,42,0.10)', overflow:'hidden', opacity:clamp(cliP*1.3,0,1), transform:`translateY(${(1-cliE)*20}px) scale(${lerp(0.94,1,cliE)})`}}>
              {/* barra navegador */}
              <div style={{height:40, background:'#F4F5F7', borderBottom:'1px solid '+C.borde, display:'flex', alignItems:'center', gap:8, padding:'0 14px'}}>
                <div style={{width:9, height:9, borderRadius:100, background:'#FF5F56'}}/>
                <div style={{width:9, height:9, borderRadius:100, background:'#FFBD2E'}}/>
                <div style={{width:9, height:9, borderRadius:100, background:'#27C93F'}}/>
                <div className="f-mono" style={{flex:1, marginLeft:8, height:22, background:'#fff', border:'1px solid '+C.borde, borderRadius:6, display:'flex', alignItems:'center', padding:'0 10px', fontSize:11, color:C.gris}}>tienda-cliente.es</div>
              </div>
              {/* miniaturas (cargan al instante) */}
              {THUMBS.map((th,i)=>{
                const mp = clamp((t-(T.minis+i*0.12))/0.4, 0, 1);
                const me = Easing.easeOutCubic(mp);
                if (mp<=0) return null;
                return (
                  <div key={i} style={{position:'absolute', left:th.x, top:th.y, width:165, height:86, borderRadius:10, background:'linear-gradient(135deg,#EAF3FF,#DCEBFB)', border:'1px solid '+C.borde, display:'flex', alignItems:'center', justifyContent:'center', opacity:clamp(mp*1.4,0,1), transform:`scale(${lerp(0.85,1,me)})`}}>
                    <IcoImg s={34}/>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* =================== ACTO 2 — PROTEGER =================== */}
      {showAct2 && (
        <div style={{position:'absolute', inset:0}}>

          {/* Panel de monitorización */}
          {panelP > 0 && (
            <div style={{position:'absolute', left:PL, top:PT, width:PW, height:PH, background:'#fff', border:'1px solid '+C.borde, borderRadius:22, boxShadow:'0 24px 60px rgba(15,23,42,0.12)', opacity:clamp(panelP*1.3,0,1), transform:`translateY(${(1-panelE)*22}px) scale(${lerp(0.96,1,panelE)})`}}>
              {/* título */}
              <div style={{position:'absolute', left:34, top:24, display:'flex', alignItems:'center', gap:10}}>
                <span style={{width:9, height:9, borderRadius:100, background:C.verde, boxShadow:'0 0 0 4px rgba(16,185,129,0.18)'}}/>
                <span className="f-mono" style={{fontSize:12, fontWeight:800, letterSpacing:'2.5px', color:C.gris2}}>MONITORIZACIÓN · EN VIVO</span>
              </div>

              {/* gráfica de uptime (se dibuja) */}
              <svg width="460" height="150" viewBox="0 0 460 150" style={{position:'absolute', left:34, top:74}}>
                <line x1="0" y1="120" x2="460" y2="120" stroke={C.borde} strokeWidth="1.5"/>
                <line x1="0" y1="70" x2="460" y2="70" stroke="#F1F5F9" strokeWidth="1.5"/>
                <line x1="0" y1="24" x2="460" y2="24" stroke="#F1F5F9" strokeWidth="1.5"/>
                <path d="M0 40 L70 34 L140 42 L210 30 L280 36 L350 28 L420 33 L460 30 L460 120 L0 120 Z"
                  fill="rgba(16,185,129,0.10)" opacity={clamp((chartDraw-0.5)*2,0,1)}/>
                <path d="M0 40 L70 34 L140 42 L210 30 L280 36 L350 28 L420 33 L460 30"
                  stroke={C.verde} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"
                  strokeDasharray="470" strokeDashoffset={470*(1-chartDraw)}/>
              </svg>

              {/* 99,9% uptime */}
              <div style={{position:'absolute', left:540, top:70}}>
                <div className="f-mono" style={{fontSize:84, fontWeight:800, color:C.verde, lineHeight:1, letterSpacing:'-0.02em'}}>{uptimeStr}<span style={{fontSize:44}}>%</span></div>
                <div className="f-mono" style={{fontSize:13, fontWeight:700, letterSpacing:'3px', color:C.gris2, marginTop:6}}>UPTIME</div>
                <div className="f-plex" style={{fontSize:14, fontWeight:500, color:C.gris, marginTop:2}}>medido a todas horas</div>
              </div>

              {/* dots de servicio (todos verdes) — el gemelo, ambos vivos */}
              <div style={{position:'absolute', left:34, top:246, display:'flex', gap:26}}>
                {['nodo A','nodo B','storage','cdn'].map((s,i)=>{
                  const dp = clamp((t-(dotsBase+i*0.12))/0.4, 0, 1);
                  if (dp<=0) return null;
                  return (
                    <div key={s} style={{display:'flex', alignItems:'center', gap:7, opacity:clamp(dp*1.3,0,1), transform:`scale(${lerp(0.8,1,Easing.easeOutBack(dp))})`}}>
                      <span style={{width:9, height:9, borderRadius:100, background:C.verde, boxShadow:'0 0 0 3px rgba(16,185,129,0.16)'}}/>
                      <span className="f-mono" style={{fontSize:13, fontWeight:700, color:C.tinta}}>{s}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Escudo 24/7 — sello sobre la esquina del panel */}
          {escP > 0 && (
            <div style={{position:'absolute', left:PL+PW-96, top:PT-34, zIndex:12, opacity:clamp(escP*1.3,0,1), transform:`translateY(${(1-escE)*-18}px) scale(${lerp(0.7,1,escE)})`}}>
              <div style={{position:'relative', width:120, height:138, filter:'drop-shadow(0 16px 34px rgba(0,133,255,0.30))'}}>
                <svg width="120" height="138" viewBox="0 0 120 138" fill="none">
                  <path d="M60 6 L110 26 V64 C110 100 88 122 60 132 C32 122 10 100 10 64 V26 Z" fill="url(#shg07)"/>
                  <defs><linearGradient id="shg07" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#0085FF"/><stop offset="1" stopColor="#10B981"/></linearGradient></defs>
                  <path d="M40 66 L54 80 L82 48" stroke="#fff" strokeWidth="7" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="70" strokeDashoffset={70*(1-escDraw)}/>
                </svg>
                <div className="f-mono" style={{position:'absolute', left:0, right:0, bottom:14, textAlign:'center', fontSize:16, fontWeight:800, color:'#fff', letterSpacing:'1px'}}>24/7</div>
              </div>
            </div>
          )}

          {/* Chips: caídas ✓ · ataques ✓ */}
          <div style={{position:'absolute', left:0, right:0, top:648, display:'flex', alignItems:'center', justifyContent:'center', gap:26}}>
            {/* caídas */}
            {caiP > 0 && (
              <div style={{display:'inline-flex', alignItems:'center', gap:12, padding:'14px 26px', background:'#fff', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, boxShadow:'0 12px 28px rgba(16,185,129,0.14)', opacity:clamp(caiP*1.3,0,1), transform:`scale(${lerp(0.8,1,caiE)})`}}>
                <svg width="24" height="24" viewBox="-12 -12 24 24"><path d="M-7 0 L-2 5 L7 -6" stroke={C.verde} strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="26" strokeDashoffset={26*(1-caiCheck)}/></svg>
                <span className="f-plex" style={{fontSize:22, fontWeight:700, color:C.tinta}}>Contra caídas</span>
              </div>
            )}
            {/* ataques (proyectil bloqueado) */}
            {ataP > 0 && (
              <div style={{position:'relative', display:'inline-flex', alignItems:'center', gap:12, padding:'14px 26px', background:'#fff', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, boxShadow:'0 12px 28px rgba(16,185,129,0.14)', opacity:clamp(ataP*1.3,0,1), transform:`scale(${lerp(0.8,1,ataE)})`}}>
                <svg width="24" height="24" viewBox="-12 -12 24 24"><path d="M-7 0 L-2 5 L7 -6" stroke={C.verde} strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="26" strokeDashoffset={26*(1-ataCheck)}/></svg>
                <span className="f-plex" style={{fontSize:22, fontWeight:700, color:C.tinta}}>Contra ataques</span>
              </div>
            )}
          </div>
          {/* Proyectil rojo — DOSIFICADO: aparece, golpea y se apaga (vuelve al verde) */}
          {atkFly > 0 && atkFly < 1 && (
            <div style={{position:'absolute', left:lerp(1180,1030,atkFly)-6, top:660, width:12, height:12, borderRadius:100, background:C.rojo, boxShadow:'0 0 14px '+C.rojo, opacity:1-atkFly, zIndex:14}}/>
          )}
          {atkHit > 0 && atkHit < 1 && (
            <div style={{position:'absolute', left:1030-24, top:660-24, width:48, height:48, borderRadius:100, border:'3px solid '+C.rojo, opacity:(1-atkHit)*0.9, transform:`scale(${lerp(0.4,1.6,atkHit)})`, zIndex:14}}/>
          )}

          {/* Salida → JUNTA LAS PIEZAS */}
          {salP > 0 && (
            <div style={{position:'absolute', left:0, right:0, bottom:88, textAlign:'center', opacity:clamp(salP*1.3,0,1), transform:`translateY(${(1-salE)*16}px)`}}>
              <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:12, fontSize:14, fontWeight:800, letterSpacing:'2.5px', color:C.tinta, background:'#fff', border:'1px solid '+C.borde, borderRadius:100, padding:'13px 28px', boxShadow:'0 12px 30px rgba(15,23,42,0.10)'}}>
                JUNTA LAS PIEZAS
                <span style={{color:C.azul, fontSize:17}}>→</span>
              </span>
            </div>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaIN07 });