// === Escena IN06 — "La subida verificada" (CLÍMAX del deck) ===
// Duración real del mp3: 39.5s. SlideCanvas variant="light-soft".
// La imagen-momento: el panel de ESTADO girando a ACEPTADO (21.67) con ✓✓ en los dos buckets,
// glow verde y UN pulse. Antes hay un valle (16.54–21) con el contraejemplo RECHAZADO en rojo dosificado.
// Motivo conductor "el gemelo": buckets en pareja (Nuevos OVH/R2), luego se dobla otra vez (Archivo largo plazo).
// LOCUCIÓN (audio/escena-06.mp3):
// "Cuando subes un archivo, no pasa por nuestro servidor. Va directo, y cifrado, a dos sitios a la vez.
//  A dos empresas distintas. Y aquí está la clave. Dinaup no lo da por bueno... hasta que confirma que ha
//  llegado a los dos. Si solo llegó a uno, no cuenta. No existe. Solo cuando está a salvo, por duplicado,
//  Dinaup lo acepta. Y no acaba ahí. Un proceso vigila cada archivo, día y noche. Comprueba que están
//  intactos... y los copia a otros dos almacenes de largo plazo. Cuatro copias. Verificadas. Siempre.
//  Y una vez dentro, hay que servirlos."
function EscenaIN06({ t }){
  const T = {
    cliente:0.35,     // "Cuando subes un archivo"        → cliente (mini navegador) con factura-2026.pdf
    esquiva:1.81,     // "no pasa por nuestro servidor"   → servidor central se ATENÚA, el camino lo rodea
    cifrado:5.08,     // "cifrado, a dos sitios"          → 2 candados 🔒 vuelan del cliente a 2 buckets "Nuevos"
    destinos:7.84,    // "A dos empresas distintas"       → pills de proveedor OVH / R2 en cada bucket
    panel:9.86,       // "aquí está la clave"             → panel de estado central "factura-2026.pdf — ?"
    pendiente:12.27,  // "no lo da por bueno"             → Estado = PENDIENTE (gris)
    checks:14.93,     // "ha llegado a los dos"           → 2 checks, uno por bucket (stagger)
    rechazo:16.54,    // "Si solo llegó a uno"            → CONTRAEJEMPLO: ✓ + ✗ → Estado RECHAZADO (rojo)
    reset:20.2,       // (interno) valle de anticipación  → se limpian las marcas, Estado vuelve a PENDIENTE
    acepta:21.67,     // "por duplicado, Dinaup lo acepta"→ EL MOMENTO: ✓✓ → ACEPTADO (check verde, glow, UN pulse)
    proceso:25.72,    // "Un proceso vigila"              → entra el proceso de fondo (engranaje) abajo
    integridad:28.82, // "Comprueba que están intactos"   → scan-line recorre los buckets; integridad ✓
    largo:31.89,      // "otros dos almacenes de largo plazo" → 2 buckets "Archivo" + flechas de copia
    cuatro:34.34,     // "Cuatro copias. Verificadas"     → los 4 buckets sellados + "×4 verificadas"
    salida:38.42,     // "hay que servirlos"              → píldora de salida "SERVIRLOS →"
  };

  // ---- Geometría (1920×1080) ----
  const BX = 1500, BW = 340, BH = 100;                 // buckets, columna derecha
  const BY = { nOVH:200, nR2:316, aOVH:560, aR2:676 }; // Nuevos (pareja) · Archivo (pareja)
  const bCx = BX + BW/2;                               // 1670
  const CLI = { x:70, y:290, w:340, h:210 };           // cliente (izq)
  const SRV = { x:770, y:270, w:250, h:120 };          // servidor Dinaup (centro)
  const PAN = { x:540, y:470, w:760, h:150 };          // panel de estado (hilo)

  // ---- Servidor esquivado ----
  const srvDim   = 1 - 0.62*Easing.easeOutCubic(clamp((t-T.esquiva)/0.6, 0, 1));
  const pathDraw = Easing.easeInOutCubic(clamp((t-T.esquiva)/1.0, 0, 1));
  const noTocaP  = Easing.easeOutCubic(clamp((t-(T.esquiva+0.4))/0.6, 0, 1));

  // ---- Caminos cliente → buckets Nuevos (arco que baja y esquiva el servidor) ----
  const bez = (p0,p1,p2,p3,u)=>{ const m=1-u;
    return { x:m*m*m*p0.x+3*m*m*u*p1.x+3*m*u*u*p2.x+u*u*u*p3.x,
             y:m*m*m*p0.y+3*m*m*u*p1.y+3*m*u*u*p2.y+u*u*u*p3.y }; };
  const PATHS = [
    { d:'M410,405 C690,545 1240,300 1500,250', p0:{x:410,y:405}, p1:{x:690,y:545}, p2:{x:1240,y:300}, p3:{x:1500,y:250}, t0:T.cifrado      },
    { d:'M410,430 C690,570 1240,430 1500,366', p0:{x:410,y:430}, p1:{x:690,y:570}, p2:{x:1240,y:430}, p3:{x:1500,y:366}, t0:T.cifrado+0.18 },
  ];

  // ---- Panel de estado: valor según el tiempo ----
  const NAT = {
    gris:  { fg:'#64748B', bg:'#F1F5F9', bd:'#E2E8F0' },
    rojo:  { fg:'#DC2626', bg:'#FEF2F2', bd:'#FECACA' },
    verde: { fg:'#059669', bg:'#ECFDF5', bd:'#A7F3D0' },
  };
  let est, estN;
  if      (t < T.pendiente) { est='?';          estN=NAT.gris; }
  else if (t < T.rechazo)   { est='PENDIENTE';  estN=NAT.gris; }
  else if (t < T.reset)     { est='RECHAZADO';  estN=NAT.rojo; }
  else if (t < T.acepta)    { est='PENDIENTE';  estN=NAT.gris; }
  else                      { est='ACEPTADO';   estN=NAT.verde; }
  const panelP  = Easing.easeOutCubic(clamp((t-T.panel)/0.6, 0, 1));
  const accept  = t >= T.acepta;
  const landed  = clamp((t-T.acepta)/0.5, 0, 1);
  const pulse   = Math.sin(clamp((t-T.acepta)/1.1, 0, 1) * Math.PI);   // UN pulse
  const bigDraw = Easing.easeOutCubic(clamp((t-(T.acepta+0.12))/0.45, 0, 1));

  // ---- Marca por bucket Nuevos (0=OVH arriba · 1=R2 abajo) ----
  const markNuevos = (i)=>{
    if (t >= T.acepta)                       return { kind:'check', since:T.acepta+i*0.05 };
    if (t >= T.reset)                        return { kind:'none',  since:T.reset };
    if (i===1 && t >= T.rechazo)             return { kind:'cross', since:T.rechazo };
    const ap = T.checks + i*0.5;
    if (t >= ap)                             return { kind:'check', since:ap };
    return { kind:'none', since:0 };
  };
  const markArchivo = (i)=> (t >= T.cuatro + i*0.35) ? { kind:'check', since:T.cuatro+i*0.35 } : { kind:'none', since:0 };

  // ---- Copia a largo plazo + scan-line + ×4 ----
  const copyDraw = Easing.easeOutCubic(clamp((t-T.largo)/0.9, 0, 1));
  const scanP    = clamp((t-T.integridad)/1.3, 0, 1);
  const intactP  = Easing.easeOutBack(clamp((t-(T.integridad+0.9))/0.4, 0, 1));
  const cuatroP  = Easing.easeOutBack(clamp((t-T.cuatro)/0.55, 0, 1));
  const salP     = Easing.easeOutBack(clamp((t-T.salida)/0.5, 0, 1));

  // Protección de EL MOMENTO: el resto de la escena se atenúa levemente durante el accept.
  const guard = Easing.easeOutCubic(clamp((t-T.acepta)/0.4, 0, 1)) * (1 - clamp((t-(T.acepta+2.4))/0.5, 0, 1));

  // ---- helpers locales ----
  const Padlock = ({s=18})=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <rect x="5" y="10.5" width="14" height="9.5" rx="2.4" fill="#0085FF"/>
      <path d="M8 10.5 V7.6 A4 4 0 0 1 16 7.6 V10.5" stroke="#0085FF" strokeWidth="2.2" fill="none"/>
      <circle cx="12" cy="15" r="1.5" fill="#fff"/>
    </svg>
  );

  const Mark = ({m, size=30})=>{
    if (m.kind==='none') return null;
    const p = clamp((t-m.since)/0.34, 0, 1);
    const e = Easing.easeOutBack(p);
    const dr = Easing.easeOutCubic(clamp((t-m.since-0.05)/0.3, 0, 1));
    const c = m.kind==='cross' ? '#EF4444' : '#10B981';
    return (
      <div style={{width:size, height:size, borderRadius:100, background:c, display:'flex', alignItems:'center', justifyContent:'center',
        transform:`scale(${lerp(0.4,1,e)})`, opacity:clamp(p*1.4,0,1), boxShadow:`0 6px 16px ${c}55`}}>
        <svg width={size*0.6} height={size*0.6} viewBox="-12 -12 24 24" fill="none">
          {m.kind==='cross'
            ? <g stroke="#fff" strokeWidth="3.4" strokeLinecap="round">
                <path d="M-6 -6 L6 6"  strokeDasharray="17" strokeDashoffset={17*(1-dr)}/>
                <path d="M6 -6 L-6 6"  strokeDasharray="17" strokeDashoffset={17*(1-dr)}/>
              </g>
            : <path d="M-7 0 L-2 5 L8 -6" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="26" strokeDashoffset={26*(1-dr)}/>}
        </svg>
      </div>
    );
  };

  const ProvPill = ({txt, col, show})=>{
    const p = Easing.easeOutBack(clamp((t-show)/0.4, 0, 1));
    if (p<=0) return null;
    return (
      <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:6, fontSize:12, fontWeight:700, color:'#fff',
        background:col, borderRadius:100, padding:'3px 11px', transform:`scale(${lerp(0.6,1,p)})`, opacity:clamp(p*1.3,0,1)}}>
        <span style={{width:6, height:6, borderRadius:100, background:'rgba(255,255,255,0.9)'}}/>{txt}
      </span>
    );
  };

  const Bucket = ({x, y, tit, prov, provCol, appear, provAt, mark, seal})=>{
    const p = clamp((t-appear)/0.6, 0, 1);
    if (p<=0) return null;
    const e = Easing.easeOutCubic(p);
    return (
      <div style={{position:'absolute', left:x, top:y, width:BW, height:BH, background:'#fff',
        border:`1px solid ${seal ? 'rgba(16,185,129,0.5)' : '#E2E8F0'}`, borderRadius:16,
        boxShadow: seal ? '0 12px 30px rgba(16,185,129,0.16)' : '0 14px 34px rgba(15,23,42,0.08)',
        opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*26}px)`,
        display:'flex', alignItems:'center', gap:14, padding:'0 18px'}}>
        {/* icono cilindro (almacén) */}
        <svg width="40" height="46" viewBox="0 0 40 46" fill="none" style={{flexShrink:0}}>
          <ellipse cx="20" cy="8"  rx="15" ry="6" fill="#EAF3FF" stroke="#B9D9FF" strokeWidth="1.6"/>
          <path d="M5 8 V38 A15 6 0 0 0 35 38 V8" fill="#F5FAFF" stroke="#B9D9FF" strokeWidth="1.6"/>
          <ellipse cx="20" cy="8"  rx="15" ry="6" fill="none" stroke="#B9D9FF" strokeWidth="1.6"/>
          <path d="M5 23 A15 6 0 0 0 35 23" fill="none" stroke="#DCEBFF" strokeWidth="1.4"/>
        </svg>
        <div style={{flex:1, minWidth:0}}>
          <div className="f-mono" style={{fontSize:16, fontWeight:800, color:'#0F172A', whiteSpace:'nowrap'}}>{tit}</div>
          <div style={{marginTop:6}}><ProvPill txt={prov} col={provCol} show={provAt}/></div>
        </div>
        <Mark m={mark}/>
      </div>
    );
  };

  const CxSVG = 1920, CySVG = 1080;

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="INFRAESTRUCTURA · LA SUBIDA"
        title={<span><span className="grad-text">Aceptado solo si está a salvo</span> dos veces</span>}/>

      {/* ===== Capa SVG: caminos esquiva + copias a largo plazo ===== */}
      <svg width={CxSVG} height={CySVG} viewBox={`0 0 ${CxSVG} ${CySVG}`} style={{position:'absolute', inset:0, pointerEvents:'none', zIndex:2}}>
        <defs>
          <marker id="in06arrow" markerWidth="9" markerHeight="9" refX="6.5" refY="4.5" orient="auto">
            <path d="M1 1 L7 4.5 L1 8" fill="none" stroke="#10B981" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </marker>
        </defs>
        {/* caminos que esquivan el servidor (se dibujan en 'esquiva', el payload los recorre en 'cifrado') */}
        {t >= T.esquiva && PATHS.map((pa,i)=>(
          <path key={i} d={pa.d} fill="none" stroke="#0085FF" strokeWidth="2.4" strokeLinecap="round"
            opacity={0.35*pathDraw*(1-0.5*guard)} pathLength="1" strokeDasharray="0.045 0.03" strokeDashoffset={1-pathDraw}/>
        ))}
        {/* copias Nuevos → Archivo (largo plazo) */}
        {t >= T.largo && (
          <g opacity={0.9}>
            <path d="M1600,300 L1600,556" fill="none" stroke="#10B981" strokeWidth="2.6" strokeLinecap="round"
              markerEnd="url(#in06arrow)" pathLength="1" strokeDasharray="1" strokeDashoffset={1-copyDraw}/>
            <path d="M1740,416 L1740,672" fill="none" stroke="#10B981" strokeWidth="2.6" strokeLinecap="round"
              markerEnd="url(#in06arrow)" pathLength="1" strokeDasharray="1" strokeDashoffset={1-clamp((t-(T.largo+0.2))/0.9,0,1)}/>
          </g>
        )}
      </svg>

      {/* ===== Cliente (izq): mini navegador con el archivo ===== */}
      {(()=>{ const p=clamp((t-T.cliente)/0.6,0,1); if(p<=0) return null; const e=Easing.easeOutCubic(p);
        return (
          <div style={{position:'absolute', left:CLI.x, top:CLI.y, width:CLI.w, height:CLI.h, background:'#fff',
            border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 16px 40px rgba(15,23,42,0.10)', overflow:'hidden',
            opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*18}px)`, zIndex:4}}>
            <div style={{height:34, background:'#F1F5F9', display:'flex', alignItems:'center', gap:7, padding:'0 12px', borderBottom:'1px solid #E2E8F0'}}>
              <span style={{width:10, height:10, borderRadius:100, background:'#FF5F56'}}/>
              <span style={{width:10, height:10, borderRadius:100, background:'#FFBD2E'}}/>
              <span style={{width:10, height:10, borderRadius:100, background:'#27C93F'}}/>
              <span className="f-mono" style={{marginLeft:8, fontSize:10, color:'#94A3B8'}}>tu navegador</span>
            </div>
            <div style={{padding:'20px 20px 0'}}>
              <div className="f-plex" style={{fontSize:13, fontWeight:600, color:'#64748B'}}>Subir documento</div>
              <div style={{marginTop:14, display:'flex', alignItems:'center', gap:12, background:'#F8FAFC', border:'1px dashed #CBD5E1', borderRadius:12, padding:'12px 14px'}}>
                <div style={{width:38, height:46, borderRadius:6, background:'#fff', border:'1px solid #E2E8F0', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  <span className="f-mono" style={{fontSize:9, fontWeight:800, color:'#DC2626'}}>PDF</span>
                </div>
                <div style={{minWidth:0}}>
                  <div className="f-mono" style={{fontSize:14, fontWeight:800, color:'#0F172A', whiteSpace:'nowrap'}}>factura-2026.pdf</div>
                  <div className="f-mono" style={{fontSize:11, color:'#94A3B8', marginTop:3}}>248 KB</div>
                </div>
              </div>
            </div>
          </div>
        ); })()}

      {/* ===== Servidor Dinaup (centro) — se atenúa: "no toca el archivo" ===== */}
      {(()=>{ const p=clamp((t-T.cliente)/0.6,0,1); if(p<=0) return null;
        return (
          <div style={{position:'absolute', left:SRV.x, top:SRV.y, width:SRV.w, height:SRV.h, background:'#fff',
            border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 10px 26px rgba(15,23,42,0.07)',
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:10,
            opacity:clamp(p*1.3,0,1)*srvDim, filter:`saturate(${lerp(0.4,1,srvDim/1)})`, zIndex:3}}>
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
              <rect x="3" y="4"  width="18" height="6" rx="1.6" stroke="#64748B" strokeWidth="1.6"/>
              <rect x="3" y="14" width="18" height="6" rx="1.6" stroke="#64748B" strokeWidth="1.6"/>
              <circle cx="7" cy="7"  r="1" fill="#64748B"/>
              <circle cx="7" cy="17" r="1" fill="#64748B"/>
            </svg>
            <span className="f-plex" style={{fontSize:15, fontWeight:700, color:'#475569'}}>Servidor Dinaup</span>
          </div>
        ); })()}
      {noTocaP > 0 && (
        <div className="f-mono" style={{position:'absolute', left:SRV.x-15, top:SRV.y+SRV.h+14, width:SRV.w+30, textAlign:'center',
          fontSize:12, fontWeight:700, letterSpacing:'1px', color:'#94A3B8', opacity:noTocaP, transform:`translateY(${(1-noTocaP)*8}px)`, zIndex:3}}>
          no toca el archivo
        </div>
      )}

      {/* ===== Candados viajando (cifrado) ===== */}
      {PATHS.map((pa,i)=>{
        const u = clamp((t-pa.t0)/0.9, 0, 1);
        if (t < pa.t0 || u >= 1) return null;
        const pt = bez(pa.p0,pa.p1,pa.p2,pa.p3,Easing.easeInOutCubic(u));
        return (
          <div key={i} style={{position:'absolute', left:pt.x, top:pt.y, transform:'translate(-50%,-50%)', zIndex:8,
            opacity:clamp(Math.min(u*6,(1-u)*5),0,1)}}>
            <div style={{width:38, height:38, borderRadius:100, background:'#fff', border:'1px solid #CFE4FF',
              boxShadow:'0 10px 22px rgba(0,133,255,0.28)', display:'flex', alignItems:'center', justifyContent:'center'}}>
              <Padlock s={18}/>
            </div>
          </div>
        );
      })}

      {/* chip atrezzo "URL prefirmada" */}
      {(()=>{ const p=Easing.easeOutBack(clamp((t-(T.cifrado+0.1))/0.4,0,1)); if(p<=0) return null;
        return (
          <div className="f-mono" style={{position:'absolute', left:470, top:250, zIndex:6, fontSize:12, fontWeight:700, color:'#0085FF',
            background:'#fff', border:'1px solid #CFE4FF', borderRadius:100, padding:'6px 13px', boxShadow:'0 6px 16px rgba(0,133,255,0.14)',
            transform:`scale(${lerp(0.6,1,p)})`, opacity:clamp(p*1.3,0,1)*(1-0.6*guard)}}>URL prefirmada</div>
        ); })()}

      {/* ===== Buckets (columna derecha) — zona atenuable durante EL MOMENTO ===== */}
      <div style={{position:'absolute', inset:0, opacity:1-0.28*guard, filter:`saturate(${1-0.3*guard})`, zIndex:4}}>
        <Bucket x={BX} y={BY.nOVH} tit="Nuevos · OVH" prov="OVHcloud" provCol="#123F6D" appear={T.cifrado}      provAt={T.destinos}      mark={markNuevos(0)} seal={t>=T.cuatro}/>
        <Bucket x={BX} y={BY.nR2}  tit="Nuevos · R2"  prov="Cloudflare R2" provCol="#F6821F" appear={T.cifrado+0.18} provAt={T.destinos+0.2} mark={markNuevos(1)} seal={t>=T.cuatro}/>
        <Bucket x={BX} y={BY.aOVH} tit="Archivo · OVH" prov="largo plazo" provCol="#123F6D" appear={T.largo}      provAt={T.largo+0.2}     mark={markArchivo(0)} seal={t>=T.cuatro}/>
        <Bucket x={BX} y={BY.aR2}  tit="Archivo · R2"  prov="largo plazo" provCol="#F6821F" appear={T.largo+0.2}  provAt={T.largo+0.35}    mark={markArchivo(1)} seal={t>=T.cuatro}/>

        {/* línea de sincronía viva dentro de cada pareja (el gemelo) */}
        {[{y0:BY.nOVH+BH, y1:BY.nR2, on:T.destinos},{y0:BY.aOVH+BH, y1:BY.aR2, on:T.largo+0.3}].map((s,i)=>{
          const p = clamp((t-s.on)/0.6,0,1); if(p<=0) return null;
          return (
            <div key={i} style={{position:'absolute', left:BX+18, top:s.y0, width:2, height:(s.y1-s.y0)*p,
              background:'linear-gradient(to bottom, rgba(16,185,129,0.5), rgba(16,185,129,0.15))'}}/>
          );
        })}

        {/* scan-line de integridad sobre los buckets Nuevos */}
        {scanP > 0 && scanP < 1 && (
          <div style={{position:'absolute', left:BX + scanP*(BW-2), top:BY.nOVH-10, width:2, height:(BY.nR2+BH)-(BY.nOVH-10),
            background:'linear-gradient(to bottom, transparent, #FB8C00, transparent)', boxShadow:'0 0 14px #FB8C00'}}/>
        )}
        {intactP > 0 && (
          <div className="f-mono" style={{position:'absolute', left:BX, top:BY.nR2+BH+14, width:BW, textAlign:'center',
            fontSize:13, fontWeight:700, color:'#059669', opacity:clamp(intactP,0,1), transform:`translateY(${(1-intactP)*8}px)`}}>
            ✓ intactos · sin corrupción
          </div>
        )}

        {/* ×4 verificadas (entre las dos parejas) */}
        {cuatroP > 0 && (
          <div style={{position:'absolute', left:bCx-105, top:452, width:210, display:'flex', alignItems:'center', justifyContent:'center', gap:9,
            background:'linear-gradient(135deg,#0085FF,#10B981)', borderRadius:100, padding:'9px 16px',
            boxShadow:'0 12px 28px rgba(16,185,129,0.30)', opacity:clamp(cuatroP,0,1), transform:`scale(${lerp(0.7,1,cuatroP)})`}}>
            <svg width="16" height="16" viewBox="-12 -12 24 24" fill="none"><path d="M-7 0 L-2 5 L8 -6" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
            <span className="f-mono" style={{fontSize:15, fontWeight:800, color:'#fff', letterSpacing:'0.5px'}}>×4 verificadas</span>
          </div>
        )}
      </div>

      {/* ===== Panel de ESTADO (el hilo) — nunca se atenúa; protagonista del MOMENTO ===== */}
      {panelP > 0 && (
        <div style={{position:'absolute', left:PAN.x, top:PAN.y, width:PAN.w, height:PAN.h, zIndex:12, background:'#fff',
          border:`1.5px solid ${accept ? 'rgba(16,185,129,0.55)' : '#E2E8F0'}`, borderRadius:18,
          boxShadow:`0 ${lerp(14,24,landed)}px ${lerp(34,54,landed)}px rgba(15,23,42,${lerp(0.08,0.10,landed)}), 0 12px 40px rgba(16,185,129,${(0.10+0.30*pulse)*landed})`,
          display:'flex', alignItems:'center', gap:22, padding:'0 26px',
          opacity:clamp(panelP*1.3,0,1), transform:`translateY(${(1-panelP)*16}px) scale(${1+0.02*pulse})`}}>
          {/* icono / big check */}
          <div style={{width:74, height:74, borderRadius:16, flexShrink:0, position:'relative',
            background: accept ? 'linear-gradient(180deg,#34D399,#10B981)' : '#F1F5F9',
            border: accept ? 'none' : '1px solid #E2E8F0',
            boxShadow: accept ? `0 16px 40px rgba(16,185,129,${0.35})` : 'none',
            display:'flex', alignItems:'center', justifyContent:'center'}}>
            {accept
              ? <svg width="42" height="42" viewBox="-24 -24 48 48" fill="none"><path d="M-14 1 L-4 11 L15 -10" stroke="#fff" strokeWidth="6.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="44" strokeDashoffset={44*(1-bigDraw)}/></svg>
              : <span className="f-mono" style={{fontSize:9, fontWeight:800, color:'#94A3B8'}}>PDF</span>}
            {accept && <div style={{position:'absolute', inset:-8, borderRadius:20, border:'3px solid rgba(16,185,129,0.55)',
              transform:`scale(${lerp(0.7,1.6,Easing.easeOutCubic(clamp((t-T.acepta)/0.9,0,1)))})`, opacity:1-clamp((t-T.acepta)/0.9,0,1)}}/>}
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div className="f-mono" style={{fontSize:20, fontWeight:800, color:'#0F172A', whiteSpace:'nowrap'}}>factura-2026.pdf</div>
            <div style={{display:'flex', alignItems:'center', gap:12, marginTop:12}}>
              <span className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>ESTADO</span>
              <span className="f-mono" style={{fontSize:16, fontWeight:800, color:estN.fg, background:estN.bg, border:`1px solid ${estN.bd}`,
                borderRadius:100, padding:'6px 18px', letterSpacing:'1px'}}>{est}</span>
            </div>
          </div>
          {/* regla del duplicado a la derecha */}
          <div style={{display:'flex', flexDirection:'column', gap:8, flexShrink:0}}>
            {[0,1].map(i=>{
              const mk = markNuevos(i);
              const ok = mk.kind==='check';
              const ko = mk.kind==='cross';
              return (
                <div key={i} style={{display:'flex', alignItems:'center', gap:8, opacity:t>=T.checks?1:0.35}}>
                  <div style={{width:20, height:20, borderRadius:100, flexShrink:0,
                    background: ok?'#10B981':ko?'#EF4444':'#E2E8F0',
                    display:'flex', alignItems:'center', justifyContent:'center'}}>
                    {ok && <svg width="12" height="12" viewBox="-12 -12 24 24"><path d="M-7 0 L-2 5 L8 -6" stroke="#fff" strokeWidth="3.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>}
                    {ko && <svg width="10" height="10" viewBox="-12 -12 24 24" stroke="#fff" strokeWidth="3.6" strokeLinecap="round"><path d="M-6 -6 L6 6"/><path d="M6 -6 L-6 6"/></svg>}
                  </div>
                  <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#64748B'}}>{i===0?'copia OVH':'copia R2'}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ===== Proceso de fondo (vigila día y noche) ===== */}
      {(()=>{ const p=clamp((t-T.proceso)/0.6,0,1); if(p<=0) return null; const e=Easing.easeOutCubic(p);
        const rot = (t-T.proceso)*36; // engranaje: único loop ambiental sutil
        return (
          <div style={{position:'absolute', left:120, top:730, width:700, height:92, zIndex:6, background:'#fff',
            border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 12px 30px rgba(15,23,42,0.08)',
            display:'flex', alignItems:'center', gap:18, padding:'0 22px',
            opacity:clamp(p*1.3,0,1)*(1-0.3*guard), transform:`translateY(${(1-e)*16}px)`}}>
            <div style={{width:52, height:52, borderRadius:14, background:'#F1F5F9', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" style={{transform:`rotate(${rot}deg)`}}>
                <path d="M12 2 L13.2 4.6 L16 4 L16.4 6.9 L19.2 7.4 L18.2 10.2 L20.4 12 L18.2 13.8 L19.2 16.6 L16.4 17.1 L16 20 L13.2 19.4 L12 22 L10.8 19.4 L8 20 L7.6 17.1 L4.8 16.6 L5.8 13.8 L3.6 12 L5.8 10.2 L4.8 7.4 L7.6 6.9 L8 4 L10.8 4.6 Z"
                  fill="#E2E8F0" stroke="#94A3B8" strokeWidth="0.8" strokeLinejoin="round"/>
                <circle cx="12" cy="12" r="3.4" fill="#fff" stroke="#94A3B8" strokeWidth="1.4"/>
              </svg>
            </div>
            <div style={{flex:1}}>
              <div className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0F172A'}}>Verificación en segundo plano</div>
              <div className="f-plex" style={{fontSize:14, color:'#64748B', marginTop:3}}>Vigila cada archivo, día y noche</div>
            </div>
            {intactP > 0 && (
              <div className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:7, fontSize:12, fontWeight:700, color:'#C2410C',
                background:'#FFF7ED', border:'1px solid #FDBA74', borderRadius:100, padding:'6px 13px',
                opacity:clamp(intactP,0,1), transform:`scale(${lerp(0.7,1,clamp(intactP,0,1))})`}}>integridad ✓</div>
            )}
          </div>
        ); })()}

      {/* ===== Salida ===== */}
      {salP > 0 && (
        <div className="f-mono" style={{position:'absolute', left:0, right:0, top:1000, textAlign:'center', zIndex:14}}>
          <span style={{display:'inline-flex', alignItems:'center', gap:10, fontSize:15, fontWeight:800, letterSpacing:'1.5px', color:'#0F172A',
            background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'11px 24px', boxShadow:'0 10px 26px rgba(15,23,42,0.10)',
            transform:`scale(${lerp(0.8,1,clamp(salP,0,1))})`, opacity:clamp(salP*1.3,0,1)}}>
            SERVIRLOS <span style={{color:'#0085FF'}}>→</span>
          </span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaIN06 });
