/* ==========================================================================================
   Lexia · Video de portada (hero) — motion graphics en vivo, solo HTML + CSS
   ------------------------------------------------------------------------------------------
   LÍNEA DE TIEMPO: un bucle de 25 s con cinco escenas de 5 s. La escena k empieza en el segundo 5k.
     01 Ingreso 0–5 · 02 Carga y validación 5–10 · 03 Generación 10–15 · 04 Aprobación 15–20 · 05 Bitácora 20–25
   Cada escena aparece 0,56 s antes de su segundo de inicio y sale entre 4,31 y 5,06 s después (sube 40 px y se achica a 0,97).
   Lo principal de la escena nueva llega antes de que termine la salida de la anterior: nunca queda la pantalla vacía.
   Un solo panel (.fpuente) cruza las escenas 1 a 4: la caja de Lexia se abre en el panel de carga, se compacta en el
   informe CMF y se abre en el panel de aprobación. Nada queda a menos de 24 px de otra pieza ni del borde.

   CÓMO SE ESCRIBE UN TIEMPO
   · Dentro de una escena, cada elemento con la clase .a dice cuándo entra con --d (segundos desde el inicio de su escena)
     y cómo con --an (nombre de la animación). Ejemplo: style="--an:f-up;--d:.35s".
   · Todas las animaciones duran el bucle completo (--L: 25s) y se repiten. En los @keyframes, 1 s = 4 %.
   · Para cambiar el ritmo de todo: herramientas/escalar_tiempos.mjs (multiplica --t0, --d, el bucle y los tiempos fijos).
   · Dentro de un @keyframes, la curva de cada tramo se escribe con su valor (cubic-bezier/linear): Chrome no acepta var() ahí.
   · Las animaciones compartidas (f-up, f-in, f-out, f-pop, f-l, f-bar, f-sk, f-word) hacen su movimiento al inicio,
     se quedan quietas hasta el 50 % (12,5 s después, cuando su escena ya salió) y vuelven a su estado inicial sin verse.
   · El panel puente (.fpuente), el cursor y la escena 1 usan @keyframes propios con tiempos absolutos del bucle.
     Los de la escena 1 se calculan con herramientas/curvas_ingesta.mjs y se pegan con herramientas/pegar_curvas.mjs:
     cada archivo viaja por la curva de su línea hasta entrar en Lexia y la línea se recoge detrás de él.

   RITMO (del video explicativo aprobado): pulso de 0,5 s; seno in-out para escenas y bloques; resorte ζ 0,8 para
   llegadas; expo-out solo para el texto dentro de máscara. La información nunca se congela: mientras se lee, siguen
   moviéndose barras, estados, brillos y la cámara (respira ±0,75 % y se acerca 2 % antes de cada cambio de escena,
   con el máximo 0,25 s ya dentro del cambio).
   ========================================================================================== */

.film{--L:25s;width:min(1120px,100%);margin-top:64px;text-align:left}
.filmf{padding:10px}
.fview{--fpan:var(--bg2);--f-sin:cubic-bezier(.37,0,.63,1);--f-expo:cubic-bezier(.16,1,.3,1);--f-res:linear(0,.18 5%,.52 13%,.8 22%,.95 32%,1.012 42%,1.015 50%,1.007 62%,1.001 76%,1);
  position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--film-bg)}
/* superficie de las piezas: un tono sobre el fondo para que se lean los paneles y el puente (oscuro #15132A; claro blanco sobre #F6F6F9) */
html.claro .fview{--fpan:#FFFFFF;background:#F6F6F9}
.fcan{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;font-family:var(--sans);color:var(--tx)}
.fcan::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;opacity:.55;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.fcan::after{content:"";position:absolute;left:50%;top:50%;width:900px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--film-glow),transparent);pointer-events:none}

