// === Escena 04 — "La liquidación" ===  [CLÍMAX, al 67 % de la pieza]
// La imagen-momento es el DIÁLOGO DE CONFIRMACIÓN: la ventana enseña lo que va a escribir antes
// de escribirlo (6 líneas de muestra + el importe como TECHO + cuántas ya estaban cobradas).
// Los números NO los saca la IA: salen del concepto contra el índice de documentos, o se pegan.
function EscenaCN04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): un solo ingreso que paga veintitrés facturas → a mano son
  // veintitrés cobros → los números salen del propio concepto → los busca entre tus ventas → o los
  // pegas del informe → faltan tres mil → cuadra exacto → conciliar todo → te enseña lo que va a
  // escribir → las primeras líneas, el techo, las ya cobradas → confirmas → veintitrés cobros →
  // sobra un resto → la comisión de la pasarela → registrada como gasto → LA ÚNICA COSA (prueba).
  const T = {
    ingreso:0.31,    // "Un solo ingreso que paga"
    n23:1.7,         // "veintitrés facturas"
    manual:7.45,     // "nunca cuadra a la primera"
    concepto:11.27,  // "del propio concepto del banco"
    busca:13.6,      // "los busca entre tus ventas"
    pegas:19.37,     // "del informe de la pasarela"
    faltan:21.2,     // "Faltan tres mil euros"
    cuadra:23.0,     // "cuadra exacto"
    boton:24.86,     // "Conciliar todo"
    dialogo:28.3,    // "te enseña lo que va a escribir"   ← EL MOMENTO
    lineas:31.35,    // "Las primeras líneas"
    techo:32.59,     // "el importe como techo"
    cobradas:34.42,  // "cuántas ya estaban cobradas"
    confirmas:35.79, // "Confirmas"
    escrito:37.68,   // "con la fecha del banco"
    resto:39.26,     // "sobra un resto"
    cifra:41.7,      // "ciento veinticinco euros"
    comision:44.57,  // "Esa es la comisión"
    gasto:48.41,     // "registrada como gasto"
    unica1:49.87,    // "Un mes, de arriba abajo"
    unica2:52.47,    // "hasta que has pulsado"
  };

  const inP = clamp((t-T.ingreso)/0.7,0,1), inE = Easing.easeOutBack(inP);
  const n23 = useCountUp(0, 23, T.n23, 1.1, t);
  const maP = clamp((t-T.manual)/0.6,0,1), maE = Easing.easeOutCubic(maP);

  // Los números del concepto viajan al índice
  const coP = clamp((t-T.concepto)/0.5,0,1);
  const buDraw = Easing.easeInOutCubic(clamp((t-T.busca)/0.9,0,1));
  const peP = clamp((t-T.pegas)/0.5,0,1), peE = Easing.easeOutCubic(peP);

  // Acto B: el desglose cuadrando y el diálogo
  const outA = clamp((t-T.faltan)/0.5,0,1);
  const faP = clamp((t-T.faltan)/0.6,0,1), faE = Easing.easeOutCubic(faP);
  const cuP = clamp((t-T.cuadra)/0.5,0,1), cuE = Easing.easeOutBack(cuP);
  const boP = clamp((t-T.boton)/0.45,0,1), boE = Easing.easeOutBack(boP);

  // EL MOMENTO: el diálogo. Protegido — todo lo demás se atenúa con velo.
  const dgP = clamp((t-T.dialogo)/0.65,0,1), dgE = Easing.easeOutBack(dgP);
  const dgOut = clamp((t-T.confirmas-0.35)/0.45,0,1);
  const veloDlg = (t < T.dialogo ? 0 : clamp((t-T.dialogo)/0.5,0,1)) * (1-dgOut) * 0.72;
  const liP = clamp((t-T.lineas)/0.5,0,1);
  const teGlow = t >= T.techo && t < T.techo+1.3 ? Math.sin((t-T.techo)/1.3*Math.PI) : 0;
  const cbP = clamp((t-T.cobradas)/0.5,0,1), cbE = Easing.easeOutCubic(cbP);

  // Acto C: lo escrito y el resto
  const esP = clamp((t-T.escrito)/0.6,0,1), esE = Easing.easeOutBack(esP);
  const reP = clamp((t-T.resto)/0.55,0,1), reE = Easing.easeOutCubic(reP);
  // En CÉNTIMOS: useCountUp redondea a entero (primitives.jsx:214), así que 125.5 aterrizaba
  // en «126,00 €» mientras la voz decía «ciento veinticinco». Se cuenta ×100 y se divide.
  const ciCount = useCountUp(0, 12550, T.cifra, 1.0, t) / 100;
  const cmP = clamp((t-T.comision)/0.55,0,1), cmE = Easing.easeOutCubic(cmP);
  const gaP = clamp((t-T.gasto)/0.5,0,1), gaE = Easing.easeOutBack(gaP);

  // Acto D: La Única Cosa como PRUEBA
  const veloOp = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.92;
  const u1P = clamp((t-T.unica1)/0.6,0,1), u1E = Easing.easeOutCubic(u1P);
  const u2P = clamp((t-T.unica2)/0.6,0,1), u2E = Easing.easeOutCubic(u2P);

  // Cursor: aparca → "Conciliar todo" (clic 24.86) → botón del diálogo (clic 35.79) → "Gasto" (clic 48.41)
  const cursor = { frames:[
    { t:0.8,  x:1740, y:980 },
    { t:24.2, x:1740, y:980 },
    { t:24.7, x:1430, y:452 },
    { t:35.2, x:1430, y:452 },
    { t:35.7, x:1188, y:790 },
    { t:47.8, x:1188, y:790 },
    { t:48.3, x:1372, y:722 },
  ], clicks:[T.boton, T.confirmas, T.gasto] };

  // ── Una línea del lote de 23 ──
  const Linea = ({ i, doc, ent, imp, ya })=>{
    const p = clamp((t-T.busca-0.3-i*0.07)/0.4,0,1);
    const escrita = T.escrito <= t;
    return (
      <div style={{display:'grid', gridTemplateColumns:'36px minmax(0,1fr) 160px', alignItems:'center', gap:13,
                   padding:'11px 10px', borderBottom:'1px solid #F4F7FA', opacity:clamp(p*1.4,0,1),
                   background:escrita ? 'rgba(16,185,129,0.07)' : 'transparent'}}>
        {escrita
          ? <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.6"><circle cx="12" cy="12" r="10"/><path d="M7 12.5 L10.5 16 L17 9" strokeLinecap="round"/></svg>
          : <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke={ya ? '#B45309' : '#38BDF8'} strokeWidth="2.4"><circle cx="12" cy="12" r="10"/></svg>}
        <div style={{minWidth:0}}>
          <span className="f-plex" style={{fontSize:18, fontWeight:700, color:'#0F172A'}}>{doc}</span>
          <span className="f-plex" style={{fontSize:17, color:'#94A3B8'}}> · {ent}</span>
          {ya && <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#7a5b00', background:'rgba(251,140,0,0.20)', borderRadius:99, padding:'2px 10px', marginLeft:9}}>ya cobrada aparte</span>}
        </div>
        <span className="f-mono" style={{fontSize:18, fontWeight:700, color:'#0F172A', textAlign:'right'}}>{imp}</span>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="EL CASO GRANDE" title={<span>Un ingreso. Veintitrés facturas.</span>}/>

      {/* ══════ ACTO A · el ingreso y de dónde salen los números ══════ */}
      {inP > 0 && outA < 1 && (
        <div style={{position:'absolute', inset:0, opacity:1-outA, transform:`translateY(${outA*-24}px)`}}>
          {/* El ingreso */}
          <div style={{position:'absolute', left:130, top:330, width:850, opacity:inP, transform:`scale(${lerp(0.94,1,inE)})`}}>
            <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 28px 66px rgba(15,23,42,0.11)', padding:'32px 36px'}}>
              <div className="f-plex" style={{fontSize:17, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8'}}>UN SOLO MOVIMIENTO</div>
              <div className="f-mono" style={{fontSize:22, color:'#334155', marginTop:14, lineHeight:1.45}}>
                LIQUIDACION PASARELA REF{' '}
                <span style={{color:coP > 0 ? '#c2185b' : '#334155', fontWeight:coP > 0 ? 700 : 400}}>88214</span>
                {' '}PERIODO 01-15 AGO
              </div>
              <div className="f-mono" style={{fontSize:52, fontWeight:800, color:'#086F0C', marginTop:16}}>+12.430,55 €</div>
              <div style={{display:'flex', alignItems:'baseline', gap:16, marginTop:20, paddingTop:20, borderTop:'1px solid #F1F5F9'}}>
                <span className="f-plex" style={{fontSize:68, fontWeight:800, color:'#0085FF', lineHeight:1}}>{Math.round(n23)}</span>
                <span className="f-plex" style={{fontSize:30, fontWeight:600, color:'#64748B'}}>facturas que paga</span>
              </div>
            </div>
            {/* El coste manual, atenuado: no es el protagonista */}
            {maP > 0 && (
              <div style={{marginTop:26, opacity:maE*0.85, transform:`translateY(${(1-maE)*10}px)`}}>
                <div style={{display:'flex', alignItems:'center', gap:13, padding:'18px 22px', borderRadius:12,
                             background:'rgba(239,68,68,0.07)', borderLeft:'4px solid #EF4444'}}>
                  <span className="f-plex" style={{fontSize:23, color:'#B42318', fontWeight:600, lineHeight:1.35}}>
                    A mano: 23 cobros tecleados… y un neto que nunca cuadra a la primera.
                  </span>
                </div>
              </div>
            )}
          </div>

          {/* Los números viajan del concepto al índice */}
          {clamp((t-T.busca)/0.5,0,1) > 0 && (
            <div style={{position:'absolute', left:1050, top:288, width:780}}>
              <svg width="80" height="140" viewBox="0 0 80 140" style={{position:'absolute', left:-96, top:80}}>
                <path d="M4 70 H70" stroke="#0085FF" strokeWidth="4" strokeLinecap="round" strokeDasharray="66" strokeDashoffset={66*(1-buDraw)}/>
                <path d="M58 58 L70 70 L58 82" stroke="#0085FF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity={clamp((buDraw-0.8)/0.2,0,1)}/>
              </svg>
              <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 24px 56px rgba(15,23,42,0.10)', padding:'22px 24px'}}>
                <div className="f-plex" style={{fontSize:17, fontWeight:700, letterSpacing:'2px', color:'#0085FF', marginBottom:12}}>
                  LOS BUSCA ENTRE TUS VENTAS
                </div>
                <div style={{maxHeight:400, overflow:'hidden'}}>
                  <Linea i={0} doc="Venta 1001" ent="RESOEX, S.L." imp="350,00 €"/>
                  <Linea i={1} doc="Venta 1002" ent="Comercial Levante" imp="1.180,00 €"/>
                  <Linea i={2} doc="Venta 1003" ent="Almacenes del Sur" imp="640,25 €" ya/>
                  <Linea i={3} doc="Venta 1004" ent="Talleres Quijada" imp="2.310,00 €"/>
                  <Linea i={4} doc="Venta 1005" ent="RESOEX, S.L." imp="895,40 €"/>
                  <Linea i={5} doc="Venta 1006" ent="Suministros Vega" imp="1.427,00 €"/>
                </div>
                <div className="f-plex" style={{fontSize:17, color:'#94A3B8', textAlign:'center', padding:'12px 0 2px'}}>+ 17 más</div>
              </div>
              {/* La otra vía: pegarlas */}
              {peP > 0 && (
                <div style={{marginTop:18, padding:'16px 20px', borderRadius:12, background:'#F8FAFC', border:'1px dashed #CBD5E1',
                             opacity:clamp(peP*1.3,0,1), transform:`translateY(${(1-peE)*10}px)`}}>
                  <span className="f-plex" style={{fontSize:21, color:'#64748B', lineHeight:1.4}}>
                    ¿El concepto no los trae? Los <b style={{color:'#0F172A'}}>pegas</b> del informe de la pasarela.
                  </span>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* ══════ ACTO B · el cuadre y EL DIÁLOGO ══════ */}
      {faP > 0 && (
        <div style={{position:'absolute', left:190, top:258, width:1320, opacity:faE*(1-veloDlg/0.72*0.55)*(1-veloOp/0.92*0.8),
                     transform:`translateY(${(1-faE)*18}px)`, filter:0 < veloDlg ? 'saturate(0.6)' : 'none'}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', boxShadow:'0 30px 72px rgba(15,23,42,0.12)', padding:'26px 30px'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:20}}>
              <div style={{display:'flex', alignItems:'center', gap:14}}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={cuP > 0 ? '#059669' : '#0085FF'} strokeWidth="2.2">
                  <circle cx="12" cy="12" r="9"/><path d="M8 12.5 L11 15.5 L16.5 9.5" strokeLinecap="round"/>
                </svg>
                <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Conciliado</span>
                <span className="f-plex" style={{fontSize:32, fontWeight:800, color:cuP > 0 ? '#059669' : '#0085FF'}}>
                  {cuP > 0 ? 'Cuadra exacto' : 'Faltan 3.000,00 €'}
                </span>
                {cuP > 0 && (
                  <svg width="32" height="32" viewBox="0 0 24 24" style={{transform:`scale(${lerp(0.4,1,cuE)})`}}>
                    <circle cx="12" cy="12" r="10" fill="rgba(16,185,129,0.18)"/>
                    <path d="M7 12.5 L10.5 16 L17 9" fill="none" stroke="#059669" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </div>
              {/* El botón del lote */}
              {boP > 0 && (
                <span style={{display:'inline-flex', alignItems:'center', gap:10, padding:'14px 28px', borderRadius:10,
                              background:'#059669', boxShadow:'0 10px 26px rgba(5,150,105,0.34)',
                              transform:`scale(${lerp(0.86,1,boE)})`}}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.6"><path d="M2 13 L6 17 L13 8" strokeLinecap="round" strokeLinejoin="round"/><path d="M11 15 L13.5 17.5 L22 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#fff'}}>Conciliar todo</span>
                </span>
              )}
            </div>
            <div style={{height:6, borderRadius:99, background:'#EEF2F6', marginTop:16}}>
              <div style={{height:'100%', borderRadius:99, background:cuP > 0 ? '#059669' : '#0085FF',
                           width:`${cuP > 0 ? 100 : 76}%`}}/>
            </div>

            {/* Las 23 líneas, ya escritas tras confirmar */}
            <div style={{marginTop:18, maxHeight:400, overflow:'hidden'}}>
              <Linea i={0} doc="Venta 1001" ent="RESOEX, S.L." imp="350,00 €"/>
              <Linea i={1} doc="Venta 1002" ent="Comercial Levante" imp="1.180,00 €"/>
              <Linea i={2} doc="Venta 1003" ent="Almacenes del Sur" imp="640,25 €" ya/>
              <Linea i={3} doc="Venta 1004" ent="Talleres Quijada" imp="2.310,00 €"/>
              <Linea i={4} doc="Venta 1005" ent="RESOEX, S.L." imp="895,40 €"/>
              <Linea i={5} doc="Venta 1006" ent="Suministros Vega" imp="1.427,00 €"/>
              <div className="f-plex" style={{fontSize:17, color:'#94A3B8', textAlign:'center', padding:'11px 0 0'}}>+ 17 más</div>
            </div>

            {/* El PIE: lo que ninguna factura explica */}
            {reP > 0 && (
              <div style={{display:'flex', alignItems:'center', gap:16, flexWrap:'wrap', marginTop:18, paddingTop:17,
                           borderTop:'1px solid #E2E8F0', opacity:clamp(reP*1.3,0,1), transform:`translateY(${(1-reE)*10}px)`}}>
                <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#64748B'}}>Resto sin explicar</span>
                <span className="f-mono" style={{fontSize:30, fontWeight:800, color:'#B42318', marginLeft:'auto'}}>
                  −{ciCount.toLocaleString('es-ES',{minimumFractionDigits:2, maximumFractionDigits:2})} €
                </span>
                <span style={{display:'inline-flex', alignItems:'center', padding:'11px 22px', borderRadius:9,
                              background:gaP > 0 ? '#0085FF' : '#EEF2F6',
                              boxShadow:gaP > 0 ? '0 8px 22px rgba(0,133,255,0.32)' : 'none',
                              transform:gaP > 0 ? `scale(${lerp(0.9,1,gaE)})` : 'none'}}>
                  <span className="f-plex" style={{fontSize:19, fontWeight:700, color:gaP > 0 ? '#fff' : '#64748B'}}>
                    {gaP > 0 ? 'Gasto registrado' : 'Gasto'}
                  </span>
                </span>
              </div>
            )}
          </div>

          {/* Lo escrito: 23 cobros con la fecha del banco */}
          {esP > 0 && (
            <div style={{position:'absolute', left:1372, top:10, width:340, opacity:clamp(esP*1.3,0,1),
                         transform:`scale(${lerp(0.85,1,esE)})`, transformOrigin:'left top'}}>
              <div className="f-plex" style={{fontSize:84, fontWeight:800, color:'#059669', lineHeight:1}}>23</div>
              <div className="f-plex" style={{fontSize:26, fontWeight:600, color:'#0F172A', lineHeight:1.3}}>cobros escritos</div>
              <div className="f-plex" style={{fontSize:20, color:'#64748B', marginTop:5}}>con la fecha del banco</div>
            </div>
          )}
          {/* Qué es ese resto */}
          {cmP > 0 && (
            <div style={{position:'absolute', left:1372, top:280, width:350, opacity:clamp(cmP*1.3,0,1),
                         transform:`translateY(${(1-cmE)*12}px)`}}>
              <div className="f-plex" style={{fontSize:27, fontWeight:700, color:'#0F172A', lineHeight:1.3}}>
                La comisión que se quedó la pasarela
              </div>
              <div className="f-plex" style={{fontSize:20, color:'#64748B', marginTop:9, lineHeight:1.4}}>
                Ninguna factura la explica. Un botón, y queda registrada.
              </div>
            </div>
          )}
        </div>
      )}

      {/* ══════ EL MOMENTO · lo que va a escribir, antes de escribirlo ══════ */}
      {0 < veloDlg && <div style={{position:'absolute', inset:0, background:'#0F172A', opacity:veloDlg}}/>}
      {dgP > 0 && dgOut < 1 && (
        <div style={{position:'absolute', left:480, top:196, width:960, opacity:(1-dgOut),
                     transform:`scale(${lerp(0.9,1,dgE)}) translateY(${(1-dgE)*20 + dgOut*18}px)`}}>
          <div style={{background:'#fff', borderRadius:20, boxShadow:'0 44px 110px rgba(15,23,42,0.48)', overflow:'hidden'}}>
            <div style={{display:'flex', alignItems:'center', gap:14, padding:'26px 34px', borderBottom:'1px solid #EEF2F6'}}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.4"><path d="M2 13 L6 17 L13 8" strokeLinecap="round" strokeLinejoin="round"/><path d="M11 15 L13.5 17.5 L22 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>Conciliar todo</span>
            </div>
            <div style={{padding:'26px 34px 30px'}}>
              {/* Las primeras líneas: seis de muestra */}
              {liP > 0 && (
                <div style={{opacity:clamp(liP*1.3,0,1)}}>
                  {[['Venta 1001','350,00 €'],['Venta 1002','1.180,00 €'],['Venta 1003','640,25 €'],
                    ['Venta 1004','2.310,00 €'],['Venta 1005','895,40 €'],['Venta 1006','1.427,00 €']].map((l,i)=>(
                    <div key={l[0]} style={{display:'flex', justifyContent:'space-between', padding:'6px 0',
                                            opacity:clamp((t-T.lineas-i*0.06)/0.3,0,1)}}>
                      <span className="f-plex" style={{fontSize:21, color:'#334155'}}>{l[0]}</span>
                      <span className="f-mono" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>{l[1]}</span>
                    </div>
                  ))}
                  <div className="f-plex" style={{fontSize:18, color:'#94A3B8', padding:'6px 0 0'}}>…y 17 más</div>
                </div>
              )}
              {/* El importe como TECHO, no como promesa */}
              {clamp((t-T.techo)/0.4,0,1) > 0 && (
                <div style={{marginTop:22, padding:'18px 22px', borderRadius:12, background:'rgba(0,133,255,0.07)',
                             opacity:clamp((t-T.techo)/0.4,0,1),
                             boxShadow:0 < teGlow ? `0 0 ${teGlow*30}px rgba(0,133,255,0.45)` : 'none'}}>
                  <span className="f-plex" style={{fontSize:24, fontWeight:700, color:'#0F172A'}}>
                    Se conciliarán 23 operaciones por <span style={{color:'#0085FF'}}>hasta 12.556,05 €</span>
                  </span>
                  <div className="f-plex" style={{fontSize:19, color:'#64748B', marginTop:6}}>
                    Si al movimiento le queda menos libre, se escribirá menos.
                  </div>
                </div>
              )}
              {/* Cuántas ya estaban cobradas */}
              {cbP > 0 && (
                <div style={{marginTop:14, padding:'16px 22px', borderRadius:12, background:'rgba(251,140,0,0.10)',
                             borderLeft:'4px solid #FB8C00', opacity:clamp(cbP*1.3,0,1), transform:`translateY(${(1-cbE)*8}px)`}}>
                  <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#7a5b00', lineHeight:1.4}}>
                    3 ya están cobradas: ahí no se crea nada — se ata el cobro que ya existe.
                  </span>
                </div>
              )}
              <div style={{display:'flex', justifyContent:'flex-end', gap:12, marginTop:26}}>
                <span style={{padding:'13px 26px', borderRadius:9, background:'#F1F5F9'}}>
                  <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#64748B'}}>Cancelar</span>
                </span>
                <span style={{padding:'13px 28px', borderRadius:9, background:'#059669', boxShadow:'0 8px 22px rgba(5,150,105,0.32)'}}>
                  <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#fff'}}>Conciliar todo</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ══════ La Única Cosa · PRUEBA ══════ */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {u1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:432, textAlign:'center', fontSize:70, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Un mes, de arriba abajo.
        </div>
      )}
      {u2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:538, textAlign:'center', fontSize:70, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Y nada se ha escrito hasta que has pulsado.</span>
        </div>
      )}

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