/* ===========================================================================
   «Casos con la pieza». The sample cases of «Casos de ejemplo» (believable
   screens, a camera that frames one thing at a time) with the Vibilog piece
   (vibilog-pieza.css) as the cause of every change. Loaded after
   ensamble-films.css (chrome, player, loop bridge) and vibilog-pieza.css.
   Camera: .rw is 100 × 75 cqw; every shot is
     translate(50cqw, 37.5cqw) scale(S) translate(-Xcqw, -Ycqw)
   Base style = result frame, and the camera's base is the result shot.
   Data «connects» the way the piece does: small blue pills that go into the
   tile on one side and come out on the other; a hand appears only for human
   decisions; amounts align right.
   =========================================================================== */
.folder-card.systems{--poster-y:-31%}.folder-card.invoices{--poster-y:-26%}.folder-card.website{--poster-y:-10%}.folder-card.diagnosis{--poster-y:-14%}
.rw{position:absolute;left:0;top:0;width:100cqw;height:75cqw;transform-origin:0 0}
.rw *{position:absolute;margin:0;white-space:nowrap}
/* a line break stays in the text's flow: positioned absolute, Safari (WebKit) drops it and the line runs on
   out of its card (Chromium still breaks there); found on 03-10-2026 with the benches in WebKit. The loop films'
   own .loop-film .rw * (vibilog-paginas.css) carries the same exception. */
.rw br{position:static}
.rw small,.rw b,.rw span,.rw em,.rw i{display:block;font-style:normal}

