// === Escena 05 — "Tus datos responden" (CLÍMAX) ===
// El correo de Marta (Cafés Aurora) con DOS preguntas → el agente lee y lanza 3 consultas
// al ERP (productos/proyectos/bonos) → el borrador se escribe y los 3 datos vuelan dentro →
// EL MOMENTO: Enviar bloqueado (el agente no envía) → lo pulsa el humano → y detecta el patrón
// (3.er cliente por la 340 esta semana). Cierre: LA ÚNICA COSA en pasado.
function EscenaBA05({ t }){
  const T = {
    emailIn:0.3,     // "Llega el correo de una clienta"
    dos:2.3,         // "Pregunta dos cosas"
    subA:4.1,        // "si te queda de la referencia trescientos cuarenta"
    subB:7.4,        // "y cómo va su proyecto"
    lee:9.2,         // "Tu agente lo lee"
    busca:10.6,      // "Y va a buscar"
    qProd:11.8,      // "Al producto"
    nProd:12.9,      // "cuarenta unidades"
    chipAlm:13.9,    // "en el almacén central"
    qProy:15.6,      // "Al proyecto"
    barProy:16.6,    // "setenta por ciento"
    chipFecha:17.8,  // "siguiente entrega el veintidós"
    qBono:19.9,      // "Al bono de horas"
    nBono:20.9,      // "le quedan seis"
    borrador:22.8,   // "Y con eso, te escribe la respuesta"
    tono:24.5,       // "Con tu tono"
    datos:25.4,      // "Con tus datos"
    momento:26.6,    // "No la envía él"          ← EL MOMENTO
    lees:27.9,       // "La lees tú"
    envias:29.2,     // "y la envías tú"
    calma:30.6,      // "Y todavía hay más"
    nota:32.3,       // "Se da cuenta de algo"
    tres:34.0,       // "es el tercer cliente que pregunta"
    semana:37.2,     // "por la trescientos cuarenta esta semana"
    tachaInf:39.0,   // "Eso no estaba en ningún informe"
    correo:40.6,     // "Estaba en tu correo"
    cosa1:41.9,      // "El correo preguntó"      ← ÚNICA COSA (prueba)
    cosa2:43.4,      // "y tus datos respondieron"
  };

  // ---------- helpers de fase (los actos viejos se atenúan, nunca desaparecen en seco) ----------
  const phaseAOp   = t < 22.3 ? 1 : lerp(1, 0.07, clamp((t-22.3)/0.8, 0, 1));   // email + agente + conectores
  const toolCardOp = t < 25.4 ? 1 : lerp(1, 0.07, clamp((t-25.4)/0.7, 0, 1));   // tarjetas de consulta (los datos se van volando)
  const draftDim   = t < T.calma ? 1 : lerp(1, 0.07, clamp((t-T.calma)/0.9, 0, 1)); // borrador + envío
  const analysisDim= t < T.cosa1 ? 1 : lerp(1, 0.06, clamp((t-T.cosa1)/0.7, 0, 1)); // panel de patrón
  const veloAnalisis = clamp((t-T.nota+0.4)/0.6,0,1)*0.72;                       // velo blanco: manda ACTO 1 y 2 de verdad al fondo
  // Segundo velo: la frase de cierre se lee sobre blanco, no sobre el panel de análisis.
  const veloCosa = clamp((t-T.cosa1+0.35)/0.6,0,1)*0.88;

  const Avatar = ({ label, grad, size=44, style })=>(
    <div style={{width:size, height:size, borderRadius:100, background:grad, boxShadow:'0 8px 22px rgba(0,133,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', ...style}}>
      <span className="f-plex" style={{color:'#fff', fontSize:size*0.36, fontWeight:800, letterSpacing:'0.5px'}}>{label}</span>
    </div>
  );
  const IA_GRAD = 'linear-gradient(135deg,#38BDF8,#0085FF)';

  // ---------- contadores (uno a la vez, aterrizan con la voz) ----------
  const nProd = Math.round(40 * Easing.easeOutCubic(clamp((t-12.0)/0.9, 0, 1)));
  const pct   = Math.round(70 * Easing.easeOutCubic(clamp((t-15.7)/0.9, 0, 1)));
  const nBono = Math.round(6  * Easing.easeOutCubic(clamp((t-20.0)/0.9, 0, 1)));

  // ---------- datos que vuelan al borrador ----------
  // fuente = ancla del resultado en su tarjeta (derecha) · destino = ranura del borrador (izq)
  const DATA = [
    { color:'#059669', bg:'rgba(16,185,129,0.12)', brd:'rgba(16,185,129,0.35)', text:'40 uds · alm. central', src:{x:1150,y:270}, dst:{x:378,y:305} },
    { color:'#0085FF', bg:'rgba(0,133,255,0.12)',  brd:'rgba(0,133,255,0.35)',  text:'70% · entrega 22',      src:{x:1330,y:437}, dst:{x:378,y:346} },
    { color:'#D97706', bg:'rgba(245,158,11,0.14)', brd:'rgba(245,158,11,0.35)', text:'6 h de bono',            src:{x:1150,y:620}, dst:{x:378,y:388} },
  ];
  const flyStart = (i)=> T.datos + i*0.25;
  const flyDur = 0.6;

  // ---------- conectores agente → 3 consultas ----------
  const AG = { x:819, y:292 };                       // borde derecho del avatar lector
  const cardCY = [260, 430, 600];                    // centro-Y de cada tarjeta
  const CARDX = 1120;

  return (
    <SlideCanvas variant="light">
      {/* eyebrow: la mañana que prometía la escena anterior */}
      <div className="f-mono" style={{position:'absolute', top:64, left:0, right:0, textAlign:'center', fontSize:14, letterSpacing:'3px', color:'#94A3B8', opacity:clamp(t/0.5,0,1)}}>
        UNA MAÑANA CUALQUIERA · <span style={{color:'#0085FF'}}>09:14</span>
      </div>

      {/* ==================== ACTO 1 — el correo, el agente, las 3 consultas ==================== */}
      <div style={{position:'absolute', inset:0, opacity:phaseAOp, filter:phaseAOp<1?'saturate(0.55)':'none'}}>

        {/* ----- Correo de Marta (izquierda) ----- */}
        {t >= T.emailIn && (()=>{
          const p = clamp((t-T.emailIn)/0.6,0,1), e = Easing.easeOutCubic(p);
          const subAW = clamp((t-T.subA)/0.55,0,1), subBW = clamp((t-T.subB)/0.55,0,1);
          const scanP = clamp((t-T.lee)/1.3,0,1);
          return (
            <div style={{position:'absolute', left:90, top:150, width:560, opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*20}px)`}}>
              <div style={{position:'relative', background:'#fff', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 16px 42px rgba(15,23,42,0.09)', overflow:'hidden'}}>
                {/* cabecera del correo */}
                <div style={{display:'flex', alignItems:'center', gap:12, padding:'16px 20px', borderBottom:'1px solid #F1F5F9'}}>
                  <Avatar label="MA" grad="linear-gradient(135deg,#FB8C00,#F97316)" size={40}/>
                  <div style={{flex:1}}>
                    <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>Marta — Cafés Aurora</div>
                    <div className="f-mono" style={{fontSize:11.5, color:'#94A3B8'}}>marta@cafesaurora.com</div>
                  </div>
                  <div className="f-mono" style={{fontSize:11.5, color:'#CBD5E1'}}>hoy · 09:11</div>
                </div>
                {/* asunto + insignia "2 preguntas" */}
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 20px 6px'}}>
                  <span className="f-plex" style={{fontSize:14.5, fontWeight:700, color:'#334155'}}>Consulta rápida</span>
                  {t >= T.dos && (
                    <span className="f-plex" style={{fontSize:11.5, fontWeight:700, color:'#D97706', background:'rgba(245,158,11,0.12)', border:'1px solid rgba(245,158,11,0.3)', borderRadius:100, padding:'3px 10px', transform:`scale(${lerp(0.6,1,Easing.easeOutBack(clamp((t-T.dos)/0.4,0,1)))})`}}>2 preguntas</span>
                  )}
                </div>
                {/* cuerpo */}
                <div style={{padding:'6px 20px 22px'}}>
                  <div className="f-plex" style={{fontSize:15.5, color:'#64748B', marginBottom:12}}>Buenos días:</div>
                  {/* pregunta A */}
                  <div style={{position:'relative', display:'inline-block', marginBottom:16}}>
                    <span className="f-plex" style={{fontSize:17, fontWeight:600, color:'#0F172A'}}>¿Os queda algo de la referencia 340?</span>
                    <div style={{position:'absolute', left:0, bottom:-4, height:3, borderRadius:2, background:'#10B981', width:`${subAW*100}%`}}/>
                  </div>
                  <br/>
                  {/* pregunta B */}
                  <div style={{position:'relative', display:'inline-block'}}>
                    <span className="f-plex" style={{fontSize:17, fontWeight:600, color:'#0F172A'}}>¿Y cómo va nuestro proyecto?</span>
                    <div style={{position:'absolute', left:0, bottom:-4, height:3, borderRadius:2, background:'#0085FF', width:`${subBW*100}%`}}/>
                  </div>
                  <div className="f-plex" style={{fontSize:14.5, color:'#94A3B8', marginTop:18}}>Gracias, Marta.</div>
                </div>
                {/* barrido de lectura del agente */}
                {scanP > 0 && scanP < 1 && (
                  <ScanLine y={0} height={330} progress={scanP} width={560} color="#0085FF"/>
                )}
              </div>
            </div>
          );
        })()}

        {/* ----- Avatar del agente que lee ----- */}
        {t >= T.lee && (()=>{
          const p = clamp((t-T.lee)/0.5,0,1), e = Easing.easeOutBack(p);
          return (
            <div style={{position:'absolute', left:735, top:225, textAlign:'center', opacity:clamp(p*1.3,0,1), transform:`scale(${lerp(0.7,1,e)})`}}>
              <Avatar label="IA" grad={IA_GRAD} size={84}/>
              <div className="f-plex" style={{marginTop:8, fontSize:13, fontWeight:600, color:'#64748B'}}>{t < T.busca ? 'leyendo…' : 'consultando'}</div>
            </div>
          );
        })()}

        {/* ----- Conectores agente → consultas (se DIBUJAN, stagger) ----- */}
        {t >= T.busca && (
          <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
            {cardCY.map((cy,i)=>{
              const d = `M ${AG.x} ${AG.y} C ${980} ${AG.y}, ${980} ${cy}, ${CARDX} ${cy}`;
              const drawP = Easing.easeInOutCubic(clamp((t - T.busca - i*0.15)/0.7, 0, 1));
              const col = DATA[i].color;
              return <path key={i} d={d} fill="none" stroke={col} strokeWidth="2.5" strokeDasharray="8 8" strokeDashoffset={lerp(560,0,drawP)*-1} opacity={drawP*0.55}/>;
            })}
          </svg>
        )}

        {/* ----- 3 tarjetas de consulta (derecha) ----- */}
        <div style={{opacity:toolCardOp, filter:toolCardOp<1?'saturate(0.5)':'none'}}>
          {/* productos */}
          {t >= T.qProd && (()=>{
            const p = clamp((t-T.qProd)/0.55,0,1), e = Easing.easeOutBack(p);
            const flying = t >= flyStart(0);   // el dato ya se fue volando
            return (
              <div style={{position:'absolute', left:CARDX, top:185, width:680, background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 12px 32px rgba(15,23,42,0.08)', padding:'14px 20px', opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*-30}px)`}}>
                <ToolBadge name="productos" color="#10B981" t={t} start={T.qProd}/>
                <div style={{display:'flex', alignItems:'baseline', gap:14, marginTop:12, opacity:flying?0.25:1}}>
                  <span className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', lineHeight:1}}>{nProd}</span>
                  <span className="f-plex" style={{fontSize:18, color:'#64748B'}}>unidades de la 340</span>
                  {t >= T.chipAlm && <span style={{marginLeft:'auto'}}><StatusChip label="almacén central" color="success" start={T.chipAlm} t={t}/></span>}
                </div>
              </div>
            );
          })()}
          {/* proyectos */}
          {t >= T.qProy && (()=>{
            const p = clamp((t-T.qProy)/0.55,0,1), e = Easing.easeOutBack(p);
            const flying = t >= flyStart(1);
            return (
              <div style={{position:'absolute', left:CARDX, top:355, width:680, background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 12px 32px rgba(15,23,42,0.08)', padding:'14px 20px', opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*-30}px)`}}>
                <ToolBadge name="proyectos" color="#0085FF" t={t} start={T.qProy}/>
                <div style={{marginTop:12, opacity:flying?0.25:1}}>
                  <div style={{display:'flex', alignItems:'center', gap:12}}>
                    <div style={{flex:1, height:12, borderRadius:100, background:'#EEF2F7', overflow:'hidden'}}>
                      <div style={{height:'100%', width:`${pct}%`, borderRadius:100, background:'linear-gradient(90deg,#38BDF8,#0085FF)'}}/>
                    </div>
                    <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A', minWidth:78, textAlign:'right'}}>{pct}%</span>
                  </div>
                  {t >= T.chipFecha && <div style={{marginTop:10}}><StatusChip label="siguiente entrega · 22" color="primary" start={T.chipFecha} t={t}/></div>}
                </div>
              </div>
            );
          })()}
          {/* bonos de horas */}
          {t >= T.qBono && (()=>{
            const p = clamp((t-T.qBono)/0.55,0,1), e = Easing.easeOutBack(p);
            const flying = t >= flyStart(2);
            return (
              <div style={{position:'absolute', left:CARDX, top:535, width:680, background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, boxShadow:'0 12px 32px rgba(15,23,42,0.08)', padding:'14px 20px', opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*-30}px)`}}>
                <ToolBadge name="bonos de horas" color="#FB8C00" t={t} start={T.qBono}/>
                <div style={{display:'flex', alignItems:'baseline', gap:14, marginTop:12, opacity:flying?0.25:1}}>
                  <span className="f-plex" style={{fontSize:44, fontWeight:800, color:'#0F172A', lineHeight:1}}>{nBono}</span>
                  <span className="f-plex" style={{fontSize:18, color:'#64748B'}}>horas le quedan</span>
                </div>
              </div>
            );
          })()}
        </div>
      </div>

      {/* ==================== ACTO 2 — el borrador, los datos que vuelan, el envío ==================== */}
      {t >= T.borrador && (
        <div style={{position:'absolute', inset:0, opacity:draftDim, filter:draftDim<1?'saturate(0.55)':'none'}}>
          {(()=>{
            const p = clamp((t-T.borrador)/0.6,0,1), e = Easing.easeOutBack(p);
            const skel = clamp((t-24.3)/0.5,0,1);              // esqueleto del cuerpo (con tu tono)
            const sign = clamp((t-26.5)/0.5,0,1);              // firma
            const Slot = ({ i })=>{
              const landed = t >= flyStart(i)+flyDur;
              const d = DATA[i];
              if (landed) return (
                <span className="f-plex" style={{display:'inline-flex', alignItems:'center', background:d.bg, border:`1px solid ${d.brd}`, borderRadius:8, padding:'3px 12px', fontSize:15.5, fontWeight:700, color:d.color}}>{d.text}</span>
              );
              return <span style={{display:'inline-block', width:150, height:26, borderRadius:8, border:'1.5px dashed #CBD5E1', verticalAlign:'-6px'}}/>;
            };
            return (
              <div style={{position:'absolute', left:120, top:190, width:900, background:'#fff', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 26px 64px rgba(15,23,42,0.16)', overflow:'hidden', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*22}px)`}}>
                {/* cabecera del borrador */}
                <div style={{display:'flex', alignItems:'center', gap:12, padding:'14px 22px', borderBottom:'1px solid #F1F5F9', background:'#FBFDFF'}}>
                  <span className="f-plex" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>BORRADOR</span>
                  <span className="f-plex" style={{fontSize:14, color:'#64748B'}}>Para: marta@cafesaurora.com</span>
                  {t >= T.tono && <span style={{marginLeft:'auto'}}><StatusChip label="tu tono" color="primary" start={T.tono} t={t} icon="✎"/></span>}
                </div>
                {/* cuerpo (lead con typewriter + 3 líneas con ranura) */}
                <div style={{padding:'20px 26px', minHeight:280}}>
                  <div className="f-plex" style={{fontSize:17, color:'#334155', marginBottom:18}}>
                    <Typewriter text="Hola Marta, gracias por escribir." start={T.borrador+0.1} cps={30} t={t} caret/>
                  </div>
                  {skel > 0 && (
                    <div style={{opacity:skel}}>
                      <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
                        <span className="f-plex" style={{fontSize:16.5, color:'#334155', width:220}}>Nos queda de la 340:</span><Slot i={0}/>
                      </div>
                      <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
                        <span className="f-plex" style={{fontSize:16.5, color:'#334155', width:220}}>Tu proyecto:</span><Slot i={1}/>
                      </div>
                      <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
                        <span className="f-plex" style={{fontSize:16.5, color:'#334155', width:220}}>Bono de horas:</span><Slot i={2}/>
                      </div>
                    </div>
                  )}
                  {sign > 0 && <div className="f-plex" style={{fontSize:15.5, color:'#64748B', marginTop:6, opacity:sign}}>Un saludo — Panadería El Molino.</div>}
                </div>
                {/* barra de acción: agente redacta · botón Enviar */}
                {t >= T.momento && (()=>{
                  const active = t >= T.envias;
                  const clk = active ? Math.sin(clamp((t-T.envias)/0.6,0,1)*Math.PI) : 0;
                  return (
                    <div style={{display:'flex', alignItems:'center', padding:'14px 22px', borderTop:'1px solid #F1F5F9', background:'#FAFCFF', opacity:clamp((t-T.momento)/0.4,0,1)}}>
                      <Avatar label="IA" grad={IA_GRAD} size={34}/>
                      <span className="f-plex" style={{fontSize:14, color:'#64748B', marginLeft:12}}>{active ? 'enviado por ti' : 'redactado por tu agente · no lo envía'}</span>
                      <div style={{marginLeft:'auto', display:'inline-flex', alignItems:'center', gap:10}}>
                        {!active && (
                          <span style={{display:'inline-flex', alignItems:'center', gap:6, fontSize:12.5, fontWeight:600, color:'#94A3B8'}}>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10 V7 a4 4 0 0 1 8 0 v3"/></svg>
                            bloqueado
                          </span>
                        )}
                        <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:8, padding:'11px 26px', borderRadius:12, fontSize:16, fontWeight:700,
                          background: active ? '#059669' : '#EEF2F7',
                          color: active ? '#fff' : '#94A3B8',
                          border: active ? '1px solid #047857' : '1px solid #E2E8F0',
                          boxShadow: active ? `0 12px 28px rgba(16,185,129,${0.3 + clk*0.25})` : 'none',
                          transform: active ? `scale(${1 + clk*0.04})` : 'scale(1)'}}>
                          {active && <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2 L11 13"/><path d="M22 2 L15 22 L11 13 L2 9 Z"/></svg>}
                          {active ? 'Enviado' : 'Enviar'}
                        </span>
                      </div>
                    </div>
                  );
                })()}
              </div>
            );
          })()}

          {/* pastillas de datos volando al borrador (derecha → ranura) */}
          {DATA.map((d,i)=>{
            const s = flyStart(i), p = clamp((t-s)/flyDur,0,1);
            if (p <= 0 || p >= 1) return null;              // antes: en la tarjeta · después: acoplada en el borrador
            const e = Easing.easeInOutCubic(p);
            const x = lerp(d.src.x, d.dst.x, e);
            const y = lerp(d.src.y, d.dst.y, e) - Math.sin(p*Math.PI)*44;
            return (
              <div key={i} className="f-plex" style={{position:'absolute', left:x, top:y, background:d.bg, border:`1px solid ${d.brd}`, borderRadius:8, padding:'4px 13px', fontSize:15.5, fontWeight:700, color:d.color, boxShadow:'0 12px 30px rgba(15,23,42,0.16)', transform:`scale(${lerp(1.06,1,e)})`}}>{d.text}</div>
            );
          })}

          {/* "La lees tú" → humano + cursor que pulsa Enviar */}
          {t >= T.lees && (
            <div style={{position:'absolute', left:1070, top:520, textAlign:'center', opacity:clamp((t-T.lees)/0.5,0,1), transform:`scale(${lerp(0.8,1,Easing.easeOutBack(clamp((t-T.lees)/0.5,0,1)))})`}}>
              <Avatar label="MJ" grad="linear-gradient(135deg,#0085FF,#56E16A)" size={64}/>
              <div className="f-plex" style={{marginTop:8, fontSize:14, fontWeight:700, color:'#0F172A'}}>tú</div>
              <div className="f-plex" style={{fontSize:12.5, color:'#64748B'}}>{t < T.envias ? 'la lees…' : 'la envías'}</div>
            </div>
          )}
          {t >= T.lees && (
            <ScriptedCursor t={t} frames={[
              { t:T.lees, x:1150, y:820 },
              { t:T.envias, x:938, y:582, arc:60 },
              { t:T.envias+1.4, x:960, y:600 },
            ]} clickTimes={[T.envias]}/>
          )}
        </div>
      )}

      {/* velo blanco: al entrar el panel de análisis, ACTO 1 y ACTO 2 se van de verdad al fondo */}
      {veloAnalisis > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloAnalisis}}/>}

      {/* ==================== ACTO 3 — el patrón que nadie te pidió ==================== */}
      {t >= T.nota && (
        <div style={{position:'absolute', inset:0, opacity:analysisDim, filter:analysisDim<1?'saturate(0.55)':'none'}}>
          {(()=>{
            const p = clamp((t-T.nota)/0.6,0,1), e = Easing.easeOutBack(p);
            return (
              <div style={{position:'absolute', left:410, top:250, width:1100, background:'#fff', border:'1px solid #E2E8F0', borderRadius:20, boxShadow:'0 26px 64px rgba(15,23,42,0.14)', padding:'30px 40px', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*24}px)`}}>
                <div className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:8, fontSize:12, fontWeight:700, letterSpacing:'2.5px', color:'#D97706', background:'rgba(245,158,11,0.10)', border:'1px solid rgba(245,158,11,0.28)', borderRadius:100, padding:'6px 14px'}}>
                  <span style={{width:7, height:7, borderRadius:100, background:'#FB8C00'}}/> TU AGENTE HA NOTADO ALGO
                </div>

                {/* 3.er cliente que pregunta por la 340 */}
                {t >= T.tres && (
                  <div style={{marginTop:22, opacity:clamp((t-T.tres)/0.5,0,1)}}>
                    <div className="f-plex" style={{fontSize:34, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
                      Es el <span style={{color:'#D97706'}}>3.er cliente</span> que pregunta por la
                      <span style={{display:'inline-flex', alignItems:'center', marginLeft:12, fontSize:26, background:'rgba(245,158,11,0.12)', border:'1px solid rgba(245,158,11,0.35)', borderRadius:10, padding:'2px 14px', color:'#B45309'}}>referencia 340</span>
                    </div>
                    {/* 3 avatares de clientes */}
                    <div style={{display:'flex', alignItems:'center', gap:26, marginTop:22}}>
                      {[
                        { l:'MA', n:'Marta · Cafés Aurora', g:'linear-gradient(135deg,#FB8C00,#F97316)' },
                        { l:'LR', n:'Luis · Restaurante Sol', g:'linear-gradient(135deg,#0085FF,#38BDF8)' },
                        { l:'RO', n:'Rosa · Hotel Miramar', g:'linear-gradient(135deg,#10B981,#059669)' },
                      ].map((c,i)=>{
                        const cp = clamp((t-T.tres-0.2-i*0.18)/0.4,0,1), ce = Easing.easeOutBack(cp);
                        if (cp <= 0) return null;
                        return (
                          <div key={i} style={{display:'flex', alignItems:'center', gap:12, opacity:clamp(cp*1.3,0,1), transform:`scale(${lerp(0.7,1,ce)})`}}>
                            <Avatar label={c.l} grad={c.g} size={48}/>
                            <span className="f-plex" style={{fontSize:15, fontWeight:600, color:'#334155'}}>{c.n}</span>
                          </div>
                        );
                      })}
                      {t >= T.semana && (
                        <span style={{marginLeft:8}}><StatusChip label="esta semana · lun–vie" color="warning" start={T.semana} t={t} icon="📅"/></span>
                      )}
                    </div>
                  </div>
                )}

                {/* no estaba en ningún informe · estaba en tu correo */}
                {t >= T.tachaInf && (
                  <div style={{marginTop:30, borderTop:'1px solid #F1F5F9', paddingTop:22, opacity:clamp((t-T.tachaInf)/0.5,0,1)}}>
                    <div className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>
                      Eso no estaba en ningún{' '}
                      <span style={{position:'relative', display:'inline-block', color:'#94A3B8'}}>
                        informe
                        <div style={{position:'absolute', left:-2, top:'52%', height:3, borderRadius:2, background:'#EF4444', width:`${clamp((t-T.tachaInf)/0.4,0,1)*106}%`}}/>
                      </span>.
                      {t >= T.correo && (
                        <span style={{marginLeft:12, color:'#0085FF', fontWeight:800, opacity:clamp((t-T.correo)/0.5,0,1)}}>Estaba en tu correo.</span>
                      )}
                    </div>
                  </div>
                )}
              </div>
            );
          })()}
        </div>
      )}

      {veloCosa > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloCosa}}/>}

      {/* ==================== ÚNICA COSA (prueba, en pasado) ==================== */}
      {t >= T.cosa1 && (
        <div style={{position:'absolute', left:0, right:0, top:430, textAlign:'center'}}>
          <div className="f-plex" style={{fontSize:56, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A', opacity:Easing.easeOutCubic(clamp((t-T.cosa1)/0.6,0,1)), transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-T.cosa1)/0.6,0,1)))*18}px)`}}>
            El correo preguntó…
          </div>
          {t >= T.cosa2 && (
            <div className="f-plex" style={{marginTop:16, fontSize:72, fontWeight:800, letterSpacing:'-0.03em', opacity:clamp((t-T.cosa2)/0.6,0,1), transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-T.cosa2)/0.6,0,1)))*18}px)`}}>
              <span className="grad-text">y tus datos respondieron.</span>
            </div>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaBA05 });