/* ---------- Cámara: respira (capa compuesta, nunca re-rasteriza el texto) y se acerca antes de cada cambio ---------- */
/* deriva continua en elipse (±5 px, ±4 px, escala 1,0015–1,0075) que da una vuelta por bucle: nunca se detiene, así no hay cuadros repetidos */
.fcam{position:absolute;inset:0;will-change:transform;animation:f-cam var(--L) linear infinite}
@keyframes f-cam{0%{transform:translate(0px,-4px) scale(1.00702)}8.333%{transform:translate(2.5px,-3.46px) scale(1.0075)}16.667%{transform:translate(4.33px,-2px) scale(1.00717)}25%{transform:translate(5px,0px) scale(1.00612)}33.333%{transform:translate(4.33px,2px) scale(1.00464)}41.667%{transform:translate(2.5px,3.46px) scale(1.00312)}50%{transform:translate(0px,4px) scale(1.00198)}58.333%{transform:translate(-2.5px,3.46px) scale(1.0015)}66.667%{transform:translate(-4.33px,2px) scale(1.00183)}75%{transform:translate(-5px,0px) scale(1.00288)}83.333%{transform:translate(-4.33px,-2px) scale(1.00436)}91.667%{transform:translate(-2.5px,-3.46px) scale(1.00588)}100%{transform:translate(0px,-4px) scale(1.00702)}}
/* ciclo de 5 s (una escena) desfasado 0,5 s: quieta hasta 2,88 s de la escena, sube a 2 % hasta 4,63 s (0,31 s dentro del cambio) y se suelta en 0,88 s */
.fpush{position:absolute;inset:0;animation:f-push 5s var(--f-sin) .5s infinite both}
@keyframes f-push{0%,47.5%{transform:none}82.5%{transform:scale(1.02)}100%{transform:none}}

/* ---------- Escenas y elementos animados ---------- */
/* la escena aparece 0,56 s antes de su segundo de inicio (0,38 s de fundido; llega de 1,03 a 1 en 1 s) y sale de 4,31 a 5,06 s */
.sc{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;animation:f-escena var(--L) var(--f-sin) calc(var(--t0) - .5625s) infinite both}
@keyframes f-escena{0%{opacity:0;transform:scale(1.03)}1.5%{opacity:1}4%{transform:none}19.5%{opacity:1;transform:none}22.5%,100%{opacity:0;transform:translateY(-40px) scale(.97)}}
.fview .a{animation-name:var(--an,f-up);animation-duration:var(--L);animation-timing-function:var(--ez,var(--f-sin));animation-delay:calc(var(--t0,0s) + var(--d,0s));animation-iteration-count:infinite;animation-fill-mode:both}
/* lo que desaparece dentro de su escena (Validando, Generando, pendiente, cursor): en reposo no se ve */
.fview .sale{opacity:0}

@keyframes f-up{0%{opacity:0;transform:translateY(26px)}3%,50%{opacity:1;transform:none}50.01%,100%{opacity:0;transform:translateY(26px)}}
@keyframes f-in{0%{opacity:0}1.5%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes f-out{0%{opacity:1}1.25%,50%{opacity:0}50.01%,100%{opacity:1}}
@keyframes f-pop{0%{opacity:0;transform:scale(.85)}2.5%,50%{opacity:1;transform:none}50.01%,100%{opacity:0;transform:scale(.85)}}
@keyframes f-l{0%{opacity:0;transform:translateX(-70px)}2.5%,50%{opacity:1;transform:none}50.01%,100%{opacity:0;transform:translateX(-70px)}}
@keyframes f-bar{0%{transform:scaleX(0)}5%,50%{transform:none}50.01%,100%{transform:scaleX(0)}}
@keyframes f-sk{0%{transform:scaleX(0)}2.5%,50%{transform:none}50.01%,100%{transform:scaleX(0)}}
@keyframes f-word{0%{transform:translateY(105%)}2.75%,50%{transform:none}50.01%,100%{transform:translateY(105%)}}
@keyframes f-rip{0%{opacity:0;transform:scale(.3)}.375%{opacity:.9}3.75%,100%{opacity:0;transform:scale(1.6)}}
@keyframes f-luz{0%{opacity:0}1.25%{opacity:1}3%,100%{opacity:0}}
@keyframes f-brillo{0%{transform:translateX(-120%)}4%,100%{transform:translateX(120%)}}
@keyframes f-linea{0%{transform:scaleY(0)}6.5%,50%{transform:none}50.01%,100%{transform:scaleY(0)}}
@keyframes f-flujo{to{stroke-dashoffset:-13}}

/* títulos palabra a palabra dentro de una máscara (expo-out 0,69 s, desfase 0,106 s, desde el inicio de la escena) */
.fcap{position:absolute;left:72px;top:56px;z-index:3;display:flex;align-items:baseline;gap:18px;max-width:900px}
.fcap b{font:500 18px var(--mono);letter-spacing:.12em;color:var(--iris40)}
.fcap span{font:600 34px/1.12 var(--disp);letter-spacing:-.02em}
.fcap .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.fcap .w>i{display:inline-block;font-style:normal;animation:f-word var(--L) var(--f-expo) calc(var(--t0) + var(--k,0) * .106s) infinite both}

/* brillo que cruza una pieza ya lista (la pieza necesita overflow:hidden) */
.brillo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);transform:translateX(-120%)}
html.claro .brillo{background:linear-gradient(100deg,transparent 30%,rgba(100,73,245,.07) 50%,transparent 70%)}
.fview .brillo.a{--an:f-brillo}

