// === Escena 02 — "El catálogo de tipos de concepto" (la configuración) ===
// Una FICHA de configuración grande ("Salario base") declara 4 propiedades que se
// activan en orden: naturaleza (4 chips de color) → destino de ingreso → afecta al
// líquido (toggle) → sus dos cuentas (mini-T 640/465). Segunda ficha compacta
// "Cuota patronal" (642/476). Sello "SE CONFIGURA UNA SOLA VEZ" y una línea de
// nómina que hereda los valores con candados. Puente: "¿Y el registro? Mira."
// LOCUCIÓN (audio/escena-02.mp3, 49.0s): ver tabla de beats en plan.md.
function EscenaNO02({ t }){
  const T = {
    ficha:0.8,        // "catálogo de tipos de concepto" → ficha de configuración entra
    props:3.8,        // "declara cuatro cosas" → 4 propiedades numeradas (huecos)
    p1:6.8,           // "su naturaleza" → propiedad 1 activa
    natVerde:8.3,     // "Devengo" → chip verde
    natHueca:10.1,    // "deducción del empleado" → chip hueco
    natNaranja:12.0,  // "retención del empleado" → chip naranja
    natAzul:13.7,     // "o coste de empresa" → chip azul
    natSel:15.4,      // (pausa) → Salario base queda marcado: Devengo verde
    p2:18.0,          // "destino de ingreso" → propiedad 2 activa
    dTGSS:19.2,       // "Seguridad Social" → chip TGSS
    dAEAT:20.6,       // "Hacienda" → chip AEAT
    dTerceros:22.1,   // "para un embargo" → chip Terceros
    dNoAplica:23.2,   // (cierre prop 2) → en Salario base no aplica: chips atenuados
    p3:24.3,          // "si afecta al líquido" → propiedad 3 activa
    toggle:25.3,      // (remate prop 3) → toggle ON
    p4:28.7,          // "sus dos cuentas" → propiedad 4 activa (mini-T se dibuja)
    titulo:30.1,      // "Salario base" → el título de la ficha pulsa UNA vez
    debe640:31.3,     // "seiscientos cuarenta al debe" → 640 aterriza al Debe
    haber465:33.5,    // "cuatrocientos sesenta y cinco al haber" → 465 aterriza al Haber
    ficha2:36.1,      // "Cuota patronal" → segunda ficha compacta entra
    debe642:37.4,     // "seiscientos cuarenta y dos" → 642 al Debe
    haber476:39.8,    // "cuatrocientos setenta y seis" → 476 al Haber
    sello:42.9,       // "una sola vez" → sello stamp con easeOutBack
    lineaSkel:44.8,   // (anticipación 0.3s) → línea de nómina aparece con huecos
    hereda:45.1,      // "lo hereda, bloqueado" → los valores vuelan con candados
    puente:47.1,      // "Y el registro" → puente de salida
  };

  const pr = (start, dur)=> clamp((t-start)/dur, 0, 1);

  // --- Progresos principales ---
  const fichaP = pr(T.ficha, 1.0), fichaE = Easing.easeOutCubic(fichaP);
  const selP   = pr(T.natSel, 0.5);
  const noApP  = pr(T.dNoAplica, 0.5);
  const togP   = pr(T.toggle, 0.4), togE = Easing.easeOutBack(togP);
  const siP    = pr(T.toggle+0.25, 0.35);
  const t4draw = Easing.easeInOutCubic(pr(T.p4+0.15, 0.9));   // la mini-T se DIBUJA
  const f2P    = pr(T.ficha2, 0.7), f2E = Easing.easeOutBack(f2P);
  const f2draw = Easing.easeInOutCubic(pr(T.ficha2+0.4, 0.8));
  // La ficha grande cede protagonismo cuando entra la ficha 2; la ficha 2 cede al heredar la línea
  const f1Dim  = lerp(1, 0.78, Easing.easeOutCubic(pr(T.ficha2, 0.6)));
  const f2Dim  = lerp(1, 0.85, Easing.easeOutCubic(pr(T.hereda, 0.6)));
  const selloP = pr(T.sello, 0.45);
  const lineaP = pr(T.lineaSkel, 0.6), lineaE = Easing.easeOutCubic(lineaP);

  // Pulso ÚNICO del título cuando la voz dice "Salario base" (29.5)
  const tituloPulse = t >= T.titulo ? Math.sin(clamp((t-T.titulo)/1.1, 0, 1) * Math.PI) : 0;
  // Pulso ÚNICO del sello tras aterrizar
  const selloGlow = t >= T.sello+0.4 ? Math.sin(clamp((t-(T.sello+0.4))/1.1, 0, 1) * Math.PI) : 0;

  // --- Vuelo de valores ficha → línea de nómina (heredar, bloqueado) ---
  const FLY1 = { from:{x:445, y:352}, to:{x:1090, y:916} };   // chip naturaleza
  const FLY2 = { from:{x:545, y:668}, to:{x:1400, y:916} };   // cuentas 640·465
  const fly1P = clamp((t-T.hereda)/0.75, 0, 1);
  const fly2P = clamp((t-T.hereda-0.18)/0.75, 0, 1);
  const flyPos = (p, f)=>{
    const e = Easing.easeInOutCubic(p);
    return { x: lerp(f.from.x, f.to.x, e), y: lerp(f.from.y, f.to.y, e) - Math.sin(p*Math.PI)*70 };
  };
  const lock1P = pr(T.hereda+0.75, 0.4), lock1E = Easing.easeOutBack(lock1P);
  const lock2P = pr(T.hereda+0.93, 0.4), lock2E = Easing.easeOutBack(lock2P);

  // --- Datos ---
  const NAT = [
    { key:'devengo',   label:'Devengo',          tIn:T.natVerde,
      css:{ background:'linear-gradient(180deg,#34D399,#10B981)', color:'#fff' }, sh:'0 8px 18px rgba(16,185,129,0.28)' },
    { key:'deduccion', label:'Deducción',        tIn:T.natHueca,
      css:{ background:'#FFF7ED', border:'1.5px solid #FDBA74', color:'#C2410C' }, sh:'none' },
    { key:'retencion', label:'Retención',        tIn:T.natNaranja,
      css:{ background:'linear-gradient(180deg,#FBBF6B,#FB8C00)', color:'#fff' }, sh:'0 8px 18px rgba(251,140,0,0.28)' },
    { key:'coste',     label:'Coste de empresa', tIn:T.natAzul,
      css:{ background:'linear-gradient(180deg,#38BDF8,#0085FF)', color:'#fff' }, sh:'0 8px 18px rgba(0,133,255,0.28)' },
  ];
  const DEST = [
    { label:'TGSS', tIn:T.dTGSS },
    { label:'AEAT', tIn:T.dAEAT },
    { label:'Terceros · embargo', tIn:T.dTerceros },
  ];
  const PROP_STARTS = [T.p1, T.p2, T.p3, T.p4];
  const currentIdx = PROP_STARTS.filter(s => t >= s).length - 1;

  // --- Micro-componentes (cierran sobre t) ---
  const Lock = ({ size=13, color='#0F172A' })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{flexShrink:0}}>
      <rect x="5" y="10.5" width="14" height="9.5" rx="2.5" fill={color}/>
      <path d="M8 10.5 V7.5 a4 4 0 0 1 8 0 V10.5" stroke={color} strokeWidth="2.4" fill="none"/>
    </svg>
  );

  const Badge = ({ n, start })=>{
    const on = t >= start;
    const ae = Easing.easeOutBack(pr(start, 0.45));
    return (
      <div className="f-mono" style={{width:30, height:30, borderRadius:100, flexShrink:0,
        background: on ? '#0085FF' : '#F1F5F9', color: on ? '#fff' : '#94A3B8',
        display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, fontWeight:700,
        transform: on ? `scale(${lerp(1.4,1,ae)})` : 'scale(1)',
        boxShadow: on ? '0 6px 14px rgba(0,133,255,0.3)' : 'none'}}>{n}</div>
    );
  };

  const Row = ({ i, label, children })=>{
    const start = PROP_STARTS[i];
    const showP = pr(T.props + i*0.18, 0.5), showE = Easing.easeOutCubic(showP);
    if (showP <= 0) return null;
    const active = t >= start;
    const isCurrent = i === currentIdx;
    return (
      <div style={{display:'flex', gap:14, alignItems:'flex-start', padding:'11px 14px', borderRadius:14,
        background: isCurrent ? 'rgba(240,247,255,0.95)' : active ? '#FBFDFF' : 'transparent',
        border: active ? '1px solid rgba(0,133,255,0.16)' : '1px dashed #E2E8F0',
        opacity: clamp(showP*1.3, 0, 1), transform:`translateY(${(1-showE)*12}px)`}}>
        <Badge n={i+1} start={start}/>
        <div style={{flex:1, minWidth:0}}>
          <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'1.8px', paddingTop:7,
            color: active ? '#0085FF' : '#94A3B8'}}>{label}</div>
          {active == false && <div style={{width:190, height:10, borderRadius:100, background:'#EEF2F7', marginTop:12, marginBottom:4}}/>}
          {active && children}
        </div>
      </div>
    );
  };

  const CuentaPill = ({ num, nombre, start, w, numSize=21 })=>{
    const p = pr(start, 0.55);
    if (p <= 0) return null;
    const e = Easing.easeOutBack(p);
    return (
      <div style={{width:w, background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, padding:'8px 10px',
        textAlign:'center', boxShadow:'0 10px 22px rgba(15,23,42,0.08)',
        opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*22}px) scale(${lerp(0.85,1,e)})`}}>
        <div className="f-mono" style={{fontSize:numSize, fontWeight:800, color:'#0F172A', lineHeight:1.1}}>{num}</div>
        <div className="f-plex" style={{fontSize:11, color:'#64748B', lineHeight:1.2, marginTop:2}}>{nombre}</div>
      </div>
    );
  };

  // Mini-T contable: cabeceras DEBE/HABER + líneas que se dibujan + huecos → pastillas
  const MiniT = ({ w, drawP, debe, haber, pillW, numSize })=>{
    const vH = 96;
    const col1 = w*0.25, col2 = w*0.75;
    const slot = (x, filledStart)=>{
      const fp = pr(filledStart, 0.3);
      return (
        <div style={{position:'absolute', left:x-pillW/2, top:44, width:pillW, height:52, borderRadius:12,
          border:'1.5px dashed #CBD5E1', opacity: clamp(drawP*1.2,0,1) * (1 - clamp(fp*3,0,1))}}/>
      );
    };
    return (
      <div style={{position:'relative', width:w, height:vH+46, marginTop:10}}>
        <div className="f-mono" style={{position:'absolute', left:0, width:w/2, top:0, textAlign:'center',
          fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8', opacity:clamp(drawP*1.5,0,1)}}>DEBE</div>
        <div className="f-mono" style={{position:'absolute', left:w/2, width:w/2, top:0, textAlign:'center',
          fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8', opacity:clamp(drawP*1.5,0,1)}}>HABER</div>
        <svg width={w} height={vH+30} style={{position:'absolute', left:0, top:18}}>
          <line x1={6} y1={6} x2={w-6} y2={6} stroke="#CBD5E1" strokeWidth="2.5" strokeLinecap="round"
            strokeDasharray={w} strokeDashoffset={w*(1-drawP)}/>
          <line x1={w/2} y1={6} x2={w/2} y2={vH+18} stroke="#CBD5E1" strokeWidth="2.5" strokeLinecap="round"
            strokeDasharray={vH+12} strokeDashoffset={(vH+12)*(1-drawP)}/>
        </svg>
        {slot(col1, debe.start)}
        {slot(col2, haber.start)}
        <div style={{position:'absolute', left:col1-pillW/2, top:44}}>
          <CuentaPill num={debe.num} nombre={debe.nombre} start={debe.start} w={pillW} numSize={numSize}/>
        </div>
        <div style={{position:'absolute', left:col2-pillW/2, top:44}}>
          <CuentaPill num={haber.num} nombre={haber.nombre} start={haber.start} w={pillW} numSize={numSize}/>
        </div>
      </div>
    );
  };

  // Chips reutilizados por el vuelo y el aterrizaje en la línea
  const chipDevengoMini = (withLock, lockE)=>(
    <span style={{display:'inline-flex', alignItems:'center', gap:7, padding:'7px 14px', borderRadius:12,
      background:'linear-gradient(180deg,#34D399,#10B981)', color:'#fff', fontSize:14, fontWeight:700,
      fontFamily:"'IBM Plex Sans',sans-serif", boxShadow:'0 8px 18px rgba(16,185,129,0.28)'}}>
      Devengo
      {withLock && <span style={{display:'inline-flex', transform:`scale(${lockE})`}}><Lock color="#fff"/></span>}
    </span>
  );
  const chipCuentasMini = (withLock, lockE)=>(
    <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:8, padding:'7px 14px', borderRadius:12,
      background:'#fff', border:'1px solid #E2E8F0', color:'#0F172A', fontSize:15, fontWeight:800,
      boxShadow:'0 8px 18px rgba(15,23,42,0.10)'}}>
      640 · 465
      {withLock && <span style={{display:'inline-flex', transform:`scale(${lockE})`}}><Lock/></span>}
    </span>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="NÓMINAS · EL CATÁLOGO DE CONCEPTOS"
        title={<span>Cada concepto declara <span className="grad-text">cuatro propiedades</span></span>}/>

      {/* ================= FICHA GRANDE: Salario base ================= */}
      {fichaP > 0 && (
        <div style={{position:'absolute', left:320, top:190, width:760, background:'#fff', borderRadius:20,
          border:'1px solid #E2E8F0', boxShadow:'0 26px 60px rgba(15,23,42,0.10), 0 6px 16px rgba(15,23,42,0.05)',
          padding:'22px 24px', opacity:clamp(fichaP*1.4,0,1)*f1Dim, transform:`translateY(${(1-fichaE)*36}px)`}}>

          {/* Cabecera de la ficha */}
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
            <div>
              <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8'}}>TIPO DE CONCEPTO</div>
              <span className="f-plex" style={{display:'inline-block', fontSize:32, fontWeight:800, color:'#0F172A',
                letterSpacing:'-0.02em', lineHeight:1.15, padding:'0 8px', marginLeft:-8, borderRadius:10,
                background:`rgba(16,185,129,${0.12*tituloPulse})`,
                boxShadow:`0 0 0 ${tituloPulse*5}px rgba(16,185,129,0.10)`}}>Salario base</span>
            </div>
            <div className="f-mono" style={{fontSize:11, fontWeight:700, color:'#64748B', background:'#F1F5F9',
              padding:'5px 12px', borderRadius:100}}>CATÁLOGO</div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {/* -------- Propiedad 1: NATURALEZA -------- */}
            <Row i={0} label="NATURALEZA">
              <div style={{display:'flex', gap:10, marginTop:10, flexWrap:'nowrap'}}>
                {NAT.map((c)=>{
                  const cp = pr(c.tIn, 0.45);
                  if (cp <= 0) return null;
                  const ce = Easing.easeOutBack(cp);
                  const isSel = c.key === 'devengo';
                  const dim = selP > 0 && isSel == false;
                  return (
                    <div key={c.key} style={{position:'relative', display:'inline-flex', alignItems:'center',
                      padding:'8px 14px', borderRadius:12, fontSize:14, fontWeight:700,
                      fontFamily:"'IBM Plex Sans',sans-serif", ...c.css,
                      opacity: dim ? lerp(1, 0.35, selP) : clamp(cp*1.3, 0, 1),
                      filter: dim ? `saturate(${lerp(1, 0.55, selP)})` : 'none',
                      transform:`translateY(${(1-ce)*24}px) scale(${lerp(0.7,1,ce)})`,
                      boxShadow: isSel && selP > 0
                        ? `${c.sh}, 0 0 0 ${3*Easing.easeOutBack(selP)}px rgba(16,185,129,0.35)`
                        : c.sh}}>
                      {c.label}
                      {isSel && selP > 0 && (
                        <span style={{position:'absolute', top:-8, right:-8, width:20, height:20, borderRadius:100,
                          background:'#fff', border:'1.5px solid #10B981', display:'flex', alignItems:'center',
                          justifyContent:'center', transform:`scale(${Easing.easeOutBack(selP)})`,
                          boxShadow:'0 2px 6px rgba(16,185,129,0.3)'}}>
                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12 L10 17 L19 7" stroke="#059669" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </span>
                      )}
                    </div>
                  );
                })}
              </div>
            </Row>

            {/* -------- Propiedad 2: DESTINO DE INGRESO -------- */}
            <Row i={1} label="DESTINO DE INGRESO">
              <div style={{display:'flex', alignItems:'center', gap:10, marginTop:10}}>
                {DEST.map((c)=>{
                  const cp = pr(c.tIn, 0.45);
                  if (cp <= 0) return null;
                  const ce = Easing.easeOutBack(cp);
                  return (
                    <span key={c.label} className="f-mono" style={{display:'inline-flex', padding:'8px 14px',
                      borderRadius:12, background:'#fff', border:'1px solid #E2E8F0', color:'#334155',
                      fontSize:13, fontWeight:700,
                      opacity: noApP > 0 ? lerp(1, 0.35, noApP) : clamp(cp*1.3, 0, 1),
                      filter: noApP > 0 ? `saturate(${lerp(1, 0.55, noApP)})` : 'none',
                      transform:`translateY(${(1-ce)*24}px) scale(${lerp(0.7,1,ce)})`,
                      boxShadow:'0 4px 10px rgba(15,23,42,0.05)'}}>{c.label}</span>
                  );
                })}
                {noApP > 0 && (
                  <span className="f-plex" style={{fontSize:13, fontWeight:600, color:'#94A3B8',
                    opacity:Easing.easeOutCubic(noApP), transform:`translateY(${(1-Easing.easeOutCubic(noApP))*8}px)`}}>
                    — No aplica en Salario base
                  </span>
                )}
              </div>
            </Row>

            {/* -------- Propiedad 3: AFECTA AL LÍQUIDO -------- */}
            <Row i={2} label="AFECTA AL LÍQUIDO">
              <div style={{display:'flex', alignItems:'center', gap:14, marginTop:10, height:30}}>
                <div style={{position:'relative', width:56, height:30, borderRadius:100, background:'#CBD5E1', flexShrink:0}}>
                  <div style={{position:'absolute', inset:0, borderRadius:100, background:'#10B981', opacity:togP}}/>
                  <div style={{position:'absolute', top:3, left:lerp(3, 29, togE), width:24, height:24, borderRadius:100,
                    background:'#fff', boxShadow:'0 2px 6px rgba(15,23,42,0.25)'}}/>
                </div>
                {siP > 0 && (
                  <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#059669',
                    opacity:siP, transform:`scale(${lerp(0.85,1,Easing.easeOutCubic(siP))})`}}>SÍ</span>
                )}
                {siP > 0 && (
                  <span className="f-plex" style={{fontSize:14, color:'#64748B', opacity:siP}}>Suma al líquido</span>
                )}
              </div>
            </Row>

            {/* -------- Propiedad 4: SUS DOS CUENTAS (mini-T) -------- */}
            <Row i={3} label="SUS DOS CUENTAS">
              <MiniT w={620} drawP={t4draw} pillW={264} numSize={21}
                debe={{ num:'640', nombre:'Sueldos y salarios', start:T.debe640 }}
                haber={{ num:'465', nombre:'Remun. ptes. de pago', start:T.haber465 }}/>
            </Row>
          </div>
        </div>
      )}

      {/* ================= FICHA COMPACTA: Cuota patronal ================= */}
      {f2P > 0 && (
        <div style={{position:'absolute', left:1140, top:250, width:460, background:'#fff', borderRadius:20,
          border:'1px solid #E2E8F0', boxShadow:'0 26px 60px rgba(0,133,255,0.10), 0 6px 16px rgba(15,23,42,0.05)',
          padding:'20px 24px', opacity:clamp(f2P*1.3,0,1)*f2Dim,
          transform:`translateY(${(1-f2E)*36}px) scale(${lerp(0.94,1,f2E)})`}}>
          <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8'}}>TIPO DE CONCEPTO</div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:2}}>
            <div className="f-plex" style={{fontSize:25, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Cuota patronal</div>
            {pr(T.ficha2+0.35, 0.4) > 0 && (
              <span style={{display:'inline-flex', padding:'7px 13px', borderRadius:12,
                background:'linear-gradient(180deg,#38BDF8,#0085FF)', color:'#fff', fontSize:13, fontWeight:700,
                fontFamily:"'IBM Plex Sans',sans-serif", boxShadow:'0 8px 18px rgba(0,133,255,0.28)',
                opacity:clamp(pr(T.ficha2+0.35,0.4)*1.3,0,1),
                transform:`scale(${lerp(0.85,1,Easing.easeOutCubic(pr(T.ficha2+0.35,0.4)))})`}}>Coste de empresa</span>
            )}
          </div>
          <MiniT w={400} drawP={f2draw} pillW={182} numSize={19}
            debe={{ num:'642', nombre:'SS a cargo de la empresa', start:T.debe642 }}
            haber={{ num:'476', nombre:'Organismos SS acreedores', start:T.haber476 }}/>
        </div>
      )}

      {/* ================= SELLO: SE CONFIGURA UNA SOLA VEZ ================= */}
      {selloP > 0 && (
        <div className="f-mono" style={{position:'absolute', left:1125, top:610, padding:'13px 24px',
          border:'3px solid #0085FF', borderRadius:14, color:'#0085FF', fontSize:19, fontWeight:800,
          letterSpacing:'2.5px', background:'rgba(240,247,255,0.88)',
          transform:`rotate(-7deg) scale(${lerp(2.3, 1, Easing.easeOutCubic(selloP))})`,
          opacity:clamp(selloP*1.5, 0, 1),
          boxShadow:`0 10px 26px rgba(0,133,255,0.18), 0 0 0 ${selloGlow*9}px rgba(0,133,255,0.10)`}}>
          SE CONFIGURA UNA SOLA VEZ
        </div>
      )}

      {/* ================= LÍNEA DE NÓMINA QUE HEREDA ================= */}
      {lineaP > 0 && (
        <div className="f-mono" style={{position:'absolute', left:320, top:838, fontSize:11, fontWeight:700,
          letterSpacing:'2px', color:'#94A3B8', opacity:lineaP}}>LA LÍNEA DE NÓMINA HEREDA</div>
      )}
      {lineaP > 0 && (
        <div style={{position:'absolute', left:320, top:864, width:1280, height:86, background:'#fff',
          borderRadius:14, border:'1px solid #E2E8F0', boxShadow:'0 16px 40px rgba(15,23,42,0.08)',
          opacity:clamp(lineaP*1.3,0,1), transform:`translateY(${(1-lineaE)*24}px)`}}>
          <div style={{display:'flex', alignItems:'center', height:'100%', gap:18, paddingLeft:26}}>
            <span className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'1.5px', color:'#64748B',
              background:'#F1F5F9', padding:'4px 10px', borderRadius:100}}>NÓMINA · MARZO</span>
            <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#0F172A'}}>Salario base</span>
            <span className="f-mono" style={{fontSize:20, fontWeight:800, color:'#0F172A'}}>1.500 €</span>
          </div>
          {/* Hueco 1: naturaleza (destino del vuelo 1) */}
          <div className="f-mono" style={{position:'absolute', left:1090-320-75, top:8, width:150, textAlign:'center',
            fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8'}}>NATURALEZA</div>
          {fly1P < 1 && (
            <div style={{position:'absolute', left:1090-320-75, top:28, width:150, height:44, borderRadius:12,
              border:'1.5px dashed #CBD5E1'}}/>
          )}
          {fly1P >= 1 && (
            <div style={{position:'absolute', left:1090-320, top:50, transform:'translate(-50%,-50%)'}}>
              {chipDevengoMini(lock1P > 0, lock1E)}
            </div>
          )}
          {/* Hueco 2: cuentas (destino del vuelo 2) */}
          <div className="f-mono" style={{position:'absolute', left:1400-320-75, top:8, width:150, textAlign:'center',
            fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8'}}>CUENTAS</div>
          {fly2P < 1 && (
            <div style={{position:'absolute', left:1400-320-75, top:28, width:150, height:44, borderRadius:12,
              border:'1.5px dashed #CBD5E1'}}/>
          )}
          {fly2P >= 1 && (
            <div style={{position:'absolute', left:1400-320, top:50, transform:'translate(-50%,-50%)'}}>
              {chipCuentasMini(lock2P > 0, lock2E)}
            </div>
          )}
        </div>
      )}

      {/* Clones en vuelo (ficha → línea, con arco) */}
      {fly1P > 0 && fly1P < 1 && (()=>{
        const pos = flyPos(fly1P, FLY1);
        return (
          <div style={{position:'absolute', left:pos.x, top:pos.y, transform:'translate(-50%,-50%) scale(0.94)', zIndex:20}}>
            {chipDevengoMini(false, 0)}
          </div>
        );
      })()}
      {fly2P > 0 && fly2P < 1 && (()=>{
        const pos = flyPos(fly2P, FLY2);
        return (
          <div style={{position:'absolute', left:pos.x, top:pos.y, transform:'translate(-50%,-50%) scale(0.94)', zIndex:20}}>
            {chipCuentasMini(false, 0)}
          </div>
        );
      })()}

      {/* ================= PUENTE ================= */}
      <Caption t={t} start={T.puente} style={{fontSize:26, fontWeight:700, color:'#0F172A', bottom:18}}>
        ¿Y el registro? <span style={{color:'#0085FF'}}>Mira.</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaNO02 });