// === Escena 02 — "Los seis" ===
// Los seis marcadores en su color literal, contados de uno en uno; la explicación que vive en el
// rótulo NATIVO del navegador (KpiCard:64, title="@Tooltip"); el ponderado como importe ×
// probabilidad ÷ 10 (Dashboard:198) con el deslizador que la pone a mano (OportunidadDialog:51-52);
// los seis suman TODOS los procesos activos, no el que elijas en el tablero (Kanban:113-115);
// y «Sin evento» que dice cuántas y no cuáles, porque no tiene lista (Dashboard:235, :68).
function EscenaPN02({ t }){
  // LOCUCIÓN (audio/escena-02.mp3): seis píldoras → los seis contadores uno a uno → pausa →
  // el rótulo al pasar el ratón → importe por probabilidad → la pone una persona → todos tus
  // procesos → no el del tablero → sin cita: cuántas, no cuáles → solo dos traen lista debajo.
  const T = {
    pildoras:0.3,   // "Seis píldoras en una fila" -> las 6 en su color, valores a cero
    c1:2.6,         // "El total de lo que tienes abierto" -> contador 1: 231.700 €
    c2:5.7,         // "El mismo total, ponderado" -> contador 2: 103.400 €
    c3:8.4,         // "Cuántas hay vivas" -> contador 3: 31
    c4:9.8,         // "Cuántas cierran este mes" -> contador 4: 7
    c5:11.8,        // "Cuántas están paradas" -> contador 5: 9
    c6:14.6,        // "ni una cita futura" -> contador 6: 12
    quietud:16.6,   // (pausa: los seis quedan encendidos, nada se mueve)
    raton:19.3,     // "al pasar el ratón por encima" -> cursor sobre «Estancadas» + rótulo nativo
    formula:23.2,   // "cada importe por su probabilidad" -> importe × probabilidad sobre el ponderado
    mano:27.2,      // "la pone una persona, a mano" -> el deslizador, movido por un dedo
    procesos:32.7,  // "todos tus procesos activos" -> 3 chips de proceso convergen en las píldoras
    selector:36.3,  // "que elijas en el tablero" -> el selector del tablero, tachado en gris
    sinCita:39.7,   // "se han quedado sin cita" -> foco en «Sin evento»
    hueco:41.4,     // "Cuántas. No cuáles" -> debajo del 12 se dibuja un hueco vacío, punteado
    dosListas:44.5, // "solo dos traen su lista debajo" -> las dos tarjetas se iluminan solas
    contDur:1.15,    // (cuánto tarda cada contador en aterrizar)
    cascadaStep:0.09,// (incremento de la cascada de filas de las dos listas)
  };

  // ── Geometría del panel. Ancho de contenido 1700; píldoras a width fit-content (KpiCard.css:11-38) ──
  const PX = [110, 475, 840, 1066, 1358, 1594];   // x en el lienzo
  const PW = [345, 345, 206,  272,  216,  216];
  const STRIP_H = 120;                            // alto de la píldora
  const LIST_Y = 456;                             // y en el lienzo de las dos tarjetas de lista

  const PILLS = [
    { k:'payments',       tit:'Pipeline Total',  col:'#2e7d32', money:true  },
    { k:'balance',        tit:'Ponderado',       col:'#1565c0', money:true  },
    { k:'handshake',      tit:'Abiertas',        col:'#6a1b9a', money:false },
    { k:'event_upcoming', tit:'Cierre Este Mes', col:'#e65100', money:false },
    { k:'warning',        tit:'Estancadas',      col:'#bf360c', money:false },
    { k:'event_busy',     tit:'Sin evento',      col:'#ff6f00', money:false },
  ];
  const CS = [T.c1, T.c2, T.c3, T.c4, T.c5, T.c6];

  const CIERRE = [
    { tit:'Reforma de nave - Talleres Ordás',      cap:'Cierre: 18/08/2026', imp:'21.500 €', pct:'70%' },
    { tit:'Ampliación de línea - Cerámicas Vall',  cap:'Cierre: 21/08/2026', imp:'12.900 €', pct:'50%' },
    { tit:'Lote de repuestos - Metalúrgica Bierzo',cap:'Cierre: 25/08/2026', imp:'6.400 €',  pct:null  },
    { tit:'Renovación de contrato - Áridos Sil',   cap:'Cierre: 27/08/2026', imp:null,       pct:'40%' },
    { tit:'Cambio de bombas - Envases Duero',      cap:'Cierre: 29/08/2026', imp:'9.800 €',  pct:'60%' },
  ];
  const ESTANCADAS = [
    { tit:'Suministro anual - Envases Duero',       cap:'Sin cambios hace 23 días', imp:'18.400 €' },
    { tit:'Segunda línea - Áridos Sil',             cap:'Sin cambios hace 21 días', imp:'26.000 €' },
    { tit:'Mantenimiento anual - Cerámicas Vall',   cap:'Sin cambios hace 19 días', imp:'4.900 €'  },
    { tit:'Cambio de compresores - Talleres Ordás', cap:'Sin cambios hace 17 días', imp:'7.200 €'  },
    { tit:'Repuesto de bomba - Metalúrgica Bierzo', cap:'Sin cambios hace 16 días', imp:'3.100 €'  },
  ];

  const Ico = ({ n, s=24, c='#0F172A', w=2 })=>{
    const P = {
      event_upcoming:<><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M3 10 H21"/><path d="M8 3 V7 M16 3 V7"/><path d="M12 18.5 V13 M9.6 15.2 L12 12.8 L14.4 15.2"/></>,
      event_busy:<><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M3 10 H21"/><path d="M8 3 V7 M16 3 V7"/><path d="M9.5 13.5 L14.5 18.5 M14.5 13.5 L9.5 18.5"/></>,
      warning:<><path d="M12 3.6 L21.4 19.6 H2.6 Z"/><path d="M12 9.6 V14"/><circle cx="12" cy="16.9" r="0.9" fill={c} stroke="none"/></>,
      payments:<><rect x="2.2" y="7.6" width="15.6" height="10.8" rx="2"/><circle cx="10" cy="13" r="2.5"/><path d="M6 5.2 H19.8 A2 2 0 0 1 21.8 7.2 V15.4"/></>,
      balance:<><path d="M12 4 V20 M6.5 20 H17.5 M3.6 8.4 H20.4"/><path d="M3.6 8.4 L1.2 14.4 H6 Z"/><path d="M20.4 8.4 L18 14.4 H22.8 Z"/></>,
      handshake:<><path d="M12.4 9.2 L9.6 6.4 A2 2 0 0 0 6.8 6.4 L2.6 10.6 A2 2 0 0 0 2.6 13.4 L4.6 15.4"/><path d="M11.6 9.2 L14.4 6.4 A2 2 0 0 1 17.2 6.4 L21.4 10.6 A2 2 0 0 1 21.4 13.4 L19.4 15.4"/><path d="M7.6 12.6 L11 16 A1.8 1.8 0 0 0 13.6 16 L16.6 12.8"/></>,
      layers:<><path d="M12 3 L21 8 L12 13 L3 8 Z"/><path d="M3 12.5 L12 17.5 L21 12.5"/></>,
      caret:<><path d="M7 10 L12 15 L17 10"/></>,
    };
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{P[n]}</svg>;
  };

  // ── Contadores: uno cada vez, easeOutCubic, aterrizando cuando la voz lo dice ──
  const V = [
    useCountUp(0, 231700, T.c1, T.contDur, t),
    useCountUp(0, 103400, T.c2, T.contDur, t),
    useCountUp(0, 31,     T.c3, T.contDur, t),
    useCountUp(0, 7,      T.c4, T.contDur, t),
    useCountUp(0, 9,      T.c5, T.contDur, t),
    useCountUp(0, 12,     T.c6, T.contDur, t),
  ];

  // ── Foco: qué píldora es la protagonista en cada instante ──
  const vent = (a, b)=> clamp((t-a)/0.35,0,1) * (1 - clamp((t-b)/0.35,0,1));
  const todas = vent(T.procesos, T.sinCita);
  const VENTANAS = [
    [[CS[0], T.raton]],
    [[CS[1], T.raton], [T.formula, T.procesos]],
    [[CS[2], T.raton]],
    [[CS[3], T.raton], [T.dosListas, 999]],
    [[CS[4], T.raton], [T.raton, T.formula], [T.dosListas, 999]],
    [[CS[5], T.raton], [T.sinCita, T.dosListas]],
  ];
  const foco = (i)=>{
    let m = todas;
    for (let j = 0; j < VENTANAS[i].length; j++) m = Math.max(m, vent(VENTANAS[i][j][0], VENTANAS[i][j][1]));
    return m;
  };

  const listasDim = clamp((t-T.raton+0.4)/0.5,0,1);
  const listasOn  = clamp((t-T.dosListas)/0.55,0,1);
  const opListas  = lerp(lerp(0.55, 0.16, listasDim), 1, listasOn);

  // Anotaciones
  const anRaton = vent(T.raton, T.formula);
  const anPond  = vent(T.formula, T.procesos);
  const manoP   = clamp((t-T.mano)/0.5,0,1), manoE = Easing.easeOutCubic(manoP);
  const anProc  = vent(T.procesos, T.sinCita);
  const procDraw = Easing.easeInOutCubic(clamp((t-T.procesos-0.25)/0.9,0,1));
  const selP    = clamp((t-T.selector)/0.5,0,1), selE = Easing.easeOutBack(selP);
  const selTacha= Easing.easeInOutCubic(clamp((t-T.selector-0.45)/0.6,0,1));
  const anHueco = clamp((t-T.hueco)/0.5,0,1) * (1 - clamp((t-T.dosListas)/0.4,0,1));

  const cursor = [
    { t:0.5,  x:1860, y:1035 },
    { t:18.5, x:1860, y:1035 },
    { t:19.4, x:1466, y:378 },
    { t:22.7, x:1466, y:378 },
    { t:23.6, x:1860, y:1035 },
  ];

  // ── Píldora compacta: icono + valor + título ──
  const Pildora = ({ p, i })=>{
    const f = foco(i);
    const val = p.money ? V[i].toLocaleString('es-ES') + ' €' : String(V[i]);
    return (
      <div style={{position:'absolute', left:PX[i]-80, top:164, width:PW[i], height:STRIP_H,
                   display:'flex', alignItems:'center', gap:14, padding:'0 20px', boxSizing:'border-box',
                   background:'#fff', borderRadius:14,
                   border:`1px solid ${f > 0.6 ? 'rgba(15,23,42,0.10)' : '#E2E8F0'}`,
                   opacity:lerp(0.42, 1, f),
                   transform:`translateY(${-f*4}px)`,
                   boxShadow:`0 ${lerp(2,18,f)}px ${lerp(8,44,f)}px rgba(15,23,42,${lerp(0.04,0.14,f)})`}}>
        <Ico n={p.k} s={54} c={p.col} w={1.7}/>
        <div style={{lineHeight:1.1, minWidth:0}}>
          <div className="f-plex" style={{fontSize:48, fontWeight:800, color:p.col, letterSpacing:'-0.02em', whiteSpace:'nowrap'}}>{val}</div>
          <div className="f-plex" style={{fontSize:22, color:'#64748B', marginTop:7, whiteSpace:'nowrap'}}>{p.tit}</div>
        </div>
      </div>
    );
  };

  // ── Una fila de lista (Dashboard:82-93 y :111-120) ──
  const Fila = ({ r, i, naranja, base })=>{
    const p = clamp((t-base-i*T.cascadaStep)/0.4,0,1);
    return (
      <div style={{display:'flex', alignItems:'center', gap:18, height:84, padding:'0 26px',
                   borderBottom:i < 4 ? '1px solid #F1F5F9' : 'none', opacity:clamp(p*1.3,0,1)}}>
        <div style={{flex:1, minWidth:0, lineHeight:1.25}}>
          <div className="f-plex" style={{fontSize:27, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r.tit}</div>
          <div className="f-plex" style={{fontSize:20, color:naranja ? '#e65100' : '#94A3B8', marginTop:4}}>{r.cap}</div>
        </div>
        {r.imp && <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#2e7d32', whiteSpace:'nowrap'}}>{r.imp}</span>}
        {r.pct && <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#1565c0', border:'1.4px solid rgba(21,101,192,0.4)', borderRadius:99, padding:'3px 12px'}}>{r.pct}</span>}
      </div>
    );
  };

  const TarjetaLista = ({ x, icon, tit, col, rows, naranja, anillo })=>(
    <div style={{position:'absolute', left:x-80, top:LIST_Y-150, width:838,
                 background:'#fff', borderRadius:16, overflow:'hidden',
                 border:`${anillo > 0.02 ? 2 : 1}px solid ${anillo > 0.02 ? col : '#E2E8F0'}`,
                 boxShadow:`0 ${lerp(2,20,anillo)}px ${lerp(10,50,anillo)}px rgba(15,23,42,${lerp(0.04,0.14,anillo)})`}}>
      <div style={{display:'flex', alignItems:'center', gap:13, padding:'21px 26px', borderBottom:'1px solid #EEF2F6'}}>
        <Ico n={icon} s={27} c={col} w={2}/>
        <span className="f-plex" style={{fontSize:29, fontWeight:700, color:'#0F172A'}}>{tit}</span>
      </div>
      {rows.map((r,i)=> <Fila key={r.tit} r={r} i={i} naranja={naranja} base={T.pildoras+0.3}/>)}
      <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:10, height:56, borderTop:'1px solid #F1F5F9'}}>
        <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>‹</span>
        <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#fff', background:'#94A3B8', borderRadius:6, padding:'2px 10px'}}>1</span>
        <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>2</span>
        <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>›</span>
      </div>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LOS SEIS MARCADORES" title={<span>De dónde sale cada número</span>}/>

      {/* ─────────── El panel ─────────── */}
      <div style={{position:'absolute', left:80, top:150, width:1760, height:866,
                   borderRadius:18, border:'1px solid #E2E8F0', background:'#F6F8FB',
                   boxShadow:'0 34px 84px rgba(15,23,42,0.13)', overflow:'hidden'}}>
        <BrowserChrome url="play.dinaup.com/App/CRM" title="CRM — Dinaup"/>
        <DinaupAppHeader breadcrumb={["CRM","Inicio"]} company="Suministros del Norte, S.L." initials="NP"/>

        {PILLS.map((p,i)=> <Pildora key={p.tit} p={p} i={i}/>)}

        <div style={{position:'absolute', left:0, top:0, right:0, bottom:0, opacity:opListas}}>
          <TarjetaLista x={110}  icon="event_upcoming" tit="Cierre Este Mes"           col="#e65100" rows={CIERRE}     anillo={listasOn}/>
          <TarjetaLista x={972}  icon="warning"        tit="Oportunidades Estancadas"  col="#bf360c" rows={ESTANCADAS} naranja anillo={listasOn}/>
        </div>
      </div>

      {/* ─────────── El rótulo NATIVO del navegador (KpiCard:64) ─────────── */}
      {anRaton > 0.01 && (
        <div style={{position:'absolute', left:1096, top:452, opacity:anRaton}}>
          <div style={{display:'inline-block', background:'#3C4043', borderRadius:4, padding:'12px 18px',
                       border:'1px solid rgba(255,255,255,0.14)'}}>
            <span className="f-plex" style={{fontSize:24, color:'#F1F3F4', whiteSpace:'nowrap'}}>
              Oportunidades sin cambio de estado o fase en más de 15 días
            </span>
          </div>
          <div className="f-plex" style={{fontSize:23, color:'#64748B', marginTop:16, textAlign:'right'}}>
            No está escrita debajo: es el rótulo del navegador.
          </div>
        </div>
      )}

      {/* ─────────── El ponderado: importe × probabilidad ÷ 10 (Dashboard:198) ─────────── */}
      {anPond > 0.01 && (
        <div style={{position:'absolute', left:300, top:472, width:880, opacity:anPond,
                     transform:`translateY(${(1-anPond)*14}px)`}}>
          <svg width="4" height="34" viewBox="0 0 4 34" style={{position:'absolute', left:347, top:-34}}>
            <path d="M2 0 V34" stroke="#1565c0" strokeWidth="3" strokeDasharray="34"
                  strokeDashoffset={34*(1-Easing.easeInOutCubic(clamp((t-T.formula)/0.5,0,1)))}/>
          </svg>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                       boxShadow:'0 30px 74px rgba(15,23,42,0.16)', padding:'30px 34px'}}>
            <div className="f-plex" style={{fontSize:21, fontWeight:700, letterSpacing:'2.4px', color:'#1565c0'}}>CÓMO SE PONDERA</div>
            <div style={{display:'flex', alignItems:'baseline', gap:16, marginTop:20, flexWrap:'wrap'}}>
              <span className="f-plex" style={{fontSize:40, fontWeight:800, color:'#2e7d32'}}>18.400 €</span>
              <span className="f-plex" style={{fontSize:32, color:'#94A3B8'}}>×</span>
              <span className="f-plex" style={{fontSize:40, fontWeight:800, color:'#0F172A'}}>6</span>
              <span className="f-plex" style={{fontSize:32, color:'#94A3B8'}}>÷ 10 =</span>
              <span className="f-plex" style={{fontSize:40, fontWeight:800, color:'#1565c0'}}>11.040 €</span>
            </div>
            {/* El deslizador de la oportunidad, movido por un dedo */}
            {manoP > 0 && (
              <div style={{marginTop:26, paddingTop:24, borderTop:'1px solid #F1F5F9', opacity:clamp(manoP*1.3,0,1),
                           transform:`translateY(${(1-manoE)*10}px)`}}>
                <div className="f-plex" style={{fontSize:23, color:'#64748B'}}>Posibilidad de cierre</div>
                <div style={{position:'relative', marginTop:22, height:14, borderRadius:99, background:'#EEF2F6'}}>
                  <div style={{position:'absolute', left:0, top:0, bottom:0, width:`${60*manoE}%`, borderRadius:99, background:'#1565c0'}}/>
                  <div style={{position:'absolute', left:`${60*manoE}%`, top:-13, width:40, height:40, marginLeft:-20,
                               borderRadius:99, background:'#fff', border:'3px solid #1565c0',
                               boxShadow:'0 6px 18px rgba(21,101,192,0.35)'}}/>
                  <div style={{position:'absolute', left:0, right:0, top:26, display:'flex', justifyContent:'space-between'}}>
                    {[0,1,2,3,4,5,6,7,8,9,10].map(n=>(
                      <span key={n} className="f-mono" style={{fontSize:17, color:n === 6 ? '#1565c0' : '#CBD5E1', fontWeight:n === 6 ? 700 : 400}}>{n}</span>
                    ))}
                  </div>
                </div>
                <div className="f-plex" style={{fontSize:23, color:'#64748B', marginTop:44}}>
                  La escribe una persona en la oportunidad. No la calcula nadie.
                </div>
              </div>
            )}
          </div>
          <FingerTap t={t} taps={[{ t:T.mano+0.45, x:521, y:230 }]}/>
        </div>
      )}

      {/* ─────────── Todos los procesos activos, no el del tablero ─────────── */}
      {anProc > 0.01 && (
        <div style={{position:'absolute', left:0, top:0, right:0, bottom:0, opacity:anProc}}>
          {/* El bus: los tres procesos suben y alimentan a los seis marcadores */}
          <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
            <path d="M283 462 H1702" stroke="#6a1b9a" strokeWidth="3" fill="none" strokeLinecap="round"
                  strokeDasharray="1419" strokeDashoffset={1419*(1-procDraw)} opacity="0.45"/>
            {[283,647,943,1202,1466,1702].map((x,i)=>(
              <path key={x} d={`M${x} 462 V440`} stroke="#6a1b9a" strokeWidth="3" strokeLinecap="round"
                    opacity={0.45*clamp((procDraw-0.55)/0.3,0,1)}/>
            ))}
            {[400,700,1000].map((x,i)=>(
              <path key={'c'+x} d={`M${x} 540 C ${x} 500, ${x} 500, ${x} 464`}
                    stroke="#6a1b9a" strokeWidth="3" fill="none" strokeLinecap="round"
                    strokeDasharray="80" strokeDashoffset={80*(1-clamp(procDraw*1.4-i*0.1,0,1))} opacity="0.45"/>
            ))}
          </svg>

          <div style={{position:'absolute', left:150, top:540, width:1020,
                       background:'#fff', border:'1px solid #E2E8F0', borderRadius:18,
                       boxShadow:'0 26px 62px rgba(15,23,42,0.16)', padding:'26px 30px'}}>
            <div className="f-plex" style={{fontSize:21, fontWeight:700, letterSpacing:'2.4px', color:'#6a1b9a'}}>PROCESOS NO ARCHIVADOS</div>
            <div style={{display:'flex', gap:22, marginTop:20}}>
              {['Venta directa','Grandes cuentas','Postventa'].map((n,i)=>{
                const e = Easing.easeOutBack(clamp((t-T.procesos-i*0.13)/0.45,0,1));
                return (
                  <span key={n} style={{display:'inline-flex', alignItems:'center', gap:12, padding:'14px 22px',
                                        background:'#FBF8FD', border:'1.6px solid rgba(106,27,154,0.3)', borderRadius:12,
                                        transform:`scale(${lerp(0.8,1,e)})`, opacity:clamp(e*1.3,0,1)}}>
                    <Ico n="layers" s={26} c="#6a1b9a" w={1.9}/>
                    <span className="f-plex" style={{fontSize:26, fontWeight:600, color:'#0F172A'}}>{n}</span>
                  </span>
                );
              })}
            </div>
            <div className="f-plex" style={{fontSize:25, color:'#334155', marginTop:22}}>
              Los seis suman las oportunidades abiertas de los tres.
            </div>
          </div>

          {/* El selector del tablero, que aquí no manda */}
          {selP > 0 && (
            <div style={{position:'absolute', left:1230, top:540, width:530, opacity:clamp(selP*1.3,0,1),
                         transform:`scale(${lerp(0.92,1,selE)})`}}>
              <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                           boxShadow:'0 26px 62px rgba(15,23,42,0.16)', padding:'26px 30px'}}>
                <span className="f-plex" style={{fontSize:25, fontWeight:700, color:'#64748B'}}>Procesos</span>
                <div className="f-plex" style={{fontSize:20, color:'#94A3B8', marginTop:18}}>Proceso</div>
                <div style={{position:'relative', display:'flex', alignItems:'center', justifyContent:'space-between',
                             marginTop:8, padding:'14px 16px', border:'1px solid #E2E8F0', borderRadius:9, background:'#F8FAFC'}}>
                  <span className="f-plex" style={{fontSize:24, color:'#94A3B8'}}>Venta directa</span>
                  <Ico n="caret" s={22} c="#CBD5E1" w={2.2}/>
                  <span style={{position:'absolute', left:10, right:10, top:'50%', height:4, borderRadius:2, background:'#EF4444',
                                transform:`translateY(-2px) scaleX(${selTacha})`, transformOrigin:'left'}}/>
                </div>
                <div className="f-plex" style={{fontSize:24, color:'#334155', marginTop:22, lineHeight:1.35}}>
                  Ese desplegable es del tablero. El panel no lo tiene.
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ─────────── «Sin evento»: cuántas, no cuáles. Debajo del 12 no hay lista ─────────── */}
      {anHueco > 0.01 && (
        <div style={{position:'absolute', left:1594, top:462, width:216, height:250, opacity:anHueco,
                     border:'3px dashed #CBD5E1', borderRadius:14, background:'rgba(255,255,255,0.72)',
                     display:'flex', alignItems:'center', justifyContent:'center'}}>
          <span className="f-plex" style={{fontSize:23, color:'#94A3B8'}}>sin lista</span>
        </div>
      )}

      <ScriptedCursor frames={cursor} t={t}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPN02 });