// === Escena 01 — "El interruptor" (contrato) ===
// La ficha de entidad en modo EDICIÓN (Talleres Marbán, S.L.) → la barra de título con
// smart_toy + «Yudo» + el interruptor (ayuda «Activar o desactivar Yudo», y SIN X: este diálogo
// pasa su propio TitleContent) → se enciende → la ventana se parte en dos → entra el panel con
// SUS DOS CABECERAS apiladas → LA ÚNICA COSA como promesa.
// Etiquetas literales: «Editar Entidad», «Razón social», «ID Fiscal», «Email», «Teléfono»,
// «Configuración Cliente», «Ver ficha completa», «Cerrar», «Yudo», «Yudo - Entidad», «IA»,
// «Escribe aqui...» (sin tilde), «Rápido/Equilibrado/Razonador», «Historial»,
// «Información de sesión».
function EscenaYV01({ t }){
  // LOCUCIÓN (audio/escena-01.mp3): abres la ficha → en la barra aparece Yudo → y un interruptor →
  // lo enciendes → (pausa) → la ventana se parte en dos → a la izquierda la ficha entera →
  // a la derecha un panel con el nombre de esa ventana → no te has ido a ningún sitio →
  // no es el asistente de la aplicación: es otro agente, creado al vuelo → LA ÚNICA COSA.
  const T = {
    head:0.1,        // "Abres la ficha" → la ventana entra entera, todavía sin panel
    barra:2.5,       // "En la barra de título" → la barra de título se ilumina
    palabra:3.5,     // "aparece una palabra: Yudo" → icono smart_toy + «Yudo»
    sw:6.1,          // "Y un interruptor al lado" → el interruptor + la ayuda «Activar o desactivar Yudo»
    enciende:8.4,    // "Lo enciendes" → el cursor se posa y hace clic; el interruptor pasa a azul
    pausa:9.8,       // (pausa 0.5 s) quietud total: se apaga el anillo y la ayuda
    parte:10.8,      // "La ventana se parte en dos" → el separador se dibuja de arriba abajo
    izq:13.3,        // "A la izquierda sigue la ficha entera" → la mitad izquierda se ilumina
    campos:15.4,     // "con todos sus campos" → barrido por las etiquetas del formulario
    der:17.5,        // "A la derecha entra un panel" → la superficie del panel abre hueco
    cabeceras:18.4,  // "un panel con el nombre de esa ventana" → LAS DOS cabeceras, apiladas
    calma:21.2,      // "No te has ido a ningún sitio" → nada se mueve; el cuerpo del chat, vacío
    nombre:23.8,     // "Y no es el asistente" → los dos «Yudo - Entidad» brillan una vez
    agente:26.8,     // "es otro agente, creado al vuelo" → las píldoras de nivel entran en cascada
    herr:29.0,       // "con las herramientas de esta ventana" → el área de escribir y sus 4 controles
    unica1:31.8,     // "Ese Yudo opera lo que tú ves" → LA ÚNICA COSA, mitad 1 (promesa)
    unica2:34.5,     // "al cerrar la ventana no queda nada" → mitad 2
    gasto:37.4,      // "Salvo el gasto" → coletilla en ámbar
    salida:39.3,     // "Qué significa operar lo que ves" → salida
    campoStep:0.07,  // incremento de la cascada de campos al abrir la ficha
    glowStep:0.24,   // incremento del barrido que recorre las etiquetas
    pillStep:0.13,   // incremento entre las tres píldoras de nivel
    ctrlStep:0.11,   // incremento entre los cuatro controles del área de escribir
    gastoDelay:0.4,  // retardo de la coletilla ámbar respecto a su frase
  };

  // ── Geometría de la ventana simulada (llena el cuadro) ──
  const WX = 110, WY = 96, WW = 1700, WH = 894;
  const BARRA = 80, PIE = 78, CUERPO = WH - BARRA - PIE;   // 736
  const PANEL = 680;

  const winP = clamp((t-T.head)/0.85,0,1), winE = Easing.easeOutCubic(winP);
  const barraGlow = t >= T.barra && t < T.barra+1.4 ? Math.sin((t-T.barra)/1.4*Math.PI) : 0;
  const paP = clamp((t-T.palabra)/0.45,0,1), paE = Easing.easeOutBack(paP);
  const swP = clamp((t-T.sw)/0.45,0,1), swE = Easing.easeOutBack(swP);

  // El interruptor: 0 = apagado, 1 = encendido
  const onP = clamp((t-T.enciende)/0.4,0,1), onE = Easing.easeOutBack(onP);
  const quieto = clamp((t-T.pausa)/0.45,0,1);
  const ayuda = clamp((t-T.sw-0.9)/0.35,0,1) * (1-quieto);

  // El reparto: primero se dibuja el separador, después abre el hueco
  const sepP = Easing.easeInOutCubic(clamp((t-T.parte)/0.55,0,1));
  const abreP = clamp((t-T.parte-0.45)/0.85,0,1), abreE = Easing.easeOutCubic(abreP);
  const panelW = PANEL * abreE;
  const izqP = clamp((t-T.izq)/0.6,0,1), izqE = Easing.easeOutCubic(izqP);
  const izqRing = t >= T.izq && t < T.izq+1.6 ? Math.sin((t-T.izq)/1.6*Math.PI) : 0;
  const supP = clamp((t-T.der)/0.5,0,1);

  // Las dos cabeceras del panel, apiladas
  const c1P = clamp((t-T.cabeceras)/0.5,0,1), c1E = Easing.easeOutCubic(c1P);
  const c2P = clamp((t-T.cabeceras-0.4)/0.5,0,1), c2E = Easing.easeOutCubic(c2P);
  const nomGlow = t >= T.nombre && t < T.nombre+1.5 ? Math.sin((t-T.nombre)/1.5*Math.PI) : 0;
  const cuerpoP = clamp((t-T.calma)/0.6,0,1);
  const inP = clamp((t-T.herr)/0.55,0,1), inE = Easing.easeOutCubic(inP);

  // La Única Cosa
  const veloOp = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.90;
  const u1P = clamp((t-T.unica1)/0.6,0,1), u1E = Easing.easeOutCubic(u1P);
  const u2P = clamp((t-T.unica2)/0.6,0,1), u2E = Easing.easeOutCubic(u2P);
  const gaP = clamp((t-T.gasto-T.gastoDelay)/0.5,0,1), gaE = Easing.easeOutBack(gaP);
  const saP = clamp((t-T.salida)/0.6,0,1), saE = Easing.easeOutCubic(saP);

  // ── Iconos ──
  const IconBot = ({ s=26, 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 IconChat = ({ s=22, c='#64748B' })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8">
      <path d="M4 4.5 H20 A2 2 0 0 1 22 6.5 V15 A2 2 0 0 1 20 17 H10.5 L5.5 21 V17 H4 A2 2 0 0 1 2 15 V6.5 A2 2 0 0 1 4 4.5 Z" strokeLinejoin="round"/>
    </svg>
  );
  const IconHist = ({ s=20, c='#64748B' })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.9">
      <path d="M3.5 12 A8.5 8.5 0 1 0 6 6" strokeLinecap="round"/>
      <path d="M3 3 V7 H7" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12 7.5 V12.5 L15.5 14.5" strokeLinecap="round"/>
    </svg>
  );
  const IconInfo = ({ s=20, c='#64748B' })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.9">
      <circle cx="12" cy="12" r="9"/><path d="M12 11 V16.5" strokeLinecap="round"/>
      <circle cx="12" cy="7.6" r="1.2" fill={c} stroke="none"/>
    </svg>
  );

  // ── El interruptor de la barra de título ──
  const Switch = ()=>{
    const k = onE;
    return (
      <div style={{position:'relative', width:56, height:30, borderRadius:99, background:'#CBD5E1', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, borderRadius:99, background:'#0085FF', opacity:clamp(onP*1.6,0,1)}}/>
        <div style={{position:'absolute', top:3, left:lerp(3,29,k), width:24, height:24, borderRadius:99,
                     background:'#fff', boxShadow:'0 2px 6px rgba(15,23,42,0.30)'}}/>
      </div>
    );
  };

  // ── Un campo del formulario ──
  const Campo = ({ label, valor, i, big })=>{
    const p = clamp((t-T.head-0.30-i*T.campoStep)/0.45,0,1), e = Easing.easeOutCubic(p);
    const g = t >= T.campos+i*T.glowStep && t < T.campos+i*T.glowStep+0.85
      ? Math.sin((t-T.campos-i*T.glowStep)/0.85*Math.PI) : 0;
    return (
      <div style={{opacity:e, transform:`translateY(${(1-e)*10}px)`, minWidth:0}}>
        <div className="f-plex" style={{fontSize:21, fontWeight:600, marginBottom:9,
                                        color:0 < g ? '#0085FF' : '#64748B'}}>{label}</div>
        <div style={{height:62, borderRadius:10, background:'#fff', display:'flex', alignItems:'center',
                     padding:'0 18px', border:`1px solid ${0 < g ? '#0085FF' : '#D9E1EC'}`,
                     boxShadow:0 < g ? `0 0 ${g*22}px rgba(0,133,255,0.35)` : 'none'}}>
          <span className="f-plex" style={{fontSize:big ? 30 : 26, color:'#0F172A', whiteSpace:'nowrap',
                                           overflow:'hidden', textOverflow:'ellipsis'}}>{valor}</span>
        </div>
      </div>
    );
  };

  // ── Un selector de la tarjeta «Configuración Cliente» ──
  const Selector = ({ label, valor, i })=>{
    const p = clamp((t-T.head-0.55-i*T.campoStep)/0.45,0,1), e = Easing.easeOutCubic(p);
    return (
      <div style={{opacity:e, transform:`translateY(${(1-e)*8}px)`, minWidth:0}}>
        <div className="f-plex" style={{fontSize:18, fontWeight:600, color:'#94A3B8', marginBottom:8}}>{label}</div>
        <div style={{height:54, borderRadius:9, border:'1px solid #D9E1EC', background:'#fff', display:'flex',
                     alignItems:'center', justifyContent:'space-between', padding:'0 14px', gap:8}}>
          <span className="f-plex" style={{fontSize:22, color:'#334155', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{valor}</span>
          <span style={{color:'#94A3B8', fontSize:14}}>▾</span>
        </div>
      </div>
    );
  };

  // ── Píldora de nivel (cabecera del chat) ──
  const Pildora = ({ label, activa, i })=>{
    const p = clamp((t-T.agente-i*T.pillStep)/0.4,0,1), e = Easing.easeOutBack(p);
    return (
      <span className="f-plex" style={{display:'inline-flex', alignItems:'center', padding:'6px 14px', borderRadius:99,
                    fontSize:17, fontWeight:activa ? 700 : 500,
                    background:activa ? 'rgba(0,133,255,0.12)' : '#F1F5F9',
                    border:`1px solid ${activa ? 'rgba(0,133,255,0.35)' : '#E2E8F0'}`,
                    color:activa ? '#0085FF' : '#94A3B8',
                    opacity:clamp(p*1.3,0,1), transform:`scale(${lerp(0.7,1,e)})`}}>{label}</span>
    );
  };

  const cursor = { frames:[
    { t:0.0,  x:1810, y:1010 },
    { t:5.6,  x:1810, y:1010 },
    { t:8.15, x:1736, y:126, arc:60 },
    { t:11.6, x:1736, y:126 },
    { t:13.0, x:1810, y:1010 },
  ], clicks:[T.enciende] };

  return (
    <SlideCanvas variant="light">
      {/* Eyebrow */}
      <div className="f-plex" style={{position:'absolute', top:44, left:0, right:0, textAlign:'center',
                                      fontSize:19, fontWeight:700, letterSpacing:'3.4px', color:'#94A3B8',
                                      opacity:clamp(t/0.6,0,1)*(1-veloOp/0.90)}}>
        YUDO DENTRO DE UNA VENTANA · EL INTERRUPTOR
      </div>

      {/* ═══════════ LA VENTANA ═══════════ */}
      <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH,
                   opacity:winE*(1-veloOp/0.90*0.88), transform:`translateY(${(1-winE)*22}px) scale(${lerp(0.985,1,winE)})`,
                   background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                   boxShadow:'0 34px 84px rgba(15,23,42,0.14)', overflow:'hidden',
                   filter:0 < veloOp ? 'saturate(0.5)' : 'none'}}>

        {/* ── Barra de título: «Editar Entidad» + el grupo Yudo. SIN X. ── */}
        <div style={{height:BARRA, display:'flex', alignItems:'center', padding:'0 30px',
                     borderBottom:'1px solid #E8EDF3', background:'#FBFCFE', position:'relative'}}>
          <span className="f-plex" style={{fontSize:29, fontWeight:700, color:'#0F172A', letterSpacing:'-0.02em'}}>Editar Entidad</span>
          <div style={{flex:1}}/>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <span style={{display:'inline-flex', opacity:clamp(paP*1.3,0,1), transform:`scale(${lerp(0.6,1,paE)})`}}>
              <IconBot s={26}/>
            </span>
            <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#0F172A',
                                             opacity:clamp(paP*1.3,0,1), transform:`translateX(${(1-paE)*-10}px)`}}>Yudo</span>
            <span style={{display:'inline-flex', opacity:clamp(swP*1.3,0,1), transform:`scale(${lerp(0.6,1,swE)})`}}>
              <Switch/>
            </span>
          </div>
          {0 < barraGlow && (
            <div style={{position:'absolute', inset:0, borderBottom:'2px solid #0085FF',
                         background:`rgba(0,133,255,${barraGlow*0.07})`, pointerEvents:'none'}}/>
          )}
        </div>

        {/* ── Cuerpo: la ficha y (después) el panel ── */}
        <div style={{display:'flex', height:CUERPO, position:'relative'}}>

          {/* La ficha — modo edición, pestaña General */}
          <div style={{width:WW-panelW, flexShrink:0, padding:'32px 40px', position:'relative',
                       background:0 < izqP ? 'rgba(0,133,255,0.02)' : '#fff'}}>
            {/* Fila de interruptores y el selector Personal / Empresa */}
            <div style={{display:'flex', alignItems:'center', gap:26, height:62,
                         opacity:clamp((t-T.head-0.2)/0.4,0,1)}}>
              <div style={{display:'flex', border:'1px solid #D9E1EC', borderRadius:10, overflow:'hidden'}}>
                <span className="f-plex" style={{padding:'13px 26px', fontSize:22, color:'#94A3B8', background:'#F8FAFC'}}>Personal</span>
                <span className="f-plex" style={{padding:'13px 26px', fontSize:22, fontWeight:700, color:'#fff', background:'#0085FF'}}>Empresa</span>
              </div>
              <div style={{flex:1}}/>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{width:46, height:26, borderRadius:99, background:'#10B981', position:'relative'}}>
                  <div style={{position:'absolute', top:3, left:23, width:20, height:20, borderRadius:99, background:'#fff'}}/>
                </div>
                <span className="f-plex" style={{fontSize:20, color:'#334155'}}>Es Cliente</span>
              </div>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{width:46, height:26, borderRadius:99, background:'#CBD5E1', position:'relative'}}>
                  <div style={{position:'absolute', top:3, left:3, width:20, height:20, borderRadius:99, background:'#fff'}}/>
                </div>
                <span className="f-plex" style={{fontSize:20, color:'#94A3B8'}}>Título automático</span>
              </div>
            </div>

            {/* Los cuatro campos */}
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'26px 34px', marginTop:26}}>
              <Campo i={0} label="Razón social" valor="Talleres Marbán, S.L."/>
              <Campo i={1} label="ID Fiscal" valor="B98314207"/>
              <Campo i={2} label="Email" valor="info@talleresmarban.es" big/>
              <Campo i={3} label="Teléfono" valor="961 244 180"/>
            </div>

            {/* La tarjeta «Configuración Cliente» */}
            <div style={{marginTop:26, padding:22, borderRadius:14, border:'1px solid #E8EDF3', background:'#F8FAFC',
                         opacity:clamp((t-T.head-0.5)/0.5,0,1)}}>
              <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'1.6px', color:'#64748B', marginBottom:18}}>
                CONFIGURACIÓN CLIENTE
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'18px 22px'}}>
                <Selector i={4} label="Tipo Venta" valor="Factura"/>
                <Selector i={5} label="Impuesto" valor="IVA 21 %"/>
                <Selector i={6} label="Tipo de Cliente" valor="Nacional"/>
                <Selector i={7} label="Cuenta contable (430)" valor="43000012"/>
              </div>
            </div>

            {/* El aro de «sigue entera» */}
            {0 < izqRing && (
              <div style={{position:'absolute', inset:10, borderRadius:14, border:`2px solid rgba(0,133,255,${izqRing*0.75})`,
                           boxShadow:`inset 0 0 ${izqRing*40}px rgba(0,133,255,0.12)`, pointerEvents:'none'}}/>
            )}
          </div>

          {/* El separador que se dibuja de arriba abajo */}
          {0 < sepP && abreP < 1 && (
            <div style={{position:'absolute', left:WW-panelW-1, top:0, width:3, height:CUERPO*sepP,
                         background:'linear-gradient(180deg,#0085FF,#56E16A)', boxShadow:'0 0 16px rgba(0,133,255,0.55)'}}/>
          )}

          {/* ── El panel de Yudo: DOS cabeceras apiladas ── */}
          {0 < panelW && (
            <div style={{width:panelW, flexShrink:0, borderLeft:'1px solid #E2E8F0', background:'#FCFDFF',
                         overflow:'hidden', display:'flex', flexDirection:'column'}}>
              <div style={{width:PANEL, flexShrink:0, display:'flex', flexDirection:'column', height:'100%'}}>

                {/* CABECERA 1 — la de InlineYudo */}
                <div style={{height:64, flexShrink:0, display:'flex', alignItems:'center', gap:12, padding:'0 18px',
                             borderBottom:'1px solid #E8EDF3', background:'#fff',
                             opacity:clamp(c1P*1.4,0,1)*supP, transform:`translateY(${(1-c1E)*-12}px)`}}>
                  <IconBot s={24}/>
                  <span className="f-plex" style={{fontSize:25, fontWeight:700, color:'#0F172A',
                                                   textShadow:0 < nomGlow ? `0 0 ${nomGlow*20}px rgba(0,133,255,0.85)` : 'none'}}>Yudo - Entidad</span>
                  <span className="f-mono" style={{fontSize:16, fontWeight:700, color:'#0085FF', padding:'2px 9px',
                                                   borderRadius:99, background:'rgba(0,133,255,0.12)', border:'1px solid rgba(0,133,255,0.30)'}}>IA</span>
                  <div style={{flex:1}}/>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.1">
                    <path d="M5 5 L19 19 M19 5 L5 19" strokeLinecap="round"/>
                  </svg>
                </div>

                {/* CABECERA 2 — la del propio chat (mismo nombre, otra vez) */}
                <div style={{flexShrink:0, padding:'12px 18px 14px', borderBottom:'1px solid #E8EDF3', background:'#fff',
                             opacity:clamp(c2P*1.4,0,1), transform:`translateY(${(1-c2E)*-10}px)`}}>
                  <div style={{display:'flex', alignItems:'center', gap:10}}>
                    <IconChat s={22}/>
                    <span className="f-plex" style={{fontSize:22, fontWeight:600, color:'#334155',
                                                     textShadow:0 < nomGlow ? `0 0 ${nomGlow*16}px rgba(0,133,255,0.7)` : 'none'}}>Yudo - Entidad</span>
                    <div style={{flex:1}}/>
                    <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
                      <IconHist s={19}/><span className="f-plex" style={{fontSize:16, color:'#64748B'}}>Historial</span>
                    </span>
                    <span style={{display:'inline-flex', alignItems:'center', gap:6, marginLeft:14}}>
                      <IconInfo s={19}/><span className="f-plex" style={{fontSize:16, color:'#64748B'}}>Información de sesión</span>
                    </span>
                  </div>
                  <div style={{display:'flex', gap:9, marginTop:12}}>
                    <Pildora i={0} label="Rápido"/>
                    <Pildora i={1} label="Equilibrado" activa/>
                    <Pildora i={2} label="Razonador"/>
                  </div>
                </div>

                {/* CUERPO del chat — vacío: el agente efímero no trae sugerencias */}
                <div style={{flex:1, minHeight:0, opacity:cuerpoP}}/>

                {/* ÁREA DE ESCRIBIR — clip, «Escribe aqui...», micro y enviar */}
                <div style={{flexShrink:0, padding:'0 18px 18px', opacity:clamp(inP*1.3,0,1),
                             transform:`translateY(${(1-inE)*16}px)`}}>
                  <div style={{display:'flex', alignItems:'center', gap:12, height:62, padding:'0 14px',
                               borderRadius:12, border:'1px solid #D9E1EC', background:'#fff'}}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="1.9"
                         style={{opacity:clamp((t-T.herr-0*T.ctrlStep)/0.3,0,1)}}>
                      <path d="M20 11 L11.5 19.5 A4.5 4.5 0 0 1 5 13 L13.5 4.5 A3.2 3.2 0 0 1 18 9 L9.8 17.2 A1.8 1.8 0 0 1 7.3 14.7 L15 7" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span className="f-plex" style={{flex:1, fontSize:20, color:'#94A3B8',
                                                     opacity:clamp((t-T.herr-1*T.ctrlStep)/0.3,0,1)}}>Escribe aqui...</span>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="1.9"
                         style={{opacity:clamp((t-T.herr-2*T.ctrlStep)/0.3,0,1)}}>
                      <rect x="9" y="2.5" width="6" height="11" rx="3"/>
                      <path d="M5.5 11.5 A6.5 6.5 0 0 0 18.5 11.5 M12 18 V21.5" strokeLinecap="round"/>
                    </svg>
                    <span style={{width:40, height:40, borderRadius:10, background:'#0085FF', display:'flex',
                                  alignItems:'center', justifyContent:'center',
                                  opacity:clamp((t-T.herr-3*T.ctrlStep)/0.3,0,1)}}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2">
                        <path d="M3.5 12 L20.5 12 M13.5 5 L20.5 12 L13.5 19" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* ── El pie: «Ver ficha completa» ⟷ «Cerrar» (sin «Guardar»: no hay cambios) ── */}
        <div style={{height:PIE, display:'flex', alignItems:'center', padding:'0 30px', gap:14,
                     borderTop:'1px solid #E8EDF3', background:'#FBFCFE',
                     opacity:clamp((t-T.head-0.45)/0.5,0,1)}}>
          <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0085FF'}}>Ver ficha completa</span>
          <div style={{flex:1}}/>
          <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#64748B', padding:'12px 26px',
                                           borderRadius:9, border:'1px solid #D9E1EC', background:'#fff'}}>Cerrar</span>
        </div>
      </div>

      {/* ── La ayuda nativa del interruptor ── */}
      {0 < ayuda && (
        <div style={{position:'absolute', left:1560, top:196, opacity:ayuda,
                     background:'#FFFFFF', border:'1px solid #A9A9A9', borderRadius:3, padding:'6px 10px',
                     boxShadow:'0 2px 5px rgba(0,0,0,0.18)'}}>
          <span style={{fontFamily:'Segoe UI, system-ui, sans-serif', fontSize:16, color:'#1F1F1F'}}>Activar o desactivar Yudo</span>
        </div>
      )}

      {/* ═══════════ LA ÚNICA COSA · promesa ═══════════ */}
      {0 < veloOp && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {0 < u1P && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:352, textAlign:'center', fontSize:74,
                                        fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
                                        opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Ese Yudo opera lo que tú ves.
        </div>
      )}
      {0 < u2P && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:462, textAlign:'center', fontSize:74,
                                        fontWeight:800, letterSpacing:'-0.03em',
                                        opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Y al cerrar no queda nada.</span>
        </div>
      )}
      {0 < gaP && (
        <div style={{position:'absolute', left:0, right:0, top:612, textAlign:'center',
                     opacity:clamp(gaP*1.3,0,1), transform:`scale(${lerp(0.88,1,gaE)})`}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:12, fontSize:44, fontWeight:800,
                        color:'#B45309', background:'rgba(251,140,0,0.12)', border:'1px solid rgba(251,140,0,0.35)',
                        borderRadius:16, padding:'14px 34px', letterSpacing:'-0.02em'}}>
            Salvo el gasto.
          </span>
        </div>
      )}
      {0 < saP && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:772, textAlign:'center', fontSize:34,
                                        fontWeight:500, color:'#64748B', opacity:saE, transform:`translateY(${(1-saE)*12}px)`}}>
          Qué significa operar lo que ves.
        </div>
      )}

      {t < T.unica1 && <ScriptedCursor frames={cursor.frames} t={t} clickTimes={cursor.clicks}/>}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaYV01 });