/* ---------- Puente: una sola pieza lleva el relato de la escena 1 a la 4 ----------
   la caja de Lexia se abre en el panel de carga → el panel se compacta en el informe CMF → el informe se abre en el panel de aprobación.
   Va debajo de cada escena; mientras Lexia está a la vista queda tapado por ella. */
.fpuente{position:absolute;z-index:1;box-sizing:border-box;left:200px;top:200px;width:880px;height:358px;border-radius:24px 6px 24px 6px;background:var(--fpan);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -50px rgba(0,0,0,.6);opacity:0;animation:f-puente var(--L) linear infinite both}
html.claro .fpuente{box-shadow:0 30px 60px -36px rgba(22,20,51,.25)}
/* 4,25 s aparece bajo Lexia · 4,31–5,19 s se abre en el panel · 9,31–10,19 s se compacta en el CMF · 14,69–15,44 s se abre en la aprobación (cuando las otras tarjetas ya se fueron) · 19,31–20,06 s sale */
@keyframes f-puente{
  0%,16.9%{left:560px;top:300px;width:200px;height:200px;border-radius:40px 10px 40px 10px;opacity:0;transform:none}
  17%{opacity:1}
  17.25%{left:560px;top:300px;width:200px;height:200px;border-radius:40px 10px 40px 10px;opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1)}
  20.75%,37.25%{left:200px;top:200px;width:880px;height:358px;border-radius:24px 6px 24px 6px;animation-timing-function:cubic-bezier(.37,0,.63,1)}
  40.75%,58.75%{left:150px;top:200px;width:304px;height:400px;border-radius:24px 6px 24px 6px;animation-timing-function:cubic-bezier(.37,0,.63,1)}
  61.75%{left:240px;top:190px;width:800px;height:344px}
  77.25%{left:240px;top:190px;width:800px;height:344px;opacity:1;transform:none;animation-timing-function:cubic-bezier(.37,0,.63,1)}
  80.25%,100%{left:240px;top:190px;width:800px;height:344px;opacity:0;transform:translateY(-40px) scale(.97)}}

