// === Escena 05 — "Las tres trampas" ===
// 1 · El chat no existe hasta el primer encendido: el pane derecho está a cero y NO hay cabecera
//     que enseñar (InlineYudo.razor:9,26 + .css:15-23). Se dibuja la ventana entera, sin rastro.
// 2 · Apagar no desmonta: colapsa por hoja de estilo. Lo que pasa dentro del pane plegado se
//     enseña como ESQUEMA declarado, nunca como captura: en pantalla real no se ve nada.
// 3 · El encendido es preferencia global del navegador (clave yudo_panel_on,
//     AgentDialogLayout.razor:94,114,129) y el análisis bancario viene abierto DE FÁBRICA
//     (YudoInitiallyOn=true) — pero tu preferencia manda (:102 vs :114-118).
function EscenaYV05({ t }){
  // LOCUCIÓN (audio/escena-05.mp3): uno, el chat no existe hasta que lo enciendes → dos, apagarlo
  // no lo desmonta, se pliega y la conversación sigue viva → tres, el interruptor es una
  // preferencia de tu navegador, y una de las cinco viene abierta de fábrica.
  const T = {
    uno:0.1,         // "Uno." → el rótulo de la primera trampa
    t1:1.4,          // "El chat no existe hasta que enciendes el interruptor" → la ventana entera, sin panel
    nada1:5.7,       // "Antes de eso no hay nada" → la marca de medida: sin montar, cero píxeles
    dos:9.2,         // "Dos." → el rótulo de la segunda trampa; el panel ya está abierto
    t2:10.7,         // "Apagarlo no lo desmonta" → el interruptor se apaga y el pane colapsa
    pliega:13.1,     // "Se pliega por hoja de estilo" → ESQUEMA declarado del pane plegado
    viva:14.9,       // "y la conversación sigue viva" → dentro del esquema, los mensajes intactos
    vuelves:17.9,    // "Vuelves a encenderlo" → el interruptor vuelve a azul
    igual:20.1,      // "sigue donde estaba" → el pane se despliega con los MISMOS mensajes
    tres:22.1,       // "Tres." → el rótulo de la tercera trampa
    nodeesta:23.4,   // "El interruptor no es de esta ventana" → la ventana se retira
    pref:25.6,       // "es una preferencia de tu navegador" → la clave, en mono
    siguiente:29.5,  // "la siguiente ventana lo abre igual" → otra ventana entra ya con el panel abierto
    quinta:33.5,     // "la de análisis bancario, viene abierta de fábrica" → la quinta tarjeta, marcada
    salida:37.1,     // "Falta lo que no hace" → salida
    fieldStep:0.06,  // incremento de la cascada de campos de la ficha
    lineStep:0.14,   // incremento entre las líneas del esquema
  };

  // ── Geometría ──
  const WX = 210, WY = 190, WW = 1500, WH = 760;
  const BARRA = 74, PIE = 76, CUERPO = WH - BARRA - PIE;   // 610
  const PANEL = 560;

  // Trampa 1 · sin panel. Trampa 2 · panel abierto → plegado → abierto otra vez.
  const abre2 = clamp((t-T.dos)/0.6,0,1);                                    // el panel ya estaba abierto
  const cierraSw = clamp((t-T.t2)/0.7,0,1);                                  // se apaga → colapsa
  const abreSw = clamp((t-T.igual)/0.7,0,1);                                 // vuelve
  const anchoK = clamp(abre2 - Easing.easeInOutCubic(cierraSw) + Easing.easeOutCubic(abreSw), 0, 1);
  const panelW = PANEL * anchoK;
  const swOn = clamp((t-T.vuelves)/0.4,0,1) + (1 - clamp((t-T.t2)/0.4,0,1)) * clamp((t-T.dos)/0.3,0,1);
  const swK = clamp(swOn,0,1);

  const winP = clamp((t-T.t1)/0.7,0,1), winE = Easing.easeOutCubic(winP);
  // La ventana no se va: se encoge al hueco izquierdo y espera a la siguiente
  const enc = Easing.easeInOutCubic(clamp((t-T.nodeesta)/0.9,0,1));
  const ESC = 0.5467, ENC_X = -80, ENC_Y = 180;
  const medida = clamp((t-T.nada1)/0.5,0,1) * (1 - clamp((t-T.dos+0.4)/0.4,0,1));

  const esqP = clamp((t-T.pliega)/0.6,0,1), esqE = Easing.easeOutCubic(esqP);
  const esqOut = clamp((t-T.vuelves)/0.5,0,1);
  const vivaGlow = t >= T.viva && t < T.viva+1.6 ? Math.sin((t-T.viva)/1.6*Math.PI) : 0;
  const dimWin = esqP*(1-esqOut);

  // Trampa 3
  const t3P = clamp((t-T.tres)/0.6,0,1), t3E = Easing.easeOutCubic(t3P);
  const prefP = clamp((t-T.pref)/0.6,0,1), prefE = Easing.easeOutBack(prefP);
  const sigP = clamp((t-T.siguiente)/0.7,0,1), sigE = Easing.easeOutCubic(sigP);
  const quP = clamp((t-T.quinta)/0.55,0,1), quE = Easing.easeOutBack(quP);
  const quGlow = t >= T.quinta && t < T.quinta+1.5 ? Math.sin((t-T.quinta)/1.5*Math.PI) : 0;
  const saP = clamp((t-T.salida)/0.6,0,1), saE = Easing.easeOutCubic(saP);

  // Rótulo de trampa: cambia tres veces
  const trampa = t < T.dos ? 0 : (t < T.tres ? 1 : 2);
  const TRAMPAS = [
    { n:'1', txt:'El chat no existe todavía',        start:T.uno },
    { n:'2', txt:'Apagarlo no lo desmonta',          start:T.dos },
    { n:'3', txt:'El interruptor es del navegador',  start:T.tres },
  ];
  const tr = TRAMPAS[trampa];
  const trP = clamp((t-tr.start)/0.5,0,1), trE = Easing.easeOutBack(trP);

  const IconBot = ({ s=24, c='#0085FF' })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8">
      <rect x="3.5" y="8" width="17" height="12" rx="3.4"/>
      <path d="M12 4.6 V8" strokeLinecap="round"/>
      <circle cx="12" cy="3.4" r="1.5" fill={c} stroke="none"/>
      <circle cx="9" cy="13.6" r="1.5" fill={c} stroke="none"/>
      <circle cx="15" cy="13.6" r="1.5" fill={c} stroke="none"/>
      <path d="M1.6 12.6 V15.6 M22.4 12.6 V15.6" strokeLinecap="round"/>
    </svg>
  );

  const Burbuja = ({ mio, children, chico })=>(
    <div style={{alignSelf:mio ? 'flex-end' : 'flex-start', maxWidth:chico ? 300 : 420,
                 padding:chico ? '9px 12px' : '12px 16px',
                 borderRadius:mio ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
                 background:mio ? '#0085FF' : '#F1F5F9',
                 border:mio ? 'none' : '1px solid #E2E8F0'}}>
      <span className="f-plex" style={{fontSize:chico ? 15 : 19, color:mio ? '#fff' : '#334155', lineHeight:1.35}}>{children}</span>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <div className="f-plex" style={{position:'absolute', top:40, left:0, right:0, textAlign:'center',
                                      fontSize:19, fontWeight:700, letterSpacing:'3.4px', color:'#94A3B8'}}>
        TRES TRAMPAS DE PANTALLA
      </div>

      {/* Rótulo de la trampa en curso */}
      <div style={{position:'absolute', top:84, left:0, right:0, display:'flex', justifyContent:'center',
                   alignItems:'center', gap:22, opacity:clamp(trP*1.3,0,1)}}>
        <span className="f-plex" style={{fontSize:78, fontWeight:800, color:'#0085FF', lineHeight:1,
                      transform:`scale(${lerp(0.7,1,trE)})`}}>{tr.n}</span>
        <span className="f-plex" style={{fontSize:44, fontWeight:700, color:'#0F172A', letterSpacing:'-0.025em',
                      transform:`translateX(${(1-trE)*-14}px)`}}>{tr.txt}</span>
      </div>

      {/* ═══════ TRAMPAS 1 y 2 · la ventana (y, encogida, «esta ventana» de la trampa 3) ═══════ */}
      {0 < winP && (
        <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH, transformOrigin:'top left',
                     opacity:winE*lerp(1,0.34,dimWin)*lerp(1,0.62,enc),
                     transform:`translate(${ENC_X*enc}px, ${(1-winE)*18 + ENC_Y*enc}px) scale(${lerp(1,ESC,enc)})`,
                     background:'#fff', borderRadius:16, border:'1px solid #E2E8F0',
                     boxShadow:'0 30px 74px rgba(15,23,42,0.13)', overflow:'hidden',
                     filter:0.1 < dimWin ? 'saturate(0.6)' : 'none'}}>

          {/* Barra de título */}
          <div style={{height:BARRA, display:'flex', alignItems:'center', padding:'0 26px',
                       borderBottom:'1px solid #E8EDF3', background:'#FBFCFE'}}>
            <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Editar Entidad</span>
            <div style={{flex:1}}/>
            <IconBot s={24}/>
            <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A', marginLeft:12}}>Yudo</span>
            <div style={{position:'relative', width:56, height:30, borderRadius:99, background:'#CBD5E1',
                         marginLeft:14, overflow:'hidden'}}>
              <div style={{position:'absolute', inset:0, borderRadius:99, background:'#0085FF', opacity:swK}}/>
              <div style={{position:'absolute', top:3, left:lerp(3,29,swK), width:24, height:24, borderRadius:99,
                           background:'#fff', boxShadow:'0 2px 6px rgba(15,23,42,0.30)'}}/>
            </div>
          </div>

          {/* Cuerpo */}
          <div style={{display:'flex', height:CUERPO, position:'relative'}}>
            {/* La ficha — nada cambia en esta escena: el pie sigue sin «Guardar» */}
            <div style={{width:WW-panelW, flexShrink:0, padding:'22px 34px'}}>
              <div style={{display:'flex', alignItems:'center', gap:24, height:54, marginBottom:20}}>
                <div style={{display:'flex', border:'1px solid #D9E1EC', borderRadius:9, overflow:'hidden'}}>
                  <span className="f-plex" style={{padding:'11px 22px', fontSize:20, color:'#94A3B8', background:'#F8FAFC'}}>Personal</span>
                  <span className="f-plex" style={{padding:'11px 22px', fontSize:20, fontWeight:700, color:'#fff', background:'#0085FF'}}>Empresa</span>
                </div>
                <div style={{flex:1}}/>
                <div style={{display:'flex', alignItems:'center', gap:9}}>
                  <div style={{width:42, height:24, borderRadius:99, background:'#10B981', position:'relative'}}>
                    <div style={{position:'absolute', top:3, left:21, width:18, height:18, borderRadius:99, background:'#fff'}}/>
                  </div>
                  <span className="f-plex" style={{fontSize:19, color:'#334155'}}>Es Cliente</span>
                </div>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'20px 30px'}}>
                {[['Razón social','Talleres Marbán, S.L.'],['ID Fiscal','B98314207'],
                  ['Email','info@talleresmarban.es'],['Teléfono','961 244 180']].map((f,i)=>(
                  <div key={f[0]} style={{minWidth:0, opacity:clamp((t-T.t1-0.2-i*T.fieldStep)/0.4,0,1)}}>
                    <div className="f-plex" style={{fontSize:19, fontWeight:600, color:'#64748B', marginBottom:8}}>{f[0]}</div>
                    <div style={{height:56, borderRadius:9, border:'1px solid #D9E1EC', background:'#fff',
                                 display:'flex', alignItems:'center', padding:'0 16px'}}>
                      <span className="f-plex" style={{fontSize:24, color:'#0F172A', whiteSpace:'nowrap',
                                    overflow:'hidden', textOverflow:'ellipsis'}}>{f[1]}</span>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{marginTop:20, padding:20, borderRadius:12, border:'1px solid #E8EDF3', background:'#F8FAFC'}}>
                <div className="f-plex" style={{fontSize:18, fontWeight:700, letterSpacing:'1.6px', color:'#64748B', marginBottom:16}}>
                  CONFIGURACIÓN CLIENTE
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 20px'}}>
                  {[['Tipo Venta','Factura'],['Impuesto','IVA 21 %'],
                    ['Tipo de Cliente','Nacional'],['Cuenta contable (430)','43000012']].map(f=>(
                    <div key={f[0]} style={{minWidth:0}}>
                      <div className="f-plex" style={{fontSize:16, fontWeight:600, color:'#94A3B8', marginBottom:6}}>{f[0]}</div>
                      <div style={{height:48, borderRadius:8, border:'1px solid #D9E1EC', background:'#fff',
                                   display:'flex', alignItems:'center', padding:'0 12px'}}>
                        <span className="f-plex" style={{fontSize:20, color:'#334155', whiteSpace:'nowrap',
                                      overflow:'hidden', textOverflow:'ellipsis'}}>{f[1]}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* El pane derecho: existe o no existe. Nunca una cabecera sin cuerpo. */}
            {0 < panelW && (
              <div style={{width:panelW, flexShrink:0, borderLeft:'1px solid #E2E8F0', background:'#FCFDFF', overflow:'hidden'}}>
                <div style={{width:PANEL, height:'100%', display:'flex', flexDirection:'column'}}>
                  <div style={{height:56, flexShrink:0, display:'flex', alignItems:'center', gap:10, padding:'0 16px',
                               borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
                    <IconBot s={22}/>
                    <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Yudo - Entidad</span>
                    <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#0085FF', padding:'2px 8px',
                                  borderRadius:99, background:'rgba(0,133,255,0.12)'}}>IA</span>
                  </div>
                  <div style={{height:88, flexShrink:0, padding:'10px 16px', borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
                    <div style={{display:'flex', alignItems:'center', gap:10}}>
                      <span className="f-plex" style={{fontSize:19, fontWeight:600, color:'#334155'}}>Yudo - Entidad</span>
                      <div style={{flex:1}}/>
                      <span className="f-plex" style={{fontSize:14, color:'#64748B'}}>Historial</span>
                      <span className="f-plex" style={{fontSize:14, color:'#64748B'}}>Información de sesión</span>
                    </div>
                    <div style={{display:'flex', gap:8, marginTop:10}}>
                      {['Rápido','Equilibrado','Razonador'].map(p=>(
                        <span key={p} className="f-plex" style={{padding:'5px 12px', borderRadius:99, fontSize:15,
                                      fontWeight:p === 'Equilibrado' ? 700 : 500,
                                      background:p === 'Equilibrado' ? 'rgba(0,133,255,0.12)' : '#F1F5F9',
                                      border:`1px solid ${p === 'Equilibrado' ? 'rgba(0,133,255,0.35)' : '#E2E8F0'}`,
                                      color:p === 'Equilibrado' ? '#0085FF' : '#94A3B8'}}>{p}</span>
                      ))}
                    </div>
                  </div>
                  <div style={{flex:1, minHeight:0, padding:'14px 16px', display:'flex', flexDirection:'column', gap:12}}>
                    <Burbuja mio>¿Qué tipo de cliente tiene puesto esta entidad?</Burbuja>
                    <Burbuja>Nacional, con IVA 21 % y cuenta 43000012.</Burbuja>
                    <Burbuja mio>¿Y tiene datos fiscales asignados?</Burbuja>
                    <Burbuja>No: ese apartado está vacío.</Burbuja>
                  </div>
                  <div style={{flexShrink:0, padding:'0 16px 16px'}}>
                    <div style={{height:54, borderRadius:10, border:'1px solid #D9E1EC', background:'#fff',
                                 display:'flex', alignItems:'center', padding:'0 14px'}}>
                      <span className="f-plex" style={{fontSize:18, color:'#94A3B8'}}>Escribe aqui...</span>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Trampa 1 · la medida: no hay panel que buscar */}
            {0.02 < medida && (
              <div style={{position:'absolute', right:0, top:0, bottom:0, width:2, opacity:medida,
                           borderLeft:'2px dashed #B45309'}}>
                <div style={{position:'absolute', right:14, top:'50%', transform:'translateY(-50%)', whiteSpace:'nowrap'}}>
                  <span className="f-mono" style={{fontSize:19, fontWeight:700, color:'#B45309',
                                background:'rgba(251,140,0,0.12)', border:'1px solid rgba(251,140,0,0.32)',
                                borderRadius:8, padding:'8px 14px'}}>sin montar · 0 px</span>
                </div>
              </div>
            )}
          </div>

          {/* Pie */}
          <div style={{height:PIE, display:'flex', alignItems:'center', padding:'0 26px',
                       borderTop:'1px solid #E8EDF3', background:'#FBFCFE'}}>
            <span className="f-plex" style={{fontSize:19, fontWeight:600, color:'#0085FF'}}>Ver ficha completa</span>
            <div style={{flex:1}}/>
            <span className="f-plex" style={{fontSize:19, fontWeight:600, color:'#64748B', padding:'11px 24px',
                          borderRadius:9, border:'1px solid #D9E1EC', background:'#fff'}}>Cerrar</span>
          </div>
        </div>
      )}

      {/* ═══════ El ESQUEMA del pane plegado (declarado: en pantalla no se ve nada) ═══════ */}
      {0 < esqP && esqOut < 1 && (
        <div style={{position:'absolute', left:900, top:300, width:790, padding:'22px 26px',
                     border:'2px dashed #94A3B8', borderRadius:14, background:'rgba(248,250,252,0.96)',
                     opacity:clamp(esqP*1.3,0,1)*(1-esqOut), transform:`translateY(${(1-esqE)*14}px)`}}>
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <span className="f-mono" style={{fontSize:14, fontWeight:700, letterSpacing:'2px', color:'#64748B',
                          background:'#E8EDF3', borderRadius:6, padding:'4px 10px'}}>ESQUEMA</span>
            <span className="f-plex" style={{fontSize:17, color:'#94A3B8'}}>en pantalla real no se ve nada</span>
          </div>
          <div style={{display:'flex', gap:22, marginTop:18}}>
            <div className="f-mono" style={{fontSize:18, color:'#334155', lineHeight:1.9}}>
              {['flex-basis: 0;','overflow: hidden;','_everOn = true'].map((l,i)=>(
                <div key={l} style={{color:i === 2 ? '#94A3B8' : '#334155',
                             opacity:clamp((t-T.pliega-0.3-i*T.lineStep)/0.4,0,1)}}>{l}</div>
              ))}
            </div>
            <div style={{flex:1, borderLeft:'2px dashed #CBD5E1', paddingLeft:22}}>
              <div className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A', marginBottom:12,
                           textShadow:0 < vivaGlow ? `0 0 ${vivaGlow*22}px rgba(0,133,255,0.8)` : 'none'}}>
                Dentro sigue montado
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:9,
                           opacity:clamp((t-T.viva+0.4)/0.5,0,1)}}>
                <Burbuja mio chico>¿Qué tipo de cliente tiene puesto esta entidad?</Burbuja>
                <Burbuja chico>Nacional, con IVA 21 % y cuenta 43000012.</Burbuja>
                <Burbuja mio chico>¿Y tiene datos fiscales asignados?</Burbuja>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ═══════ TRAMPA 3 · la preferencia del navegador ═══════ */}
      {0 < t3P && (
        <div style={{position:'absolute', inset:0, opacity:t3E}}>

          {/* La clave, en mono */}
          {0 < prefP && (
            <div style={{position:'absolute', left:570, top:190, width:780, padding:'22px 28px', borderRadius:14,
                         background:'#0F172A', boxShadow:'0 22px 52px rgba(15,23,42,0.28)',
                         opacity:clamp(prefP*1.3,0,1), transform:`scale(${lerp(0.9,1,prefE)})`}}>
              <div className="f-plex" style={{fontSize:16, fontWeight:700, letterSpacing:'2.2px', color:'#64748B'}}>
                PREFERENCIA DE TU NAVEGADOR — NO DE ESTA VENTANA
              </div>
              <div className="f-mono" style={{fontSize:34, fontWeight:700, color:'#56E16A', marginTop:12}}>
                yudo_panel_on <span style={{color:'#64748B'}}>=</span> true
              </div>
            </div>
          )}

          {/* Rótulos del par de ventanas */}
          <div className="f-plex" style={{position:'absolute', left:130, top:336, width:820, textAlign:'center',
                                          fontSize:20, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8',
                                          opacity:clamp((t-T.nodeesta-0.5)/0.5,0,1)}}>
            ESTA VENTANA
          </div>
          <div className="f-plex" style={{position:'absolute', left:970, top:336, width:820, textAlign:'center',
                                          fontSize:20, fontWeight:700, letterSpacing:'2.4px', color:'#0085FF',
                                          opacity:clamp((t-T.siguiente)/0.5,0,1)}}>
            LA SIGUIENTE
          </div>

          {/* La siguiente ventana, ya con el panel abierto */}
          {0 < sigP && (
            <div style={{position:'absolute', left:970, top:372, width:820, height:415,
                         background:'#fff', borderRadius:14, border:'1px solid #E2E8F0',
                         boxShadow:'0 26px 60px rgba(15,23,42,0.14)', overflow:'hidden',
                         opacity:clamp(sigP*1.3,0,1), transform:`translateX(${(1-sigE)*90}px)`}}>
              <div style={{height:54, display:'flex', alignItems:'center', padding:'0 18px',
                           borderBottom:'1px solid #E8EDF3', background:'#FBFCFE'}}>
                <div style={{width:180, height:13, borderRadius:99, background:'#E2E8F0'}}/>
                <div style={{flex:1}}/>
                <IconBot s={20}/>
                <span className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0F172A', marginLeft:10}}>Yudo</span>
                <div style={{position:'relative', width:44, height:24, borderRadius:99, background:'#0085FF', marginLeft:11}}>
                  <div style={{position:'absolute', top:3, left:23, width:18, height:18, borderRadius:99, background:'#fff'}}/>
                </div>
              </div>
              <div style={{display:'flex', height:361}}>
                <div style={{flex:'1 1 auto', padding:18}}>
                  {[0,1,2,3].map(i=>(
                    <div key={i} style={{marginBottom:14, opacity:clamp((t-T.siguiente-0.2-i*0.07)/0.4,0,1)}}>
                      <div style={{width:84, height:9, borderRadius:99, background:'#E2E8F0', marginBottom:7}}/>
                      <div style={{height:38, borderRadius:8, border:'1px solid #E6EBF2', background:'#FAFCFE'}}/>
                    </div>
                  ))}
                </div>
                <div style={{width:310, flexShrink:0, borderLeft:'1px solid #E2E8F0', background:'#FCFDFF',
                             display:'flex', flexDirection:'column'}}>
                  <div style={{height:44, display:'flex', alignItems:'center', gap:8, padding:'0 12px',
                               borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
                    <IconBot s={18}/>
                    <span className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0F172A'}}>Yudo - Fichajes</span>
                    <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#0085FF'}}>IA</span>
                  </div>
                  <div style={{height:36, display:'flex', alignItems:'center', padding:'0 12px',
                               borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
                    <span className="f-plex" style={{fontSize:15, color:'#94A3B8'}}>Yudo - Fichajes</span>
                  </div>
                  <div style={{flex:1}}/>
                  <div style={{padding:'0 12px 12px'}}>
                    <div style={{height:44, borderRadius:9, border:'1px solid #D9E1EC', background:'#fff',
                                 display:'flex', alignItems:'center', padding:'0 11px'}}>
                      <span className="f-plex" style={{fontSize:16, color:'#94A3B8'}}>Escribe aqui...</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* La quinta ventana: abierta de fábrica */}
          {0 < quP && (
            <div style={{position:'absolute', left:0, right:0, top:816, display:'flex', justifyContent:'center'}}>
              <div style={{display:'flex', alignItems:'center', gap:24, padding:'18px 30px', borderRadius:16,
                           background:'#fff', border:'2px solid rgba(251,140,0,0.55)',
                           boxShadow:0 < quGlow ? `0 0 ${quGlow*44}px rgba(251,140,0,0.40)` : '0 18px 44px rgba(15,23,42,0.10)',
                           opacity:clamp(quP*1.3,0,1), transform:`scale(${lerp(0.92,1,quE)})`}}>
                <IconBot s={32} c="#B45309"/>
                <div style={{lineHeight:1.25}}>
                  <div className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>Yudo - Análisis bancario</div>
                  <div className="f-plex" style={{fontSize:20, color:'#64748B', marginTop:5}}>
                    la única que arranca con el panel abierto
                  </div>
                </div>
                <span className="f-plex" style={{fontSize:19, fontWeight:800, color:'#B45309',
                              background:'rgba(251,140,0,0.14)', border:'1px solid rgba(251,140,0,0.38)',
                              borderRadius:99, padding:'8px 18px'}}>de fábrica</span>
              </div>
            </div>
          )}
          {0 < quP && (
            <div className="f-plex" style={{position:'absolute', top:932, left:0, right:0, textAlign:'center',
                                            fontSize:19, color:'#94A3B8',
                                            opacity:clamp((t-T.quinta-0.8)/0.5,0,1)}}>
              De fábrica = si nunca has tocado el interruptor. Tu preferencia manda.
            </div>
          )}

          {0 < saP && (
            <div className="f-plex" style={{position:'absolute', top:988, left:0, right:0, textAlign:'center',
                                            fontSize:32, fontWeight:600, color:'#0F172A',
                                            opacity:saE, transform:`translateY(${(1-saE)*12}px)`}}>
              Falta lo que no hace.
            </div>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaYV05 });