// === Escena 01 — «El mapa» (contrato) ===  [37.9 s · 12 beats del plan]
//
// LOCUCIÓN (audio/escena-01.mp3): esto es Tareas → a la izquierda, Mi día y tus proyectos, cada
// uno con su cuenta → entras en uno: nombre, clave y nueva tarea → cuatro botones pequeños que
// solo llevan icono → pasas el ratón y dicen su nombre → cuatro maneras de mirar, y al entrar se
// abre la primera → LA ÚNICA COSA (promesa) → empecemos por la lista.
//
// LA VENTANA YA ESTÁ EN PANTALLA en el fotograma 0 (patrón de historico-por-campo): no se
// construye en cámara, se recorre. Lo único que se mueve es el foco.
//
// FIDELIDAD (plan.md · «Prohibido en esta pieza»):
//   · CUATRO vistas, no cinco. Mi día es una entrada del menú, no una vista del proyecto.
//   · Los cuatro botones son de SOLO ICONO; el nombre vive en el `title`, que aquí es el rótulo
//     flotante que sale al pasar el ratón. Ninguno lleva rótulo pegado.
//   · El menú NO lleva «Analisis» ni «Drive» (entradas Beta que no se pintan sin licencia beta)
//     ni «Configuración» (solo administradores; la persona del mock no lo es).
//   · El tablero recién abierto YA tiene el chip verde «Abiertas» y NO tiene botón de limpiar.
//   · No se dibuja la banda «¡Este proyecto está listo para despegar!»: el proyecto tiene equipo.
function EscenaTV01({ t }){
  const T = {
    head:0.1,      // "Esto es Tareas" -> eyebrow + titulo; la ventana ya esta en pantalla
    menu:5.1,      // "Mi día y tus proyectos" -> el menu lateral se ilumina
    globitos:6.4,  // "cada uno con su cuenta" -> los globitos entran en cascada
    cabecera:10.2, // "su nombre, su clave" -> foco en la cabecera del proyecto
    nueva:11.6,    // "el botón de nueva tarea" -> foco en el boton primario
    botones:14.7,  // "cuatro botones pequeños" -> los 4 botones se separan con un halo
    raton:17.9,    // "Pasas el ratón" -> el cursor entra y sube a la barra
    v1:20.0,       // "vista compacta" -> sale el title del boton 1
    v2:21.1,       // "vista kanban" -> title del boton 2
    v3:22.0,       // "vista tabla" -> title del boton 3
    v4:22.7,       // "vista Gantt" -> title del boton 4
    cuatro:24.2,   // "Cuatro maneras de mirar" -> los cuatro rotulos, juntos, un instante
    primera:27.2,  // "se abre la primera" -> el boton 1 encendido; los otros 3 se atenuan
    llevas:29.1,   // "Lo que te llevas de aquí" -> la app empieza a bajar bajo el velo
    unica1:31.2,   // "la dirección es el filtro" -> UNICA COSA mitad 1 (promesa)
    unica2:32.8,   // "se comparte pegándola" -> mitad 2
    salida:34.9,   // "Empecemos por la lista" -> salida hacia la lista
    menuStep:0.11,  // cascada entre entradas del menu lateral
    filaStep:0.09,  // cascada entre filas de la lista
    globoStep:0.13, // cascada entre globitos de cuenta
  };

  // ── Geometría del lienzo (1920x1080). La ventana llena de y=150 a y=1010. ──────────────────
  const WX=180, WY=150, WW=1560, CHR=76;      // ventana + alto del chrome de navegador
  const AY=WY+CHR;                            // 226 · arranque del area de aplicacion
  const SBW=300, MX=WX+SBW, MW=WW-SBW;        // menu lateral 300 · zona principal 1260
  const HDR=AY+92;                            // 318 · fin de la cabecera del proyecto
  const BAR=HDR+84;                           // 402 · fin de la barra de vistas y filtros
  const CHIPS=BAR+60;                         // 462 · fin de la fila de chips = techo de la lista
  const BTN=[504,578,652,726];                // x de los cuatro botones de vista (62x62)
  const BTNY=329, BTNCY=360;

  const velo = clamp((t-T.llevas)/1.9,0,1)*0.92;
  const appOp = lerp(1, 0.16, clamp((t-T.llevas)/1.9,0,1));

  const menuP = clamp((t-T.menu)/0.5,0,1);
  const cabP  = clamp((t-T.cabecera)/0.5,0,1);
  const botP  = clamp((t-T.botones)/0.5,0,1), botE = Easing.easeOutBack(botP);
  const priP  = clamp((t-T.primera)/0.5,0,1), priE = Easing.easeOutCubic(priP);
  const u1E = Easing.easeOutCubic(clamp((t-T.unica1)/0.6,0,1));
  const u2E = Easing.easeOutCubic(clamp((t-T.unica2)/0.6,0,1));
  const saE = Easing.easeOutCubic(clamp((t-T.salida)/0.6,0,1));

  // ── Iconos (SVG en línea; nada de tipografías de icono) ───────────────────────────────────
  const Ico = ({ n, s=24, c='#64748B', sw=2 })=>{
    const P = {
      home:   <path d="M4 11 L12 4 L20 11 V20 H14 V15 H10 V20 H4 Z"/>,
      dia:    <><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2.6M12 18.9v2.6M2.5 12h2.6M18.9 12h2.6M5.2 5.2l1.9 1.9M16.9 16.9l1.9 1.9M18.8 5.2l-1.9 1.9M7.1 16.9l-1.9 1.9"/></>,
      lista:  <path d="M4 6h16M4 12h16M4 18h16"/>,
      folder: <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>,
      lupa:   <><circle cx="11" cy="11" r="6"/><path d="M15.6 15.6 L20 20"/></>,
      gear:   <><circle cx="12" cy="12" r="3.2"/><path d="M12 2.6v2.8M12 18.6v2.8M2.6 12h2.8M18.6 12h2.8M5.2 5.2l2 2M16.8 16.8l2 2M18.8 5.2l-2 2M7.2 16.8l-2 2"/></>,
      mas:    <path d="M12 5v14M5 12h14"/>,
      compacta:<><path d="M4 7h16M4 12h16M4 17h16"/></>,
      kanban: <><rect x="3.5" y="4" width="4.6" height="16" rx="1.2"/><rect x="9.7" y="4" width="4.6" height="11" rx="1.2"/><rect x="15.9" y="4" width="4.6" height="14" rx="1.2"/></>,
      tabla:  <><rect x="3" y="4.5" width="18" height="15" rx="2"/><path d="M3 9.5h18M3 14.5h18M9 4.5v15"/></>,
      gantt:  <><path d="M3.5 3.5v17"/><path d="M6.5 7h8M9 12h10M6.5 17h6"/></>,
      dots:   <><circle cx="12" cy="5" r="1.7" fill={c} stroke="none"/><circle cx="12" cy="12" r="1.7" fill={c} stroke="none"/><circle cx="12" cy="19" r="1.7" fill={c} stroke="none"/></>,
      filtro: <path d="M3.5 5h17l-6.8 8v5.6l-3.4 1.9V13Z"/>,
      help:   <><circle cx="12" cy="12" r="9"/><path d="M9.6 9.6a2.5 2.5 0 1 1 3.1 2.4c-.8.3-1.2.9-1.2 1.7v.4"/><circle cx="11.5" cy="17.2" r="1" fill={c} stroke="none"/></>,
    };
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{P[n]}</svg>;
  };

  // ── Halo de foco: un rectángulo azul que entra con overshoot y se retira solo ──────────────
  const Foco = ({ x, y, w, h, from, dur=2.4, r=16 })=>{
    const p = clamp((t-from)/0.34,0,1);
    const out = clamp((t-from-dur)/0.45,0,1);
    if (p <= 0 || out >= 1) return null;
    const e = Easing.easeOutBack(p);
    return (
      <div style={{position:'absolute', left:x-8, top:y-8, width:w+16, height:h+16, borderRadius:r,
                   border:'3px solid #0085FF', boxShadow:'0 0 0 7px rgba(0,133,255,0.10), 0 0 34px rgba(0,133,255,0.38)',
                   opacity:p*(1-out), transform:`scale(${lerp(1.05,1,e)})`, zIndex:34, pointerEvents:'none'}}/>
    );
  };

  // ── Entrada del menú lateral (26 px) con su globito de cuenta (18 px) ──────────────────────
  const Entrada = ({ i, icono, texto, cuenta, activa })=>{
    const e = Easing.easeOutCubic(clamp((t-0.25-i*T.menuStep)/0.45,0,1));
    const g = Easing.easeOutBack(clamp((t-T.globitos-i*T.globoStep)/0.4,0,1));
    return (
      <div style={{display:'flex', alignItems:'center', gap:13, height:46, padding:'0 16px', borderRadius:10,
                   background:activa ? 'rgba(0,133,255,0.10)' : 'transparent',
                   opacity:e, transform:`translateX(${(1-e)*-14}px)`}}>
        <Ico n={icono} s={22} c={activa ? '#0085FF' : '#64748B'}/>
        <span className="f-plex" style={{flex:1, fontSize:26, fontWeight:activa ? 700 : 500,
                                         color:activa ? '#0F172A' : '#475569', whiteSpace:'nowrap',
                                         overflow:'hidden', textOverflow:'ellipsis'}}>{texto}</span>
        {cuenta && g > 0 && (
          <span className="f-mono" style={{minWidth:34, height:28, padding:'0 9px', borderRadius:99,
                                           background:'#E2E8F0', color:'#475569', fontSize:18, fontWeight:700,
                                           display:'inline-flex', alignItems:'center', justifyContent:'center',
                                           transform:`scale(${lerp(0.5,1,g)})`}}>{cuenta}</span>
        )}
      </div>
    );
  };

  // ── Fila compacta (alto 68). Aquí es contexto: se recorre en la escena 02 ─────────────────
  const Fila = ({ i, clave, titulo, tipo, tipoCol, quien, foto, vence, estadoCol, prio })=>{
    const e = Easing.easeOutCubic(clamp((t-0.9-i*T.filaStep)/0.5,0,1));
    return (
      <div style={{display:'flex', alignItems:'center', gap:16, height:68, padding:'0 20px',
                   borderBottom:'1px solid #EEF2F6', opacity:e, transform:`translateY(${(1-e)*10}px)`}}>
        <span style={{width:26, height:26, borderRadius:99, border:`3px solid ${estadoCol}`, flexShrink:0}}/>
        <span className="f-plex" style={{flex:1, fontSize:21, fontWeight:500, color:'#0F172A',
                                         whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{titulo}</span>
        <span className="f-plex" style={{fontSize:16, fontWeight:600, color:tipoCol, background:`${tipoCol}1A`,
                                         borderRadius:7, padding:'4px 10px'}}>{tipo}</span>
        <span className="f-plex" style={{width:104, textAlign:'right', fontSize:17, color:vence === 'Hoy' ? '#B45309' : '#94A3B8'}}>{vence}</span>
        {prio
          ? <span className="f-plex" style={{width:70, fontSize:16, fontWeight:700, color:'#B42318'}}>{prio}</span>
          : <span style={{width:70}}/>}
        <span className="f-mono" style={{width:78, fontSize:17, color:'#94A3B8'}}>{clave}</span>
        <img src={foto} alt={quien} style={{width:34, height:34, borderRadius:99, objectFit:'cover', flexShrink:0}}/>
        <Ico n="dots" s={22} c="#CBD5E1"/>
      </div>
    );
  };

  const FILAS = [
    { clave:'NTO-14', titulo:'Revisar etiquetas de producto',        tipo:'Error',  tipoCol:'#DC2626', quien:'Marta',  foto:'../_engine/assets/avatares/marta.jpg',  vence:'Hoy',    estadoCol:'#0085FF', prio:'Alta' },
    { clave:'NTO-21', titulo:'Importar catálogo desde el proveedor', tipo:'Tarea',  tipoCol:'#0085FF', quien:'Javier', foto:'../_engine/assets/avatares/javier.jpg', vence:'Mañana', estadoCol:'#94A3B8' },
    { clave:'NTO-08', titulo:'Pasarela de pago en pruebas',          tipo:'Tarea',  tipoCol:'#0085FF', quien:'Ana',    foto:'../_engine/assets/avatares/nuria.jpg',  vence:'18 ago', estadoCol:'#0085FF' },
    { clave:'NTO-33', titulo:'Etiquetas duplicadas en el buscador',  tipo:'Error',  tipoCol:'#DC2626', quien:'Marta',  foto:'../_engine/assets/avatares/marta.jpg',  vence:'Ayer',   estadoCol:'#94A3B8', prio:'Urgente' },
    { clave:'NTO-05', titulo:'Fotos de la portada',                  tipo:'Mejora', tipoCol:'#7C3AED', quien:'Ana',    foto:'../_engine/assets/avatares/nuria.jpg',  vence:'21 ago', estadoCol:'#F59E0B' },
    { clave:'NTO-40', titulo:'Aviso de cookies',                     tipo:'Tarea',  tipoCol:'#0085FF', quien:'Javier', foto:'../_engine/assets/avatares/javier.jpg', vence:'',       estadoCol:'#94A3B8' },
    { clave:'NTO-27', titulo:'Etiquetas con acentos rotos',          tipo:'Error',  tipoCol:'#DC2626', quien:'Marta',  foto:'../_engine/assets/avatares/marta.jpg',  vence:'Hoy',    estadoCol:'#0085FF' },
    { clave:'NTO-12', titulo:'Alta del transportista',               tipo:'Tarea',  tipoCol:'#0085FF', quien:'Ana',    foto:'../_engine/assets/avatares/nuria.jpg',  vence:'25 ago', estadoCol:'#94A3B8' },
  ];

  // ── Los cuatro botones de vista. SOLO ICONO: el nombre vive en el rótulo flotante ──────────
  const VISTAS = [
    { ico:'compacta', title:'Vista compacta', beat:T.v1 },
    { ico:'kanban',   title:'Vista kanban',   beat:T.v2 },
    { ico:'tabla',    title:'Vista tabla',    beat:T.v3 },
    { ico:'gantt',    title:'Vista Gantt',    beat:T.v4 },
  ];

  // El cursor solo PASA por encima: no hay clic en toda la escena.
  const curFrames = [
    { t:0,            x:1810, y:1050 },
    { t:T.raton-0.5,  x:1810, y:1050 },
    { t:T.v1,         x:BTN[0]+31, y:BTNCY },
    { t:T.v2,         x:BTN[1]+31, y:BTNCY },
    { t:T.v3,         x:BTN[2]+31, y:BTNCY },
    { t:T.v4,         x:BTN[3]+31, y:BTNCY },
    { t:T.primera,    x:BTN[0]+31, y:BTNCY },
    { t:T.llevas,     x:BTN[0]+31, y:BTNCY },
    { t:T.llevas+1.2, x:1810, y:1050 },
  ];

  return (
    <SlideCanvas variant="light">
      <DinaupLogo size={34} style={{position:'absolute', left:56, top:46, opacity:0.45, zIndex:6}}/>
      <div style={{opacity:lerp(1, 0.25, clamp((t-T.llevas)/1.6,0,1))}}>
        <DemoHeader t={t} eyebrow="TAREAS · LAS CUATRO VISTAS" title={<span>Cuatro maneras de mirar lo mismo</span>}/>
      </div>

      {/* ═════════ LA VENTANA — entera y quieta desde el fotograma 0 ═════════ */}
      <div style={{position:'absolute', left:WX, top:WY, width:WW, height:860, borderRadius:16,
                   overflow:'hidden', background:'#fff', border:'1px solid #E2E8F0',
                   boxShadow:'0 34px 82px rgba(15,23,42,0.14)', opacity:appOp,
                   filter:velo > 0.1 ? 'saturate(0.5)' : 'none'}}>
        <BrowserChrome url="play.dinaup.com/App/ToDo/8f3c1d92-4b77-4e0a-9a51-2c6de07b1f44/To-Do" title="Tareas — Nueva tienda online"/>

        <div style={{display:'flex', height:784, background:'#F6F8FB'}}>
          {/* ── Menú lateral ── */}
          <div style={{width:SBW, background:'#fff', borderRight:'1px solid #E8EDF3', padding:'16px 10px',
                       display:'flex', flexDirection:'column'}}>
            <div style={{display:'flex', alignItems:'center', gap:10, height:44, margin:'0 6px 12px',
                         padding:'0 14px', borderRadius:10, background:'#F1F5F9'}}>
              <Ico n="lupa" s={20} c="#94A3B8"/>
              <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>Buscar proyecto…</span>
            </div>
            <Entrada i={0} icono="home"   texto="Inicio"/>
            <Entrada i={1} icono="dia"    texto="Mi día"          cuenta="7"/>
            <Entrada i={2} icono="lista"  texto="Todas las tareas"/>
            <div className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'2.4px', color:'#94A3B8',
                                            padding:'20px 16px 8px'}}>PROYECTOS</div>
            <Entrada i={3} icono="folder" texto="Nueva tienda online" cuenta="12" activa/>
            <Entrada i={4} icono="folder" texto="Reforma del obrador" cuenta="4"/>
            <Entrada i={5} icono="folder" texto="Web corporativa"     cuenta="3"/>
            <div style={{flex:1}}/>
            {/* Al pie va «Proyecto». «Configuración» NO: solo la ve un administrador, y la
                persona del mock es una miembro del equipo. */}
            <Entrada i={6} icono="folder" texto="Proyecto"/>
          </div>

          {/* ── Zona principal ── */}
          <div style={{width:MW, background:'#fff'}}>
            {/* Cabecera del proyecto (alto 92) */}
            <div style={{display:'flex', alignItems:'center', gap:18, height:92, padding:'0 24px',
                         borderBottom:'1px solid #EEF2F6'}}>
              <span style={{width:44, height:44, borderRadius:12, background:'rgba(0,133,255,0.10)',
                            display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
                <Ico n="folder" s={26} c="#0085FF"/>
              </span>
              <span className="f-plex" style={{fontSize:36, fontWeight:700, color:'#0F172A', letterSpacing:'-0.02em'}}>Nueva tienda online</span>
              <span className="f-mono" style={{fontSize:20, fontWeight:700, color:'#475569', background:'#EEF2F6',
                                               borderRadius:8, padding:'5px 12px'}}>NTO</span>
              <div style={{flex:1}}/>
              <div style={{display:'flex'}}>
                {['marta','javier','nuria'].map((a,i)=>(
                  <img key={a} src={`../_engine/assets/avatares/${a}.jpg`} alt="" style={{width:40, height:40, borderRadius:99,
                        objectFit:'cover', border:'2px solid #fff', marginLeft:i === 0 ? 0 : -10}}/>
                ))}
              </div>
              <span style={{display:'inline-flex', alignItems:'center', gap:9, padding:'11px 20px', borderRadius:10,
                            background:'#0085FF', boxShadow:'0 8px 20px rgba(0,133,255,0.30)'}}>
                <Ico n="mas" s={20} c="#fff" sw={2.6}/>
                <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#fff'}}>Nueva tarea</span>
              </span>
              <Ico n="gear" s={26} c="#94A3B8"/>
            </div>

            {/* Barra: los cuatro botones de vista + Filtros + buscar (alto 84) */}
            <div style={{display:'flex', alignItems:'center', gap:12, height:84, padding:'0 24px',
                         borderBottom:'1px solid #EEF2F6', background:'#FBFCFE'}}>
              {VISTAS.map((v,i)=>{
                const activo = i === 0;
                const apaga = i > 0 ? priP*0.55 : 0;                       // «se abre la primera»
                const sube  = i === 0 ? priE : 0;
                return (
                  <span key={v.title} style={{width:62, height:62, borderRadius:12,
                        display:'inline-flex', alignItems:'center', justifyContent:'center',
                        background:activo ? `rgba(0,133,255,${lerp(0.10,0.16,sube)})` : '#fff',
                        border:`1px solid ${activo ? 'rgba(0,133,255,0.35)' : '#E2E8F0'}`,
                        boxShadow:activo && sube > 0 ? `0 8px 22px rgba(0,133,255,${0.28*sube})` : 'none',
                        opacity:1-apaga, transform:`scale(${lerp(1, 1.06, botE*(i === 0 ? 1 : 0.5))})`}}>
                    <Ico n={v.ico} s={34} c={activo ? '#0085FF' : '#64748B'} sw={1.9}/>
                  </span>
                );
              })}
              <span style={{width:1, height:40, background:'#E2E8F0', margin:'0 8px'}}/>
              <span style={{display:'inline-flex', alignItems:'center', gap:9, height:52, padding:'0 18px',
                            borderRadius:10, border:'1px solid #E2E8F0', background:'#fff'}}>
                <Ico n="filtro" s={22} c="#64748B"/>
                <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#334155'}}>Filtros</span>
              </span>
              <span style={{flex:1, display:'inline-flex', alignItems:'center', gap:10, height:52, padding:'0 16px',
                            borderRadius:10, border:'1px solid #E2E8F0', background:'#fff'}}>
                <Ico n="lupa" s={22} c="#94A3B8"/>
                <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>Buscar… (escribe nat: @ tipo: estado: o abiertas)</span>
              </span>
              <Ico n="help" s={24} c="#94A3B8"/>
            </div>

            {/* Fila de chips: «Abiertas» viene puesto de fábrica. Sin botón de limpiar. */}
            <div style={{display:'flex', alignItems:'center', gap:10, height:60, padding:'0 24px',
                         borderBottom:'1px solid #F1F5F9'}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:8, height:40, padding:'0 16px',
                            borderRadius:20, background:'#DCFCE7'}}>
                <span className="f-plex" style={{fontSize:18, fontWeight:600, color:'#15803D'}}>Abiertas</span>
                <span className="f-plex" style={{fontSize:17, color:'#15803D', opacity:0.55}}>✕</span>
              </span>
            </div>

            {/* La lista compacta: la que se abre al entrar */}
            <div>
              {FILAS.map((f,i)=> <Fila key={f.clave} i={i} {...f}/>)}
            </div>
          </div>
        </div>
      </div>

      {/* ═════════ FOCOS · uno por beat, nunca dos a la vez ═════════ */}
      <Foco from={T.menu}     x={WX+8}  y={AY+8}  w={SBW-8} h={768} r={14} dur={4.6}/>
      <Foco from={T.cabecera} x={MX+10} y={AY+8}  w={640}   h={76}  r={12} dur={2.6}/>
      <Foco from={T.nueva}    x={MX+960} y={AY+22} w={196}  h={48}  r={12} dur={2.2}/>
      <Foco from={T.botones}  x={BTN[0]-6} y={BTNY-6} w={294} h={74} r={16} dur={12.2}/>

      {/* ═════════ Los rótulos flotantes: el `title` de cada botón ═════════ */}
      {VISTAS.map((v,i)=>{
        const fin = i < 3 ? VISTAS[i+1].beat + 0.30 : T.cuatro + 2.10;
        const p = clamp((t-v.beat)/0.28,0,1);
        const out = clamp((t-fin)/0.30,0,1);
        if (p <= 0 || out >= 1) return null;
        const e = Easing.easeOutBack(p);
        return (
          <div key={v.title} style={{position:'absolute', left:BTN[i]+31, top:406, zIndex:44,
                       transform:`translate(-50%, ${(1-e)*-8}px) scale(${lerp(0.82,1,e)})`,
                       opacity:p*(1-out), pointerEvents:'none'}}>
            <span style={{display:'inline-block', padding:'9px 18px', borderRadius:10,
                          background:'rgba(15,23,42,0.94)', boxShadow:'0 12px 30px rgba(15,23,42,0.35)'}}>
              <span className="f-plex" style={{fontSize:22, fontWeight:600, color:'#fff', whiteSpace:'nowrap'}}>{v.title}</span>
            </span>
          </div>
        );
      })}

      {/* «Cuatro maneras de mirar»: el recuento, una sola vez y quieto */}
      {clamp((t-T.cuatro)/0.5,0,1) > 0 && velo < 0.4 && (
        <div style={{position:'absolute', left:1330, top:352, zIndex:44,
                     opacity:clamp((t-T.cuatro)/0.5,0,1)*(1-clamp((t-T.primera-1.6)/0.5,0,1)),
                     transform:`translateY(${(1-Easing.easeOutBack(clamp((t-T.cuatro)/0.5,0,1)))*-10}px)`}}>
          <div style={{display:'flex', alignItems:'baseline', gap:14, padding:'12px 24px', borderRadius:14,
                       background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 16px 40px rgba(15,23,42,0.14)'}}>
            <span className="f-plex" style={{fontSize:54, fontWeight:800, color:'#0085FF', lineHeight:1}}>4</span>
            <span className="f-plex" style={{fontSize:24, fontWeight:600, color:'#334155'}}>vistas · las mismas tareas</span>
          </div>
        </div>
      )}

      {/* «al entrar se abre la primera» */}
      {priP > 0 && velo < 0.4 && (
        <div className="f-plex" style={{position:'absolute', left:BTN[0]-4, top:468, zIndex:44,
                     fontSize:22, fontWeight:700, color:'#0085FF',
                     opacity:priE*(1-clamp((t-T.llevas)/0.6,0,1)), transform:`translateY(${(1-priE)*8}px)`}}>
          al entrar, esta
        </div>
      )}

      <ScriptedCursor frames={curFrames} t={t}/>

      {/* ═════════ LA ÚNICA COSA · promesa ═════════ */}
      {velo > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:velo, zIndex:50}}/>}
      {u1E > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:398, textAlign:'center', zIndex:52,
                     fontSize:74, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
                     opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          La dirección es el filtro,
        </div>
      )}
      {u2E > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:508, textAlign:'center', zIndex:52,
                     fontSize:74, fontWeight:800, letterSpacing:'-0.03em',
                     opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">y se comparte pegándola.</span>
        </div>
      )}
      {saE > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:678, textAlign:'center', zIndex:52,
                     fontSize:36, fontWeight:500, color:'#64748B',
                     opacity:saE, transform:`translateY(${(1-saE)*12}px)`}}>
          Empecemos por la lista con la que abre.
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaTV01 });