// === Escena 08 — "El foso" (RECAP + ECO) ===
// Duración real del mp3: 42.5s. SlideCanvas variant="promise".
// Dos mitades: (1) recap doctrinal de 3 ideas sincronizadas con "Uno/Dos/Tres";
// (2) EL FOSO — panel "Montarlo tú" con 5 costes en cascada que un sello verde
// "YA ESTÁ HECHO" tacha, y la PILA de 5 capas que se ensambla DEBAJO de una
// tarjeta "TU NEGOCIO" (el golpe "menuda infraestructura" es verla toda junta).
// Cierra con el bookend ("tan fiable como lo que tiene debajo" → "ya sabes lo que
// hay debajo") + logo, pantalla fija. Es el ECO: rima con la escena 01.
// LOCUCIÓN (audio/escena-08.mp3): "Recuerda lo que acabas de ver. Uno: todo está
// doblado. Proveedor, país, servidor, archivos. Ningún punto único que se pueda
// romper. Dos: tus archivos, aceptados solo cuando están a salvo dos veces. Tres:
// todo vigilado, día y noche. Ahora piensa en montar esto tú. Contratos con varias
// empresas. Ingenieros. Copias entre países. Años de trabajo. Y una factura enorme,
// cada mes. En Dinaup, ya está hecho. Y está debajo de tu negocio, desde el primer
// día. Un software es tan fiable como lo que tiene debajo. Y ahora ya sabes lo que
// hay debajo."
function EscenaIN08({ t }){
const T = {
head: 0.37, // "Recuerda lo que acabas de ver" → cabecera recap "Lo que acabas de ver"
idea1: 3.24, // "todo está doblado" → tarjeta idea 1
gemelos: 4.73, // "Proveedor, país, servidor" → 4 mini-gemelos DOBLADOS bajo idea 1
remate1: 8.15, // "Ningún punto único" → píldora remate "Ni un punto único"
idea2: 13.98, // "a salvo dos veces" → tarjeta idea 2 (✓✓)
idea3: 17.10, // "todo vigilado" → tarjeta idea 3
fosoIn: 20.38, // "piensa en montar esto tú" → las 3 ideas se apartan; entra panel "Montarlo tú"
coste1: 22.54, // "Contratos con varias empresas" → coste 1
coste2: 24.34, // "Ingenieros" → coste 2
coste3: 25.13, // "Copias entre países" → coste 3
coste4: 27.02, // "Años de trabajo" → coste 4
coste5: 28.61, // "una factura enorme" → coste 5 (naranja)
hecho: 31.19, // "En Dinaup, ya está hecho" → sello verde cruza; los costes se tachan
pila: 33.76, // "debajo de tu negocio" → "TU NEGOCIO" se posa sobre una PILA de 5 capas
bookend:37.72, // "tan fiable como lo que tiene debajo" → subtítulo BOOKEND
cierre: 40.73, // "ya sabes lo que hay debajo" → logo + cierre (pantalla fija hasta el final)
};
const C = {
blue:'#0085FF', green:'#10B981', green2:'#56E16A', orange:'#FB8C00',
ink:'#0F172A', gray:'#64748B', gray2:'#94A3B8', border:'#E2E8F0',
};
// ============================================================
// Transiciones de fase (salidas dignas: fade + slide, nunca en seco)
// ============================================================
const recapOut = Easing.easeOutCubic(clamp((t - T.fosoIn)/0.55, 0, 1));
const recapOp = 1 - recapOut; // las 3 ideas se apartan
const fosoIn = Easing.easeOutCubic(clamp((t - T.fosoIn)/0.6, 0, 1));
// El foso se despeja ANTES de que entre la pila (T.pila=33.76): si no, se solapan.
const fosoOut = Easing.easeOutCubic(clamp((t - (T.pila - 0.6))/0.45, 0, 1));
const fosoOp = fosoIn * (1 - fosoOut); // el foso entra y luego cede a la pila
// ============================================================
// GLYPHS mini (atrezzo: se perciben, no se leen)
// ============================================================
const glyph = (kind, col)=>{
if (kind === 'cloud') return (
);
if (kind === 'pin') return (
);
if (kind === 'server') return (
);
return ( // doc
);
};
const costeGlyph = (kind, col)=>{
if (kind === 'contract') return (
);
if (kind === 'team') return (
);
if (kind === 'copy') return (
);
if (kind === 'calendar') return (
);
return ( // invoice
);
};
// ============================================================
// Datos de la fase RECAP
// ============================================================
const GEMELOS = [
{ kind:'cloud', label:'PROVEEDOR' },
{ kind:'pin', label:'PAÍS' },
{ kind:'server', label:'SERVIDOR' },
{ kind:'doc', label:'ARCHIVOS' },
];
// Un gemelo: dos tiles idénticos con línea de sincronía viva y un pulso que
// viaja de A a B UNA vez (el motivo conductor "doblado / en tiempo real").
const Gemelo = (g, i)=>{
const appear = T.gemelos + i*0.26;
const p = clamp((t - appear)/0.5, 0, 1);
if (p <= 0) return ;
const e = Easing.easeOutCubic(p);
const travP = clamp((t - (appear+0.28))/0.85, 0, 1);
const showDot = travP > 0.02 && travP < 0.98;
const dotX = lerp(94, 138, Easing.easeInOutCubic(travP));
const tile = (left)=>(
{glyph(g.kind, C.gray)}
);
return (
{tile(40)}
{tile(134)}
{showDot && }
{g.label}
);
};
// Ideas 2 y 3
const check = (delay)=>{
const p = clamp((t - (T.idea2 + delay))/0.5, 0, 1);
const dE = Easing.easeInOutCubic(clamp((t - (T.idea2 + delay + 0.12))/0.4, 0, 1));
const e = Easing.easeOutBack(p);
if (p <= 0) return ;
return (