// === Escena 05 — "El asiento se deriva" (CLÍMAX) ===
// Duración real del mp3: 52.3s. La imagen-momento: el T contable CUADRANDO (40.6).
// Cada concepto de la nómina de María José vuela desde la tira inferior al T y
// aporta sus dos apuntes. La 465 queda como RESIDUO con el líquido exacto (1.347).
// Asiento canónico: D 640→1.650 · D 642→510 · H 4751→198 · H 476→615 · H 465→1.347 (2.160 = 2.160).
// LOCUCIÓN (audio/escena-05.mp3): dos apuntes → debe (640, 642) → haber (4751, 476)
// → foco 465 (recibe 1.650, descuenta 303, queda 1.347) → totales → cuadre → subcuenta → única cosa.
function EscenaNO05({ t }){
  const T = {
    apuntes:1.2,    // "sus dos apuntes"                → el T contable se dibuja
    debe:2.6,       // "Al debe"                        → lado Debe se ilumina
    verde:3.2,      // "sueldos y salarios"             → piezas verdes vuelan al Debe
    c640:5.5,       // "mil seiscientos cincuenta a la seiscientos cuarenta" → contador 640
    azul:9.1,       // "la cuota patronal"              → pieza azul vuela al Debe
    c642:10.2,      // "quinientos diez"                → contador 642
    haber:13.5,     // "Al haber"                       → lado Haber se ilumina
    naranja:14.4,   // "retención de IRPF"              → pieza naranja vuela al Haber
    c4751:16.4,     // "ciento noventa y ocho"          → contador 4751
    juntas:20.9,    // "trabajador más empresa"         → piezas naranja+azul juntas
    c476:22.8,      // "seiscientos quince"             → contador 476
    foco465:26.6,   // "la cuatrocientos sesenta y cinco" → FOCO fila 465 (lo demás se atenúa)
    recibe:28.8,    // "Recibe el devengado"            → +1.650 entra
    descuenta:30.3, // "descuenta las retenciones"      → −303 sale
    liquido:33.8,   // "mil trescientos cuarenta y siete" → 465 aterriza en 1.347 (glow verde)
    tDebe:36.3,     // "Debe: dos mil ciento sesenta"   → total Debe 2.160
    tHaber:38.5,    // "Haber: dos mil ciento sesenta"  → total Haber 2.160
    cuadre:40.6,    // "Cuadrado al céntimo"            → EL MOMENTO: check de cuadre
    remate:42.2,    // "sin redactar un solo apunte"    → remate bajo el check
    subcuenta:44.4, // "subcuenta por empleado"         → 465.00123 · María José
    unica:47.5,     // "concepto lleva el asiento dentro" → ÚNICA COSA
    cierre1:49.3,   // "Tú lo configuraste"             → cierre 1
    cierre2:50.6,   // "Dinaup lo deriva"               → cierre 2 / salida
  };

  // Formato es-ES con punto de miles SIEMPRE (toLocaleString no agrupa 4 dígitos): "1.650 €"
  const eur = (n)=> String(n).replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ' €';

  // ---- Geometría del T (centrado, 1920×1080) ----
  const CX = 960;                       // eje vertical del T
  const HL = 420, HR = 1500, HY = 252;  // línea horizontal
  const VBOT = 712;                     // fin de la línea vertical
  const COLW = 480;
  const DX = 440, HX = 1000;            // x de las filas Debe / Haber
  const ROWH = 58, ROWG = 14;
  const rowY = (i)=> 282 + i*(ROWH+ROWG);         // 282, 354, 426
  const DCX = DX+COLW/2, HCX = HX+COLW/2;         // centros de columna: 680 / 1240

  // ---- Dibujo del T (cortina) ----
  const hE = Easing.easeInOutCubic(clamp((t-T.apuntes)/0.9, 0, 1));
  const vE = Easing.easeInOutCubic(clamp((t-(T.apuntes+0.25))/0.9, 0, 1));
  const headP = clamp((t-(T.apuntes+0.7))/0.5, 0, 1);

  // ---- Iluminación de lados ----
  const debK  = Easing.easeOutCubic(clamp((t-T.debe)/0.6, 0, 1));
  const habK  = Easing.easeOutCubic(clamp((t-T.haber)/0.6, 0, 1));

  // ---- Foco 465: todo lo demás se atenúa ----
  const focusIn  = Easing.easeOutCubic(clamp((t-T.foco465)/0.5, 0, 1));
  const focusOut = Easing.easeOutCubic(clamp((t-35.3)/0.5, 0, 1));
  const focusK   = focusIn * (1-focusOut);

  // ---- Contadores (aterrizan cuando la voz dice el número) ----
  const v640  = useCountUp(0, 1650, T.c640,  1.1, t);
  const v642  = useCountUp(0, 510,  T.c642,  1.0, t);
  const v4751 = useCountUp(0, 198,  T.c4751, 1.0, t);
  const v476  = useCountUp(0, 615,  T.c476,  1.1, t);
  const v465  = t < 32.1 ? useCountUp(0, 1650, T.recibe, 0.9, t)
                         : useCountUp(1650, 1347, 32.1, 1.7, t);   // aterriza en 33.8
  const vTD   = useCountUp(0, 2160, T.tDebe,  1.0, t);
  const vTH   = useCountUp(0, 2160, T.tHaber, 1.0, t);

  // ---- Remate del líquido (UN pulse, sin bucle) ----
  const pulseLiq    = Math.sin(clamp((t-T.liquido)/1.1, 0, 1) * Math.PI);
  const landedK     = clamp((t-T.liquido)/0.5, 0, 1);

  // ---- Naturalezas (contrato visual del deck) ----
  const NAT = {
    verde:   { grad:'linear-gradient(180deg,#34D399,#10B981)', tint:'rgba(16,185,129,0.10)', bd:'rgba(16,185,129,0.35)', fg:'#059669',  sh:'0 14px 30px rgba(16,185,129,0.35)' },
    naranja: { grad:'linear-gradient(180deg,#FBBF6B,#FB8C00)', tint:'rgba(251,140,0,0.10)',  bd:'rgba(251,140,0,0.35)',  fg:'#C2410C',  sh:'0 14px 30px rgba(251,140,0,0.35)' },
    azul:    { grad:'linear-gradient(180deg,#38BDF8,#0085FF)', tint:'rgba(0,133,255,0.10)',  bd:'rgba(0,133,255,0.35)',  fg:'#0085FF',  sh:'0 14px 30px rgba(0,133,255,0.35)' },
  };

  // ---- Tira inferior: la nómina de María José (origen de las piezas) ----
  const STRIP = [
    { name:'Salario base',  amt:'1.500 €', nat:'verde',   used:T.verde },
    { name:'Plus convenio', amt:'150 €',   nat:'verde',   used:T.verde+0.15 },
    { name:'IRPF',          amt:'198 €',   nat:'naranja', used:T.naranja },
    { name:'SS trabajador', amt:'105 €',   nat:'naranja', used:T.juntas },
    { name:'SS empresa',    amt:'510 €',   nat:'azul',    used:T.azul },
  ];
  const SLOTW = 190, SLOTG = 14;
  const slotX = (i)=> 457 + i*(SLOTW+SLOTG);      // left del chip i (centros 552…1368)
  const STRIPY = 822;                              // top de los chips
  const stripIn  = Easing.easeOutCubic(clamp((t-0.6)/0.5, 0, 1));
  const stripOut = 1 - clamp((t-40.0)/0.4, 0, 1); // se despeja ANTES del momento (anticipación)

  // ---- Vuelos de piezas: de la nómina al T ----
  const FLY = [
    { t0:T.verde,        dur:0.9,  from:{x:552,  y:846}, to:{x:DCX, y:rowY(0)+ROWH/2}, arc:100, nat:'verde',   label:'Salario base',   amt:'1.500 €' },
    { t0:T.verde+0.15,   dur:0.9,  from:{x:756,  y:846}, to:{x:DCX, y:rowY(0)+ROWH/2}, arc:80,  nat:'verde',   label:'Plus convenio',  amt:'150 €' },
    { t0:T.azul,         dur:0.9,  from:{x:1368, y:846}, to:{x:DCX, y:rowY(1)+ROWH/2}, arc:110, nat:'azul',    label:'Cuota patronal', amt:'510 €' },
    { t0:T.naranja,      dur:0.9,  from:{x:960,  y:846}, to:{x:HCX, y:rowY(0)+ROWH/2}, arc:100, nat:'naranja', label:'Retención IRPF', amt:'198 €' },
    { t0:T.juntas,       dur:0.9,  from:{x:1164, y:846}, to:{x:HCX, y:rowY(1)+ROWH/2}, arc:90,  nat:'naranja', label:'SS trabajador',  amt:'105 €' },
    { t0:T.juntas+0.15,  dur:0.9,  from:{x:1368, y:846}, to:{x:HCX, y:rowY(1)+ROWH/2}, arc:65,  nat:'azul',    label:'SS empresa',     amt:'510 €' },
  ];

  // ---- Filas del asiento (aparecen cuando su pieza aterriza) ----
  const ROWS = [
    { side:'D', i:0, appear:3.95,  cuenta:'640',  nombre:'Sueldos y salarios',        bar:NAT.verde.grad,   fg:NAT.verde.fg, cStart:T.c640,  val:v640 },
    { side:'D', i:1, appear:9.85,  cuenta:'642',  nombre:'SS a cargo de la empresa',  bar:NAT.azul.grad,    fg:NAT.azul.fg,  cStart:T.c642,  val:v642 },
    { side:'H', i:0, appear:15.15, cuenta:'4751', nombre:'HP acreedora retenciones',  bar:NAT.naranja.grad, fg:NAT.naranja.fg, cStart:T.c4751, val:v4751 },
    { side:'H', i:1, appear:21.65, cuenta:'476',  nombre:'Organismos SS acreedores',  bar:'linear-gradient(180deg,#FBBF6B 0%,#FB8C00 48%,#38BDF8 52%,#0085FF 100%)', fg:'#0F172A', cStart:T.c476, val:v476 },
  ];

  const Fly = (f, key)=>{
    const p = clamp((t-f.t0)/f.dur, 0, 1);
    if (t < f.t0 || p >= 1) return null;
    const e = Easing.easeInOutCubic(p);
    const n = NAT[f.nat];
    const x = lerp(f.from.x, f.to.x, e);
    const y = lerp(f.from.y, f.to.y, e) - Math.sin(p*Math.PI)*f.arc;
    return (
      <div key={key} style={{position:'absolute', left:x, top:y, transform:`translate(-50%,-50%) scale(${lerp(1,0.88,p)})`, zIndex:20, opacity:clamp(Math.min(p*5,(1-p)*3.5),0,1), background:n.grad, boxShadow:n.sh, borderRadius:12, padding:'9px 16px', display:'flex', alignItems:'center', gap:10, whiteSpace:'nowrap'}}>
        <span className="f-plex" style={{fontSize:13, fontWeight:700, color:'#fff'}}>{f.label}</span>
        <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#fff'}}>{f.amt}</span>
      </div>
    );
  };

  const Row = (r)=>{
    const p = clamp((t-r.appear)/0.5, 0, 1);
    if (p <= 0) return null;
    const e = Easing.easeOutCubic(p);
    const x = r.side==='D' ? DX : HX;
    return (
      <div key={r.cuenta} style={{position:'absolute', left:x, top:rowY(r.i), width:COLW, height:ROWH, background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, boxShadow:'0 8px 22px rgba(15,23,42,0.06)', display:'flex', alignItems:'center', gap:12, padding:'0 18px 0 14px', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*14}px)`}}>
        <div style={{width:5, height:34, borderRadius:4, background:r.bar, flexShrink:0}}/>
        <span className="f-mono" style={{fontSize:17, fontWeight:700, color:r.fg}}>{r.cuenta}</span>
        <span className="f-plex" style={{fontSize:13, color:'#64748B', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r.nombre}</span>
        <span className="f-mono" style={{fontSize:18, fontWeight:800, color: t < r.cStart ? '#CBD5E1' : '#0F172A'}}>{t < r.cStart ? '—' : eur(r.val)}</span>
      </div>
    );
  };

  // ---- Fila 465 (protagonista del foco, se renderiza FUERA de la zona atenuada) ----
  const r465P = clamp((t-T.foco465)/0.55, 0, 1);
  const r465E = Easing.easeOutBack(r465P);
  const barra465 = landedK > 0 ? NAT.verde.grad : '#CBD5E1';

  // Piezas de la cuenta corriente del foco: +1.650 entra · −303 sale
  const gIn  = Easing.easeOutBack(clamp((t-T.recibe)/0.45, 0, 1));
  const gOut = Easing.easeOutCubic(clamp((t-32.1)/0.5, 0, 1));
  const oIn  = Easing.easeOutBack(clamp((t-T.descuenta)/0.4, 0, 1));
  const oOut = Easing.easeOutCubic(clamp((t-32.1)/0.6, 0, 1));

  // ---- Totales, cuadre, subcuenta, única cosa, cierre ----
  const tdP = Easing.easeOutCubic(clamp((t-T.tDebe)/0.5, 0, 1));
  const thP = Easing.easeOutCubic(clamp((t-T.tHaber)/0.5, 0, 1));
  const ckP = clamp((t-T.cuadre)/0.5, 0, 1), ckE = Easing.easeOutBack(ckP);
  const ckDraw = Easing.easeOutCubic(clamp((t-(T.cuadre+0.15))/0.45, 0, 1));
  const remP = Easing.easeOutCubic(clamp((t-T.remate)/0.5, 0, 1));
  const subP = clamp((t-T.subcuenta)/0.55, 0, 1), subE = Easing.easeOutCubic(subP);
  const uniP = clamp((t-T.unica)/0.6, 0, 1), uniE = Easing.easeOutBack(uniP);
  const c1P  = Easing.easeOutCubic(clamp((t-T.cierre1)/0.5, 0, 1));
  const c2P  = Easing.easeOutBack(clamp((t-T.cierre2)/0.5, 0, 1));

  const Total = ({x, cx, label, val, p, active})=>(
    <div style={{position:'absolute', left:x, top:596, width:COLW, opacity:p, transform:`translateY(${(1-p)*10}px)`}}>
      <div style={{height:6, borderTop:'1.5px solid #475569', borderBottom:'1.5px solid #475569'}}/>
      <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', padding:'10px 6px 0'}}>
        <span className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8'}}>{label}</span>
        <span className="f-mono" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>{active ? eur(val) : ''}</span>
      </div>
    </div>
  );

  const Cabecera = ({cx, txt, lit})=>(
    <div style={{position:'absolute', left:cx-120, top:200, width:240, textAlign:'center', opacity:headP}}>
      <div className="f-mono" style={{fontSize:19, fontWeight:700, letterSpacing:'5px', color: lit > 0 ? '#0F172A' : '#94A3B8', transform:`scale(${1+0.06*lit*(1-clamp((lit-0.9)*10,0,1))})`}}>{txt}</div>
      <div style={{width:56, height:3, borderRadius:2, background:'#0085FF', margin:'7px auto 0', transform:`scaleX(${lit})`, opacity:lit}}/>
    </div>
  );

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="NÓMINAS · CONTABILIDAD" title={<span>Cada concepto aporta <span className="grad-text">sus dos apuntes</span></span>}/>

      {/* ===== ZONA ATENUABLE: T, cabeceras, filas ya asentadas, totales ===== */}
      <div style={{position:'absolute', inset:0, opacity:1-0.6*focusK, filter:`saturate(${1-0.45*focusK})`}}>
        {/* Lavados de columna al iluminarse cada lado */}
        <div style={{position:'absolute', left:428, top:266, width:504, height:430, borderRadius:14, background:'rgba(0,133,255,0.05)', opacity:debK}}/>
        <div style={{position:'absolute', left:988, top:266, width:504, height:430, borderRadius:14, background:'rgba(16,185,129,0.05)', opacity:habK}}/>

        {/* El T se DIBUJA (horizontal desde el centro, vertical desciende) */}
        {t >= T.apuntes && (
          <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
            <line x1={CX} y1={HY} x2={HL} y2={HY} stroke="#64748B" strokeWidth="3" strokeLinecap="round" strokeDasharray={CX-HL} strokeDashoffset={(CX-HL)*(1-hE)}/>
            <line x1={CX} y1={HY} x2={HR} y2={HY} stroke="#64748B" strokeWidth="3" strokeLinecap="round" strokeDasharray={HR-CX} strokeDashoffset={(HR-CX)*(1-hE)}/>
            <line x1={CX} y1={HY} x2={CX} y2={VBOT} stroke="#64748B" strokeWidth="3" strokeLinecap="round" strokeDasharray={VBOT-HY} strokeDashoffset={(VBOT-HY)*(1-vE)}/>
          </svg>
        )}

        <Cabecera cx={DCX} txt="DEBE" lit={debK}/>
        <Cabecera cx={HCX} txt="HABER" lit={habK}/>

        {ROWS.map(Row)}

        {tdP > 0 && <Total x={DX} cx={DCX} label="TOTAL DEBE"  val={vTD} p={tdP} active={t>=T.tDebe}/>}
        {thP > 0 && <Total x={HX} cx={HCX} label="TOTAL HABER" val={vTH} p={thP} active={t>=T.tHaber}/>}
      </div>

      {/* ===== Fila 465 — nunca se atenúa; foco con elevación alta ===== */}
      {r465P > 0 && (
        <div style={{position:'absolute', left:HX, top:rowY(2), width:COLW, height:ROWH, zIndex:10, background:'#fff', borderRadius:12,
          border:`1.5px solid ${landedK > 0 ? 'rgba(16,185,129,0.55)' : '#CBD5E1'}`,
          boxShadow:`0 ${lerp(8,22,focusK)}px ${lerp(22,50,focusK)}px rgba(15,23,42,${lerp(0.06,0.18,focusK)}), 0 10px 34px rgba(16,185,129,${(0.16+0.28*pulseLiq)*landedK})`,
          display:'flex', alignItems:'center', gap:12, padding:'0 18px 0 14px',
          opacity:clamp(r465P*1.3,0,1),
          transform:`translateY(${(1-r465E)*16}px) scale(${(1+0.06*focusK)+(0.035*pulseLiq)})`}}>
          <div style={{width:5, height:34, borderRadius:4, background:barra465, flexShrink:0}}/>
          <span className="f-mono" style={{fontSize:17, fontWeight:700, color: landedK > 0 ? '#059669' : '#334155'}}>465</span>
          <span className="f-plex" style={{fontSize:13, color:'#64748B', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>Remuneraciones ptes. de pago</span>
          <span className="f-mono" style={{fontSize:18, fontWeight:800, color: t < T.recibe ? '#CBD5E1' : (landedK > 0 ? '#059669' : '#0F172A')}}>{t < T.recibe ? '—' : eur(v465)}</span>
        </div>
      )}

      {/* La cuenta del residuo: +1.650 entra (recibe) · −303 sale (descuenta) */}
      {t >= T.recibe && gOut < 1 && (
        <div className="f-mono" style={{position:'absolute', left:1095, top:510, zIndex:12, transform:`translate(-50%,0) translateX(${(1-gIn)*-30}px) translateY(${gOut*-34}px)`, opacity:clamp(gIn*1.2,0,1)*(1-gOut), background:'#ECFDF5', border:'1.5px solid #A7F3D0', borderRadius:12, padding:'8px 16px', fontSize:17, fontWeight:800, color:'#059669', boxShadow:'0 10px 24px rgba(16,185,129,0.16)'}}>
          + 1.650 €
        </div>
      )}
      {t >= T.descuenta && oOut < 1 && (
        <div className="f-mono" style={{position:'absolute', left:1305, top:510, zIndex:12, transform:`translate(-50%,0) scale(${lerp(0.7,1,oIn)}) translateY(${oOut*44}px) rotate(${oOut*6}deg)`, opacity:clamp(oIn*1.2,0,1)*(1-oOut), background:'#FFF7ED', border:'1.5px solid #FDBA74', borderRadius:12, padding:'8px 16px', fontSize:17, fontWeight:800, color:'#C2410C', boxShadow:'0 10px 24px rgba(251,140,0,0.14)'}}>
          − 303 €
        </div>
      )}

      {/* Desdoble en subcuenta: 465.00123 · María José */}
      {subP > 0 && (
        <div style={{position:'absolute', left:0, top:0, zIndex:9, opacity:clamp(subP*1.3,0,1), transform:`translateY(${(1-subE)*-12}px)`}}>
          <div style={{position:'absolute', left:1022, top:484, width:16, height:36, borderLeft:'2px solid #CBD5E1', borderBottom:'2px solid #CBD5E1', borderBottomLeftRadius:8}}/>
          <div style={{position:'absolute', left:1044, top:496, width:436, height:46, background:'#fff', border:'1px solid rgba(16,185,129,0.4)', borderRadius:10, boxShadow:'0 8px 22px rgba(16,185,129,0.10)', display:'flex', alignItems:'center', gap:10, padding:'0 16px 0 14px'}}>
            <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#059669'}}>465.00123</span>
            <div style={{width:24, height:24, borderRadius:100, background:'linear-gradient(135deg,#0085FF,#56E16A)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700, fontFamily:"'IBM Plex Sans',sans-serif", flexShrink:0}}>MJ</div>
            <span className="f-plex" style={{fontSize:13, color:'#334155', flex:1}}>María José</span>
            <span className="f-mono" style={{fontSize:15, fontWeight:800, color:'#059669'}}>1.347 €</span>
          </div>
        </div>
      )}

      {/* ===== Tira inferior: la nómina de origen (se despeja antes del momento) ===== */}
      {stripOut > 0 && (
        <div style={{position:'absolute', left:400, top:778, width:1120, height:116, background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 14px 36px rgba(15,23,42,0.07)', opacity:stripIn*(1-0.6*focusK)*stripOut, filter:`saturate(${1-0.45*focusK})`, transform:`translateY(${(1-stripIn)*16}px)`}}>
          <div style={{display:'flex', alignItems:'center', gap:8, padding:'11px 18px 0'}}>
            <div style={{width:20, height:20, borderRadius:100, background:'linear-gradient(135deg,#0085FF,#56E16A)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:8, fontWeight:700, fontFamily:"'IBM Plex Sans',sans-serif"}}>MJ</div>
            <span className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8'}}>NÓMINA · MARÍA JOSÉ · MARZO</span>
          </div>
          {STRIP.map((c,i)=>{
            const n = NAT[c.nat];
            const cp = Easing.easeOutCubic(clamp((t-(0.8+i*0.12))/0.4, 0, 1));
            const usedK = clamp((t-c.used)/0.4, 0, 1);      // al despegar su pieza, el chip queda apagado
            return (
              <div key={c.name} style={{position:'absolute', left:slotX(i)-400, top:STRIPY-778, width:SLOTW, height:48, background:n.tint, border:`1px solid ${n.bd}`, borderRadius:12, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 14px', opacity:cp*(1-0.65*usedK), filter:`saturate(${1-0.45*usedK})`, transform:`translateY(${(1-cp)*10}px)`}}>
                <span className="f-plex" style={{fontSize:11.5, fontWeight:600, color:n.fg, whiteSpace:'nowrap'}}>{c.name}</span>
                <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#0F172A'}}>{c.amt}</span>
              </div>
            );
          })}
        </div>
      )}

      {/* Piezas volando (protagonista del instante: llevan el arco) */}
      {FLY.map(Fly)}

      {/* ===== EL MOMENTO (40.6): cuadre — protegido, nada más se mueve ===== */}
      {ckP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:742, display:'flex', alignItems:'center', justifyContent:'center', gap:26, opacity:clamp(ckP*1.3,0,1), transform:`scale(${lerp(0.85,1,ckE)})`}}>
          <div style={{position:'relative', width:84, height:84, flexShrink:0}}>
            <div style={{position:'absolute', inset:0, borderRadius:100, background:'linear-gradient(180deg,#34D399,#10B981)', boxShadow:'0 18px 44px rgba(16,185,129,0.35)', display:'flex', alignItems:'center', justifyContent:'center'}}>
              <svg width="46" height="46" viewBox="-24 -24 48 48" fill="none">
                <path d="M -14 1 L -4 11 L 15 -10" stroke="#fff" strokeWidth="6.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="44" strokeDashoffset={44*(1-ckDraw)}/>
              </svg>
            </div>
            <div style={{position:'absolute', inset:-10, borderRadius:100, border:'3px solid rgba(16,185,129,0.6)', transform:`scale(${lerp(0.6,1.7,Easing.easeOutCubic(clamp((t-T.cuadre)/0.9,0,1)))})`, opacity:1-clamp((t-T.cuadre)/0.9,0,1)}}/>
          </div>
          <div style={{textAlign:'left'}}>
            <div className="f-plex" style={{fontSize:40, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A', lineHeight:1.05}}>Cuadrado al céntimo</div>
            <div className="f-plex" style={{fontSize:20, fontWeight:500, color:'#64748B', marginTop:6, opacity:remP, transform:`translateY(${(1-remP)*8}px)`}}>Sin redactar un solo apunte.</div>
          </div>
        </div>
      )}

      {/* ===== ÚNICA COSA + cierre ===== */}
      {uniP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:900, textAlign:'center', opacity:clamp(uniP*1.3,0,1), transform:`translateY(${(1-uniE)*14}px) scale(${lerp(0.94,1,uniE)})`}}>
          <div className="f-plex" style={{fontSize:38, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A'}}>
            El concepto <span style={{color:'#059669'}}>lleva el asiento dentro.</span>
          </div>
        </div>
      )}
      {c1P > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:966, display:'flex', alignItems:'center', justifyContent:'center', gap:14}}>
          <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#334155', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'9px 20px', boxShadow:'0 6px 16px rgba(15,23,42,0.06)', opacity:c1P, transform:`translateY(${(1-c1P)*8}px)`}}>Tú lo configuraste</span>
          {c2P > 0 && <span style={{color:'#94A3B8', fontSize:16, opacity:c2P}}>→</span>}
          {c2P > 0 && (
            <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#fff', background:'linear-gradient(135deg,#0085FF,#10B981)', borderRadius:100, padding:'9px 20px', boxShadow:'0 10px 26px rgba(0,133,255,0.28)', opacity:clamp(c2P*1.2,0,1), transform:`scale(${lerp(0.8,1,c2P)})`}}>Dinaup lo deriva</span>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaNO05 });