/* ---------- Escena 1 · Ingreso: cada archivo entra a Lexia por su línea y la línea se recoge detrás de él ---------- */
.fcon{position:absolute;inset:0;z-index:0;pointer-events:none}
.fl{fill:none;stroke-width:2;stroke-dasharray:5 8;animation:f-flujo .8s linear infinite}
.fmk{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:100 100;animation:var(--an) var(--L) linear infinite both}
.fchip{position:absolute;left:96px;width:300px;height:60px;z-index:1}
.fchip .fa{box-sizing:border-box;width:100%;height:60px;display:flex;align-items:center;gap:12px;padding:0 22px 0 16px;border-radius:16px 4px 16px 4px;background:var(--fpan);border:1px solid var(--line2);font:500 18px var(--mono);color:var(--tx1);white-space:nowrap;transform-origin:100% 50%;animation:var(--viaje) var(--L) linear infinite both}
.fnode{position:absolute;left:560px;top:300px;z-index:3;width:200px;height:200px;border-radius:40px 10px 40px 10px;display:flex;align-items:center;justify-content:center;background:var(--fpan);isolation:isolate}
.fnode::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--lx-anillo-angulo),#3A77FF,#6449F5,#B983ED,#6449F5,#3A77FF);animation:lx-anillo-recorre 2.4s linear infinite}
.fnode::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fpan)}
.fnode .halo{position:absolute;inset:-30px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--lx-anillo-angulo),#3A77FF,#6449F5,#B983ED,#6449F5,#3A77FF);filter:blur(40px);opacity:.45;animation:lx-anillo-recorre 2.4s linear infinite}
.fnode .iso{animation:f-late var(--L) linear infinite both}
.fout{position:absolute;left:880px;z-index:2;display:flex;align-items:center;gap:14px;height:64px;padding:0 22px;border-radius:16px 4px 16px 4px;background:var(--hl);border:1px solid var(--hlb);font-size:19px;color:var(--tx);overflow:hidden}
/* conector de salida (Lexia → archivos recibidos): se dibuja de 3,06 a 3,56 s */
@keyframes f-con5{0%,12.25%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.37,0,.63,1)}14.25%,50%{stroke-dashoffset:0}50.01%,100%{stroke-dashoffset:100}}
/* generado por herramientas/curvas_ingesta.mjs — archivo 1: entra a Lexia 1.25–2.13 s (curva de 247 px + 80 px bajo el nodo) */
@keyframes f-arch1{0%,5%{transform:none;opacity:1}5.219%{transform:translate(3.1px,0.0px) scale(0.998);opacity:1.00}5.438%{transform:translate(12.4px,0.5px) scale(0.969);opacity:1.00}5.656%{transform:translate(27.4px,2.5px) scale(0.854);opacity:1.00}5.875%{transform:translate(47.0px,7.8px) scale(0.615);opacity:1.00}6.094%{transform:translate(69.1px,18.8px) scale(0.326);opacity:1.00}6.313%{transform:translate(90.9px,36.7px) scale(0.200);opacity:1.00}6.531%{transform:translate(109.9px,60.7px) scale(0.200);opacity:1.00}6.75%{transform:translate(125.2px,88.6px) scale(0.200);opacity:1.00}6.969%{transform:translate(137.7px,117.9px) scale(0.200);opacity:1.00}7.187%{transform:translate(149.7px,146.1px) scale(0.200);opacity:1.00}7.406%{transform:translate(171.4px,160.0px) scale(0.200);opacity:0.74}7.625%{transform:translate(196.1px,160.0px) scale(0.200);opacity:0.49}7.844%{transform:translate(216.5px,160.0px) scale(0.200);opacity:0.28}8.063%{transform:translate(231.6px,160.0px) scale(0.200);opacity:0.13}8.281%{transform:translate(240.9px,160.0px) scale(0.200);opacity:0.03}8.5%,50%{transform:translate(244.0px,160.0px) scale(0.200);opacity:-0.00}50.01%,100%{transform:none;opacity:1}}
@keyframes f-con1{0%,1.75%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.37,0,.63,1)}3.75%,5%{stroke-dashoffset:0;animation-timing-function:linear}5.219%{stroke-dashoffset:-1.27}5.438%{stroke-dashoffset:-5.04}5.656%{stroke-dashoffset:-11.16}5.875%{stroke-dashoffset:-19.39}6.094%{stroke-dashoffset:-29.42}6.313%{stroke-dashoffset:-40.87}6.531%{stroke-dashoffset:-53.29}6.75%{stroke-dashoffset:-66.20}6.969%{stroke-dashoffset:-79.12}7.187%{stroke-dashoffset:-91.54}7.406%{stroke-dashoffset:-100.00}7.625%{stroke-dashoffset:-100.00}7.844%{stroke-dashoffset:-100.00}8.063%{stroke-dashoffset:-100.00}8.281%{stroke-dashoffset:-100.00}8.5%{stroke-dashoffset:-100.00}50%{stroke-dashoffset:-100}50.01%,100%{stroke-dashoffset:100}}
/* archivo 2: entra a Lexia 1.63–2.50 s (curva de 185 px + 80 px bajo el nodo) */
@keyframes f-arch2{0%,6.5%{transform:none;opacity:1}6.719%{transform:translate(2.5px,0.0px) scale(0.998);opacity:1.00}6.938%{transform:translate(10.1px,0.1px) scale(0.969);opacity:1.00}7.156%{transform:translate(22.3px,0.7px) scale(0.854);opacity:1.00}7.375%{transform:translate(38.8px,2.3px) scale(0.615);opacity:1.00}7.594%{transform:translate(58.6px,5.6px) scale(0.326);opacity:1.00}7.813%{transform:translate(80.6px,11.9px) scale(0.200);opacity:1.00}8.031%{transform:translate(103.2px,22.3px) scale(0.200);opacity:1.00}8.25%{transform:translate(124.0px,37.6px) scale(0.200);opacity:1.00}8.469%{transform:translate(141.9px,56.3px) scale(0.200);opacity:1.00}8.688%{transform:translate(162.1px,69.9px) scale(0.200);opacity:1.00}8.906%{transform:translate(185.0px,70.0px) scale(0.200);opacity:0.74}9.125%{transform:translate(205.1px,70.0px) scale(0.200);opacity:0.49}9.344%{transform:translate(221.6px,70.0px) scale(0.200);opacity:0.28}9.563%{transform:translate(233.9px,70.0px) scale(0.200);opacity:0.13}9.781%{transform:translate(241.5px,70.0px) scale(0.200);opacity:0.03}10%,50%{transform:translate(244.0px,70.0px) scale(0.200);opacity:-0.00}50.01%,100%{transform:none;opacity:1}}
@keyframes f-con2{0%,2.35%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.37,0,.63,1)}4.35%,6.5%{stroke-dashoffset:0;animation-timing-function:linear}6.719%{stroke-dashoffset:-1.38}6.938%{stroke-dashoffset:-5.45}7.156%{stroke-dashoffset:-12.06}7.375%{stroke-dashoffset:-20.97}7.594%{stroke-dashoffset:-31.81}7.813%{stroke-dashoffset:-44.19}8.031%{stroke-dashoffset:-57.62}8.25%{stroke-dashoffset:-71.58}8.469%{stroke-dashoffset:-85.54}8.688%{stroke-dashoffset:-98.97}8.906%{stroke-dashoffset:-100.00}9.125%{stroke-dashoffset:-100.00}9.344%{stroke-dashoffset:-100.00}9.563%{stroke-dashoffset:-100.00}9.781%{stroke-dashoffset:-100.00}10%{stroke-dashoffset:-100.00}50%{stroke-dashoffset:-100}50.01%,100%{stroke-dashoffset:100}}
/* archivo 3: entra a Lexia 2.00–2.88 s (curva de 166 px + 80 px bajo el nodo) */
@keyframes f-arch3{0%,8%{transform:none;opacity:1}8.219%{transform:translate(2.4px,-0.0px) scale(0.998);opacity:1.00}8.438%{transform:translate(9.4px,-0.0px) scale(0.969);opacity:1.00}8.656%{transform:translate(20.7px,-0.2px) scale(0.854);opacity:1.00}8.875%{transform:translate(36.0px,-0.5px) scale(0.615);opacity:1.00}9.094%{transform:translate(54.6px,-1.4px) scale(0.326);opacity:1.00}9.313%{transform:translate(75.8px,-2.9px) scale(0.200);opacity:1.00}9.531%{transform:translate(98.7px,-5.7px) scale(0.200);opacity:1.00}9.75%{transform:translate(122.3px,-10.3px) scale(0.200);opacity:1.00}9.969%{transform:translate(145.3px,-17.1px) scale(0.200);opacity:1.00}10.188%{transform:translate(168.1px,-20.0px) scale(0.200);opacity:1.00}10.406%{transform:translate(189.3px,-20.0px) scale(0.200);opacity:0.74}10.625%{transform:translate(208.0px,-20.0px) scale(0.200);opacity:0.49}10.844%{transform:translate(223.3px,-20.0px) scale(0.200);opacity:0.28}11.063%{transform:translate(234.6px,-20.0px) scale(0.200);opacity:0.13}11.281%{transform:translate(241.6px,-20.0px) scale(0.200);opacity:0.03}11.5%,50%{transform:translate(244.0px,-20.0px) scale(0.200);opacity:-0.00}50.01%,100%{transform:none;opacity:1}}
@keyframes f-con3{0%,2.95%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.37,0,.63,1)}4.95%,8%{stroke-dashoffset:0;animation-timing-function:linear}8.219%{stroke-dashoffset:-1.42}8.438%{stroke-dashoffset:-5.64}8.656%{stroke-dashoffset:-12.49}8.875%{stroke-dashoffset:-21.70}9.094%{stroke-dashoffset:-32.93}9.313%{stroke-dashoffset:-45.74}9.531%{stroke-dashoffset:-59.64}9.75%{stroke-dashoffset:-74.10}9.969%{stroke-dashoffset:-88.55}10.188%{stroke-dashoffset:-100.00}10.406%{stroke-dashoffset:-100.00}10.625%{stroke-dashoffset:-100.00}10.844%{stroke-dashoffset:-100.00}11.063%{stroke-dashoffset:-100.00}11.281%{stroke-dashoffset:-100.00}11.5%{stroke-dashoffset:-100.00}50%{stroke-dashoffset:-100}50.01%,100%{stroke-dashoffset:100}}
/* archivo 4: entra a Lexia 2.38–3.25 s (curva de 210 px + 80 px bajo el nodo) */
@keyframes f-arch4{0%,9.5%{transform:none;opacity:1}9.719%{transform:translate(2.8px,-0.0px) scale(0.998);opacity:1.00}9.938%{transform:translate(11.0px,-0.3px) scale(0.969);opacity:1.00}10.156%{transform:translate(24.4px,-1.3px) scale(0.854);opacity:1.00}10.375%{transform:translate(42.2px,-4.3px) scale(0.615);opacity:1.00}10.594%{transform:translate(63.2px,-10.5px) scale(0.326);opacity:1.00}10.813%,50%{transform:translate(85.6px,-21.7px) scale(0.200);opacity:1.00}11.031%{transform:translate(106.9px,-38.6px) scale(0.200);opacity:1.00}11.25%{transform:translate(124.9px,-60.4px) scale(0.200);opacity:1.00}11.469%{transform:translate(139.7px,-84.5px) scale(0.200);opacity:1.00}11.688%{transform:translate(155.3px,-106.6px) scale(0.200);opacity:1.00}11.906%{transform:translate(179.5px,-110.0px) scale(0.200);opacity:0.74}12.125%{transform:translate(201.5px,-110.0px) scale(0.200);opacity:0.49}12.344%{transform:translate(219.6px,-110.0px) scale(0.200);opacity:0.28}12.562%{transform:translate(233.0px,-110.0px) scale(0.200);opacity:0.13}12.781%{transform:translate(241.2px,-110.0px) scale(0.200);opacity:0.03}13%{transform:translate(244.0px,-110.0px) scale(0.200);opacity:-0.00}50.01%,100%{transform:none;opacity:1}}
@keyframes f-con4{0%,3.55%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.37,0,.63,1)}5.55%,9.5%{stroke-dashoffset:0;animation-timing-function:linear}9.719%{stroke-dashoffset:-1.33}9.938%{stroke-dashoffset:-5.26}10.156%{stroke-dashoffset:-11.64}10.375%{stroke-dashoffset:-20.22}10.594%{stroke-dashoffset:-30.68}10.813%{stroke-dashoffset:-42.62}11.031%{stroke-dashoffset:-55.57}11.25%{stroke-dashoffset:-69.04}11.469%{stroke-dashoffset:-82.51}11.688%{stroke-dashoffset:-95.46}11.906%{stroke-dashoffset:-100.00}12.125%{stroke-dashoffset:-100.00}12.344%{stroke-dashoffset:-100.00}12.562%{stroke-dashoffset:-100.00}12.781%{stroke-dashoffset:-100.00}13%{stroke-dashoffset:-100.00}50%{stroke-dashoffset:-100}50.01%,100%{stroke-dashoffset:100}}
/* Lexia late al recibir cada archivo (1.85 · 2.23 · 2.55 · 2.98 s) */
@keyframes f-late{0%{transform:none}7.156%{transform:scale(1.0000)}7.406%{transform:scale(1.0000)}7.656%{transform:scale(1.0112)}7.906%{transform:scale(1.0337)}8.156%{transform:scale(1.0450)}8.406%{transform:scale(1.0337)}8.656%{transform:scale(1.0112)}8.906%{transform:scale(1.0000)}9.156%{transform:scale(1.0112)}9.406%{transform:scale(1.0337)}9.656%{transform:scale(1.0450)}9.906%{transform:scale(1.0337)}10.156%{transform:scale(1.0112)}10.406%{transform:scale(1.0088)}10.656%{transform:scale(1.0311)}10.906%{transform:scale(1.0448)}11.156%{transform:scale(1.0362)}11.406%{transform:scale(1.0139)}11.656%{transform:scale(1.0002)}11.906%{transform:scale(1.0000)}12.156%{transform:scale(1.0112)}12.406%{transform:scale(1.0337)}12.656%{transform:scale(1.0450)}12.906%{transform:scale(1.0337)}13.156%{transform:scale(1.0112)}13.406%{transform:scale(1.0000)}13.656%{transform:scale(1.0000)}100%{transform:none}}