.rw .film-cursor{width:2.7cqw;height:2.7cqw}
.film-c2 .c2-order,.film-c2 .c2-inv,.film-c2 .c2-dest,.film-c4 .c4-board{background:#fff;box-shadow:0 .2cqw .5cqw #17202b14,0 2.4cqw 4.8cqw -2.4cqw #243f7355;color:#1d2735}
/* The data pills: an outer span carries X, the inner .fy carries Y, so they arc. */
.cp{z-index:4;width:0;height:0;opacity:0}
.cp .fy{left:0;top:0}
.cp i{left:-2.6cqw;top:-.9cqw;width:5.2cqw;height:1.8cqw;border-radius:.9cqw;background:#2453ec;box-shadow:0 .8cqw 1.6cqw -.5cqw #2453ec99}
/* In C1 the travelling piece is the field's own blue ring. */
.c1-p1 i,.c1-p2 i{background:#eef3ffe6;border-radius:.8cqw;box-shadow:0 0 0 .3cqw #2453ec,0 1.2cqw 2.4cqw -1cqw #2453ec80}
.c1-p1 i{left:-7.9cqw;top:-2cqw;width:15.8cqw;height:4cqw}
.c1-p2 i{left:-8.4cqw;top:-2.2cqw;width:16.8cqw;height:4.4cqw}
.rw .vb-piece{z-index:5}

/* ---- C1 · static ---- */
.film-c1{--film-bg:#e3eaf6;--film-dot:#bdcae3}
.film-c1 .rw{transform:translate(50cqw,37.5cqw) scale(1.38) translate(-70cqw,-36.5cqw)}
.c1-pdf{z-index:2;left:2cqw;top:5cqw;width:38cqw;height:64cqw;opacity:0;transform:translate(31.5cqw,9.3cqw) scale(.075);transform-origin:50% 50%;background:#fff;border-radius:.8cqw;box-shadow:0 .2cqw .5cqw #17202b14,0 2.4cqw 4.8cqw -2.4cqw #243f7355;color:#1d2735}
.c1-co{left:3cqw;top:3.4cqw;font-size:2.1cqw;font-weight:700;letter-spacing:-.02em}
.c1-co2{left:3cqw;top:6.4cqw;font-size:1.5cqw;color:#7a8698}
.c1-lab{left:3cqw;top:9.8cqw;font-size:1.3cqw;font-weight:650;letter-spacing:.16em;color:#7a8698}
.c1-num{left:3cqw;top:11.6cqw;font-size:2.3cqw;font-weight:650;letter-spacing:-.01em;isolation:isolate}
.c1-num>span,.c1-total>span{position:relative}
.c1-date{right:3cqw;top:12.1cqw;font-size:1.5cqw;color:#7a8698}
.c1-rule{left:3cqw;right:3cqw;height:1px;background:#e3e7ee}
.c1-rule.a{top:15.8cqw}.c1-rule.b{top:29cqw}
.c1-th{top:17.4cqw;font-size:1.3cqw;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#8a95a6}
.c1-th.l,.c1-li{left:3cqw}.c1-th.r,.c1-am{right:3cqw;text-align:right;font-variant-numeric:tabular-nums}
.c1-li,.c1-am{font-size:1.8cqw;color:#2b3646}
.c1-li.l1,.c1-am.l1{top:20.6cqw}.c1-li.l2,.c1-am.l2{top:24.4cqw}
.c1-li.s1,.c1-am.s1{top:31.4cqw;font-size:1.6cqw;color:#5c6878}.c1-li.s2,.c1-am.s2{top:34.8cqw;font-size:1.6cqw;color:#5c6878}
.c1-li.s3{top:38.8cqw;font-size:2cqw;font-weight:700}
.c1-am.s3{top:38.3cqw;font-size:2.5cqw;font-weight:750;color:#17202b;isolation:isolate}
.c1-foot{left:3cqw;bottom:3cqw;font-size:1.3cqw;color:#8a95a6}
/* The two fields the assistant reads: a ring, and a text selection for the manual copy. */
.c1-num::after,.c1-total::after{content:"";position:absolute;inset:-.6cqw -.9cqw;border-radius:.8cqw;box-shadow:0 0 0 .3cqw #2453ec;background:#2453ec10;opacity:0}
.c1-num::before{content:"";position:absolute;z-index:-1;inset:-.15cqw -.2cqw;background:#b9cdfd;transform-origin:left center;transform:scaleX(0)}
.c1-ibeam{left:-.2cqw;top:-.5cqw;width:.25cqw;height:3.4cqw;background:#17202b;opacity:0}
.c1-ibeam::before,.c1-ibeam::after{content:"";position:absolute;left:-.55cqw;width:1.35cqw;height:.25cqw;background:#17202b}
.c1-ibeam::before{top:0}.c1-ibeam::after{bottom:0}

/* The program: an honest, dense desktop app. */
.c1-erp{left:48cqw;top:7cqw;width:50cqw;height:58cqw;background:#fbfbfc;border:.15cqw solid #b9bec8;border-radius:.6cqw;overflow:hidden;box-shadow:0 2.6cqw 5cqw -2.6cqw #17202b59;font-family:Tahoma,Verdana,"Segoe UI",system-ui,sans-serif;color:#1f2733}
.c1-erp *{font-family:inherit}
.c1-title{left:0;right:0;top:0;height:4.4cqw;background:linear-gradient(#f2f3f6,#dde1e8);border-bottom:.15cqw solid #c3c8d1}
.c1-title>span:first-child{left:1.6cqw;top:1.25cqw;font-size:1.5cqw;color:#2b3442}
.c1-win{right:1.2cqw;top:1.3cqw;width:6.4cqw;height:1.8cqw}
.c1-win i{top:0;width:1.8cqw;height:1.8cqw;border:.15cqw solid #9aa1ad;border-radius:.2cqw;background:#eceef2}
.c1-win i:nth-child(1){left:0}.c1-win i:nth-child(2){left:2.3cqw}.c1-win i:nth-child(3){left:4.6cqw}
.c1-menu{left:0;right:0;top:4.4cqw;height:3.2cqw;border-bottom:.15cqw solid #e1e4ea}
.c1-menu span{top:.8cqw;font-size:1.35cqw;color:#3a4453}
.c1-menu span:nth-child(1){left:1.6cqw}.c1-menu span:nth-child(2){left:8cqw}.c1-menu span:nth-child(3){left:14.6cqw}.c1-menu span:nth-child(4){left:18.6cqw}.c1-menu span:nth-child(5){left:25.4cqw}
.c1-tools{left:0;right:0;top:7.6cqw;height:4.6cqw;background:#f1f2f5;border-bottom:.15cqw solid #d8dce3}
.c1-tools span{top:.9cqw;height:2.8cqw;padding:0 1.2cqw;line-height:2.6cqw;font-size:1.3cqw;border:.15cqw solid #b9bec8;border-radius:.3cqw;background:linear-gradient(#fff,#e9ecf1);color:#2b3442}
.c1-tools span:nth-child(1){left:1.6cqw}.c1-tools span:nth-child(2){left:10.4cqw}.c1-tools span:nth-child(3){left:19.4cqw}
.c1-table{left:0;right:0;top:12.2cqw;bottom:3.8cqw}
.c1-tr{left:0;right:0;height:4.4cqw;display:grid!important;grid-template-columns:11% 29% 22% 18% 20%;align-items:center;padding:0 .8cqw;border-bottom:.15cqw solid #e8eaef;font-size:1.45cqw}
.c1-tr>span{position:relative;padding:0 .6cqw;overflow:visible}
.c1-tr.h{height:3.8cqw;background:#eceff3;font-weight:700;font-size:1.35cqw;color:#3a4453;border-bottom-color:#cfd4dc}
.c1-tr:nth-child(1){top:0}.c1-tr:nth-child(2){top:3.8cqw}.c1-tr:nth-child(3){top:8.2cqw}.c1-tr:nth-child(4){top:12.6cqw}.c1-tr:nth-child(5){top:17cqw}
.c1-tr .m{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:1.35cqw}
.c1-tr .a{text-align:right;font-variant-numeric:tabular-nums}
.c1-tr.n{background:#e5edff}
.c1-tr.n b{position:static;font-weight:400}
.c1-tr.n .c3 b,.c1-tr.n .c4 b{font-weight:700}
.c1-typed{left:.6cqw;top:50%;margin-top:-1.1cqw;height:2.2cqw;line-height:2.2cqw;width:9ch;overflow:hidden;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;opacity:0}
.c1-typed::after{content:"";position:absolute;right:0;top:.2cqw;width:.18cqw;height:1.8cqw;background:#17202b}
.c1-tr.n .c3::before{content:"";position:absolute;inset:-.7cqw 0;border-radius:.3cqw;background:#fff;box-shadow:inset 0 0 0 .2cqw #2453ec;opacity:0;z-index:-1}
.c1-tr.n .c3{isolation:isolate}
.c1-tr.n .c3::after,.c1-tr.n .c4::after{content:"";position:absolute;inset:-.7cqw 0;border-radius:.5cqw;box-shadow:0 0 0 .3cqw #2453ec;opacity:0}
.c1-pill{display:inline-block!important;position:static!important;padding:.3cqw .9cqw;border-radius:2cqw;background:#fff1d6;color:#8a5a14;font-size:1.3cqw;font-weight:700!important}
.c1-status{left:0;right:0;bottom:0;height:3.8cqw;background:#eceff3;border-top:.15cqw solid #cfd4dc}
.c1-status>span:first-child{left:1.6cqw;top:1.05cqw;font-size:1.3cqw;color:#5c6878}


/* ---- C2 · static ---- */
.film-c2{--film-bg:#eceff3;--film-dot:#c9d0d8}
.film-c2 .rw{transform:translate(50cqw,37.5cqw) scale(1.12) translate(-48cqw,-37.5cqw)}
.c2-order{left:5cqw;top:5cqw;width:32cqw;height:30cqw;border-radius:.8cqw}
.c2-inv{left:50cqw;top:4cqw;width:40cqw;height:67cqw;border-radius:.8cqw}
.c2-lab,.c2-lab2,.c2-k,.c2-th{font-size:1.2cqw;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:#8a95a6}
.c2-lab{left:3cqw;top:2.6cqw}
.c2-ref{left:3cqw;top:4.4cqw;font-size:2.3cqw;font-weight:700}
.c2-cli{left:3cqw;top:8cqw;font-size:1.7cqw;color:#3a4556}
.c2-rule{left:3cqw;right:3cqw;height:1px;background:#e3e7ee}
.c2-rule.a{top:11.6cqw}.c2-rule.b{top:20.6cqw}.c2-rule.c{top:32cqw}
.c2-line{left:3cqw;right:3cqw;display:flex!important;justify-content:space-between;align-items:baseline;gap:2cqw;font-size:1.7cqw;color:#2b3646}
.c2-line>*{position:static!important}
.c2-line>:last-child{font-variant-numeric:tabular-nums}
.c2-order .o1{top:13.6cqw;font-size:1.45cqw}.c2-order .o2{top:16.9cqw;font-size:1.45cqw}
.c2-order .ot{top:22.6cqw;font-size:1.5cqw;color:#5c6878}
.c2-order .ot b{font-size:1.9cqw;font-weight:700;color:#17202b}
.c2-logo{left:3cqw;top:3.1cqw;width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:#2453ec}
.c2-me{left:6.5cqw;top:3.4cqw;font-size:1.7cqw;font-weight:700}
.c2-lab2{right:3cqw;top:3.2cqw}
.c2-no{right:3cqw;top:5.1cqw;font-size:2cqw;font-weight:700}
.c2-date{right:3cqw;top:8cqw;font-size:1.4cqw;color:#7a8698}
.c2-k{left:3cqw;top:12cqw}
.c2-box{left:3cqw;right:3cqw;top:14cqw;height:4.4cqw;border-radius:.5cqw;box-shadow:inset 0 0 0 .15cqw #d8dee6}
.c2-box .f-cli{left:1.2cqw;top:1.05cqw;font-size:1.9cqw;font-weight:600}
.c2-typed{left:1.2cqw;top:1.05cqw;display:flex!important;font-size:1.9cqw;font-weight:600;opacity:0}
.c2-typed span{position:static!important;display:inline-block!important;overflow:hidden;max-width:0}
.c2-typed::after{content:"";position:static;display:inline-block;width:.18cqw;height:2.2cqw;margin-left:.1cqw;background:#17202b}
.c2-th{top:21cqw}.c2-th.l{left:3cqw}.c2-th.r{right:3cqw}
.c2-inv .f1{top:24cqw}.c2-inv .f2{top:27.8cqw}
.c2-inv .s1,.c2-inv .s2{font-size:1.5cqw;color:#5c6878}
.c2-inv .s1{top:34cqw}.c2-inv .s2{top:37.2cqw}
.c2-inv .s3{top:40.6cqw;font-size:1.9cqw;font-weight:700;color:#17202b}
.c2-inv .s3 b{font-size:2.4cqw}
.c2-btn{left:3cqw;right:3cqw;top:58.4cqw;height:5.6cqw;border-radius:.8cqw;background:#244ce8;box-shadow:inset 0 0 0 .22cqw #244ce8;color:#fff;display:grid!important;place-items:center;font-size:1.8cqw}
.c2-btn b{position:static!important;grid-area:1/1;font-weight:650}
.c2-btn .a1{color:#244ce8;opacity:0}
:is(.o-cli,.c2-order .o1,.c2-order .o2,.c2-order .ot,.c2-box,.c2-inv .f1,.c2-inv .f2,.c2-inv .f-tot)::after{content:"";position:absolute;inset:-.6cqw -.9cqw;border-radius:.7cqw;box-shadow:0 0 0 .28cqw #2453ec;background:#2453ec0d;opacity:0}
.c2-box::after{inset:-.3cqw}
.c2-cur{left:0;top:0}


/* Shared click of the piece (see vibilog-pieza.css). */

/* ---------------------------------------------------------------------------
   C1 · Actualiza tus sistemas. Invoice F-2026-0419, 1.240,50 €.
     0–10    close-up on the PDF: a person selects the number
     10→13.5 to the program: the number is typed by hand
     21.5→26 wide: both documents; the piece bridges them (23→26), click 27.8
     29.5 / 31.5 it reads the number and the total
     33→41.5 / 35→43.5 each field's own ring leaves the PDF, crosses the piece and
            lands on its cell, which fills and keeps the ring (41.5 / 43.5)
     44→48  close on the row · 50→53 «Por revisar»
     53→57  wide again: the PDF itself goes through the piece (57→62) and
            lands as the row's attachment (61.6→63.6)
     62→66.5 result: the program, the row, its attachment and the piece
   Shots (X, Y, S): number 20,15,2.1 · row 76,38.4,1.85 · wide 50,35,1.06 ·
   result 70,36.5,1.37
   --------------------------------------------------------------------------- */
/* The tiles of the eight films are 11cqw (they were 6.6–9.4) so «vibilog» reads under the V on a phone too
   (Alberto, 29-09-2026); each one keeps its centre. */
.c1-vb{left:38.50cqw;top:32.90cqw;width:11cqw;border-radius:2.34cqw}
.c1-p1{left:12cqw;top:17.8cqw;--vx:32cqw;--vy:20.6cqw;--ex:61.4cqw}
.c1-p2{left:30cqw;top:44.8cqw;--vx:14cqw;--vy:-6.4cqw;--ex:53cqw}
.is-playing .film-c1 .rw{animation-name:c1-cam}
.is-playing .c1-num::before{animation-name:c1-select}
.is-playing .c1-ibeam{animation-name:c1-ibeam}
.is-playing .c1-typed{animation-name:c1-type}
.is-playing .c1-typed::after{animation-name:c1-caret}
.is-playing .c1-tr.n .c3::before{animation-name:c1-edit}
.is-playing .c1-vb{animation-name:c1-vb,c1-edge}
.is-playing .c1-vb .vb-l{animation-name:c1-l}
.is-playing .c1-vb .vb-r{animation-name:c1-r}
.is-playing .c1-num::after{animation-name:c1-read1}
.is-playing .c1-total::after{animation-name:c1-read2}
.is-playing .c1-p1{animation-name:c1-p1x}.is-playing .c1-p1 .fy{animation-name:c1-p1y}
.is-playing .c1-p2{animation-name:c1-p2x}.is-playing .c1-p2 .fy{animation-name:c1-p2y}
.is-playing .c1-tr.n{animation-name:c1-row}
.is-playing .c1-tr.n .c1 b{animation-name:c1-f1}
.is-playing .c1-tr.n .c2 b{animation-name:c1-f2}
.is-playing .c1-tr.n .c3 b{animation-name:c1-f1}
.is-playing .c1-tr.n .c4 b{animation-name:c1-f4}
.is-playing .c1-tr.n .c3::after{animation-name:c1-tie1}
.is-playing .c1-tr.n .c4::after{animation-name:c1-tie2}
.is-playing .c1-pill{animation-name:c1-pill}
.is-playing .c1-pdf{animation-name:c1-pdf}
@keyframes c1-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(2.02) translate(-20cqw,-15cqw);animation-timing-function:linear}
  10%{transform:translate(50cqw,37.5cqw) scale(2.12) translate(-20cqw,-15cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  13.5%{transform:translate(50cqw,37.5cqw) scale(1.85) translate(-76cqw,-38.4cqw);animation-timing-function:linear}
  21.5%{transform:translate(50cqw,37.5cqw) scale(1.9) translate(-76cqw,-38.4cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  26%,44%{transform:translate(50cqw,37.5cqw) scale(1.06) translate(-50cqw,-35cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  48%{transform:translate(50cqw,37.5cqw) scale(1.85) translate(-76cqw,-38.4cqw);animation-timing-function:linear}
  53%{transform:translate(50cqw,37.5cqw) scale(1.88) translate(-76cqw,-38.4cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  57%,62%{transform:translate(50cqw,37.5cqw) scale(1.06) translate(-50cqw,-35cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  66.5%{transform:translate(50cqw,37.5cqw) scale(1.35) translate(-70cqw,-36.5cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.38) translate(-70cqw,-36.5cqw)}}
@keyframes c1-select{0%,4%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.45,0,.55,1)}9%,10.5%{transform:none;opacity:1}12%,100%{transform:none;opacity:0}}
@keyframes c1-ibeam{0%,2.5%{opacity:0;left:-.2cqw}3.2%,4%{opacity:1;left:-.2cqw;animation-timing-function:cubic-bezier(.45,0,.55,1)}9%,9.8%{opacity:1;left:100%}10.6%,100%{opacity:0;left:100%}}
@keyframes c1-type{0%,13.5%{opacity:0;width:0}13.6%{opacity:1;width:0;animation-timing-function:steps(9,end)}20.5%,39.2%{opacity:1;width:9ch}39.8%,100%{opacity:0;width:9ch}}
@keyframes c1-caret{0%,21%{opacity:1}21.1%,23.5%{opacity:0}23.6%,26%{opacity:1}26.1%,100%{opacity:0}}
@keyframes c1-edit{0%,12.8%{opacity:0}13.6%,39%{opacity:1}40%,100%{opacity:0}}
@keyframes c1-vb{0%,23%{opacity:0;transform:translateY(-4cqw)}26%,100%{opacity:1;transform:none}}
@keyframes c1-l{0%,26%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,100%{transform:none}}
@keyframes c1-r{0%,26%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,100%{transform:none}}
@keyframes c1-edge{0%,27.6%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}28.2%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}32.3%,36.2%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}36.8%{box-shadow:inset 0 0 0 .34cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}38%,38.3%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}38.8%{box-shadow:inset 0 0 0 .34cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}40%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes c1-read1{0%,29.5%{opacity:0;transform:scale(1.12)}31.5%,33%{opacity:1;transform:none}33.4%,100%{opacity:0;transform:none}}
@keyframes c1-read2{0%,31.5%{opacity:0;transform:scale(1.12)}33.5%,35%{opacity:1;transform:none}35.4%,100%{opacity:0;transform:none}}
@keyframes c1-p1x{0%,33%{opacity:0;transform:none}33.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}37.5%{opacity:1;transform:translateX(var(--vx));animation-timing-function:cubic-bezier(.45,0,.55,1)}41.5%{opacity:1;transform:translateX(var(--ex))}42%,100%{opacity:0;transform:translateX(var(--ex))}}
@keyframes c1-p1y{0%,33.4%{transform:none;animation-timing-function:cubic-bezier(.3,0,.7,1)}37.5%{transform:translateY(var(--vy)) scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}41.5%,100%{transform:translateY(var(--vy)) scale(.72)}}
@keyframes c1-p2x{0%,35%{opacity:0;transform:none}35.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}39.5%{opacity:1;transform:translateX(var(--vx));animation-timing-function:cubic-bezier(.45,0,.55,1)}43.5%{opacity:1;transform:translateX(var(--ex))}44%,100%{opacity:0;transform:translateX(var(--ex))}}
@keyframes c1-p2y{0%,35.4%{transform:none;animation-timing-function:cubic-bezier(.3,0,.7,1)}39.5%{transform:translateY(var(--vy)) scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}43.5%,100%{transform:translateY(var(--vy)) scale(.62)}}
@keyframes c1-row{0%,41.3%{background-color:#fff}43.3%,100%{background-color:#e5edff}}
@keyframes c1-f1{0%,41.3%{opacity:0;transform:translateY(.6cqw)}42.6%,100%{opacity:1;transform:none}}
@keyframes c1-f2{0%,41.7%{opacity:0;transform:translateY(.6cqw)}43%,100%{opacity:1;transform:none}}
@keyframes c1-f4{0%,43.3%{opacity:0;transform:translateY(.6cqw)}44.6%,100%{opacity:1;transform:none}}
@keyframes c1-tie1{0%,41.4%{opacity:0;transform:none}41.6%,50%{opacity:1;transform:none}53%,100%{opacity:0;transform:none}}
@keyframes c1-tie2{0%,43.4%{opacity:0;transform:none}43.6%,50%{opacity:1;transform:none}53%,100%{opacity:0;transform:none}}
@keyframes c1-pill{0%,50%{opacity:0;transform:scale(.8)}53%,100%{opacity:1;transform:none}}
@keyframes c1-pdf{0%,57%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}59.6%{opacity:1;transform:translate(23cqw,1.4cqw) scale(.14);animation-timing-function:cubic-bezier(.45,0,.55,1)}62%{opacity:1;transform:translate(31.5cqw,9.3cqw) scale(.075)}62.6%,100%{opacity:0;transform:translate(31.5cqw,9.3cqw) scale(.075)}}
@keyframes c1-att{0%,61.6%{opacity:0;transform:scale(.9)}63.6%,100%{opacity:1;transform:none}}
.is-playing .c1-att{animation-name:c1-att}
.c1-att{left:2.2cqw;top:36.5cqw;width:27cqw;height:6.2cqw;border-radius:.4cqw;background:#f4f5f8;box-shadow:inset 0 0 0 .15cqw #cfd4dc;transform-origin:10% 50%}
.c1-att i{left:.9cqw;top:1cqw;width:2.8cqw;height:3.6cqw;background:#fff;box-shadow:0 0 0 .12cqw #b9bec8}
.c1-att i::after{content:"PDF";position:absolute;left:.2cqw;bottom:.4cqw;padding:0 .2cqw;background:#d93025;color:#fff;font-size:.75cqw;font-weight:700;line-height:1.2}
.c1-att b{left:4.8cqw;top:.9cqw;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace!important;font-size:1.5cqw;font-weight:700}
.c1-att small{left:4.8cqw;top:3.5cqw;font-size:1.2cqw;color:#5c6878}

/* ---------------------------------------------------------------------------
   C3 · Renueva tu web. Reformas Montes: an old, overloaded site becomes a clear
   one, and it works on every screen.
     0–22   the old site: an offers banner scrolling, a visits counter, widgets,
            an ad; a cookie notice rises (3→6.5) right over the «Contacto» link;
            the visitor can't reach it and ends up hovering «Aceptar»
     22→25  the piece docks on the browser's right edge · click 26
     27→39  it travels down the page: above its line the site is clean, below it
            the old one remains (a single wipe)
     40→45  pull back: a tablet and a phone arrive with blank screens
     44→46  the piece hops to the tablet, click 47.8 → the tablet fills (46.5–49.5)
     49.5→51.2 to the phone, click 52.8 → the phone fills (51.5–54.5)
   Shots (X, Y, S): desktop 33,32,1.33 · devices 49,34,1.02
   --------------------------------------------------------------------------- */
.film-c3{--film-bg:#2149e0;--film-dot:#ffffff26}
.film-c3 .rw{transform:translate(50cqw,37.5cqw) scale(1.04) translate(-49cqw,-34cqw)}
.c3-desk{left:3cqw;top:5cqw;width:60cqw;height:54cqw;background:#fff;border-radius:1cqw;overflow:hidden;box-shadow:0 3cqw 6cqw -3cqw #0a1a6bb3}
.c3-bar{left:0;right:0;top:0;height:3.4cqw;background:#f3f5f8;border-bottom:.15cqw solid #e2e6ec}
.c3-dots{left:1.4cqw;top:1.25cqw;width:.9cqw;height:.9cqw;border-radius:50%;background:#d3d9e3;box-shadow:1.4cqw 0 0 #d3d9e3,2.8cqw 0 0 #d3d9e3}
.c3-url{left:6cqw;top:.6cqw;height:2.2cqw;padding:0 1.2cqw;line-height:2.2cqw;border-radius:1.1cqw;background:#fff;font-size:1.1cqw;color:#6b7686}
.c3-page{left:0;right:0;top:3.4cqw;bottom:0;overflow:hidden}
.c3-old,.c3-new{inset:0}
.c3-old{background:#fff;color:#444;font-family:Verdana,Tahoma,sans-serif;clip-path:inset(100% 0 0 0)}
.c3-old *{font-family:inherit}
.c3-new{background:#fff;color:#17202b;clip-path:inset(0 0 0 0)}
.c3-line{left:0;right:0;top:0;height:.6cqw;margin-top:-.3cqw;background:#2453ec;box-shadow:0 0 1.6cqw .5cqw #2453ecb3,0 1.2cqw 2.4cqw -.4cqw #0f1a3359;opacity:0;z-index:3}
.c3-photo{inset:0;background:radial-gradient(60% 45% at 70% 20%,#ffffffb3,#fff0 70%),repeating-linear-gradient(0deg,#0000 0 2.6cqw,#ffffff8c 2.6cqw 2.78cqw),repeating-linear-gradient(90deg,#0000 0 2.6cqw,#ffffff8c 2.6cqw 2.78cqw),linear-gradient(165deg,#d5dfe2 0%,#a9bcc3 55%,#8ea3ab 100%)}
.c3-photo.old{filter:sepia(.45) saturate(.75) brightness(.88)}
/* the old site */
.o-banner{left:0;right:0;top:0;height:3cqw;background:#c62828;overflow:hidden}
.o-banner span{left:2cqw;top:.8cqw;font-size:1.15cqw;font-weight:700;color:#fff}
.o-head{left:0;right:0;top:3cqw;height:9cqw;background:#2e5a37}
.o-logo{left:2cqw;top:1.1cqw;font-family:Georgia,"Times New Roman",serif!important;font-size:2cqw;font-weight:700;letter-spacing:.02em;color:#f3d34a}
.o-tag{left:2cqw;top:3.8cqw;font-family:Georgia,serif!important;font-style:italic!important;font-size:1cqw;color:#cfe3c9}
.o-search{right:2cqw;top:1.3cqw;width:11cqw;height:2.4cqw;padding-left:.8cqw;line-height:2.4cqw;background:#fff;box-shadow:inset 0 0 0 .15cqw #9bb59f;font-size:.95cqw;color:#999}
.o-nav{left:2cqw;top:6.4cqw;font-size:1cqw;color:#fff}
.o-slider{left:2cqw;top:13.2cqw;width:37cqw;height:15.5cqw;overflow:hidden;box-shadow:0 0 0 .2cqw #d6d6d6}
.o-cap{left:0;right:0;bottom:0;height:3.2cqw;padding-left:1.4cqw;line-height:3.2cqw;background:#000a;color:#fff;font-size:1.15cqw}
.o-arr{top:4.8cqw;font-size:3.2cqw;line-height:1;color:#fff;text-shadow:0 0 .6cqw #000}
.o-arr.l{left:1cqw}.o-arr.r{right:1cqw}
.o-dots{right:4cqw;bottom:1.2cqw;width:.8cqw;height:.8cqw;border-radius:50%;background:#fff;box-shadow:1.2cqw 0 0 #fff8,2.4cqw 0 0 #fff8}
.o-welcome{left:2cqw;top:30.2cqw;font-family:Georgia,serif!important;font-size:1.8cqw;font-weight:700;color:#2e5a37}
.o-para{left:2cqw;top:33cqw;width:37cqw;white-space:normal!important;font-size:1.05cqw;line-height:1.45;color:#666}
.o-more{left:2cqw;top:40cqw;font-size:1.05cqw;color:#e67e22}
.o-w{left:41cqw;width:17cqw;background:#f4f4f4;box-shadow:inset 0 0 0 .15cqw #ddd}
.o-w small{left:1cqw;top:.6cqw;font-size:.9cqw;font-weight:700;color:#555}
.o-w.w1{top:13.2cqw;height:6.2cqw}
.o-w.w1 b{left:1cqw;top:2.4cqw;height:3cqw;padding:0 .8cqw;line-height:3cqw;background:#000;color:#39ff14;font-family:ui-monospace,Menlo,Consolas,monospace!important;font-size:1.9cqw;letter-spacing:.1em}
.o-w.w2{top:20.4cqw;height:5cqw}
.o-w.w2 i{top:2.2cqw;width:2.3cqw;height:2.3cqw;border-radius:.3cqw}
.o-w.w2 .s1{left:1cqw;background:#3b5998}.o-w.w2 .s2{left:4cqw;background:#1da1f2}.o-w.w2 .s3{left:7cqw;background:#e62117}
.o-w.w3{top:26.4cqw;height:5.6cqw}
.o-w.w3 b{left:1cqw;top:2.3cqw;font-size:1.8cqw;color:#333}
.o-w.w3 .sun{right:1.4cqw;top:1.8cqw;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#f5b400;box-shadow:0 0 .8cqw #f5b400}
.o-cartel{left:41cqw;top:33cqw;width:17cqw;height:8cqw;background:#ffe08a;box-shadow:inset 0 0 0 .25cqw #e67e22;text-align:center}
.o-cartel b{left:0;right:0;top:2cqw;font-size:1.15cqw;font-weight:700;color:#c0392b}
.o-cartel small{left:0;right:0;top:4.5cqw;font-size:.95cqw;color:#7a5b00}
.o-foot{left:0;right:0;top:43.2cqw;height:7.4cqw;background:#2e5a37}
.o-foot small{left:2cqw;top:1.2cqw;font-size:.9cqw;color:#cfe3c9}
.o-foot span{left:48cqw;top:4.6cqw;font-size:.95cqw;color:#f3d34a;text-decoration:underline}
.o-aviso{left:0;right:0;top:42cqw;height:8.6cqw;background:#222e}
.o-aviso span{left:2cqw;top:1.4cqw;width:36cqw;white-space:normal!important;font-size:.95cqw;line-height:1.4;color:#fff}
.o-aviso b{top:2.6cqw;height:3cqw;line-height:3cqw;text-align:center;font-size:.95cqw;font-weight:700;color:#fff}
.o-aviso .ok{left:40cqw;width:7.5cqw;background:#4caf50}.o-aviso .cf{left:48.5cqw;width:9.5cqw;background:#777}
/* the new site */
.n-head{left:0;right:0;top:0;height:7cqw;border-bottom:.15cqw solid #e6e9ee}
.n-logo{left:2.5cqw;top:2.3cqw;font-size:1.7cqw;font-weight:800;letter-spacing:-.02em}
.n-nav{top:2.6cqw;font-size:1.2cqw;color:#3a4658}
.n-nav.a{left:24.4cqw}.n-nav.b{left:31.4cqw}.n-nav.c{left:38.8cqw}
.n-cta{left:46.8cqw;top:1.7cqw;width:11.2cqw;height:3.4cqw;line-height:3.4cqw;text-align:center;border-radius:.6cqw;background:#244ce8;color:#fff;font-size:1.1cqw;font-weight:700}
.n-title{left:2.5cqw;top:11cqw;width:29cqw;white-space:normal!important;font-size:3.3cqw;line-height:1.05;font-weight:800;letter-spacing:-.035em}
.n-sub{left:2.5cqw;top:19.4cqw;width:28cqw;white-space:normal!important;font-size:1.35cqw;line-height:1.4;color:#5c6878}
.n-btn{left:2.5cqw;top:24.6cqw;width:14.5cqw;height:4.2cqw;line-height:4.2cqw;text-align:center;border-radius:.8cqw;background:#244ce8;color:#fff;font-size:1.4cqw;font-weight:700}
.n-img{left:32.5cqw;top:10cqw;width:25cqw;height:22.5cqw;border-radius:1cqw;overflow:hidden}
.n-card{top:36cqw;width:17.3cqw;height:8.5cqw;border-radius:.8cqw;background:#f5f7fa}
.n-card.k1{left:2.5cqw}.n-card.k2{left:21.35cqw}.n-card.k3{left:40.2cqw}
.n-card i{left:1.2cqw;top:1.2cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:radial-gradient(circle,#244ce8 0 32%,#e5edff 34%)}
.n-card b{left:1.2cqw;top:4.9cqw;font-size:1.25cqw;font-weight:700}
.n-foot{left:0;right:0;top:47.4cqw;height:3.2cqw;padding-left:2.5cqw;line-height:3.2cqw;background:#f3f5f8;font-size:.95cqw;color:#7a8698}
/* the other screens */
.c3-tab,.c3-pho{background:#0f1a33;box-shadow:0 3cqw 5cqw -2cqw #0a1a6bb3}
.c3-tab{left:64cqw;top:19cqw;width:22cqw;height:31cqw;border-radius:2cqw;scale:.88;transform-origin:0 0}
.c3-pho{left:85.5cqw;top:25cqw;width:11.5cqw;height:24cqw;border-radius:2cqw;scale:.9;transform-origin:0 0}
.c3-scr{left:.9cqw;right:.9cqw;top:.9cqw;bottom:.9cqw;border-radius:1.2cqw;background:#f4f6f9;overflow:hidden}
.c3-pho .c3-scr{left:.7cqw;right:.7cqw;top:.7cqw;bottom:.7cqw;border-radius:1.4cqw}
.c3-clean{inset:0;background:#fff;color:#17202b;clip-path:inset(0 0 0 0)}
.t-logo{left:1.4cqw;top:1.3cqw;font-size:1.1cqw;font-weight:800}
.t-menu,.p-menu{background:#17202b}
.t-menu{right:1.4cqw;top:1.6cqw;width:1.8cqw;height:.22cqw;box-shadow:0 .6cqw 0 #17202b,0 1.2cqw 0 #17202b}
.t-title{left:1.4cqw;top:4.3cqw;width:17cqw;white-space:normal!important;font-size:1.9cqw;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.t-sub{left:1.4cqw;top:8.9cqw;font-size:.9cqw;color:#5c6878}
.t-btn{left:1.4cqw;top:10.8cqw;width:10cqw;height:2.8cqw;line-height:2.8cqw;text-align:center;border-radius:.6cqw;background:#244ce8;color:#fff;font-size:.95cqw;font-weight:700}
.t-img{left:1.4cqw;right:1.4cqw;top:14.8cqw;height:8.6cqw;border-radius:.8cqw;overflow:hidden}
.t-card{top:24.6cqw;width:8.2cqw;height:3cqw;padding-left:.8cqw;line-height:3cqw;border-radius:.6cqw;background:#f5f7fa;font-size:.85cqw;font-weight:700}
.t-card.a{left:1.4cqw}.t-card.b{left:10.6cqw}
.p-logo{left:.9cqw;top:1.2cqw;font-size:.8cqw;font-weight:800}
.p-menu{right:.9cqw;top:1.4cqw;width:1.3cqw;height:.18cqw;box-shadow:0 .45cqw 0 #17202b,0 .9cqw 0 #17202b}
.p-title{left:.9cqw;top:3.4cqw;width:8.4cqw;white-space:normal!important;font-size:1.3cqw;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.p-btn{left:.9cqw;right:.9cqw;top:9.8cqw;height:2.2cqw;line-height:2.2cqw;text-align:center;border-radius:.5cqw;background:#244ce8;color:#fff;font-size:.78cqw;font-weight:700}
.p-img{left:.9cqw;right:.9cqw;top:13cqw;height:8cqw;border-radius:.6cqw;overflow:hidden}
.c3-vb{left:85.18cqw;top:19.50cqw;width:11cqw;border-radius:2.35cqw;box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}
.c3-cur{left:0;top:0}

.is-playing .film-c3 .rw{animation-name:c3-cam}
.is-playing .o-banner span{animation-name:c3-marquee}
.is-playing .o-aviso{animation-name:c3-cookie}
.is-playing .c3-old{animation-name:c3-old}
.is-playing .c3-new{animation-name:c3-new}
.is-playing .c3-page>.c3-line{animation-name:c3-line}
.is-playing .c3-tab{animation-name:c3-tab}
.is-playing .c3-pho{animation-name:c3-pho}
.is-playing .c3-tab .c3-clean{animation-name:c3-tclean}
.is-playing .c3-tab .c3-line{animation-name:c3-tline}
.is-playing .c3-pho .c3-clean{animation-name:c3-pclean}
.is-playing .c3-pho .c3-line{animation-name:c3-pline}
.is-playing .c3-vb{animation-name:c3-vb,c3-edge}
.is-playing .c3-vb .vb-l{animation-name:c3-l}
.is-playing .c3-vb .vb-r{animation-name:c3-r}
.is-playing .c3-cur{animation-name:c3-cx}
.is-playing .c3-cur svg{animation-name:c3-cy}
@keyframes c3-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(1.31) translate(-33cqw,-32cqw);animation-timing-function:linear}
  21.5%,40%{transform:translate(50cqw,37.5cqw) scale(1.33) translate(-33cqw,-32cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  45%{transform:translate(50cqw,37.5cqw) scale(1.02) translate(-49cqw,-34cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.04) translate(-49cqw,-34cqw)}}
@keyframes c3-marquee{0%{transform:none;animation-timing-function:linear}39%,100%{transform:translateX(-36cqw)}}
@keyframes c3-cookie{0%,3%{transform:translateY(100%);animation-timing-function:cubic-bezier(.2,0,0,1)}6.5%,100%{transform:none}}
/* One wipe, top to bottom, riding the piece: clean above its line, old below. */
@keyframes c3-old{0%,27%{clip-path:inset(0% 0 0 0);animation-timing-function:cubic-bezier(.45,0,.55,1)}39%,100%{clip-path:inset(100% 0 0 0)}}
@keyframes c3-new{0%,27%{clip-path:inset(0 0 100% 0);animation-timing-function:cubic-bezier(.45,0,.55,1)}39%,100%{clip-path:inset(0 0 0% 0)}}
@keyframes c3-line{0%,26.6%{opacity:0;top:0%}27%{opacity:1;top:0%;animation-timing-function:cubic-bezier(.45,0,.55,1)}39%{opacity:1;top:100%}39.8%,100%{opacity:0;top:100%}}
@keyframes c3-tab{0%,40.5%{transform:translateX(40cqw);animation-timing-function:cubic-bezier(.2,0,0,1)}45%,100%{transform:none}}
@keyframes c3-pho{0%,41.5%{transform:translateX(34cqw);animation-timing-function:cubic-bezier(.2,0,0,1)}46%,100%{transform:none}}
@keyframes c3-tclean{0%,46.5%{clip-path:inset(0 0 100% 0);animation-timing-function:cubic-bezier(.45,0,.55,1)}49.5%,100%{clip-path:inset(0 0 0% 0)}}
@keyframes c3-tline{0%,46.3%{opacity:0;top:0%}46.5%{opacity:1;top:0%;animation-timing-function:cubic-bezier(.45,0,.55,1)}49.5%{opacity:1;top:100%}50.2%,100%{opacity:0;top:100%}}
@keyframes c3-pclean{0%,51.5%{clip-path:inset(0 0 100% 0);animation-timing-function:cubic-bezier(.45,0,.55,1)}54.5%,100%{clip-path:inset(0 0 0% 0)}}
@keyframes c3-pline{0%,51.3%{opacity:0;top:0%}51.5%{opacity:1;top:0%;animation-timing-function:cubic-bezier(.45,0,.55,1)}54.5%{opacity:1;top:100%}55.2%,100%{opacity:0;top:100%}}
/* The piece: desktop edge (top) → down with the wipe → tablet → phone (its rest). */
@keyframes c3-vb{0%,22%{opacity:0;transform:translate(-21.68cqw,-16.6cqw)}25%,27%{opacity:1;transform:translate(-27.68cqw,-16.6cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}39%,44%{opacity:1;transform:translate(-27.68cqw,34cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}46%,49.5%{opacity:1;transform:translate(-16.98cqw,-6cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}51.2%,100%{opacity:1;transform:none}}
@keyframes c3-l{0%,24.5%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}26%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}26.7%,44%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}44.6%,46%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}47.5%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}48.2%,49.5%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}50.1%,51%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}52.5%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}53.2%,100%{transform:none}}
@keyframes c3-r{0%,24.5%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}26%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}26.7%,44%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}44.6%,46%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}47.5%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}48.2%,49.5%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}50.1%,51%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}52.5%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}53.2%,100%{transform:none}}
@keyframes c3-edge{0%,25.8%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}26.4%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}30%,47.3%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}47.9%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}51%,52.3%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}52.9%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}56.5%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #0a1a6b70}}
@keyframes c3-cx{0%,2%{opacity:0;transform:translateX(30cqw)}3%{opacity:1;transform:translateX(30cqw);animation-timing-function:cubic-bezier(.45,0,.3,1)}8%,11%{opacity:1;transform:translateX(53cqw);animation-timing-function:cubic-bezier(.45,0,.3,1)}14%,17%{opacity:1;transform:translateX(47.5cqw)}19.5%,100%{opacity:0;transform:translateX(47.5cqw)}}
@keyframes c3-cy{0%,3%{transform:translateY(28cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}8%{transform:translateY(55.6cqw)}9%{transform:translateY(55.1cqw)}10%{transform:translateY(55.9cqw)}11%{transform:translateY(55.4cqw);animation-timing-function:cubic-bezier(.45,0,.3,1)}14%,100%{transform:translateY(54.2cqw)}}

/* ---------------------------------------------------------------------------
   C2 · Simplifica tus facturas. Vibilog makes the invoice: order PED-1043
   becomes invoice 2026-118 (326,70 €), then it sends it and files it.
     0–9    close-up on the order      9→12 to an empty invoice
     12.5–27 a person starts it by hand: «Host…»
     21.5→26 wide · 23→26.5 the piece enters between them, click 27.8: it takes
            over. Nothing is thrown away: the client's name crosses the piece
            (28.8→33.2) and completes what the person was typing, «Host» + «al Brisa»
     34.2   the piece numbers and dates it (the number ringed)
     36 / 38 / 40 the order's lines and total cross the piece (4.8 each); each
            field fills where one lands, ringed, with its origin ringed as it leaves
     46→47.4 «Hecha automáticamente · revísala antes de enviarla» above the button
     45→48.5 close on the button: the person hovers (51.4), pauses, approves (52.6)
     55→58.5 wide · 57.8→59.4 the finished invoice goes back into the piece;
     59.6→62 two branches draw from it; the copies travel along them (61.8 / 62.8)
     and light «Enviada» (65.8) and «Archivada» (66.8)
   Shots (X, Y, S): order 21,20,2 · invoice 70,16,1.9 · wide 48,37.5,1.1 ·
   button 70,58,1.9
   --------------------------------------------------------------------------- */
.c2-vb{left:38.10cqw;top:25.20cqw;width:11cqw;border-radius:2.61cqw}
.c2-inv{transform-origin:50% 50%}
.c2-p1{left:13.6cqw;top:14cqw;--vx:30cqw;--vy:16.7cqw;--ex:56.4cqw;--ey:6.2cqw}
.c2-p2{left:21cqw;top:19.5cqw;--vx:22.6cqw;--vy:11.2cqw;--ex:49cqw;--ey:9.4cqw}
.c2-p3{left:21cqw;top:22.8cqw;--vx:22.6cqw;--vy:7.9cqw;--ex:49cqw;--ey:9.9cqw}
.c2-p4{left:21cqw;top:28.6cqw;--vx:22.6cqw;--vy:2.1cqw;--ex:49cqw;--ey:17.2cqw}
.c2-no{right:3cqw;top:5.1cqw;width:16cqw;height:2.8cqw}
.c2-no span,.c2-date span{right:0;top:0}
.c2-no .n0,.c2-date .d0{opacity:0;color:#aab3c0}
.c2-date{right:3cqw;top:8cqw;width:12cqw;height:2cqw}
.c2-no .n1::after{content:"";position:absolute;inset:-.2cqw -.7cqw;border-radius:.7cqw;box-shadow:0 0 0 .28cqw #2453ec;background:#2453ec0d;opacity:0}
.c2-dest{left:5cqw;width:32cqw;height:9cqw;border-radius:.8cqw}
.c2-dest.d1{top:43cqw}.c2-dest.d2{top:54cqw}
.c2-ico{left:1.4cqw;top:2.4cqw;width:4.2cqw;height:4.2cqw;border-radius:1cqw;background:#e5edff;display:grid!important;place-items:center}
.c2-ico svg{position:static!important;width:2.4cqw;height:2.4cqw;fill:none;stroke:#244ce8;stroke-width:1.8;stroke-linejoin:round}
.c2-dest b{left:7cqw;top:1.8cqw;font-size:1.8cqw;font-weight:700;color:#17202b}
.c2-dest .w1{opacity:0;color:#7a8698}
.c2-dest small{left:7cqw;top:4.9cqw;font-size:1.3cqw;color:#7a8698}
.c2-dest em{right:1.2cqw;top:2.8cqw;width:3.4cqw;height:3.4cqw;border-radius:50%;background:#244ce8;color:#fff;font-size:1.7cqw;display:grid!important;place-items:center}
.c2-branches{left:0;top:0;width:100cqw;height:75cqw;z-index:1;overflow:visible}
.c2-branches .br{fill:none;stroke:#2453ec;stroke-width:.45;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.c2-branches .end{fill:#2453ec}
.c2-th0,.c2-th1,.c2-th2{z-index:4;width:0;height:0;opacity:0}
.c2-th0{left:70cqw;top:37.5cqw;z-index:3}
.c2-th1,.c2-th2{left:43.6cqw;top:30.7cqw}
.c2-th0 .fy,.c2-th1 .fy,.c2-th2 .fy{left:0;top:0}
.c2-th0 i,.c2-th1 i,.c2-th2 i{left:-1.7cqw;top:-2.2cqw;width:3.4cqw;height:4.4cqw;border-radius:.4cqw;box-shadow:0 0 0 .12cqw #cfd6df,0 1cqw 1.6cqw -.8cqw #17202b59;background:linear-gradient(#cfd6df,#cfd6df) 50% 24%/60% .35cqw no-repeat,linear-gradient(#cfd6df,#cfd6df) 50% 42%/60% .35cqw no-repeat,linear-gradient(#244ce8,#244ce8) 50% 78%/60% .7cqw no-repeat,#fff}
.is-playing .film-c2 .rw{animation-name:c2-cam}
.is-playing .c2-box{animation-name:c2-edit}
.is-playing .c2-typed{animation-name:c2-typed}
.is-playing .c2-typed span:nth-child(1){animation-name:c2-c1}
.is-playing .c2-typed span:nth-child(2){animation-name:c2-c2}
.is-playing .c2-typed span:nth-child(3){animation-name:c2-c3}
.is-playing .c2-typed span:nth-child(4){animation-name:c2-c4}
.is-playing .c2-note{animation-name:c2-note}
.is-playing .c2-no .n0,.is-playing .c2-date .d0{animation-name:c2-draft}
.is-playing .c2-no .n1,.is-playing .c2-date .d1{animation-name:c2-made}
.is-playing .c2-no .n1::after{animation-name:c2-numring}
.is-playing .c2-vb{animation-name:c2-vb,c2-edge}
.is-playing .c2-vb .vb-l{animation-name:c2-l}
.is-playing .c2-vb .vb-r{animation-name:c2-r}
.is-playing .c2-p1{animation-name:c2-p1x}.is-playing .c2-p1 .fy{animation-name:c2-p1y}
.is-playing .c2-p2{animation-name:c2-p2x}.is-playing .c2-p2 .fy{animation-name:c2-p2y}
.is-playing .c2-p3{animation-name:c2-p3x}.is-playing .c2-p3 .fy{animation-name:c2-p3y}
.is-playing .c2-p4{animation-name:c2-p4x}.is-playing .c2-p4 .fy{animation-name:c2-p4y}
.is-playing .o-cli::after{animation-name:c2-o1}
.is-playing .c2-order .o1::after{animation-name:c2-o2}
.is-playing .c2-order .o2::after{animation-name:c2-o3}
.is-playing .c2-order .ot::after{animation-name:c2-o4}
.is-playing .c2-box::after{animation-name:c2-d1}
.is-playing .c2-inv .f1::after{animation-name:c2-d2}
.is-playing .c2-inv .f2::after{animation-name:c2-d3}
.is-playing .c2-inv .f-tot::after{animation-name:c2-d4}
.is-playing .c2-box .f-cli{animation-name:c2-fill1}
.is-playing .c2-inv .f1{animation-name:c2-fill2}
.is-playing .c2-inv .f2{animation-name:c2-fill3}
.is-playing .c2-inv .s1{animation-name:c2-fill4}
.is-playing .c2-inv .s2{animation-name:c2-fill5}
.is-playing .c2-inv .s3{animation-name:c2-fill6}
.is-playing .c2-btn{animation-name:c2-btn}
.is-playing .c2-btn .a1{animation-name:c2-a1}
.is-playing .c2-btn .a2{animation-name:c2-a2}
.is-playing .c2-cur{animation-name:c2-cx}
.is-playing .c2-cur svg{animation-name:c2-cy}
.is-playing .c2-th0{animation-name:c2-t0x}.is-playing .c2-th0 .fy{animation-name:c2-t0y}
.is-playing .c2-branches .b1{animation-name:c2-b1}
.is-playing .c2-branches .b2{animation-name:c2-b2}
.is-playing .c2-branches .e1{animation-name:c2-e1}
.is-playing .c2-branches .e2{animation-name:c2-e2}
.is-playing .c2-th1{animation-name:c2-t1x}.is-playing .c2-th1 .fy{animation-name:c2-t1y}
.is-playing .c2-th2{animation-name:c2-t2x}.is-playing .c2-th2 .fy{animation-name:c2-t2y}
.is-playing .c2-dest.d1{animation-name:c2-card1}
.is-playing .c2-dest.d2{animation-name:c2-card2}
.is-playing .c2-dest.d1 .c2-ico{animation-name:c2-ico1}
.is-playing .c2-dest.d2 .c2-ico{animation-name:c2-ico2}
.is-playing .c2-dest.d1 .c2-ico svg{animation-name:c2-svg1}
.is-playing .c2-dest.d2 .c2-ico svg{animation-name:c2-svg2}
.is-playing .c2-dest.d1 .w1{animation-name:c2-w1a}
.is-playing .c2-dest.d1 .w2{animation-name:c2-w2a}
.is-playing .c2-dest.d2 .w1{animation-name:c2-w1b}
.is-playing .c2-dest.d2 .w2{animation-name:c2-w2b}
.is-playing .c2-dest.d1 em{animation-name:c2-k1}
.is-playing .c2-dest.d2 em{animation-name:c2-k2}
@keyframes c2-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(2) translate(-21cqw,-20cqw);animation-timing-function:linear}
  9%{transform:translate(50cqw,37.5cqw) scale(2.1) translate(-21cqw,-20cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  12%{transform:translate(50cqw,37.5cqw) scale(1.9) translate(-70cqw,-16cqw);animation-timing-function:linear}
  21.5%{transform:translate(50cqw,37.5cqw) scale(1.94) translate(-70cqw,-16cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  26%,45%{transform:translate(50cqw,37.5cqw) scale(1.1) translate(-48cqw,-37.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  48.5%{transform:translate(50cqw,37.5cqw) scale(1.9) translate(-70cqw,-58cqw);animation-timing-function:linear}
  55%{transform:translate(50cqw,37.5cqw) scale(1.92) translate(-70cqw,-58cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  58.5%{transform:translate(50cqw,37.5cqw) scale(1.1) translate(-48cqw,-37.5cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.12) translate(-48cqw,-37.5cqw)}}
@keyframes c2-edit{0%,12.5%{box-shadow:inset 0 0 0 .15cqw #d8dee6}13.2%,28.2%{box-shadow:inset 0 0 0 .22cqw #2453ec}28.6%,100%{box-shadow:inset 0 0 0 .15cqw #d8dee6}}
@keyframes c2-typed{0%,12.8%{opacity:0}13%,33.2%{opacity:1}33.8%,100%{opacity:0}}
@keyframes c2-c1{0%,13.6%{max-width:0}13.7%,100%{max-width:1em}}
@keyframes c2-c2{0%,15%{max-width:0}15.1%,100%{max-width:1em}}
@keyframes c2-c3{0%,16.3%{max-width:0}16.4%,100%{max-width:1em}}
@keyframes c2-c4{0%,17.6%{max-width:0}17.7%,100%{max-width:1em}}
/* Vibilog stamps the number and the date. */
@keyframes c2-draft{0%,34%{opacity:1}34.3%,100%{opacity:0}}
@keyframes c2-made{0%,34%{opacity:0;transform:translateY(.4cqw)}34.6%,100%{opacity:1;transform:none}}
@keyframes c2-numring{0%,34.4%{opacity:0}35%,36.8%{opacity:1}37.8%,100%{opacity:0}}
@keyframes c2-vb{0%,23%{opacity:0;transform:translateY(-3cqw)}26.5%,100%{opacity:1;transform:none}}
@keyframes c2-l{0%,26%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,100%{transform:none}}
@keyframes c2-r{0%,26%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,100%{transform:none}}
@keyframes c2-edge{0%,27.6%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}28.2%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}31.6%,33.7%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}34.2%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}37.6%,59%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}59.5%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}63.5%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes c2-p1x{0%,28.4%{opacity:0;transform:none}28.8%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}30.8%{opacity:1;transform:translateX(var(--vx));animation-timing-function:cubic-bezier(.45,0,.55,1)}33.2%{opacity:1;transform:translateX(var(--ex))}33.6%,100%{opacity:0;transform:translateX(var(--ex))}}
@keyframes c2-p1y{0%,28.8%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}30.8%{transform:translateY(var(--vy));animation-timing-function:cubic-bezier(.45,0,.55,1)}33.2%,100%{transform:translateY(var(--ey))}}
@keyframes c2-p2x{0%,36%{opacity:0;transform:none}36.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}38.4%{opacity:1;transform:translateX(var(--vx));animation-timing-function:cubic-bezier(.45,0,.55,1)}40.8%{opacity:1;transform:translateX(var(--ex))}41.2%,100%{opacity:0;transform:translateX(var(--ex))}}
@keyframes c2-p2y{0%,36.4%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}38.4%{transform:translateY(var(--vy));animation-timing-function:cubic-bezier(.45,0,.55,1)}40.8%,100%{transform:translateY(var(--ey))}}
@keyframes c2-p3x{0%,38%{opacity:0;transform:none}38.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}40.4%{opacity:1;transform:translateX(var(--vx));animation-timing-function:cubic-bezier(.45,0,.55,1)}42.8%{opacity:1;transform:translateX(var(--ex))}43.2%,100%{opacity:0;transform:translateX(var(--ex))}}
@keyframes c2-p3y{0%,38.4%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}40.4%{transform:translateY(var(--vy));animation-timing-function:cubic-bezier(.45,0,.55,1)}42.8%,100%{transform:translateY(var(--ey))}}
@keyframes c2-p4x{0%,40%{opacity:0;transform:none}40.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}42.4%{opacity:1;transform:translateX(var(--vx));animation-timing-function:cubic-bezier(.45,0,.55,1)}44.8%{opacity:1;transform:translateX(var(--ex))}45.2%,100%{opacity:0;transform:translateX(var(--ex))}}
@keyframes c2-p4y{0%,40.4%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}42.4%{transform:translateY(var(--vy));animation-timing-function:cubic-bezier(.45,0,.55,1)}44.8%,100%{transform:translateY(var(--ey))}}
@keyframes c2-o1{0%,28%{opacity:0}28.8%,29.8%{opacity:1}31.2%,100%{opacity:0}}
@keyframes c2-o2{0%,35.6%{opacity:0}36.6%,37.6%{opacity:1}39%,100%{opacity:0}}
@keyframes c2-o3{0%,37.6%{opacity:0}38.6%,39.6%{opacity:1}41%,100%{opacity:0}}
@keyframes c2-o4{0%,39.6%{opacity:0}40.6%,41.6%{opacity:1}43%,100%{opacity:0}}
@keyframes c2-d1{0%,33.2%{opacity:0}34%,35.6%{opacity:1}37%,100%{opacity:0}}
@keyframes c2-d2{0%,40.8%{opacity:0}41.6%,43%{opacity:1}44.4%,100%{opacity:0}}
@keyframes c2-d3{0%,42.8%{opacity:0}43.6%,45%{opacity:1}46.4%,100%{opacity:0}}
@keyframes c2-d4{0%,44.8%{opacity:0}45.8%,48%{opacity:1}49.5%,100%{opacity:0}}
@keyframes c2-fill1{0%,33.2%{opacity:0}33.9%,100%{opacity:1}}
@keyframes c2-fill2{0%,40.8%{opacity:0;transform:translateY(.5cqw)}42%,100%{opacity:1;transform:none}}
@keyframes c2-fill3{0%,42.8%{opacity:0;transform:translateY(.5cqw)}44%,100%{opacity:1;transform:none}}
@keyframes c2-fill4{0%,44.8%{opacity:0;transform:translateY(.5cqw)}45.8%,100%{opacity:1;transform:none}}
@keyframes c2-fill5{0%,45.1%{opacity:0;transform:translateY(.5cqw)}46.1%,100%{opacity:1;transform:none}}
@keyframes c2-fill6{0%,45.4%{opacity:0;transform:translateY(.5cqw)}46.4%,100%{opacity:1;transform:none}}
@keyframes c2-btn{0%,51%{background-color:#fff;transform:scale(1)}51.8%,52.6%{background-color:#eef2ff;transform:scale(1)}53.2%{background-color:#e2e9ff;transform:scale(.97)}54.4%,100%{background-color:#244ce8;transform:none}}
@keyframes c2-a1{0%,53.4%{opacity:1}54.2%,100%{opacity:0}}
@keyframes c2-a2{0%,53.8%{opacity:0}54.8%,100%{opacity:1}}
@keyframes c2-cx{0%,48.3%{opacity:0;transform:translateX(96cqw)}48.8%{opacity:1;transform:translateX(94.5cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}51.2%,55%{opacity:1;transform:translateX(71cqw);animation-timing-function:cubic-bezier(.4,0,.8,.6)}57.5%,100%{opacity:0;transform:translateX(92cqw)}}
@keyframes c2-cy{0%,48.8%{transform:translateY(74cqw) scale(1);animation-timing-function:cubic-bezier(.2,0,.3,1)}51.2%,52.6%{transform:translateY(64.6cqw) scale(1)}53.1%{transform:translateY(64.6cqw) scale(.84)}53.8%,55%{transform:translateY(64.6cqw) scale(1);animation-timing-function:cubic-bezier(.4,0,1,1)}57.5%,100%{transform:translateY(74cqw) scale(1)}}
@keyframes c2-t0x{0%,57.6%{opacity:0;transform:none}58%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}59.4%{opacity:1;transform:translateX(-26.4cqw)}59.6%,100%{opacity:0;transform:translateX(-26.4cqw)}}
@keyframes c2-t0y{0%,58%{transform:translateY(0) scale(1.6);animation-timing-function:cubic-bezier(.45,0,.55,1)}59.4%,100%{transform:translateY(-6.8cqw) scale(.6)}}
@keyframes c2-b1{0%,59.6%{stroke-dashoffset:1}61.6%,100%{stroke-dashoffset:0}}
@keyframes c2-b2{0%,60%{stroke-dashoffset:1}62%,100%{stroke-dashoffset:0}}
@keyframes c2-e1{0%,61.5%{opacity:0}61.8%,100%{opacity:1}}
@keyframes c2-e2{0%,61.9%{opacity:0}62.2%,100%{opacity:1}}
@keyframes c2-t1x{0%,61.6%{opacity:0;transform:none}62%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.25,1)}65.6%{opacity:1;transform:translateX(-35.1cqw)}66.3%,100%{opacity:0;transform:translateX(-35.1cqw)}}
@keyframes c2-t1y{0%,62%{transform:translateY(0) scale(.5);animation-timing-function:cubic-bezier(.2,0,.3,1)}65.6%,100%{transform:translateY(16.8cqw) scale(.85)}}
@keyframes c2-t2x{0%,62.6%{opacity:0;transform:none}63%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.25,1)}66.6%{opacity:1;transform:translateX(-35.1cqw)}67.3%,100%{opacity:0;transform:translateX(-35.1cqw)}}
@keyframes c2-t2y{0%,63%{transform:translateY(0) scale(.5);animation-timing-function:cubic-bezier(.2,0,.3,1)}66.6%,100%{transform:translateY(27.8cqw) scale(.85)}}
@keyframes c2-card1{0%,65.6%{background-color:#ffffff80;box-shadow:0 0 0 .18cqw #cfd6df,0 0 0 0 #243f7300}67%,100%{background-color:#fff;box-shadow:0 .2cqw .5cqw #17202b14,0 2.4cqw 4.8cqw -2.4cqw #243f7355}}
@keyframes c2-card2{0%,66.6%{background-color:#ffffff80;box-shadow:0 0 0 .18cqw #cfd6df,0 0 0 0 #243f7300}68%,100%{background-color:#fff;box-shadow:0 .2cqw .5cqw #17202b14,0 2.4cqw 4.8cqw -2.4cqw #243f7355}}
@keyframes c2-ico1{0%,65.6%{background-color:#eef2f8}67%,100%{background-color:#e5edff}}
@keyframes c2-ico2{0%,66.6%{background-color:#eef2f8}68%,100%{background-color:#e5edff}}
@keyframes c2-svg1{0%,65.6%{stroke:#8a95a6}67%,100%{stroke:#244ce8}}
@keyframes c2-svg2{0%,66.6%{stroke:#8a95a6}68%,100%{stroke:#244ce8}}
@keyframes c2-w1a{0%,65.6%{opacity:1}66.4%,100%{opacity:0}}
@keyframes c2-w2a{0%,65.9%{opacity:0}67%,100%{opacity:1}}
@keyframes c2-w1b{0%,66.6%{opacity:1}67.4%,100%{opacity:0}}
@keyframes c2-w2b{0%,66.9%{opacity:0}68%,100%{opacity:1}}
@keyframes c2-k1{0%,65.9%{opacity:0;transform:scale(.5)}67.5%,100%{opacity:1;transform:none}}
@keyframes c2-k2{0%,66.9%{opacity:0;transform:scale(.5)}68.5%,100%{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   C4 · Encuentra lo que te frena. Where the team's time goes: five manual
   processes measured in hours (money is relative, time is not: Alberto,
   27-sep); one of them (reviewing orders by hand, 26 h a month, 41 % of the
   manual work) is where the company loses the most time.
     0–20   the list of what the team does, with no numbers: «—»
     20→25.5 medium shot · 23→26.5 the piece docks on the table's edge, click 27.8
     28.2 / 32.6 / 37 / 41.4 / 45.8 it measures one row each: the row lights,
            its bar grows, its hours appear, the total adds up below
     48.4→51.4 it goes back to «Revisar pedidos» · 48.4→55 wide
     54 second click: that row turns amber, the others fade back
     57.6→62 the finding comes out of the piece: «Aquí pierdes más tiempo · 26 h al mes»
   Shots (X, Y, S): list 31,24,1.75 · scan 40,36→40,40,1.4 · result 49,37.5,1.07
   Sample figures: 64 h = 9+12+26+10+7; 26 h = 312 orders × 5 min.
   --------------------------------------------------------------------------- */
.film-c4{--film-bg:#f2ecdf;--film-dot:#d3c8b0}
.film-c4 .rw{transform:translate(50cqw,37.5cqw) scale(1.07) translate(-49cqw,-37.5cqw)}
.c4-board{left:3cqw;top:5cqw;width:56cqw;height:65cqw;border-radius:1.2cqw}
.c4-lab,.c4-th,.c4-k,.c4-pk{font-size:1.15cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8068}
.c4-lab{left:3cqw;top:2.8cqw}
.c4-title{left:3cqw;top:4.8cqw;font-size:2.1cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.c4-rule{left:3cqw;right:3cqw;height:1px;background:#ebe5d8}
.c4-rule.a{top:10.4cqw}.c4-rule.b{top:14cqw}.c4-rule.c{top:55.2cqw;background:#d9d1bf}
.c4-th{top:11.7cqw}.c4-th.l{left:3cqw}.c4-th.r{right:3cqw}
.c4-row,.c4-total{left:1.5cqw;right:1.5cqw;height:8cqw;border-radius:.7cqw}
.c4-row::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#eef3ff;box-shadow:inset 0 0 0 .18cqw #c9d7f5;opacity:0}
.c4-row.r1{top:14.6cqw}.c4-row.r2{top:22.6cqw}.c4-row.r3{top:30.6cqw}.c4-row.r4{top:38.6cqw}.c4-row.r5{top:46.6cqw}
.c4-n{left:1.5cqw;top:1.5cqw;font-size:1.7cqw;font-weight:650;color:#17202b}
.c4-s{left:1.5cqw;top:4.4cqw;font-size:1.2cqw;color:#8a8068}
.c4-bar{left:20.5cqw;top:3.3cqw;width:21cqw;height:1.4cqw;border-radius:.7cqw;background:#f1ede4}
.c4-bar i{left:0;top:0;height:100%;border-radius:inherit;background:#c3cde3;transform-origin:0 50%}
.r1 .c4-bar i{width:7.27cqw}.r2 .c4-bar i{width:9.69cqw}.r3 .c4-bar i{width:21cqw;background:#d99a3c}.r4 .c4-bar i{width:8.08cqw}.r5 .c4-bar i{width:5.65cqw}
.c4-e{right:1.5cqw;top:2.6cqw;width:10cqw;height:2.4cqw;font-size:1.8cqw;font-weight:700;color:#17202b;font-variant-numeric:tabular-nums}
.c4-e span{right:0;top:0}
.c4-row .v0,.c4-total .s0,.c4-total .s1,.c4-total .s2,.c4-total .s3,.c4-total .s4{opacity:0}
.c4-row .v0{color:#b3aa96}
.c4-row.r3{background-color:#fdf1dc;box-shadow:inset 0 0 0 .2cqw #ecc27f}
.r3 .c4-e .v1{color:#8a5a14}
.c4-total{top:55.8cqw;height:6.8cqw}
.c4-total .c4-n{top:2.2cqw}
.c4-total .c4-e{top:1.9cqw;font-size:2.1cqw}
.c4-total .s0{color:#b3aa96}
/* The finding, beside the leaking row. */
.c4-card{left:66cqw;top:28.4cqw;width:29cqw;height:22.4cqw;z-index:3;border-radius:1.1cqw;background:#fff;box-shadow:inset .6cqw 0 0 #d99a3c,0 .2cqw .5cqw #17202b14,0 2.4cqw 4.4cqw -2cqw #5a3c0a55;color:#17202b;transform-origin:0 50%}
.c4-k{left:2.8cqw;top:2.6cqw;font-size:1.35cqw;color:#a8630f}
.c4-big{left:2.8cqw;top:8cqw;font-size:3.3cqw;font-weight:800;letter-spacing:-.03em;color:#17202b}
.c4-why{left:2.8cqw;top:4.9cqw;font-size:1.8cqw;font-weight:700;color:#17202b}
.c4-rule.d{left:2.8cqw;right:2.8cqw;top:13.4cqw}
.c4-pk{left:2.8cqw;top:14.9cqw;font-size:1.25cqw;color:#244ce8}
.c4-do{left:2.8cqw;top:17cqw;font-size:1.85cqw;font-weight:700;color:#17202b}
.c4-vb{left:54.70cqw;top:34.10cqw;width:11cqw;border-radius:2.50cqw}
.is-playing .film-c4 .rw{animation-name:c4-cam}
.is-playing .c4-vb{animation-name:c4-vb,c4-edge}
.is-playing .c4-vb .vb-l{animation-name:c4-l}
.is-playing .c4-vb .vb-r{animation-name:c4-r}
.is-playing .c4-row.r3{animation-name:c4-leak}
.is-playing .c4-card{animation-name:c4-card}
.is-playing .r3 .c4-bar i{animation-name:c4-g3,c4-amb}
.is-playing .r3 .c4-e .v1{animation-name:c4-v1-3,c4-ambt}
.is-playing .r1 .c4-bar i{animation-name:c4-g1,c4-dim}
.is-playing .r1 .c4-e .v1{animation-name:c4-v1-1}
.is-playing .c4-row.r1::before{animation-name:c4-hl1}
.is-playing .r1 .v0{animation-name:c4-v0-1}
.is-playing .r2 .c4-bar i{animation-name:c4-g2,c4-dim}
.is-playing .r2 .c4-e .v1{animation-name:c4-v1-2}
.is-playing .c4-row.r2::before{animation-name:c4-hl2}
.is-playing .r2 .v0{animation-name:c4-v0-2}
.is-playing .c4-row.r3::before{animation-name:c4-hl3}
.is-playing .r3 .v0{animation-name:c4-v0-3}
.is-playing .r4 .c4-bar i{animation-name:c4-g4,c4-dim}
.is-playing .r4 .c4-e .v1{animation-name:c4-v1-4}
.is-playing .c4-row.r4::before{animation-name:c4-hl4}
.is-playing .r4 .v0{animation-name:c4-v0-4}
.is-playing .r5 .c4-bar i{animation-name:c4-g5,c4-dim}
.is-playing .r5 .c4-e .v1{animation-name:c4-v1-5}
.is-playing .c4-row.r5::before{animation-name:c4-hl5}
.is-playing .r5 .v0{animation-name:c4-v0-5}
.is-playing .c4-total .s0{animation-name:c4-s0}
.is-playing .c4-total .s1{animation-name:c4-s1}
.is-playing .c4-total .s2{animation-name:c4-s2}
.is-playing .c4-total .s3{animation-name:c4-s3}
.is-playing .c4-total .s4{animation-name:c4-s4}
.is-playing .c4-total .s5{animation-name:c4-s5}
@keyframes c4-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(1.75) translate(-31cqw,-24cqw);animation-timing-function:linear}
  20%{transform:translate(50cqw,37.5cqw) scale(1.8) translate(-31cqw,-26.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  25.5%{transform:translate(50cqw,37.5cqw) scale(1.4) translate(-40cqw,-36cqw);animation-timing-function:linear}
  48.4%{transform:translate(50cqw,37.5cqw) scale(1.43) translate(-40cqw,-40cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%{transform:translate(50cqw,37.5cqw) scale(1.05) translate(-49cqw,-37.5cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.07) translate(-49cqw,-37.5cqw)}}
@keyframes c4-vb{0%,23%{opacity:0;transform:translateY(-16cqw) scale(.86)}26.5%,30.6%{opacity:1;transform:translateY(-16cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}32.6%,35%{transform:translateY(-8cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}37%,39.4%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}41.4%,43.8%{transform:translateY(8cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}45.8%,48.4%{transform:translateY(16cqw);animation-timing-function:cubic-bezier(.6,0,.3,1)}51.4%,100%{opacity:1;transform:none}}
@keyframes c4-l{0%,26%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,50.6%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}52.2%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}54%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}54.7%,100%{transform:none}}
@keyframes c4-r{0%,26%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,50.6%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}52.2%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}54%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}54.7%,100%{transform:none}}
@keyframes c4-edge{0%,27.6%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}28.2%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}32%,53.8%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}54.4%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}58.5%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes c4-g1{0%,28.4%{transform:scaleX(0);animation-timing-function:cubic-bezier(.3,0,.1,1)}30.4%,100%{transform:none}}
@keyframes c4-v0-1{0%,28.6%{opacity:1}29.2%,100%{opacity:0}}
@keyframes c4-v1-1{0%,28.8%{opacity:0;transform:translateY(.5cqw)}29.8%,100%{opacity:1;transform:none}}
@keyframes c4-hl1{0%,27.6%{opacity:0}28.2%,30.6%{opacity:1}31.6%,100%{opacity:0}}
@keyframes c4-g2{0%,32.8%{transform:scaleX(0);animation-timing-function:cubic-bezier(.3,0,.1,1)}34.8%,100%{transform:none}}
@keyframes c4-v0-2{0%,33%{opacity:1}33.6%,100%{opacity:0}}
@keyframes c4-v1-2{0%,33.2%{opacity:0;transform:translateY(.5cqw)}34.2%,100%{opacity:1;transform:none}}
@keyframes c4-hl2{0%,32%{opacity:0}32.6%,35%{opacity:1}36%,100%{opacity:0}}
@keyframes c4-g3{0%,37.2%{transform:scaleX(0);animation-timing-function:cubic-bezier(.3,0,.1,1)}39.2%,100%{transform:none}}
@keyframes c4-v0-3{0%,37.4%{opacity:1}38%,100%{opacity:0}}
@keyframes c4-v1-3{0%,37.6%{opacity:0;transform:translateY(.5cqw)}38.6%,100%{opacity:1;transform:none}}
@keyframes c4-hl3{0%,36.4%{opacity:0}37%,39.4%{opacity:1}40.4%,50.8%{opacity:0}51.6%,54.4%{opacity:1}55.6%,100%{opacity:0}}
@keyframes c4-g4{0%,41.6%{transform:scaleX(0);animation-timing-function:cubic-bezier(.3,0,.1,1)}43.6%,100%{transform:none}}
@keyframes c4-v0-4{0%,41.8%{opacity:1}42.4%,100%{opacity:0}}
@keyframes c4-v1-4{0%,42%{opacity:0;transform:translateY(.5cqw)}43%,100%{opacity:1;transform:none}}
@keyframes c4-hl4{0%,40.8%{opacity:0}41.4%,43.8%{opacity:1}44.8%,100%{opacity:0}}
@keyframes c4-g5{0%,46%{transform:scaleX(0);animation-timing-function:cubic-bezier(.3,0,.1,1)}48%,100%{transform:none}}
@keyframes c4-v0-5{0%,46.2%{opacity:1}46.8%,100%{opacity:0}}
@keyframes c4-v1-5{0%,46.4%{opacity:0;transform:translateY(.5cqw)}47.4%,100%{opacity:1;transform:none}}
@keyframes c4-hl5{0%,45.2%{opacity:0}45.8%,48.2%{opacity:1}49.2%,100%{opacity:0}}
@keyframes c4-dim{0%,54.6%{background-color:#2453ec}56%,100%{background-color:#c3cde3}}
@keyframes c4-amb{0%,54.4%{background-color:#2453ec}55.6%,100%{background-color:#d99a3c}}
@keyframes c4-ambt{0%,54.4%{color:#17202b}55.6%,100%{color:#8a5a14}}
@keyframes c4-leak{0%,54.4%{background-color:#fdf1dc00;box-shadow:inset 0 0 0 .2cqw #ecc27f00}55.8%,100%{background-color:#fdf1dc;box-shadow:inset 0 0 0 .2cqw #ecc27f}}
@keyframes c4-card{0%,57.6%{opacity:0;transform:translateX(-4.4cqw) scale(.25)}58.4%{opacity:1;transform:translateX(-4cqw) scale(.3);animation-timing-function:cubic-bezier(.2,0,0,1)}62%,100%{opacity:1;transform:none}}
@keyframes c4-s0{0%,29.8%{opacity:1;transform:none}30.2%,100%{opacity:0;transform:translateY(-.5cqw)}}
@keyframes c4-s1{0%,29.8%{opacity:0;transform:translateY(.5cqw)}30.2%,34.2%{opacity:1;transform:none}34.6%,100%{opacity:0;transform:translateY(-.5cqw)}}
@keyframes c4-s2{0%,34.2%{opacity:0;transform:translateY(.5cqw)}34.6%,38.6%{opacity:1;transform:none}39%,100%{opacity:0;transform:translateY(-.5cqw)}}
@keyframes c4-s3{0%,38.6%{opacity:0;transform:translateY(.5cqw)}39%,43%{opacity:1;transform:none}43.4%,100%{opacity:0;transform:translateY(-.5cqw)}}
@keyframes c4-s4{0%,43%{opacity:0;transform:translateY(.5cqw)}43.4%,47.4%{opacity:1;transform:none}47.8%,100%{opacity:0;transform:translateY(-.5cqw)}}
@keyframes c4-s5{0%,47.4%{opacity:0;transform:translateY(.5cqw)}47.8%,100%{opacity:1;transform:none}}
.c2-note{left:3cqw;right:3cqw;top:54.8cqw;text-align:center;font-size:1.3cqw;color:#5c6878}
.c2-note b{display:inline!important;position:static!important;color:#244ce8;font-weight:650}
@keyframes c2-note{0%,46%{opacity:0;transform:translateY(.4cqw)}47.4%,100%{opacity:1;transform:none}}
/* The person's caret waits after «Host»; it goes when Vibilog takes over. */
.is-playing .c2-typed::after{animation-name:c2-caret}
@keyframes c2-caret{0%,18%{opacity:1}18.1%,19.4%{opacity:0}19.5%,20.8%{opacity:1}20.9%,22.2%{opacity:0}22.3%,23.6%{opacity:1}23.7%,25%{opacity:0}25.1%,26.4%{opacity:1}26.5%,100%{opacity:0}}
/* Once approved, the note says who reviewed it. */
.c2-note span{left:0;right:0;top:0}
.c2-note .r1{opacity:0}
.is-playing .c2-note .r1{animation-name:c2-r1}
.is-playing .c2-note .r2{animation-name:c2-r2}
@keyframes c2-r1{0%,54%{opacity:1}55%,100%{opacity:0}}
@keyframes c2-r2{0%,54.4%{opacity:0}55.4%,100%{opacity:1}}

/* ===========================================================================
   Casos nuevos (27-sep-2026): C5–C8, the four folders added to the gallery.
   Same family and rules as ensamble-films-casos.css (C1–C4), loaded after it:
   9 s clips, 1 % = 90 ms; 0–22 situation · 22–67 transformation · 67–100
   result held; the BASE style of every element is the result frame (it is
   the folder's poster); one camera on .rw (100 × 75 cqw); the Vibilog piece
   appears once and clicks at T = 27.8 %; data travels as small blue pills
   behind the tile; a hand appears only for a human decision.
   Every name, number and date in these films is invented sample data.
   =========================================================================== */

/* The shared click of the piece, one set per film (the click never changes). */
@keyframes vb-click-l{0%,26%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,100%{transform:none}}
@keyframes vb-click-r{0%,26%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}27.8%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}28.5%,100%{transform:none}}
@keyframes vb-click-edge{0%,27.6%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}28.2%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}32.6%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
.is-playing :is(.c5-vb,.c6-vb,.c7-vb,.c8-vb) .vb-l{animation-name:vb-click-l}
.is-playing :is(.c5-vb,.c6-vb,.c7-vb,.c8-vb) .vb-r{animation-name:vb-click-r}
/* the tile drops in from above, 23 → 26.5, and stays */
@keyframes vb-drop{0%,23%{opacity:0;transform:translateY(-3cqw)}26.5%,100%{opacity:1;transform:none}}

/* Shared inner screens: white, the same shadow as C2/C4. */
.film-c5 .c5-chart,.film-c5 .c5-alert,.film-c6 .c6-talk,.film-c6 .c6-note,.film-c7 .c7-info,.film-c7 .c7-chat,.film-c8 .c8-desk,.film-c8 .c8-client,.film-c8 .c8-msg{background:#fff;box-shadow:0 .2cqw .5cqw #17202b14,0 2.4cqw 4.8cqw -2.4cqw #243f7355;color:#1d2735}
.rw :is(.k-lab){font-size:1.15cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a93a3}

/* ---------------------------------------------------------------------------
   C5 · Entérate a tiempo. Hostal Brisa ordered every Monday and then stopped:
   five Mondays with an order, three weeks without one. Nobody sees the gap;
   Vibilog turns the absence into an alert. (Codex, 27-sep: not a row scan,
   that is C4; the cadence and its gap are the story.)
     .5 / 3 / 5.5 / 8 / 10.5  the five orders drop into their week
     0→21   «Hoy» walks the eight weeks; the orders land as it passes their
            Monday, then three weeks go by empty and nothing happens
     20→25.5 medium shot · 23→26.5 the piece docks on the chart, click 27.8
     29→33  the Monday rhythm draws through the five orders (blue)
     33→36  it carries on over the empty weeks (amber, dashed)
     36 / 37.2 / 38.4  each missing order lights as an amber slot
     40→42  «3 semanas sin pedido»
     48→55  to the result shot · 57.6→62 the alert comes out of the piece
     62.6→64.2 its «Llamar» turns blue: the action is yours
   Shots (X, Y, S): chart 38,25,1.45 · medium 44,25,1.3 · result 50,36,1.02
   Chart geometry: week i sits at 3 + 7.25(i−1) cqw, 5.6 wide; centre +2.8.
   --------------------------------------------------------------------------- */
.film-c5{--film-bg:#26344b;--film-dot:#46536b}
.folder-card.alerts{--poster-y:-36%}
.film-c5 .rw{transform:translate(50cqw,37.5cqw) scale(1.02) translate(-50cqw,-36cqw)}
.c5-chart{left:6cqw;top:7cqw;width:64cqw;height:36cqw;border-radius:1.2cqw}
.c5-chart .k-lab{left:3cqw;top:2.6cqw}
.c5-title{left:3cqw;top:4.6cqw;font-size:2.1cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.c5-wk{top:17cqw;width:5.6cqw;height:9cqw;border-radius:.6cqw}
.c5-wk.w1,.c5-m.w1{left:3cqw}.c5-wk.w2,.c5-m.w2{left:10.25cqw}.c5-wk.w3,.c5-m.w3{left:17.5cqw}.c5-wk.w4,.c5-m.w4{left:24.75cqw}.c5-wk.w5,.c5-m.w5{left:32cqw}.c5-wk.w6,.c5-m.w6{left:39.25cqw}.c5-wk.w7,.c5-m.w7{left:46.5cqw}.c5-wk.w8,.c5-m.w8{left:53.75cqw}
.c5-ord{background:#c3cde3;box-shadow:inset 0 -.5cqw 0 #b1bdd8}
.c5-gap{background-color:#fdf1dc;box-shadow:inset 0 0 0 .2cqw #e3aa55}
/* the Monday rhythm: a line through the orders, dashed over the missing ones */
.c5-line{top:14.65cqw;height:.3cqw;border-radius:.15cqw}
.c5-line.on{left:5.8cqw;width:29cqw;background:#2453ec;transform-origin:0 50%}
.c5-line.off{left:34.8cqw;width:21.75cqw;background:repeating-linear-gradient(90deg,#d99a3c 0 .9cqw,#0000 .9cqw 1.6cqw)}
.c5-m{top:14.15cqw;width:1.3cqw;height:1.3cqw;margin-left:2.15cqw!important;border-radius:50%}
.c5-m.on{background:#2453ec;box-shadow:0 0 0 .3cqw #fff}
.c5-m.off{background:#fff;box-shadow:inset 0 0 0 .3cqw #d99a3c,0 0 0 .3cqw #fff}
.c5-d{top:27.4cqw;width:7cqw;text-align:center;font-size:1.15cqw;color:#8a93a3;font-variant-numeric:tabular-nums}
.c5-d.w1{left:2.3cqw}.c5-d.w2{left:9.55cqw}.c5-d.w3{left:16.8cqw}.c5-d.w4{left:24.05cqw}.c5-d.w5{left:31.3cqw}.c5-d.w6{left:38.55cqw}.c5-d.w7{left:45.8cqw}.c5-d.w8{left:53.05cqw}
.c5-d.w6,.c5-d.w7,.c5-d.w8{color:#a8630f}
.c5-today{left:61.2cqw;top:10cqw;width:0;height:20cqw}
.c5-today::before{content:"";position:absolute;left:-.09cqw;top:2.2cqw;width:.18cqw;height:16.4cqw;border-radius:.1cqw;background:#17202b}
.c5-today b{left:-2.4cqw;top:0;width:4.8cqw;text-align:center;font-size:1.15cqw;font-weight:700;color:#17202b}
.c5-count{left:40.8cqw;top:9.9cqw;width:17cqw;height:3cqw;border-radius:1.5cqw;background:#fdf1dc;box-shadow:inset 0 0 0 .18cqw #ecc27f;text-align:center;font-size:1.25cqw;font-weight:700;line-height:3cqw;color:#8a5a14}
.c5-vb{left:64.50cqw;top:16.30cqw;width:11cqw;border-radius:2.43cqw}
/* the alert: a phone notification, in front of the chart */
.c5-alert{left:14cqw;top:37cqw;width:72cqw;height:28cqw;z-index:3;border-radius:1.6cqw;box-shadow:inset .6cqw 0 0 #d99a3c,0 .2cqw .5cqw #17202b14,0 3cqw 6cqw -2.4cqw #0a122080!important;transform-origin:77.8% -54%}
.c5-app{left:3.4cqw;top:2.3cqw;width:2.8cqw;height:2.8cqw;border-radius:.7cqw;background:#fff;box-shadow:inset 0 0 0 .18cqw #c9d7f5;display:grid!important;place-items:center}
.c5-app svg{position:static!important;width:62%;height:auto}
.c5-alert .k-lab{left:7.2cqw;top:3.2cqw;color:#a8630f}
.c5-now{right:3.4cqw;top:3.1cqw;font-size:1.3cqw;color:#8a93a3}
.c5-who{left:3.4cqw;top:7cqw;font-size:1.9cqw;font-weight:700;color:#17202b}
.c5-big{left:3.4cqw;top:9.8cqw;font-size:3.7cqw;font-weight:800;letter-spacing:-.035em;line-height:1.1;color:#17202b}
.c5-why{left:3.4cqw;top:15.6cqw;font-size:1.55cqw;color:#5c6878}
.c5-rule{left:3.4cqw;right:3.4cqw;top:19.4cqw;height:1px;background:#e6e9ee}
.c5-call,.c5-see{top:21.2cqw;height:4.6cqw;border-radius:2.3cqw;font-size:1.6cqw;font-weight:700;line-height:4.6cqw;text-align:center}
.c5-call{left:3.4cqw;width:13cqw;background:#244ce8;color:#fff;box-shadow:0 1cqw 2cqw -1cqw #244ce8aa}
.c5-see{left:17.8cqw;width:15cqw;background:#fff;box-shadow:inset 0 0 0 .18cqw #cfd6df;color:#27364a}

.is-playing .film-c5 .rw{animation-name:c5-cam}
.is-playing .c5-ord.w1{animation-name:c5-o1}
.is-playing .c5-ord.w2{animation-name:c5-o2}
.is-playing .c5-ord.w3{animation-name:c5-o3}
.is-playing .c5-ord.w4{animation-name:c5-o4}
.is-playing .c5-ord.w5{animation-name:c5-o5}
.is-playing .c5-gap.w6{animation-name:c5-g1}
.is-playing .c5-gap.w7{animation-name:c5-g2}
.is-playing .c5-gap.w8{animation-name:c5-g3}
.is-playing .c5-d.w6{animation-name:c5-d1}
.is-playing .c5-d.w7{animation-name:c5-d2}
.is-playing .c5-d.w8{animation-name:c5-d3}
.is-playing .c5-today{animation-name:c5-today}
.is-playing .c5-line.on{animation-name:c5-on}
.is-playing .c5-line.off{animation-name:c5-off}
.is-playing .c5-m.on.w1{animation-name:c5-mon1}.is-playing .c5-m.on.w2{animation-name:c5-mon2}.is-playing .c5-m.on.w3{animation-name:c5-mon3}.is-playing .c5-m.on.w4{animation-name:c5-mon4}.is-playing .c5-m.on.w5{animation-name:c5-mon5}
.is-playing .c5-m.off.w6{animation-name:c5-m1}
.is-playing .c5-m.off.w7{animation-name:c5-m2}
.is-playing .c5-m.off.w8{animation-name:c5-m3}
.is-playing .c5-count{animation-name:c5-count}
.is-playing .c5-vb{animation-name:vb-drop,vb-click-edge}
.is-playing .c5-alert{animation-name:c5-alert}
.is-playing .c5-call{animation-name:c5-call}
@keyframes c5-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(1.45) translate(-38cqw,-25cqw);animation-timing-function:linear}
  20%{transform:translate(50cqw,37.5cqw) scale(1.5) translate(-38cqw,-25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  25.5%{transform:translate(50cqw,37.5cqw) scale(1.3) translate(-44cqw,-25cqw);animation-timing-function:linear}
  48%{transform:translate(50cqw,37.5cqw) scale(1.33) translate(-44cqw,-25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-36cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.02) translate(-50cqw,-36cqw)}}
/* an order lands in its week: from above, a small settle */
@keyframes c5-o1{0%,.5%{opacity:0;transform:translateY(-4cqw)}2%{opacity:1;transform:translateY(.3cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}2.8%,100%{opacity:1;transform:none}}
@keyframes c5-o2{0%,3%{opacity:0;transform:translateY(-4cqw)}4.5%{opacity:1;transform:translateY(.3cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}5.3%,100%{opacity:1;transform:none}}
@keyframes c5-o3{0%,5.5%{opacity:0;transform:translateY(-4cqw)}7%{opacity:1;transform:translateY(.3cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}7.8%,100%{opacity:1;transform:none}}
@keyframes c5-o4{0%,8%{opacity:0;transform:translateY(-4cqw)}9.5%{opacity:1;transform:translateY(.3cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}10.3%,100%{opacity:1;transform:none}}
@keyframes c5-o5{0%,10.5%{opacity:0;transform:translateY(-4cqw)}12%{opacity:1;transform:translateY(.3cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}12.8%,100%{opacity:1;transform:none}}
/* the empty weeks: plain empty slots until Vibilog marks each missing order */
@keyframes c5-g1{0%,36%{background-color:#f4f6f9;box-shadow:inset 0 0 0 .15cqw #e1e6ec}37%,100%{background-color:#fdf1dc;box-shadow:inset 0 0 0 .2cqw #e3aa55}}
@keyframes c5-g2{0%,37.2%{background-color:#f4f6f9;box-shadow:inset 0 0 0 .15cqw #e1e6ec}38.2%,100%{background-color:#fdf1dc;box-shadow:inset 0 0 0 .2cqw #e3aa55}}
@keyframes c5-g3{0%,38.4%{background-color:#f4f6f9;box-shadow:inset 0 0 0 .15cqw #e1e6ec}39.4%,100%{background-color:#fdf1dc;box-shadow:inset 0 0 0 .2cqw #e3aa55}}
@keyframes c5-d1{0%,36%{color:#8a93a3}37%,100%{color:#a8630f}}
@keyframes c5-d2{0%,37.2%{color:#8a93a3}38.2%,100%{color:#a8630f}}
@keyframes c5-d3{0%,38.4%{color:#8a93a3}39.4%,100%{color:#a8630f}}
/* «Hoy» walks all eight weeks, from week 1's Monday (3 cqw) to today (61.2) */
@keyframes c5-today{0%{transform:translateX(-58.2cqw);animation-timing-function:linear}21%,100%{transform:none}}
@keyframes c5-on{0%,29%{transform:scaleX(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}33%,100%{transform:none}}
@keyframes c5-off{0%,33%{clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.4,0,.2,1)}36%,100%{clip-path:inset(0 0 0 0)}}
/* each Monday lights as the line reaches it (29 → 33 over 29 cqw) */
@keyframes c5-mon1{0%,28.8%{opacity:0;transform:scale(.4)}29.6%,100%{opacity:1;transform:none}}
@keyframes c5-mon2{0%,30.2%{opacity:0;transform:scale(.4)}31%,100%{opacity:1;transform:none}}
@keyframes c5-mon3{0%,31%{opacity:0;transform:scale(.4)}31.8%,100%{opacity:1;transform:none}}
@keyframes c5-mon4{0%,31.7%{opacity:0;transform:scale(.4)}32.5%,100%{opacity:1;transform:none}}
@keyframes c5-mon5{0%,32.6%{opacity:0;transform:scale(.4)}33.4%,100%{opacity:1;transform:none}}
@keyframes c5-m1{0%,36%{opacity:0;transform:scale(.4)}37%,100%{opacity:1;transform:none}}
@keyframes c5-m2{0%,37.2%{opacity:0;transform:scale(.4)}38.2%,100%{opacity:1;transform:none}}
@keyframes c5-m3{0%,38.4%{opacity:0;transform:scale(.4)}39.4%,100%{opacity:1;transform:none}}
@keyframes c5-count{0%,40%{opacity:0;transform:translateY(.6cqw)}42%,100%{opacity:1;transform:none}}
/* out of the piece (its centre, 70 × 21.8, is the transform origin) */
@keyframes c5-alert{0%,57.6%{opacity:0;transform:scale(.14)}58.4%{opacity:1;transform:scale(.18);animation-timing-function:cubic-bezier(.2,0,0,1)}62%,100%{opacity:1;transform:none}}
@keyframes c5-call{0%,62.6%{background-color:#fff;color:#27364a;box-shadow:inset 0 0 0 .18cqw #cfd6df}64.2%,100%{background-color:#244ce8;color:#fff;box-shadow:0 1cqw 2cqw -1cqw #244ce8aa}}

/* ---------------------------------------------------------------------------
   C6 · Atiende cada llamada (en pruebas). A plumber's phone (an iPhone-like handset, Alberto 27-sep) rings at 20:47,
   out of hours; nobody can pick up. Vibilog answers, says it is an AI, hears
   what the caller needs and leaves the team a note. Voice becomes a note
   (Codex, 27-sep): two lines only, and no appointment offered, only asked.
     1–19   the phone rings in four bursts · 12.5 «3 llamadas perdidas hoy»
            on its screen
     20→25.5 medium shot · 23→26.5 the piece lands by the phone, click 27.8:
            the call is answered (28–29.2) and the voice wave starts
     30 / 36 the two lines of the call, whole · 29.2→47 the timer runs
     44 / 46 two pills carry what the caller said into the piece
     48→55 to the result shot · 53→55.5 the lines go
     57.6→62 the note comes out of the piece · 62.4 / 63 its status and button
   Shots (X, Y, S): phone 20,35,1.3 · medium 50,34,1.05 · result 53,36,1.06
   --------------------------------------------------------------------------- */
.film-c6{--film-bg:#edf3ef;--film-dot:#c3d3c8}
.folder-card.calls{--poster-y:-19%}
.film-c6 .rw{transform:translate(50cqw,37.5cqw) scale(1.06) translate(-53cqw,-36cqw)}
/* the phone: an iPhone-like handset, dark titanium edge, Dynamic Island, side buttons */
.c6-phone{left:7cqw;top:9cqw;width:25cqw;height:52cqw;border-radius:4.2cqw;background:#16191e;box-shadow:inset 0 0 0 .2cqw #454b55,inset 0 0 0 .45cqw #0b0d10,0 .3cqw .6cqw #0b0d1030,0 3cqw 6cqw -2.4cqw #1b2a2290}
.c6-phone::before{content:"";position:absolute;left:-.3cqw;top:8.5cqw;width:.34cqw;height:15.4cqw;border-radius:.2cqw 0 0 .2cqw;background:linear-gradient(#2d3239 0 2.4cqw,#0000 2.4cqw 4.2cqw,#2d3239 4.2cqw 9cqw,#0000 9cqw 10.6cqw,#2d3239 10.6cqw 15.4cqw)}
.c6-phone::after{content:"";position:absolute;right:-.3cqw;top:13cqw;width:.34cqw;height:7.6cqw;border-radius:0 .2cqw .2cqw 0;background:#2d3239}
.c6-scr{left:.9cqw;top:.9cqw;width:23.2cqw;height:50.2cqw;border-radius:3.4cqw;background:linear-gradient(172deg,#4a5b6e 0%,#2a3542 52%,#151b23 100%);overflow:hidden}
.c6-sb{left:0;top:0;width:23.2cqw;height:3.8cqw}
.c6-sb b{left:2.6cqw;top:1.25cqw;font-size:1.15cqw;font-weight:650;color:#fff;font-variant-numeric:tabular-nums}
.c6-sig{right:5.1cqw;top:1.45cqw;width:1.9cqw;height:1cqw}
.c6-sig i{top:auto;bottom:0;width:.34cqw;border-radius:.1cqw;background:#fff}
.c6-sig i:nth-child(1){left:0;height:.35cqw}.c6-sig i:nth-child(2){left:.5cqw;height:.55cqw}.c6-sig i:nth-child(3){left:1cqw;height:.78cqw}.c6-sig i:nth-child(4){left:1.5cqw;height:1cqw}
.c6-bat{right:2.2cqw;top:1.42cqw;width:2.3cqw;height:1.06cqw;border-radius:.32cqw;box-shadow:inset 0 0 0 .1cqw #ffffffa6;background:linear-gradient(90deg,#fff 0 72%,#0000 72%) .22cqw .22cqw/calc(100% - .44cqw) calc(100% - .44cqw) no-repeat}
.c6-bat::after{content:"";position:absolute;right:-.28cqw;top:.35cqw;width:.16cqw;height:.36cqw;border-radius:0 .1cqw .1cqw 0;background:#ffffffa6}
.c6-isl{left:7.8cqw;top:.85cqw;width:7.6cqw;height:2.2cqw;border-radius:1.1cqw;background:#000}
.c6-isl i{right:.8cqw;top:.7cqw;width:.8cqw;height:.8cqw;border-radius:50%;background:#34c759;box-shadow:0 0 .6cqw #34c759}
.c6-in,.c6-on{left:0;top:0;width:23.2cqw;height:50.2cqw}
.c6-in{opacity:0}
.c6-num,.c6-inl,.c6-late,.c6-t,.c6-ai{left:0;width:23.2cqw;text-align:center}
.c6-num{top:8cqw;font-size:2.4cqw;font-weight:500;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.c6-inl{top:11.4cqw;font-size:1.25cqw;color:#c9d0da}
.c6-late{top:13.6cqw;font-size:1.15cqw;font-weight:650;color:#f5c26b}
.c6-no,.c6-yes,.c6-end{width:5.6cqw;height:5.6cqw;border-radius:50%;display:grid!important;place-items:center}
.c6-no,.c6-yes{top:38.4cqw}
.c6-no{left:3.4cqw;background:#ff3b30}.c6-yes{left:14.2cqw;background:#34c759}
.c6-no svg,.c6-yes svg,.c6-end svg,.c6-mi svg,.c6-ico svg{position:static!important;width:44%;height:auto;fill:#fff}
.c6-no svg,.c6-end svg{transform:rotate(135deg)}
.c6-bl{top:44.8cqw;width:8cqw;text-align:center;font-size:1.1cqw;color:#fff}
.c6-bl.no{left:2.2cqw}.c6-bl.yes{left:13cqw}
/* the missed calls, as a notification banner on the ringing screen */
.c6-miss{left:1cqw;top:18cqw;width:21.2cqw;height:4.4cqw;padding-left:4.2cqw;border-radius:1.4cqw;background:#f3f4f6eb;box-shadow:0 .6cqw 1.6cqw -.6cqw #0008;font-size:1.2cqw;font-weight:700;line-height:4.4cqw;color:#17202b;opacity:0}
.c6-mi{left:1.1cqw;top:1.1cqw;width:2.2cqw;height:2.2cqw;border-radius:.55cqw;background:#34c759;display:grid!important;place-items:center}
.c6-mi svg{width:60%}
/* the call in progress */
.c6-on .c6-num{top:7.6cqw;font-size:2.2cqw}
.c6-t{top:10.9cqw;height:2cqw;font-size:1.45cqw;font-weight:500;color:#c9d0da;font-variant-numeric:tabular-nums}
.c6-t span{left:0;top:0;width:100%;text-align:center}
.c6-t .t0,.c6-t .t1,.c6-t .t2{opacity:0}
.c6-ai{top:13.8cqw;font-size:1.2cqw;font-weight:650;color:#6fe39a}
.c6-wave{left:3.3cqw;top:19.5cqw;width:16.6cqw;height:10cqw}
.c6-wave i{width:1.1cqw;border-radius:.55cqw;background:#34c759}
.c6-wave i:nth-child(1){left:0;top:3.5cqw;height:3cqw}.c6-wave i:nth-child(2){left:1.9cqw;top:2cqw;height:6cqw}.c6-wave i:nth-child(3){left:3.8cqw;top:.5cqw;height:9cqw}
.c6-wave i:nth-child(4){left:5.7cqw;top:2.5cqw;height:5cqw}.c6-wave i:nth-child(5){left:7.6cqw;top:1cqw;height:8cqw}.c6-wave i:nth-child(6){left:9.5cqw;top:3cqw;height:4cqw}
.c6-wave i:nth-child(7){left:11.4cqw;top:1.5cqw;height:7cqw}.c6-wave i:nth-child(8){left:13.3cqw;top:2.5cqw;height:5cqw}.c6-wave i:nth-child(9){left:15.2cqw;top:3.5cqw;height:3cqw}
.c6-key{top:33cqw;width:4.8cqw;height:4.8cqw;border-radius:50%;background:#ffffff2e;display:grid!important;place-items:center}
.c6-key.k1{left:3cqw}.c6-key.k2{left:9.2cqw}.c6-key.k3{left:15.4cqw}
.c6-key svg{position:static!important;width:46%;height:auto;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c6-key.k2 svg{fill:#fff;stroke:none}
.c6-end{left:8.8cqw;top:40.4cqw;background:#ff3b30}
.c6-home{left:7.6cqw;top:auto;bottom:.8cqw;width:8cqw;height:.45cqw;border-radius:.25cqw;background:#ffffffb8}
.c6-vb{left:32.20cqw;top:25.00cqw;width:11cqw;border-radius:2.36cqw}
/* the two lines of the call, whole (no letter-by-letter typing) */
.c6-b1,.c6-b2{height:10cqw;border-radius:1.2cqw;opacity:0;box-shadow:0 .2cqw .5cqw #17202b14,0 2cqw 4cqw -2cqw #243f7340}
.c6-b1{left:44cqw;top:21cqw;width:48cqw;background:#eef3ff}
.c6-b2{left:52cqw;top:34cqw;width:40cqw;background:#fff}
.c6-b1 .k-lab,.c6-b2 .k-lab,.c6-b1 span,.c6-b2 span{left:2.4cqw}
.c6-b1 .k-lab{top:1.8cqw;color:#244ce8}.c6-b2 .k-lab{top:1.8cqw}
.c6-b1 .l1,.c6-b2 .l1{top:4.1cqw;font-size:1.6cqw;font-weight:550;color:#17202b}
.c6-b1 .l2,.c6-b2 .l2{top:6.5cqw;font-size:1.6cqw;font-weight:550;color:#17202b}
.c6-p1,.c6-p2{left:72cqw;top:39cqw}
/* the note for the team: the call it came from, what they need, «Por confirmar» */
.c6-note{left:44cqw;top:17cqw;width:50cqw;height:35cqw;z-index:3;border-radius:1.6cqw;transform-origin:-12.6% 38.6%}
.c6-ico{left:3cqw;top:2.6cqw;width:3cqw;height:3cqw;border-radius:.8cqw;background:#e3efe8;display:grid!important;place-items:center}
.c6-ico svg{fill:#2f7a55!important;width:58%!important}
.c6-src{left:7cqw;top:3.25cqw;font-size:1.4cqw;font-weight:650;color:#3a4a5c}
.c6-dur{right:3cqw;top:3.25cqw;font-size:1.3cqw;color:#8a93a3}
.c6-rule{left:3cqw;right:3cqw;height:1px;background:#e6e9ee}
.c6-rule.a{top:7.4cqw}.c6-rule.b{top:25.4cqw}
.c6-note .k-lab.m{left:3cqw;top:9.4cqw}
.c6-what{left:3cqw;top:11.3cqw;font-size:3.1cqw;font-weight:800;letter-spacing:-.03em;color:#17202b}
.c6-note .k-lab.c{left:3cqw;top:18.2cqw}.c6-note .k-lab.w{left:26cqw;top:18.2cqw}
.c6-v{font-size:1.8cqw;font-weight:700;color:#17202b;font-variant-numeric:tabular-nums}
.c6-v.c{left:3cqw;top:20.1cqw}.c6-v.w{left:26cqw;top:20.1cqw}
.c6-st{left:3cqw;top:27.8cqw;height:4.4cqw;padding:0 1.6cqw;border-radius:2.2cqw;background:#fdf1dc;box-shadow:inset 0 0 0 .18cqw #ecc27f;font-size:1.45cqw;font-weight:700;line-height:4.4cqw;color:#8a5a14}
.c6-ok{right:3cqw;top:27.8cqw;width:13cqw;height:4.4cqw;border-radius:2.2cqw;background:#244ce8;text-align:center;font-size:1.5cqw;font-weight:700;line-height:4.4cqw;color:#fff;box-shadow:0 1cqw 2cqw -1cqw #244ce8aa}

.is-playing .film-c6 .rw{animation-name:c6-cam}
.is-playing .c6-phone{animation-name:c6-ring}
.is-playing .c6-in{animation-name:c6-in}
.is-playing .c6-isl i{animation-name:c6-isl}
.is-playing .c6-on{animation-name:c6-on}
.is-playing .c6-miss{animation-name:c6-miss}
.is-playing .c6-t .t0{animation-name:c6-t0}.is-playing .c6-t .t1{animation-name:c6-t1}.is-playing .c6-t .t2{animation-name:c6-t2}.is-playing .c6-t .t3{animation-name:c6-t3}
.is-playing .c6-wave .a{animation-name:c6-wa}.is-playing .c6-wave .b{animation-name:c6-wb}.is-playing .c6-wave .c{animation-name:c6-wc}
.is-playing .c6-vb{animation-name:vb-drop,vb-click-edge}
.is-playing .c6-b1{animation-name:c6-b1}
.is-playing .c6-b2{animation-name:c6-b2}
.is-playing .c6-p1{animation-name:c6-p1x}.is-playing .c6-p1 .fy{animation-name:c6-p1y}
.is-playing .c6-p2{animation-name:c6-p2x}.is-playing .c6-p2 .fy{animation-name:c6-p2y}
.is-playing .c6-note{animation-name:c6-note}
.is-playing .c6-st{animation-name:c6-st}
.is-playing .c6-ok{animation-name:c6-ok}
@keyframes c6-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(1.3) translate(-20cqw,-35cqw);animation-timing-function:linear}
  20%{transform:translate(50cqw,37.5cqw) scale(1.34) translate(-20cqw,-35cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  25.5%{transform:translate(50cqw,37.5cqw) scale(1.05) translate(-50cqw,-34cqw);animation-timing-function:linear}
  48%{transform:translate(50cqw,37.5cqw) scale(1.08) translate(-50cqw,-34cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%{transform:translate(50cqw,37.5cqw) scale(1.04) translate(-53cqw,-36cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.06) translate(-53cqw,-36cqw)}}
/* four bursts of ringing; nobody picks up */
@keyframes c6-ring{
  0%,1%,4%,6%,9%,11%,14%,16%,19%,100%{transform:none}
  1.6%,6.6%,11.6%,16.6%{transform:rotate(-2deg)}2.2%,7.2%,12.2%,17.2%{transform:rotate(2deg)}2.8%,7.8%,12.8%,17.8%{transform:rotate(-2deg)}3.4%,8.4%,13.4%,18.4%{transform:rotate(2deg)}}
@keyframes c6-in{0%,28%{opacity:1}29.2%,100%{opacity:0}}
@keyframes c6-isl{0%,28.4%{opacity:0}29.4%,100%{opacity:1}}
@keyframes c6-on{0%,28%{opacity:0}29.2%,100%{opacity:1}}
@keyframes c6-miss{0%,11%{opacity:0;transform:translateY(.6cqw)}12.5%,26.5%{opacity:1;transform:none}28%,100%{opacity:0;transform:none}}
@keyframes c6-t0{0%,28.4%{opacity:0}29.2%,36.6%{opacity:1}37%,100%{opacity:0}}
@keyframes c6-t1{0%,36.6%{opacity:0}37%,41.6%{opacity:1}42%,100%{opacity:0}}
@keyframes c6-t2{0%,41.6%{opacity:0}42%,46.6%{opacity:1}47%,100%{opacity:0}}
@keyframes c6-t3{0%,46.6%{opacity:0}47%,100%{opacity:1}}
/* the voice: three phases of the same wave while someone speaks (30–34, 36–41) */
@keyframes c6-wa{0%,29.2%{transform:scaleY(.3)}30.6%{transform:scaleY(1)}32%{transform:scaleY(.5)}33.4%{transform:scaleY(1.1)}34.8%{transform:scaleY(.4)}36.2%{transform:scaleY(.9)}37.6%{transform:scaleY(.45)}39%{transform:scaleY(1.1)}40.4%{transform:scaleY(.5)}42%,100%{transform:none}}
@keyframes c6-wb{0%,29.2%{transform:scaleY(.3)}30.6%{transform:scaleY(.55)}32%{transform:scaleY(1.1)}33.4%{transform:scaleY(.45)}34.8%{transform:scaleY(.9)}36.2%{transform:scaleY(.4)}37.6%{transform:scaleY(1.05)}39%{transform:scaleY(.5)}40.4%{transform:scaleY(1)}42%,100%{transform:none}}
@keyframes c6-wc{0%,29.2%{transform:scaleY(.3)}30.6%{transform:scaleY(.8)}32%{transform:scaleY(.4)}33.4%{transform:scaleY(.7)}34.8%{transform:scaleY(1.1)}36.2%{transform:scaleY(.5)}37.6%{transform:scaleY(.8)}39%{transform:scaleY(.35)}40.4%{transform:scaleY(.9)}42%,100%{transform:none}}
@keyframes c6-b1{0%,30%{opacity:0;transform:translateY(1.2cqw)}31.6%,53%{opacity:1;transform:none}55.5%,100%{opacity:0;transform:none}}
@keyframes c6-b2{0%,36%{opacity:0;transform:translateY(1.2cqw)}37.6%,53%{opacity:1;transform:none}55.5%,100%{opacity:0;transform:none}}
/* what the caller said goes into the piece (72, 39 → 37.7, 30.5) */
@keyframes c6-p1x{0%,44%{opacity:0;transform:none}44.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}47.4%{opacity:1;transform:translateX(-34.3cqw)}47.8%,100%{opacity:0;transform:translateX(-34.3cqw)}}
@keyframes c6-p1y{0%,44.4%{transform:none;animation-timing-function:cubic-bezier(.2,0,.3,1)}47.4%,100%{transform:translateY(-8.5cqw)}}
@keyframes c6-p2x{0%,46%{opacity:0;transform:none}46.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}49.4%{opacity:1;transform:translateX(-34.3cqw)}49.8%,100%{opacity:0;transform:translateX(-34.3cqw)}}
@keyframes c6-p2y{0%,46.4%{transform:none;animation-timing-function:cubic-bezier(.2,0,.3,1)}49.4%,100%{transform:translateY(-8.5cqw)}}
@keyframes c6-note{0%,57.6%{opacity:0;transform:scale(.14)}58.4%{opacity:1;transform:scale(.18);animation-timing-function:cubic-bezier(.2,0,0,1)}62%,100%{opacity:1;transform:none}}
@keyframes c6-st{0%,62.4%{opacity:0;transform:scale(.8)}63.6%,100%{opacity:1;transform:none}}
@keyframes c6-ok{0%,63%{opacity:0}64.2%,100%{opacity:1}}

/* ---------------------------------------------------------------------------
   C7 · Responde a cualquier hora. 23:14, the shop is closed and a customer
   asks whether they ship to Tenerife. Vibilog finds the answer in what the
   shop has told it (its «Información de tu empresa») and answers at once.
   Only this one question (Codex, 27-sep): languages and handing over to a
   person are told in the case text, not in the film.
     2→3.4  the question arrives · 10→11.6 «Sin respuesta hasta mañana»
     20→24  the shop's sheet comes in · 20→25.5 medium shot
     23→26.5 the piece docks between the two, click 27.8
     29→36  the «Envíos» row of the shop's sheet lights
     31→35.4 its answer travels through the piece into the chat
     35.6→38.6 typing · 38.8 the answer · 42 its source · 44 «Respondido»
     48→55 to the result shot
   Shots (X, Y, S): chat 70,34,1.38 · medium 50,36,1.05 · result 60,35,1.22
   In the result the shop's sheet steps back (opacity .5): the chat is the point.
   --------------------------------------------------------------------------- */
.film-c7{--film-bg:#f0eef7;--film-dot:#cec8e0}
.folder-card.assistant{--poster-y:-18%}
.film-c7 .rw{transform:translate(50cqw,37.5cqw) scale(1.22) translate(-60cqw,-35cqw)}
.c7-info{left:4cqw;top:10cqw;width:36cqw;height:46cqw;border-radius:1.2cqw;opacity:.5}
.c7-info>.k-lab{left:3cqw;top:2.6cqw}
.c7-title{left:3cqw;top:4.6cqw;font-size:2cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.c7-rule{left:3cqw;right:3cqw;height:1px;background:#e6e9ee}
.c7-info .c7-rule{top:9cqw}
.c7-row{left:1.5cqw;right:1.5cqw;height:7.4cqw;border-radius:.7cqw}
.c7-row.q1{top:10.4cqw}.c7-row.q2{top:18.8cqw}.c7-row.q3{top:27.2cqw}.c7-row.q4{top:35.6cqw}
.c7-row::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#eef3ff;box-shadow:inset 0 0 0 .22cqw #2453ec;opacity:0}
.c7-row .k-lab{left:1.5cqw;top:1.4cqw}
.c7-row b{left:1.5cqw;top:3.5cqw;font-size:1.4cqw;font-weight:600;color:#17202b}
.c7-vb{left:37.40cqw;top:27.00cqw;width:11cqw;border-radius:2.36cqw}
/* the answer's path: the sheet's row (22, 32.5) → the piece (42.9) → the chat (69.5, 36) */
.c7-p{left:22cqw;top:32.5cqw}
.c7-chat{left:46cqw;top:9cqw;width:48cqw;height:50cqw;z-index:3;border-radius:1.6cqw}
.c7-av{left:3cqw;top:2.4cqw;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#dcd9f1;text-align:center;font-size:2cqw;font-weight:800;line-height:4.4cqw;color:#494263}
.c7-name{left:8.6cqw;top:2.4cqw;font-size:1.8cqw;font-weight:750;color:#17202b}
.c7-stat{left:8.6cqw;top:5cqw;font-size:1.25cqw;color:#8a93a3}
.c7-chat .c7-rule{top:9.2cqw}
.c7-m1{right:3cqw;top:12cqw;height:5.6cqw;padding:0 1.9cqw;border-radius:2.8cqw;background:#17202b;font-size:1.9cqw;font-weight:600;line-height:5.6cqw;color:#fff}
.c7-t1{right:3.4cqw;top:18.4cqw;font-size:1.3cqw;color:#8a93a3}
.c7-wait{left:3cqw;top:23cqw;font-size:1.45cqw;font-weight:600;color:#a8630f;opacity:0}
.c7-dots{left:3cqw;top:22cqw;width:8cqw;height:4.4cqw;border-radius:2.2cqw;background:#eef3ff;opacity:0}
.c7-dots i{top:1.75cqw;width:.9cqw;height:.9cqw;border-radius:50%;background:#7d93d6}
.c7-dots i:nth-child(1){left:2cqw}.c7-dots i:nth-child(2){left:3.55cqw}.c7-dots i:nth-child(3){left:5.1cqw}
.c7-m2{left:3cqw;top:22cqw;width:41cqw;height:10cqw;border-radius:1.4cqw 1.4cqw 1.4cqw .4cqw;background:#eef3ff;box-shadow:inset 0 0 0 .15cqw #d6e0fb}
.c7-m2 span{left:1.8cqw;font-size:1.85cqw;font-weight:600;color:#17202b}
.c7-m2 .l1{top:1.9cqw}.c7-m2 .l2{top:5.3cqw}
.c7-src{left:3.2cqw;top:33.2cqw;font-size:1.4cqw;font-weight:650;color:#244ce8}
.c7-done{left:3.2cqw;top:36.4cqw;font-size:1.45cqw;font-weight:700;color:#2f7a55}
.c7-in{left:3cqw;right:3cqw;top:43.4cqw;height:4.6cqw;padding-left:1.8cqw;border-radius:2.5cqw;background:#f4f6f9;font-size:1.35cqw;line-height:4.6cqw;color:#8a93a3}

.is-playing .film-c7 .rw{animation-name:c7-cam}
.is-playing .c7-info{animation-name:c7-info}
.is-playing .c7-m1{animation-name:c7-m1}
.is-playing .c7-t1{animation-name:c7-t1}
.is-playing .c7-wait{animation-name:c7-wait}
.is-playing .c7-vb{animation-name:vb-drop,vb-click-edge}
.is-playing .c7-row.q2::before{animation-name:c7-hl}
.is-playing .c7-p{animation-name:c7-px}.is-playing .c7-p .fy{animation-name:c7-py}
.is-playing .c7-dots{animation-name:c7-dots}
.is-playing .c7-dots i:nth-child(1){animation-name:c7-d1}.is-playing .c7-dots i:nth-child(2){animation-name:c7-d2}.is-playing .c7-dots i:nth-child(3){animation-name:c7-d3}
.is-playing .c7-m2{animation-name:c7-m2}
.is-playing .c7-src{animation-name:c7-src}
.is-playing .c7-done{animation-name:c7-done}
@keyframes c7-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(1.38) translate(-70cqw,-34cqw);animation-timing-function:linear}
  20%{transform:translate(50cqw,37.5cqw) scale(1.42) translate(-70cqw,-34cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  25.5%{transform:translate(50cqw,37.5cqw) scale(1.05) translate(-50cqw,-36cqw);animation-timing-function:linear}
  48%{transform:translate(50cqw,37.5cqw) scale(1.08) translate(-50cqw,-36cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%{transform:translate(50cqw,37.5cqw) scale(1.2) translate(-60cqw,-35cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.22) translate(-60cqw,-35cqw)}}
@keyframes c7-info{0%,20%{opacity:0;transform:translateX(-2cqw)}24%,49%{opacity:1;transform:none}55%,100%{opacity:.5;transform:none}}
@keyframes c7-m1{0%,2%{opacity:0;transform:translateY(1cqw)}3.4%,100%{opacity:1;transform:none}}
@keyframes c7-t1{0%,3%{opacity:0}4%,100%{opacity:1}}
@keyframes c7-wait{0%,10%{opacity:0;transform:translateY(.5cqw)}11.6%,25.5%{opacity:1;transform:none}27%,100%{opacity:0;transform:none}}
@keyframes c7-hl{0%,29%{opacity:0}30%,35%{opacity:1}36.5%,100%{opacity:0}}
@keyframes c7-px{0%,31%{opacity:0;transform:none}31.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}33.2%{opacity:1;transform:translateX(20.9cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}35.4%{opacity:1;transform:translateX(47.5cqw)}35.8%,100%{opacity:0;transform:translateX(47.5cqw)}}
@keyframes c7-py{0%,33.2%{transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}35.4%,100%{transform:translateY(3.5cqw)}}
@keyframes c7-dots{0%,35.6%{opacity:0;transform:scale(.8)}36.4%,38.4%{opacity:1;transform:none}38.8%,100%{opacity:0;transform:none}}
@keyframes c7-d1{0%,36%{transform:none}36.6%{transform:translateY(-.5cqw)}37.2%,100%{transform:none}}
@keyframes c7-d2{0%,36.4%{transform:none}37%{transform:translateY(-.5cqw)}37.6%,100%{transform:none}}
@keyframes c7-d3{0%,36.8%{transform:none}37.4%{transform:translateY(-.5cqw)}38%,100%{transform:none}}
@keyframes c7-m2{0%,38.8%{opacity:0;transform:translateY(1cqw) scale(.96)}40.4%,100%{opacity:1;transform:none}}
@keyframes c7-src{0%,42%{opacity:0;transform:translateY(.5cqw)}43.2%,100%{opacity:1;transform:none}}
@keyframes c7-done{0%,44%{opacity:0;transform:translateY(.5cqw)}45.4%,100%{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   C8 · Mantén informados a tus clientes. Three clients write to ask how their
   case is going. In the portal, the team marks case 2026-031 as sent (a human
   decision, so a hand, and before the click: Codex, 27-sep); Vibilog publishes
   it and the client sees «Enviado» in their own view. The shared state is the
   story, not a notification.
     1.5 / 5 / 8.5  the three questions arrive
     11→15.5 to the team's view (it fades in, 11→13.5, so it never peeks into the
            first shot) · 14.6→18.6 the hand goes to «Marcar como
            enviado», 23.2 it presses, 23.8 the button confirms
     20→26 medium shot · 23→26.5 the piece lands between the two views, click
            27.8: the step turns done (28.2) · 30→33.6 it travels to the client
     34 the client's «Enviado» lights · 36.4 «Novedad en tu expediente»
     40 / 40.6 / 41.2 the questions go · 48→55 to the result shot, where
            the team's view steps back (opacity .5)
   Shots (X, Y, S): questions 29,63,1.6 · team 34,25,1.4 · medium 50,38,1 ·
   result 70,38,1.32
   --------------------------------------------------------------------------- */
.film-c8{--film-bg:#f7ede7;--film-dot:#dcc4b7}
.folder-card.portal{--poster-y:-18%}
.film-c8 .rw{transform:translate(50cqw,37.5cqw) scale(1.32) translate(-70cqw,-38cqw)}
.c8-msg{width:24cqw;height:7.4cqw;border-radius:1.2cqw 1.2cqw 1.2cqw .3cqw;opacity:0}
.c8-msg.m1{left:5cqw;top:49cqw}.c8-msg.m2{left:17cqw;top:55.4cqw}.c8-msg.m3{left:29cqw;top:61.8cqw}
.c8-msg .k-lab{left:1.8cqw;top:1.3cqw}
.c8-msg b{left:1.8cqw;top:3.4cqw;font-size:1.55cqw;font-weight:600;color:#17202b}
/* the team's view of the case */
.c8-desk{left:8cqw;top:8cqw;width:52cqw;height:34cqw;border-radius:1.2cqw;opacity:.5}
.c8-desk>.k-lab{left:3cqw;top:2.6cqw}
.c8-title{left:3cqw;top:4.6cqw;font-size:1.85cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.c8-rule{left:3cqw;right:3cqw;height:1px;background:#e6e9ee}
.c8-rule.a{top:9cqw}.c8-rule.b{top:22.4cqw}
.c8-link{top:13.85cqw;width:9.2cqw;height:.3cqw;border-radius:.15cqw;background:#30a46c}
.c8-link.l1{left:6.8cqw}.c8-link.l2{left:18.8cqw}.c8-link.l3{left:30.8cqw;background:#dfe4ea}
.c8-node{top:12.6cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#eef1f5;box-shadow:inset 0 0 0 .15cqw #d6dce4;display:grid!important;place-items:center}
.c8-node.s1{left:4cqw}.c8-node.s2{left:16cqw}.c8-node.s3{left:28cqw}.c8-node.s4{left:40cqw}
.c8-node.done,.c8-dot.done{background:#30a46c;box-shadow:none}
.c8-node svg,.c8-dot svg{position:static!important;width:60%;height:auto;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c8-lbl{top:17.2cqw;width:12cqw;text-align:center;font-size:1.2cqw;color:#5c6878}
.c8-lbl.s1{left:-.6cqw}.c8-lbl.s2{left:11.4cqw}.c8-lbl.s3{left:23.4cqw;height:1.6cqw}.c8-lbl.s4{left:35.4cqw}
.c8-lbl.s3 span{left:0;top:0;width:100%;text-align:center}
.c8-lbl.s3 .x0{opacity:0;color:#244ce8;font-weight:650}
.c8-lbl.s3 .x1{color:#17202b;font-weight:650}
.c8-mark{left:3cqw;top:25.4cqw;width:25cqw;height:5cqw;border-radius:2.5cqw;background:#e3efe8;color:#2f7a55;font-size:1.45cqw;font-weight:700;transform-origin:50% 50%}
.c8-mark span{left:0;top:0;width:100%;text-align:center;line-height:5cqw}
.c8-mark .a1{opacity:0}
.c8-cur{left:0;top:0}
.c8-vb{left:54.10cqw;top:16.50cqw;width:11cqw;border-radius:2.36cqw}
/* the published step: team node (37.4, 22) → the piece (62.1) → the client's «Enviado» (79.5, 41.9) */
.c8-p{left:37.4cqw;top:22cqw}
/* the client's own view */
.c8-client{left:64cqw;top:12cqw;width:31cqw;height:52cqw;z-index:3;border-radius:1.6cqw}
.c8-noti{left:2cqw;right:2cqw;top:2.2cqw;height:4.6cqw;padding-left:3.4cqw;border-radius:2.3cqw;background:#17202b;font-size:1.25cqw;font-weight:700;line-height:4.6cqw;color:#fff}
.c8-noti i{left:1.6cqw;top:1.8cqw;width:1cqw;height:1cqw;border-radius:50%;background:#6f8cff}
.c8-client>.k-lab{left:3cqw;top:9.4cqw}
.c8-num{left:3cqw;top:11.3cqw;font-size:2.5cqw;font-weight:800;letter-spacing:-.02em;color:#17202b;font-variant-numeric:tabular-nums}
.c8-spine{left:4.15cqw;top:19.4cqw;width:.3cqw;height:20.5cqw;background:#e1e6ec}
.c8-v{left:0;width:31cqw}
.c8-v.v1{top:17cqw;height:6cqw}.c8-v.v2{top:24.4cqw;height:11cqw}.c8-v.v3{top:38cqw;height:5cqw}
.c8-dot{left:3cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .2cqw #d6dce4;display:grid!important;place-items:center}
.c8-v.v1 .c8-dot{top:1cqw}.c8-v.v3 .c8-dot{top:.6cqw}
.c8-v>b,.c8-v .off b{left:7.2cqw;font-size:1.5cqw;font-weight:600}
.c8-v.v1>b{top:.9cqw;color:#17202b}
.c8-v.v1>small{left:7.2cqw;top:3.2cqw;font-size:1.15cqw;color:#8a93a3}
.c8-v.v3>b{top:.5cqw;color:#8a93a3}
.c8-v .off,.c8-v .on{left:0;top:0;width:31cqw;height:11cqw}
.c8-v .off{opacity:0}
.c8-v .off .c8-dot{top:1.4cqw}.c8-v .off b{top:1.4cqw;color:#8a93a3}
.c8-v .on::before{content:"";position:absolute;left:1.6cqw;right:1.6cqw;top:0;bottom:0;border-radius:1.2cqw;background:#eef3ff;box-shadow:inset 0 0 0 .2cqw #2453ec}
.c8-v .on .c8-dot{top:3.8cqw;background:#2453ec;box-shadow:0 0 0 .5cqw #2453ec33}
.c8-v .on .k-lab{left:7.2cqw;top:1.8cqw;color:#244ce8}
.c8-v .on b{left:7.2cqw;top:3.6cqw;font-size:2.8cqw;font-weight:800;letter-spacing:-.03em;color:#17202b}
.c8-v .on small{left:7.2cqw;top:7.4cqw;font-size:1.2cqw;color:#5c6878}

.is-playing .film-c8 .rw{animation-name:c8-cam}
.is-playing .c8-msg.m1{animation-name:c8-m1}.is-playing .c8-msg.m2{animation-name:c8-m2}.is-playing .c8-msg.m3{animation-name:c8-m3}
.is-playing .c8-cur{animation-name:c8-cx}.is-playing .c8-cur svg{animation-name:c8-cy}
.is-playing .c8-desk{animation-name:c8-desk}
.is-playing .c8-mark{animation-name:c8-mark}
.is-playing .c8-mark .a1{animation-name:c8-a1}.is-playing .c8-mark .a2{animation-name:c8-a2}
.is-playing .c8-vb{animation-name:vb-drop,vb-click-edge}
.is-playing .c8-node.s3{animation-name:c8-n3}.is-playing .c8-node.s3 svg{animation-name:c8-n3k}
.is-playing .c8-lbl.s3 .x0{animation-name:c8-x0}.is-playing .c8-lbl.s3 .x1{animation-name:c8-x1}
.is-playing .c8-p{animation-name:c8-px}.is-playing .c8-p .fy{animation-name:c8-py}
.is-playing .c8-v .off{animation-name:c8-off}.is-playing .c8-v .on{animation-name:c8-on}
.is-playing .c8-noti{animation-name:c8-noti}
@keyframes c8-cam{
  0%{transform:translate(50cqw,37.5cqw) scale(1.6) translate(-29cqw,-63cqw);animation-timing-function:linear}
  11%{transform:translate(50cqw,37.5cqw) scale(1.62) translate(-29cqw,-63cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  15.5%{transform:translate(50cqw,37.5cqw) scale(1.4) translate(-34cqw,-25cqw);animation-timing-function:linear}
  20%{transform:translate(50cqw,37.5cqw) scale(1.42) translate(-34cqw,-25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  26%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-38cqw);animation-timing-function:linear}
  48%{transform:translate(50cqw,37.5cqw) scale(1.02) translate(-50cqw,-38cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%{transform:translate(50cqw,37.5cqw) scale(1.3) translate(-70cqw,-38cqw);animation-timing-function:linear}
  100%{transform:translate(50cqw,37.5cqw) scale(1.32) translate(-70cqw,-38cqw)}}
/* in the result the team's view steps back: the client's view is the point */
@keyframes c8-desk{0%,11%{opacity:0}13.5%,49%{opacity:1}55%,100%{opacity:.5}}
@keyframes c8-m1{0%,1.5%{opacity:0;transform:translateY(1.2cqw)}2.8%,40%{opacity:1;transform:none}42%,100%{opacity:0;transform:none}}
@keyframes c8-m2{0%,5%{opacity:0;transform:translateY(1.2cqw)}6.3%,40.6%{opacity:1;transform:none}42.6%,100%{opacity:0;transform:none}}
@keyframes c8-m3{0%,8.5%{opacity:0;transform:translateY(1.2cqw)}9.8%,41.2%{opacity:1;transform:none}43.2%,100%{opacity:0;transform:none}}
/* the hand: to «Marcar como enviado» (its tip on 23.5, 35.9), a pause, the press */
@keyframes c8-cx{0%,14%{opacity:0;transform:translateX(40cqw)}14.6%{opacity:1;transform:translateX(38.5cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}18.6%,24.4%{opacity:1;transform:translateX(23.2cqw);animation-timing-function:cubic-bezier(.4,0,.8,.6)}26.6%,100%{opacity:0;transform:translateX(33cqw)}}
@keyframes c8-cy{0%,14.6%{transform:translateY(52cqw) scale(1);animation-timing-function:cubic-bezier(.2,0,.3,1)}18.6%,22.6%{transform:translateY(35.6cqw) scale(1)}23.2%{transform:translateY(35.6cqw) scale(.84)}23.8%,24.4%{transform:translateY(35.6cqw) scale(1);animation-timing-function:cubic-bezier(.4,0,1,1)}26.6%,100%{transform:translateY(48cqw) scale(1)}}
@keyframes c8-mark{0%,18.6%{background-color:#244ce8;color:#fff;transform:none}19.4%,22.6%{background-color:#143cbf;color:#fff;transform:none}23.2%{background-color:#143cbf;color:#fff;transform:scale(.97)}23.8%{background-color:#244ce8;color:#fff;transform:none}24.8%,100%{background-color:#e3efe8;color:#2f7a55;transform:none}}
@keyframes c8-a1{0%,23.8%{opacity:1}24.4%,100%{opacity:0}}
@keyframes c8-a2{0%,24%{opacity:0}24.8%,100%{opacity:1}}
/* the step: current (blue ring) until the piece records it */
@keyframes c8-n3{0%,28.2%{background-color:#fff;box-shadow:inset 0 0 0 .3cqw #2453ec}29.2%,100%{background-color:#30a46c;box-shadow:inset 0 0 0 0 #2453ec00}}
@keyframes c8-n3k{0%,28.6%{opacity:0;transform:scale(.5)}29.6%,100%{opacity:1;transform:none}}
@keyframes c8-x0{0%,28.4%{opacity:1}29%,100%{opacity:0}}
@keyframes c8-x1{0%,28.6%{opacity:0}29.4%,100%{opacity:1}}
@keyframes c8-px{0%,30%{opacity:0;transform:none}30.4%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}31.8%{opacity:1;transform:translateX(24.7cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}33.6%{opacity:1;transform:translateX(42.1cqw)}34%,100%{opacity:0;transform:translateX(42.1cqw)}}
@keyframes c8-py{0%,31.8%{transform:none;animation-timing-function:cubic-bezier(.2,0,.3,1)}33.6%,100%{transform:translateY(19.9cqw)}}
@keyframes c8-off{0%,34%{opacity:1}35%,100%{opacity:0}}
@keyframes c8-on{0%,34.4%{opacity:0;transform:scale(.96)}35.6%,100%{opacity:1;transform:none}}
@keyframes c8-noti{0%,36.4%{opacity:0;transform:translateY(-1.2cqw)}37.6%,100%{opacity:1;transform:none}}