// === Escena 03 — "La regla de reenvío" (el corazón de la privacidad) ===
// Acto A: "otros asistentes te piden" (contraseña/permisos/buzón) → tachado + sello "Dinaup no. Nunca.".
// Acto B: TU CORREO | LA REGLA | BUZÓN DEL AGENTE. Un solo sobre cruza; los demás se quedan.
// Cierre: el correo tratado se archiva; papelera tachada ("Nunca lo borra. No puede.").
function EscenaBA03({ t }){
  const T = {
    header:0.3,      // "Aquí está la clave de todo"
    otros:2.6,       // "Otros asistentes te piden acceso a tu correo"
    it1:5.5,         // "tu contraseña"
    it2:6.4,         // "tus permisos"
    it3:7.3,         // "tu buzón entero"
    dinaupNo:8.8,    // "Dinaup no"
    nunca:10.4,      // "Nunca"
    tuCorreo:11.9,   // "entras en tu correo de siempre"
    regla:14.0,      // "creas una regla de reenvío"
    soporte:17.5,    // "lo que llegue a soporte"
    reenvia:18.8,    // "reenvíalo al agente"
    cruza:20.7,      // "Solo eso cruza"
    nomas:22.3,      // "Ni un correo más"
    candado:24.0,    // "Tu buzón sigue siendo tuyo"
    selloDinaup:26.9,// "El del agente es de Dinaup"
    escudo:28.9,     // "aislado por empresa"
    estandares:30.7, // "con los máximos estándares de seguridad"
    tratado:33.8,    // "cuando el agente termina con un correo"
    archiva:35.1,    // "lo archiva"
    borra:36.3,      // "Nunca lo borra"
    nopuede:37.6,    // "No puede"
    yatiene:38.6,    // "Ya tiene el correo"
    puente:41.6,     // "lo que hace con él"
  };

  // ---- iconos ----
  const Sobre = ({ size=34, color='#0085FF' })=>(
    <svg width={size} height={size*0.72} viewBox="0 0 34 24" style={{display:'block'}}>
      <rect x="1" y="1" width="32" height="22" rx="4" fill="#fff" stroke={color} strokeWidth="2"/>
      <path d="M2 3 L17 14 L32 3" fill="none" stroke={color} strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  );
  const Alerta = ({ size=22 })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{display:'block'}}>
      <path d="M12 3 L22 20 H2 Z" fill="rgba(239,68,68,0.12)" stroke="#EF4444" strokeWidth="2" strokeLinejoin="round"/>
      <path d="M12 9 V14" stroke="#EF4444" strokeWidth="2" strokeLinecap="round"/>
      <circle cx="12" cy="17" r="1.1" fill="#EF4444"/>
    </svg>
  );
  const Check = ({ size=22 })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" style={{display:'block'}}>
      <circle cx="12" cy="12" r="10" fill="rgba(16,185,129,0.15)"/>
      <path d="M7 12.5 L10.5 16 L17 9" fill="none" stroke="#059669" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  const Candado = ({ size=26 })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2" style={{display:'block'}}>
      <rect x="4" y="10" width="16" height="10" rx="2" fill="rgba(16,185,129,0.12)"/>
      <path d="M8 10 V7 a4 4 0 0 1 8 0 v3"/>
    </svg>
  );
  const Escudo = ({ size=26 })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{display:'block'}}>
      <path d="M12 2 L4 6 V12 C4 17 7.5 20.5 12 22 C16.5 20.5 20 17 20 12 V6 L12 2 Z" fill="rgba(16,185,129,0.12)" stroke="#059669" strokeWidth="1.8" strokeLinejoin="round"/>
      <path d="M8.6 12 L11 14.4 L15.4 9.6" stroke="#059669" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  const MarkPill = ({ size=22 })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{display:'block'}}>
      <rect x="3" y="5" width="18" height="14" rx="3" fill="#fff" stroke="#0085FF" strokeWidth="1.8"/>
      <path d="M4 7 L12 13 L20 7" fill="none" stroke="#0085FF" strokeWidth="1.8" strokeLinejoin="round"/>
    </svg>
  );

  // ---- progresos ----
  // Acto A
  const actoAOp = t < 11.3 ? 1 : lerp(1, 0, clamp((t-11.3)/0.9,0,1));
  const otrosP = clamp((t-T.otros)/0.6,0,1), otrosE = Easing.easeOutBack(otrosP);
  const ITEMS = [ {at:T.it1,txt:'Tu contraseña'}, {at:T.it2,txt:'Tus permisos'}, {at:T.it3,txt:'Tu buzón entero'} ];
  const strikeP = Easing.easeInOutCubic(clamp((t-T.dinaupNo)/0.7,0,1));
  const stampP  = clamp((t-T.dinaupNo)/0.5,0,1), stampE = Easing.easeOutBack(stampP);
  const nuncaP  = clamp((t-T.nunca)/0.45,0,1);
  const nuncaPulse = (t>=T.nunca && t<T.nunca+1.1) ? Math.sin((t-T.nunca)/1.1*Math.PI) : 0;

  // Acto B
  const leftP  = clamp((t-T.tuCorreo)/0.7,0,1), leftE  = Easing.easeOutCubic(leftP);
  const ruleP  = clamp((t-T.regla)/0.6,0,1),    ruleE  = Easing.easeOutBack(ruleP);
  const condP  = clamp((t-T.soporte)/0.6,0,1),  condE  = Easing.easeOutCubic(condP);
  const rightP = clamp((t-T.reenvia)/0.7,0,1),  rightE = Easing.easeOutCubic(rightP);
  const actP   = clamp((t-T.reenvia-0.1)/0.6,0,1), actE = Easing.easeOutCubic(actP);
  const arrowDraw = Easing.easeInOutCubic(clamp((t-T.reenvia-0.15)/1.2,0,1));
  const travP  = Easing.easeInOutCubic(clamp((t-T.cruza)/1.5,0,1));
  const flyOp  = clamp((t-T.cruza)/0.3,0,1) * (1 - clamp((t-(T.cruza+1.6))/0.4,0,1));
  const agentMailIn = clamp((t-(T.cruza+1.25))/0.4,0,1);
  const candP  = clamp((t-T.candado)/0.5,0,1),  candE  = Easing.easeOutBack(candP);
  const selloP = clamp((t-T.selloDinaup)/0.5,0,1), selloE = Easing.easeOutBack(selloP);
  const escudoP= clamp((t-T.escudo)/0.5,0,1),   escudoE= Easing.easeOutBack(escudoP);

  // "Ni un correo más": los otros correos tiemblan y se quedan
  const jitBase = (t>=T.nomas && t<T.nomas+0.7) ? (1 - clamp((t-T.nomas)/0.7,0,1)) : 0;
  const jit = (i)=> jitBase>0 ? Math.sin((t-T.nomas)*32 + i*1.7)*4*jitBase : 0;
  const soporteLit = clamp((t-T.soporte)/0.5,0,1);   // "lo que llegue a soporte": la fila se ilumina al nombrarla

  // Acto C
  const tratadoP = clamp((t-T.tratado)/0.45,0,1), tratadoE = Easing.easeOutBack(tratadoP);
  const archivaP = Easing.easeOutCubic(clamp((t-T.archiva)/0.8,0,1));
  const trayP    = clamp((t-T.archiva+0.1)/0.55,0,1), trayE = Easing.easeOutBack(trayP);
  const borraP   = clamp((t-T.borra)/0.5,0,1), borraE = Easing.easeOutBack(borraP);
  const borraX   = Easing.easeInOutCubic(clamp((t-T.borra-0.1)/0.6,0,1));
  const nopuedeP = clamp((t-T.nopuede)/0.45,0,1);
  const nopuedePulse = (t>=T.nopuede && t<T.nopuede+1.1) ? Math.sin((t-T.nopuede)/1.1*Math.PI) : 0;

  // atenuados
  const flowDim   = t < 33.2 ? 1 : lerp(1, 0.22, clamp((t-33.2)/0.7,0,1));
  const globalDim = t < T.yatiene ? 1 : lerp(1, 0.28, clamp((t-T.yatiene)/0.8,0,1));
  const puenteP   = clamp((t-T.puente)/0.7,0,1), puenteE = Easing.easeOutCubic(puenteP);

  // geometría
  const LX=80,  LY=330, LW=490;                 // TU CORREO
  const RX=630, RY=358, RW=660;                 // LA REGLA (centro)
  const GX=1360,GY=330, GW=480;                 // BUZÓN DEL AGENTE
  const flowY0=476, flowX0=LX+LW+2;             // arranque del sobre (fila soporte)
  const flowY1=440, flowX1=GX+42;               // aterrizaje (bandeja agente)
  const sx = lerp(flowX0, flowX1, travP);
  const sy = lerp(flowY0, flowY1, travP) - Math.sin(travP*Math.PI)*32;

  const INBOX = [
    { from:'Cafés Aurora', subj:'Pedido semanal', soporte:false },
    { from:'soporte',      subj:'Consulta de una clienta', soporte:true },
    { from:'Boletín gremio', subj:'Novedades del sector', soporte:false },
    { from:'Tu banco',     subj:'Resumen mensual', soporte:false },
  ];

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="LA REGLA DE REENVÍO" title={<span>Solo cruza <span className="grad-text">lo que tú decides</span></span>}/>

      <div style={{position:'absolute', inset:0, opacity:globalDim}}>

        {/* ===================== ACTO A — otros asistentes ===================== */}
        {actoAOp > 0.02 && (
          <div style={{position:'absolute', left:660, top:250, width:600, opacity:actoAOp, filter:actoAOp<1?'saturate(0.6)':'none', pointerEvents:'none'}}>
            <div style={{position:'relative', background:'#fff', border:'1px solid #FECACA', borderRadius:18, boxShadow:'0 18px 44px rgba(239,68,68,0.10)', padding:'22px 26px', transform:`scale(${lerp(0.94,1,otrosE)}) translateY(${(1-otrosE)*18}px)`, opacity:clamp(otrosP*1.3,0,1)}}>
              <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2.5px', color:'#DC2626', marginBottom:16}}>OTROS ASISTENTES TE PIDEN ACCESO</div>
              {ITEMS.map((it,i)=>{
                const p = clamp((t-it.at)/0.45,0,1), e = Easing.easeOutBack(p);
                if (p <= 0) return null;
                return (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:14, padding:'12px 0', borderTop:i>0?'1px solid #FEF2F2':'none', transform:`translateX(${(1-e)*-14}px)`, opacity:clamp(p*1.3,0,1)}}>
                    <Alerta size={24}/>
                    <span className="f-plex" style={{fontSize:22, fontWeight:600, color:'#0F172A'}}>{it.txt}</span>
                  </div>
                );
              })}
              {/* Tachado rojo */}
              {strikeP > 0 && (
                <svg width="600" height="300" viewBox="0 0 600 300" style={{position:'absolute', left:0, top:0, pointerEvents:'none'}}>
                  <path d="M28 32 L572 268" fill="none" stroke="#EF4444" strokeWidth="6" strokeLinecap="round"
                        strokeDasharray="640" strokeDashoffset={640*(1-strikeP)} opacity="0.85"/>
                </svg>
              )}
              {/* Sello "Dinaup no. Nunca." */}
              {stampP > 0 && (
                <div style={{position:'absolute', right:-34, top:176, transform:`rotate(-8deg) scale(${lerp(0.6,1,stampE) + nuncaPulse*0.05})`, opacity:clamp(stampP*1.3,0,1)}}>
                  <div style={{border:'3px solid #DC2626', borderRadius:12, padding:'8px 18px', background:'rgba(255,255,255,0.92)', boxShadow:`0 10px 26px rgba(239,68,68,${0.18+nuncaPulse*0.12})`}}>
                    <div className="f-plex" style={{fontSize:26, fontWeight:800, letterSpacing:'0.02em', color:'#DC2626', lineHeight:1.05}}>Dinaup no.</div>
                    {nuncaP > 0 && <div className="f-plex" style={{fontSize:26, fontWeight:800, letterSpacing:'0.08em', color:'#DC2626', lineHeight:1.05, opacity:nuncaP}}>Nunca.</div>}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* ===================== ACTO B — flujo (izq + regla) ===================== */}
        <div style={{position:'absolute', inset:0, opacity:flowDim, filter:flowDim<1?'saturate(0.55)':'none'}}>

          {/* Panel TU CORREO */}
          {leftP > 0 && (
            <div style={{position:'absolute', left:LX, top:LY, width:LW, opacity:clamp(leftP*1.3,0,1), transform:`translateX(${lerp(-70,0,leftE)}px)`}}>
              <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 16px 40px rgba(15,23,42,0.08)', overflow:'hidden'}}>
                <div style={{display:'flex', alignItems:'center', gap:12, padding:'15px 20px', borderBottom:'1px solid #F1F5F9'}}>
                  <div style={{width:38, height:38, borderRadius:10, background:'rgba(0,133,255,0.10)', display:'flex', alignItems:'center', justifyContent:'center'}}><MarkPill size={22}/></div>
                  <div>
                    <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>TU CORREO</div>
                    <div className="f-plex" style={{fontSize:13, color:'#94A3B8'}}>Tu buzón de siempre</div>
                  </div>
                </div>
                {INBOX.map((m,i)=>{
                  const lit = m.soporte ? soporteLit : 0;   // solo la fila soporte, y solo desde su beat
                  return (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:13, padding:'11px 20px', borderTop:i>0?'1px solid #F5F7FA':'none', background:m.soporte?`rgba(0,133,255,${0.05*lit})`:'transparent', transform:`translateX(${m.soporte?0:jit(i)}px)`}}>
                    <Sobre size={26} color={lit>0.4?'#0085FF':'#CBD5E1'}/>
                    <div style={{flex:1, minWidth:0}}>
                      <div className="f-plex" style={{fontSize:15, fontWeight:lit>0.4?700:600, color:lit>0.4?'#0F172A':'#64748B'}}>{m.from}</div>
                      <div className="f-plex" style={{fontSize:12, color:'#94A3B8', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{m.subj}</div>
                    </div>
                    {m.soporte && lit>0 && <span className="f-mono" style={{fontSize:10, fontWeight:700, color:'#0085FF', background:'rgba(0,133,255,0.10)', border:'1px solid rgba(0,133,255,0.25)', borderRadius:100, padding:'2px 9px', opacity:lit, transform:`scale(${lerp(0.8,1,lit)})`}}>soporte</span>}
                  </div>
                  );
                })}
              </div>
              {/* Candado: sigue siendo tuyo */}
              {candP > 0 && (
                <div style={{marginTop:16, display:'inline-flex', alignItems:'center', gap:10, background:'#fff', border:'1.5px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'10px 18px', boxShadow:'0 12px 30px rgba(16,185,129,0.14)', transform:`scale(${lerp(0.85,1,candE)})`, opacity:clamp(candP*1.3,0,1)}}>
                  <Candado size={22}/>
                  <span className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>Sigue siendo tuyo</span>
                </div>
              )}
            </div>
          )}

          {/* Flecha guía (bajo la tarjeta-regla) */}
          {arrowDraw > 0 && (
            <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
              <path d={`M ${flowX0} ${flowY0} L ${flowX1-14} ${flowY1}`} fill="none" stroke="#0085FF" strokeWidth="3" strokeDasharray="10 8"
                    strokeDashoffset={lerp(1000,0,arrowDraw)} opacity={arrowDraw*0.85}/>
              {arrowDraw > 0.9 && (
                <path d={`M ${flowX1-26} ${flowY1-9} L ${flowX1-12} ${flowY1} L ${flowX1-26} ${flowY1+9}`} fill="none" stroke="#0085FF" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"/>
              )}
            </svg>
          )}

          {/* Tarjeta LA REGLA */}
          {ruleP > 0 && (
            <div style={{position:'absolute', left:RX, top:RY, width:RW, background:'#fff', border:'1.5px solid #E2E8F0', borderRadius:18, boxShadow:'0 22px 54px rgba(15,23,42,0.10)', padding:'20px 26px 24px', transform:`scale(${lerp(0.92,1,ruleE)}) translateY(${(1-ruleE)*14}px)`, opacity:clamp(ruleP*1.3,0,1)}}>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
                <div style={{width:8, height:8, borderRadius:100, background:'#0085FF'}}/>
                <span className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2.5px', color:'#0085FF'}}>REGLA DE REENVÍO</span>
              </div>
              {/* Condición */}
              <div style={{display:'flex', alignItems:'center', gap:14, opacity:clamp(condP*1.3,0,1), transform:`translateY(${(1-condE)*8}px)`}}>
                <span className="f-mono" style={{fontSize:11, fontWeight:800, letterSpacing:'1.5px', color:'#64748B', background:'#F1F5F9', borderRadius:8, padding:'6px 10px'}}>SI LLEGA A</span>
                <span className="f-mono" style={{fontSize:18, fontWeight:600, color:'#0F172A'}}>soporte@panaderiaelmolino.com</span>
              </div>
              {/* Acción */}
              <div style={{display:'flex', alignItems:'center', gap:14, marginTop:16, opacity:clamp(actP*1.3,0,1), transform:`translateY(${(1-actE)*8}px)`}}>
                <span className="f-mono" style={{fontSize:11, fontWeight:800, letterSpacing:'1.5px', color:'#0085FF', background:'rgba(0,133,255,0.10)', borderRadius:8, padding:'6px 10px'}}>REENVIAR A</span>
                <span style={{display:'inline-flex', alignItems:'center', gap:9, background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:100, padding:'6px 14px 6px 8px'}}>
                  <span style={{width:26, height:26, borderRadius:100, background:'linear-gradient(135deg,#38BDF8,#0085FF)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <span className="f-plex" style={{color:'#fff', fontSize:11, fontWeight:800}}>IA</span>
                  </span>
                  <span className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>tu agente</span>
                </span>
              </div>
            </div>
          )}

          {/* Sobre que cruza (Solo eso cruza) */}
          {flyOp > 0.01 && (
            <div style={{position:'absolute', left:sx-22, top:sy-16, zIndex:40, opacity:flyOp, filter:'drop-shadow(0 12px 22px rgba(0,133,255,0.35))'}}>
              <Sobre size={44} color="#0085FF"/>
            </div>
          )}
        </div>

        {/* ===================== BUZÓN DEL AGENTE (der) ===================== */}
        {rightP > 0 && (
          <div style={{position:'absolute', left:GX, top:GY, width:GW, opacity:clamp(rightP*1.3,0,1), transform:`translateX(${lerp(70,0,rightE)}px)`}}>
            <div style={{background:'#fff', border:'1.5px solid #E2E8F0', borderRadius:18, boxShadow:'0 16px 40px rgba(15,23,42,0.08)', overflow:'hidden'}}>
              {/* header con sello Dinaup */}
              <div style={{display:'flex', alignItems:'center', gap:12, padding:'15px 20px', borderBottom:'1px solid #F1F5F9'}}>
                <div style={{width:38, height:38, borderRadius:100, background:'linear-gradient(135deg,#38BDF8,#0085FF)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <span className="f-plex" style={{color:'#fff', fontSize:13, fontWeight:800}}>IA</span>
                </div>
                <div style={{flex:1}}>
                  <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>BUZÓN DEL AGENTE</div>
                  <div className="f-plex" style={{fontSize:13, color:'#94A3B8'}}>elmolino_12_agente_4f2a…</div>
                </div>
                {selloP > 0 && (
                  <span style={{display:'inline-flex', alignItems:'center', gap:6, background:'#F0F7FF', border:'1px solid rgba(0,133,255,0.3)', borderRadius:100, padding:'5px 12px', transform:`scale(${lerp(0.6,1,selloE)})`, opacity:clamp(selloP*1.3,0,1)}}>
                    <DinaupLogo size={15} mark={true}/>
                    <span className="f-plex" style={{fontSize:12, fontWeight:700, color:'#0085FF'}}>de Dinaup</span>
                  </span>
                )}
              </div>
              {/* correo recibido */}
              <div style={{position:'relative', height:66}}>
                <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', gap:13, padding:'0 20px', opacity:agentMailIn*(1-archivaP)}}>
                  <Sobre size={26} color="#0085FF"/>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A'}}>Consulta de una clienta</div>
                    <div className="f-plex" style={{fontSize:12, color:'#94A3B8'}}>reenviado desde soporte</div>
                  </div>
                  {tratadoP > 0 && (
                    <span style={{display:'inline-flex', alignItems:'center', gap:6, transform:`scale(${lerp(0.5,1,tratadoE)})`, opacity:clamp(tratadoP*1.3,0,1)}}>
                      <Check size={20}/>
                      <span className="f-plex" style={{fontSize:12, fontWeight:700, color:'#059669'}}>Tratado</span>
                    </span>
                  )}
                </div>
              </div>
              {/* footer seguridad */}
              <div style={{display:'flex', alignItems:'center', gap:12, flexWrap:'wrap', padding:'14px 20px', borderTop:'1px solid #F1F5F9'}}>
                {escudoP > 0 && (
                  <span style={{display:'inline-flex', alignItems:'center', gap:8, background:'#fff', border:'1.5px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'6px 14px', transform:`scale(${lerp(0.7,1,escudoE)})`, opacity:clamp(escudoP*1.3,0,1)}}>
                    <Escudo size={20}/>
                    <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#0F172A'}}>Aislado por empresa</span>
                  </span>
                )}
                {t >= T.estandares && <StatusChip label="Máximos estándares de seguridad" color="primary" start={T.estandares} t={t}/>}
              </div>
            </div>
          </div>
        )}

        {/* ===================== ACTO C — archivar / nunca borrar ===================== */}
        {/* Bandeja ARCHIVADO */}
        {trayP > 0 && (
          <div style={{position:'absolute', left:GX, top:680, width:GW, background:'#fff', border:'1.5px solid #E2E8F0', borderRadius:16, boxShadow:'0 16px 40px rgba(15,23,42,0.08)', padding:'14px 20px', transform:`translateY(${(1-trayE)*16}px)`, opacity:clamp(trayP*1.3,0,1)}}>
            <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#64748B', marginBottom:10}}>ARCHIVADO</div>
            <div style={{display:'flex', alignItems:'center', gap:13, opacity:clamp((archivaP-0.5)/0.5,0,1)}}>
              <Sobre size={24} color="#94A3B8"/>
              <span className="f-plex" style={{fontSize:14, fontWeight:600, color:'#64748B'}}>Consulta de una clienta</span>
              <span style={{marginLeft:'auto'}}><Check size={18}/></span>
            </div>
          </div>
        )}
        {/* Sobre que baja al archivo */}
        {archivaP > 0 && archivaP < 1 && (
          <div style={{position:'absolute', left:GX+20, top:lerp(408, 722, archivaP), zIndex:35, filter:'drop-shadow(0 10px 20px rgba(15,23,42,0.18))'}}>
            <Sobre size={30} color="#64748B"/>
          </div>
        )}

        {/* Píldora "Nunca lo borra. No puede." (contenida, centrada, banda inferior) */}
        {borraP > 0 && (
          <div style={{position:'absolute', left:0, right:0, top:820, display:'flex', justifyContent:'center', pointerEvents:'none'}}>
            <div style={{display:'inline-flex', alignItems:'center', gap:16, background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'14px 28px', boxShadow:'0 12px 32px rgba(15,23,42,0.08)', transform:`scale(${lerp(0.85,1,borraE) + nopuedePulse*0.04})`, opacity:clamp(borraP*1.3,0,1)}}>
              {/* icono papelera tachada */}
              <span style={{position:'relative', width:32, height:32, flexShrink:0, display:'block'}}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="1.6" style={{display:'block', opacity:0.75}}>
                  <path d="M4 7 H20" strokeLinecap="round"/>
                  <path d="M9.5 7 V5.2 a1 1 0 0 1 1-1 h3 a1 1 0 0 1 1 1 V7"/>
                  <path d="M6 7 L7 20 a1 1 0 0 0 1 1 h8 a1 1 0 0 0 1-1 L18 7"/>
                  <path d="M10 11 V17 M14 11 V17" strokeLinecap="round"/>
                </svg>
                <svg width="32" height="32" viewBox="0 0 32 32" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
                  <path d="M6 6 L26 26" stroke="#EF4444" strokeWidth="3" strokeLinecap="round" strokeDasharray="29" strokeDashoffset={29*(1-borraX)}/>
                  <path d="M26 6 L6 26" stroke="#EF4444" strokeWidth="3" strokeLinecap="round" strokeDasharray="29" strokeDashoffset={29*(1-clamp((borraX-0.4)/0.6,0,1))}/>
                </svg>
              </span>
              <span className="f-plex" style={{fontSize:24, fontWeight:800, letterSpacing:'-0.01em', color:'#0F172A'}}>Nunca lo borra.</span>
              {nopuedeP > 0 && <span className="f-plex" style={{fontSize:24, fontWeight:800, letterSpacing:'-0.01em', color:'#EF4444', opacity:nopuedeP}}>No puede.</span>}
            </div>
          </div>
        )}
      </div>

      {/* Puente de salida — "lo que hace con él" */}
      {puenteP > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:900, textAlign:'center', fontSize:32, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A', opacity:puenteE, transform:`translateY(${(1-puenteE)*14}px)`}}>
          Ahora, <span style={{color:'#0085FF'}}>lo que hace con él.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaBA03 });