/* ---------- Escena 2 · Carga y validación (el panel es el puente .p12) ---------- */
.fpanel{position:absolute;box-sizing:border-box;border-radius:24px 6px 24px 6px;background:var(--fpan);border:1px solid var(--line2);box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
html.claro .fpanel{box-shadow:0 30px 60px -36px rgba(22,20,51,.25)}
.fpanel.vacio,html.claro .fpanel.vacio{background:none;border-color:transparent;box-shadow:none}
.fhead{display:flex;align-items:center;gap:18px;height:84px;padding:0 28px}
.frow2{position:relative;display:flex;align-items:center;gap:16px;height:64px;padding:0 28px;border-top:1px solid var(--line);font-size:20px}
.frow2 .nm{width:200px}
.frow2 .tr2{flex:1;height:6px;border-radius:3px;background:var(--s3);overflow:hidden;position:relative}
.frow2 .tr2 i{position:absolute;inset:0;border-radius:3px;background:var(--okI);transform-origin:0 50%}
.frow2 .stw{position:relative;width:170px;height:28px;font:500 16px var(--mono)}
.frow2 .stw span{position:absolute;right:0;top:0;display:flex;align-items:center;gap:10px;white-space:nowrap}
.frow2 .luz{position:absolute;inset:0 1px;z-index:-1;background:linear-gradient(90deg,rgba(36,161,72,.16),transparent 75%);opacity:0}
.fview .frow2 .luz.a{--an:f-luz}

/* ---------- Escena 3 · Generación (la tarjeta CMF es el puente .p34) ---------- */
.rcard{position:absolute;top:200px;width:304px;height:400px;padding:28px;overflow:hidden}
.rcard .rh{display:flex;align-items:center;gap:12px;font:600 24px var(--disp)}
.rcard .sk{height:10px;border-radius:5px;background:var(--s3);margin-top:16px;transform-origin:0 50%}
.rcard .rf{position:absolute;left:28px;right:28px;bottom:26px;display:flex;align-items:center;justify-content:space-between;font:500 15px var(--mono);color:var(--tx3)}
.rcard .rf>span:first-child{white-space:nowrap}
.rcard .rf .st{position:relative;width:112px;height:20px}
.rcard .rf .st span{position:absolute;right:0;top:0;display:flex;align-items:center;gap:8px;white-space:nowrap}

/* ---------- Escena 4 · Aprobación (el panel es el puente .p34) ---------- */
.fbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border-radius:10px 0 10px 0;font:500 20px var(--lx-fuente);background:#6449F5;color:#fff;overflow:hidden}
.fbtn.sec{background:var(--lx-b-secundario);color:var(--lx-b-texto-interactivo)}
.fbtn .l2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#198038;color:#fff}
.fcur{position:absolute;left:384px;top:462px;z-index:5;width:34px;height:34px;animation:f-cursor var(--L) linear infinite both}
.fcur svg{display:block;width:34px;height:34px;animation:f-pulso 2.6s ease-in-out infinite alternate}
/* entra a los 15,5 s, llega al botón en 16,69 s, hace clic en 16,73 s y se aparta despacio mientras se lee */
@keyframes f-cursor{
  0%,62%{opacity:0;transform:translate(260px,180px)}
  62.25%{opacity:1;transform:translate(260px,180px);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  66.75%{transform:translate(0,0);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  66.9%{transform:translate(0,0)}
  67.5%{transform:translate(0,0) scale(.88);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  68.1%{transform:translate(0,0)}
  68.5%{opacity:1;transform:translate(0,0);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  77%,100%{opacity:1;transform:translate(36px,28px)}}
/* pulso de mano: desvío máximo de unos 3 px, nunca quieto */
@keyframes f-pulso{0%{translate:0 0}30%{translate:2.2px -1.4px}55%{translate:-.8px 1.6px}80%{translate:1.4px .9px}100%{translate:-1.2px -.6px}}
.fripple{position:absolute;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:3px solid #9B9CFD;z-index:4}
.fview .fripple.a{--an:f-rip;--ez:linear}
.toast{position:absolute;right:80px;bottom:80px;display:flex;align-items:center;gap:14px;height:64px;padding:0 24px;border-radius:16px 4px 16px 4px;background:var(--fpan);border:1px solid var(--hlb);font-size:19px;overflow:hidden}
.toast .ic{animation:f-sube 1.6s var(--f-sin) infinite}
@keyframes f-sube{0%,100%{translate:0 1px}50%{translate:0 -2px}}

/* ---------- Escena 5 · Bitácora: la línea baja y cada registro se enciende al pasar ---------- */
.tl{position:absolute;left:120px;top:190px;width:700px}
.tl .linea{position:absolute;left:0;top:42px;width:2px;height:252px;background:var(--line2);transform-origin:50% 0}
.fview .tl .linea.a{--an:f-linea}
.tl .fila{position:relative;display:flex;gap:26px;align-items:center;height:84px;padding-left:40px;font-size:21px}
.tl .fila::before{content:"";position:absolute;left:-7px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:4px;transform:rotate(45deg);background:var(--iris40)}
.tl .fila .luz{position:absolute;left:22px;right:-24px;top:12px;bottom:12px;z-index:-1;border-radius:14px 4px 14px 4px;background:var(--hl);opacity:0}
.fview .tl .fila .luz.a{--an:f-luz}
.tl time{width:80px;font:500 17px var(--mono);color:var(--tx3)}

/* ---------- Barra: pausa y capítulos (cada capítulo se llena en sus 5 s, todo en CSS) ---------- */
@property --fp{syntax:'<number>';inherits:true;initial-value:0}
.fbar{display:flex;align-items:center;gap:14px;padding:12px 6px 4px}
.fplay{width:40px;height:40px;flex:none;border-radius:8px 0 8px 0;border:0;background:var(--lx-b-secundario);color:var(--lx-b-texto-interactivo);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fch{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fch button{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--tx3);font:500 12.5px var(--sans);min-width:0;animation:f-ch0 var(--L) linear infinite}
.fch button:nth-child(2){animation-name:f-ch1}.fch button:nth-child(3){animation-name:f-ch2}.fch button:nth-child(4){animation-name:f-ch3}.fch button:nth-child(5){animation-name:f-ch4}
.fch button i{display:block;height:3px;border-radius:2px;background:var(--s3);overflow:hidden;position:relative;margin-bottom:7px}
.fch button i b{position:absolute;inset:0;background:var(--tx);border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--fp))}
.fch button span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes f-ch0{0%{--fp:0;color:var(--tx)}20%{--fp:1;color:var(--tx)}20.01%,100%{--fp:1;color:var(--tx3)}}
@keyframes f-ch1{0%,20%{--fp:0;color:var(--tx3)}20.01%{--fp:0;color:var(--tx)}40%{--fp:1;color:var(--tx)}40.01%,100%{--fp:1;color:var(--tx3)}}
@keyframes f-ch2{0%,40%{--fp:0;color:var(--tx3)}40.01%{--fp:0;color:var(--tx)}60%{--fp:1;color:var(--tx)}60.01%,100%{--fp:1;color:var(--tx3)}}
@keyframes f-ch3{0%,60%{--fp:0;color:var(--tx3)}60.01%{--fp:0;color:var(--tx)}80%{--fp:1;color:var(--tx)}80.01%,100%{--fp:1;color:var(--tx3)}}
@keyframes f-ch4{0%,80%{--fp:0;color:var(--tx3)}80.01%{--fp:0;color:var(--tx)}100%{--fp:1;color:var(--tx)}}
@media (max-width:640px){.fch button span{display:none}.fbar .chip{display:none}.film{margin-top:44px}}

/* ---------- Pausa (botón, fuera de la vista o pestaña oculta): JS pone .paused en .film ---------- */
.film.paused .fview *,.film.paused .fview *::before,.film.paused .fview *::after,.film.paused .fch *{animation-play-state:paused!important}

/* ---------- Reducir movimiento: sin animación; se ve una escena quieta y los capítulos cambian de escena ---------- */
@media (prefers-reduced-motion:reduce){
  .film .fview *,.film .fview *::before,.film .fview *::after,.film .fch *{animation:none!important}
  .fview[data-esc="0"] .sc[data-i="0"],.fview[data-esc="1"] .sc[data-i="1"],.fview[data-esc="2"] .sc[data-i="2"],.fview[data-esc="3"] .sc[data-i="3"],.fview[data-esc="4"] .sc[data-i="4"]{opacity:1}
  .fview[data-esc="1"] .fpuente{opacity:1}
  .fview[data-esc="2"] .fpuente{opacity:1;left:150px;top:200px;width:304px;height:400px}
  .fview[data-esc="3"] .fpuente{opacity:1;left:240px;top:190px;width:800px;height:344px}
  .fview[data-esc="0"]~.fbar .fch button:nth-child(1),.fview[data-esc="1"]~.fbar .fch button:nth-child(2),.fview[data-esc="2"]~.fbar .fch button:nth-child(3),.fview[data-esc="3"]~.fbar .fch button:nth-child(4),.fview[data-esc="4"]~.fbar .fch button:nth-child(5){--fp:1;color:var(--tx)}
}

/* ---------- v1.7 · Toque: capítulos y pausa con área de 44 px; el dibujo no cambia ---------- */
.fch button{position:relative}
.fch button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
@media (max-width:720px){.fplay{width:44px;height:44px}}