/* ===========================================================================
   The films of servicios.html: the three «formas» (FA, FB, FC) and the method (FM).
   Their drawings are in generador/peliculas/<name>.html; the camera, cards, pills
   and hand are vibilog-paginas.css («The drawing of those films»); the piece is
   vibilog-pieza.css. Played by vibilog-peliculas.js: keyframes only under
   .is-playing, ONE 20 s cycle, infinite (1 % = 200 ms); only the film most on
   screen moves. The BASE style of every element is the frame at data-rest
   (18 s = 90 %, the held result), and the 90 % keyframe must match it: it is
   what shows without JS, with reduced motion and while a film waits its turn.
   Each cycle fades in (0–2.5 %) and out (96–100 %) over the dotted ground.
   The click of the piece never changes (vibilog-pieza.css): in a 20 s cycle
   its halves close in .81 % (162 ms), overshoot at T, settle at T+.32 %;
   the edge flashes from T−.09 % to T+.18 % and is back at T+2.03 %.
   =========================================================================== */
.loop-film.is-playing .film-stage *,.loop-film.is-playing .loop-cap span{animation-duration:20s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,0,0,1)}
@keyframes lf-fade{0%{opacity:0}2.5%,96%{opacity:1}100%{opacity:0}}
@media print{.loop-film *{animation:none!important}}

/* ---------------------------------------------------------------------------
   FA · Automatización · «Media hora, veinte veces». A distributor's daily
   dispatch report: 30 min by hand every morning; over 20 working days, 10 h a
   month. The piece prepares it; one delivery note without a reference is set
   aside and the person leaves it pending: 6 min of review a day, 2 h a month,
   8 h back (20 × 6 = 120 min; 20 × 30 = 600 min).
     0–22    close on the day card: its three steps and «30 min» appear
     22→30   wide · 30–46 the month fills, week by week, with «30 min»
     46      «20 jornadas × 30 min = 10 h al mes»
     48→54   medium on the right column · 52/53.5 two pills leave the card
     58.5    click · 59 the steps get their tick, the day reads «6 min»
     60.5    today's report comes out of the piece; its exception lights amber
     64→68   the hand goes to «Dejar pendiente» · 68.5 press · 69 «✓ Pendiente»
     72→78   wide · 76–84 the month turns blue, week by week, «6 min»
     84      «20 jornadas × 6 min = 2 h al mes» · 86 the card: «8 h recuperadas»
   Shots (X, Y, S): day 79.5,19,2 · wide 50,37.5,1 · right 79.5,38,1.22
   --------------------------------------------------------------------------- */
.film-automatizar{--film-bg:#e6ebf2;--film-dot:#c9d2e0}
.a-cal{left:3cqw;top:7cqw;width:55cqw;height:61cqw}
.a-cal-lab{left:3cqw;top:3cqw}
.a-cal-t{left:3cqw;top:5.3cqw;font-size:2.6cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.a-wd{left:3cqw;top:10.6cqw;width:49cqw;height:2cqw}
.a-wd span{top:0;width:9.2cqw;text-align:center;font-size:1.3cqw;font-weight:700;letter-spacing:.1em;color:#8390a3}
.a-wd span:nth-child(2){left:10cqw}.a-wd span:nth-child(3){left:20cqw}.a-wd span:nth-child(4){left:30cqw}.a-wd span:nth-child(5){left:40cqw}
.a-grid{left:3cqw;top:13.4cqw;width:49cqw;height:34.4cqw;display:grid!important;grid-template-columns:repeat(5,9.2cqw);grid-auto-rows:8cqw;gap:.8cqw}
.rw .a-grid .a-c{position:relative;border-radius:.9cqw}
.g0 .a-c{background:#f1f4f8;box-shadow:inset 0 0 0 .15cqw #e2e7ef}
.g30 .a-c{background:#fbf0dc;box-shadow:inset 0 0 0 .15cqw #efd3a2}
.g6 .a-c{background:#eaf0ff;box-shadow:inset 0 0 0 .15cqw #c3d2f7}
.a-c b{left:0;right:0;top:2.9cqw;text-align:center;font-size:1.75cqw;font-weight:700;font-variant-numeric:tabular-nums}
.g30 b{color:#93600f}.g6 b{color:#1f3fb8}
.a-rule{left:3cqw;right:3cqw;top:50.4cqw;height:1px;background:#e3e8ef}
.a-sum{left:3cqw;right:3cqw;top:52.4cqw;height:5cqw}
.a-sum span{left:0;top:1.3cqw;font-size:1.85cqw;color:#5d6b82}
.a-sum b{right:0;top:.4cqw;font-size:3.1cqw;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.s30 b{color:#93600f}.s6 b{color:#1f3fb8}
.s30{opacity:0}
.a-day{left:62cqw;top:5cqw;width:35cqw;height:28cqw}
.a-day-lab{left:2.6cqw;top:2.4cqw}
.a-day-t{left:2.6cqw;top:4.6cqw;font-size:2.4cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.a-row{left:2.6cqw;right:2.6cqw;height:3.4cqw}
.a-row.r1{top:9.6cqw}.a-row.r2{top:13.2cqw}.a-row.r3{top:16.8cqw}
.a-row span{left:0;top:.5cqw;font-size:1.9cqw;color:#27364a}
.a-row em{right:0;top:.5cqw;font-size:1.9cqw;font-weight:700;font-variant-numeric:tabular-nums}
.a-row .v0{color:#93600f;opacity:0}.a-row .v1{color:#1f3fb8}
.a-rule2{left:2.6cqw;right:2.6cqw;top:21cqw;height:1px;background:#e3e8ef}
.a-tot{left:2.6cqw;right:2.6cqw;top:22.2cqw;height:4.4cqw}
.a-tot span{left:0;top:1.1cqw;font-size:1.7cqw;color:#5d6b82}
.a-tot b{right:0;top:0;font-size:3cqw;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.a-tot.t0{opacity:0}.t0 b{color:#93600f}.t1 b{color:#1f3fb8}
.a-vb{left:76.2cqw;top:37.3cqw;width:6.6cqw;border-radius:1.5cqw}
.a-p1,.a-p2,.a-p3{left:77.8cqw;top:30cqw}
.a-out{left:62cqw;top:48cqw;width:35cqw;height:20.5cqw}
.a-o1,.a-o2{inset:0}
.a-o1{opacity:0}
.a-out .lf-lab{left:2.6cqw;top:2.4cqw}
.a-o1-t{left:2.6cqw;top:4.6cqw;font-size:2.4cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.a-o1-t em{position:static!important;display:inline!important;color:#1f3fb8}
.a-exc{left:1.6cqw;right:1.6cqw;top:8.8cqw;height:7cqw;border-radius:.9cqw;background:#fdf1dc;box-shadow:inset 0 0 0 .18cqw #ecc27f}
.a-exc>b{left:1.2cqw;top:1.3cqw;font-size:1.75cqw;font-weight:700;color:#6e4a10}
.a-exc>small{left:1.2cqw;top:3.9cqw;font-size:1.4cqw;color:#8a6424}
.a-btn{right:1cqw;top:1.8cqw;width:14.6cqw;height:3.4cqw;border-radius:1.7cqw;background:#17202b}
.a-btn span{left:0;right:0;top:.8cqw;text-align:center;font-size:1.55cqw;font-weight:700;color:#fff}
.a-btn .b0{opacity:0}
.a-rev{left:2.6cqw;top:16.9cqw;font-size:1.6cqw;color:#5d6b82}
.a-big{left:2.6cqw;top:5cqw;font-size:3.9cqw;font-weight:800;letter-spacing:-.035em;color:#1f3fb8}
.a-cmp{left:2.6cqw;top:10.8cqw;font-size:2.1cqw;font-weight:650;color:#17202b;font-variant-numeric:tabular-nums}
.a-cmp s{position:static!important;display:inline!important;color:#93600f;text-decoration-thickness:.2cqw}
.a-o2 small{left:2.6cqw;top:15cqw;font-size:1.6cqw;color:#5d6b82}
.a-cur{left:0;top:0}

.lf-automatizar.is-playing .rw{animation-name:fa-cam,lf-fade}
.lf-automatizar.is-playing .a-day .a-row{animation-name:fa-row}
.lf-automatizar.is-playing .a-row.r2{animation-name:fa-row2}
.lf-automatizar.is-playing .a-row.r3{animation-name:fa-row3}
.lf-automatizar.is-playing .a-row .v0{animation-name:fa-v0}
.lf-automatizar.is-playing .a-row .v1{animation-name:fa-v1}
.lf-automatizar.is-playing .a-tot.t0{animation-name:fa-t0}
.lf-automatizar.is-playing .a-tot.t1{animation-name:fa-t1}
.lf-automatizar.is-playing .g30{animation-name:fa-g30}
.lf-automatizar.is-playing .g6{animation-name:fa-g6}
.lf-automatizar.is-playing .s30{animation-name:fa-s30}
.lf-automatizar.is-playing .s6{animation-name:fa-s6}
.lf-automatizar.is-playing .a-p1{animation-name:fa-p1}
.lf-automatizar.is-playing .a-p2{animation-name:fa-p2}
.lf-automatizar.is-playing .a-p3{animation-name:fa-p3}
.lf-automatizar.is-playing .a-vb{animation-name:fa-edge}
.lf-automatizar.is-playing .a-vb .vb-l{animation-name:fa-l}
.lf-automatizar.is-playing .a-vb .vb-r{animation-name:fa-r}
.lf-automatizar.is-playing .a-o1{animation-name:fa-o1}
.lf-automatizar.is-playing .a-o2{animation-name:fa-o2}
.lf-automatizar.is-playing .a-exc{animation-name:fa-exc}
.lf-automatizar.is-playing .a-btn .b0{animation-name:fa-b0}
.lf-automatizar.is-playing .a-btn .b1{animation-name:fa-b1}
.lf-automatizar.is-playing .a-btn{animation-name:fa-press}
.lf-automatizar.is-playing .a-rev{animation-name:fa-rev}
.lf-automatizar.is-playing .a-cur{animation-name:fa-cur}
.lf-automatizar.is-playing .loop-cap span:nth-child(1){animation-name:fa-c1}
.lf-automatizar.is-playing .loop-cap span:nth-child(2){animation-name:fa-c2}
.lf-automatizar.is-playing .loop-cap span:nth-child(3){animation-name:fa-c3}

@keyframes fa-cam{
  0%,22%{transform:translate(50cqw,37.5cqw) scale(2) translate(-79.5cqw,-19cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  30%,48%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-37.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  54%,72%{transform:translate(50cqw,37.5cqw) scale(1.22) translate(-79.5cqw,-38cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  78%,100%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-37.5cqw)}}
/* the three steps appear one by one, then the day's total */
@keyframes fa-row{0%,2%{opacity:0;transform:translateY(.8cqw)}4%,100%{opacity:1;transform:none}}
@keyframes fa-row2{0%,4%{opacity:0;transform:translateY(.8cqw)}6%,100%{opacity:1;transform:none}}
@keyframes fa-row3{0%,6%{opacity:0;transform:translateY(.8cqw)}8%,100%{opacity:1;transform:none}}
@keyframes fa-v0{0%,58.9%{opacity:1}59.3%,100%{opacity:0}}
@keyframes fa-v1{0%,59.3%{opacity:0;transform:scale(.6)}60.3%,100%{opacity:1;transform:none}}
@keyframes fa-t0{0%,9%{opacity:0;transform:scale(.9)}11%,59.5%{opacity:1;transform:none}61%,100%{opacity:0}}
@keyframes fa-t1{0%,60%{opacity:0}62%,100%{opacity:1}}
/* the month, week by week: a clip that uncovers one row per step */
@keyframes fa-g30{0%,30%{clip-path:inset(0 0 100% 0);animation-timing-function:steps(4,jump-start)}46%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fa-g6{0%,76%{clip-path:inset(0 0 100% 0);animation-timing-function:steps(4,jump-start)}84%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fa-s30{0%,46%{opacity:0;transform:translateY(.8cqw)}48%,84%{opacity:1;transform:none}85.5%,100%{opacity:0;transform:none}}
@keyframes fa-s6{0%,84.5%{opacity:0;transform:translateY(.8cqw)}86%,100%{opacity:1;transform:none}}
/* data from the day card goes into the piece (hidden behind it), and today's report comes out */
@keyframes fa-p1{0%,52%{opacity:0;transform:none}52.6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}56.5%{opacity:1;transform:translateY(9.6cqw)}57%,100%{opacity:0;transform:translateY(9.6cqw)}}
@keyframes fa-p2{0%,53.5%{opacity:0;transform:none}54.1%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}57.6%{opacity:1;transform:translateY(9.6cqw)}58%,100%{opacity:0;transform:translateY(9.6cqw)}}
@keyframes fa-p3{0%,59%{opacity:0;transform:translateY(10cqw)}59.4%{opacity:1;transform:translateY(10cqw);animation-timing-function:cubic-bezier(.3,0,.2,1)}61.4%{opacity:1;transform:translateY(18cqw)}62%,100%{opacity:0;transform:translateY(18cqw)}}
@keyframes fa-l{0%,57.69%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}58.5%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}58.82%,100%{transform:none}}
@keyframes fa-r{0%,57.69%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}58.5%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}58.82%,100%{transform:none}}
@keyframes fa-edge{0%,58.41%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}58.68%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}60.53%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes fa-o1{0%,60.5%{opacity:0;transform:translateY(-3cqw) scale(.94)}63.5%,85%{opacity:1;transform:none}87%,100%{opacity:0;transform:none}}
@keyframes fa-o2{0%,85.5%{opacity:0;transform:translateY(1cqw)}88%,100%{opacity:1;transform:none}}
@keyframes fa-exc{0%,63.5%{box-shadow:inset 0 0 0 .18cqw #ecc27f}64.5%{box-shadow:inset 0 0 0 .35cqw #d99a3c}66.5%,100%{box-shadow:inset 0 0 0 .18cqw #ecc27f}}
/* the person decides: the hand presses «Dejar pendiente» */
@keyframes fa-cur{0%,64%{opacity:0;transform:translate(92cqw,70cqw)}65%{opacity:1;transform:translate(92cqw,70cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}67.6%,69.2%{opacity:1;transform:translate(88.4cqw,59.6cqw)}71.5%{opacity:0;transform:translate(90cqw,63cqw)}72%,100%{opacity:0;transform:translate(90cqw,63cqw)}}
@keyframes fa-press{0%,68%{transform:none}68.6%{transform:scale(.94)}69.6%,100%{transform:none}}
@keyframes fa-b0{0%,68.9%{opacity:1}69.1%,100%{opacity:0}}
@keyframes fa-b1{0%,69%{opacity:0}69.3%,100%{opacity:1}}
@keyframes fa-rev{0%,69.5%{opacity:0;transform:translateY(.6cqw)}71.5%,100%{opacity:1;transform:none}}
@keyframes fa-c1{0%,47%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fa-c2{0%,48.5%{opacity:0;transform:translateY(4px)}50.5%,73%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fa-c3{0%,74.5%{opacity:0;transform:translateY(4px)}76.5%,100%{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   FB · Software a medida · «La regla que tu programa no conoce». A workshop's
   day: two jobs land at 9:00 on the same lift, and somebody has to notice,
   call and redo the day. The rule is written down once; the piece checks it
   and proposes moving the brakes to 12:00; the foreman accepts.
   Hours: x = 13 + (h − 8) × 8 cqw.
     0–24    the day fills: OT-183, OT-184 and OT-185 (which drops on OT-184)
     12      amber: the overlap · 14 «dos trabajos a las 9:00»
     24→31   close on the overlap · 37→43 back, with the note «Sin la regla»
     48→54   wide · 50 the rule card · 54/55.5 two pills go into the piece
     59.5    click · 60.5 the proposal comes out: «9:00 → 12:00»
     64→67.5 the hand goes to «Aceptar cambio» · 68.2 press · 68.6 «✓ Aceptado»
     70→75   OT-185 moves to 12:00 · 72 «✓ Sin solapamientos» · 73 «Con la regla»
   Shots (X, Y, S): day 35,26,1.5 · overlap 26,20,1.9 · note 35,37.5,1.2 · wide
   --------------------------------------------------------------------------- */
.film-a-medida{--film-bg:#e3ebe6;--film-dot:#c3d3c9}
.b-ag{left:3cqw;top:6cqw;width:64cqw;height:43cqw}
.b-ag-lab{left:3cqw;top:2.8cqw}
.b-ag-t{left:3cqw;top:5.1cqw;font-size:2.5cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.b-h{left:0;top:10.4cqw;width:64cqw;height:2cqw}
.b-h span{top:0;width:8cqw;margin-left:-4cqw;text-align:center;font-size:1.25cqw;font-weight:600;color:#8390a3;font-variant-numeric:tabular-nums}
.b-h span:nth-child(1){left:13cqw}.b-h span:nth-child(2){left:21cqw}.b-h span:nth-child(3){left:29cqw}.b-h span:nth-child(4){left:37cqw}.b-h span:nth-child(5){left:45cqw}.b-h span:nth-child(6){left:53cqw}.b-h span:nth-child(7){left:61cqw}
.b-gl{left:0;top:13cqw;width:64cqw;height:20.5cqw}
.b-gl i{top:0;width:1px;height:100%;background:#e6eaf0}
.b-gl i:nth-child(1){left:13cqw}.b-gl i:nth-child(2){left:21cqw}.b-gl i:nth-child(3){left:29cqw}.b-gl i:nth-child(4){left:37cqw}.b-gl i:nth-child(5){left:45cqw}.b-gl i:nth-child(6){left:53cqw}.b-gl i:nth-child(7){left:61cqw}
.b-band{left:13cqw;width:48cqw;height:9cqw;border-radius:.8cqw;background:#f5f7fa}
.b-band.e1{top:13.5cqw}.b-band.e2{top:23.5cqw}
.b-rl{left:3cqw;font-size:1.55cqw;font-weight:650;color:#27364a}
.b-rl.e1{top:17cqw}.b-rl.e2{top:27cqw}
.b-bar{height:6cqw;border-radius:.8cqw;background:#e5ecfb;box-shadow:inset .45cqw 0 0 #7d97dc;transform-origin:0 50%}
.b-bar b{left:1.4cqw;top:1cqw;font-size:1.45cqw;font-weight:700;color:#1d2f63}
.b-bar small{left:1.4cqw;top:3.2cqw;font-size:1.2cqw;color:#50607e}
.b-bar.o183{left:13cqw;top:25cqw;width:16cqw;background:#e8edf3;box-shadow:inset .45cqw 0 0 #a3b1c4}
.b-bar.o183 b{color:#33425a}
.b-bar.o184{left:21cqw;top:15cqw;width:24cqw}
.b-bar.o185{left:45cqw;top:15cqw;width:8cqw;z-index:2}
.b-flag{left:3cqw;top:36.2cqw;height:3.6cqw;padding:0 1.4cqw;border-radius:1.8cqw;font-size:1.5cqw;font-weight:700;line-height:3.6cqw}
.b-flag.warn{background:#fdf1dc;color:#7a4f0c;box-shadow:inset 0 0 0 .18cqw #ecc27f;opacity:0}
.b-flag.ok{background:#eaf0ff;color:#1f3fb8}
.b-note{left:3cqw;top:52cqw;width:64cqw;height:16cqw}
.b-n{inset:0}
.b-n .lf-lab{left:3cqw;top:3cqw}
.rw .b-n b{left:3cqw;top:5.6cqw;width:56cqw;white-space:normal;font-size:2.3cqw;font-weight:650;line-height:1.3;letter-spacing:-.015em;color:#17202b}
.b-n.n1{opacity:0}
.b-n.n1 .lf-lab{color:#a8630f}.b-n.n2 .lf-lab{color:#1f3fb8}
.b-rule{left:71cqw;top:6cqw;width:26cqw;height:16cqw}
.b-rule .lf-lab{left:2.4cqw;top:2.6cqw;color:#1f3fb8}
.b-rule b{left:2.4cqw;top:5.2cqw;font-size:2.4cqw;font-weight:750;line-height:1.25;letter-spacing:-.02em;color:#17202b}
.b-vb{left:80.7cqw;top:26cqw;width:6.6cqw;border-radius:1.5cqw}
.b-p1{left:23.3cqw;top:20.6cqw}.b-p2{left:82.3cqw;top:19.3cqw}
.b-prop{left:71cqw;top:37cqw;width:26cqw;height:22cqw}
.b-prop .lf-lab{left:2.4cqw;top:2.6cqw}
.b-pt{left:2.4cqw;top:5cqw;font-size:1.8cqw;font-weight:650;color:#27364a}
.b-pm{left:2.4cqw;top:7.8cqw;font-size:3.1cqw;font-weight:800;letter-spacing:-.03em;color:#1f3fb8;font-variant-numeric:tabular-nums}
.b-prop small{left:2.4cqw;top:12.4cqw;font-size:1.4cqw;color:#5d6b82}
.b-btn{left:2.4cqw;top:16.2cqw;width:15.4cqw;height:3.8cqw;border-radius:1.9cqw;background:#17202b}
.b-btn span{left:0;right:0;top:.95cqw;text-align:center;font-size:1.55cqw;font-weight:700;color:#fff}
.b-btn .k0{opacity:0}
.b-cur{left:0;top:0}

.lf-a-medida.is-playing .rw{animation-name:fb-cam,lf-fade}
.lf-a-medida.is-playing .o183{animation-name:fb-o183}
.lf-a-medida.is-playing .o184{animation-name:fb-o184}
.lf-a-medida.is-playing .o185{animation-name:fb-o185}
.lf-a-medida.is-playing .b-flag.warn{animation-name:fb-warn}
.lf-a-medida.is-playing .b-flag.ok{animation-name:fb-ok}
.lf-a-medida.is-playing .n1{animation-name:fb-n1}
.lf-a-medida.is-playing .n2{animation-name:fb-n2}
.lf-a-medida.is-playing .b-note{animation-name:fb-note}
.lf-a-medida.is-playing .b-rule{animation-name:fb-rule}
.lf-a-medida.is-playing .b-p1{animation-name:fb-p1}
.lf-a-medida.is-playing .b-p2{animation-name:fb-p2}
.lf-a-medida.is-playing .b-vb{animation-name:fb-edge}
.lf-a-medida.is-playing .b-vb .vb-l{animation-name:fb-l}
.lf-a-medida.is-playing .b-vb .vb-r{animation-name:fb-r}
.lf-a-medida.is-playing .b-prop{animation-name:fb-prop}
.lf-a-medida.is-playing .b-btn{animation-name:fb-press}
.lf-a-medida.is-playing .b-btn .k0{animation-name:fb-k0}
.lf-a-medida.is-playing .b-btn .k1{animation-name:fb-k1}
.lf-a-medida.is-playing .b-cur{animation-name:fb-cur}
.lf-a-medida.is-playing .loop-cap span:nth-child(1){animation-name:fa-c1}
.lf-a-medida.is-playing .loop-cap span:nth-child(2){animation-name:fa-c2}
.lf-a-medida.is-playing .loop-cap span:nth-child(3){animation-name:fa-c3}

@keyframes fb-cam{
  0%,24%{transform:translate(50cqw,37.5cqw) scale(1.5) translate(-35cqw,-26cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  31%,37%{transform:translate(50cqw,37.5cqw) scale(1.9) translate(-26cqw,-20cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  43%,48%{transform:translate(50cqw,37.5cqw) scale(1.2) translate(-35cqw,-37.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  54%,100%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-37.5cqw)}}
@keyframes fb-o183{0%,2%{opacity:0;transform:scaleX(.2)}4%,100%{opacity:1;transform:none}}
@keyframes fb-o184{0%,4.5%{opacity:0;transform:scaleX(.2)}7.5%,100%{opacity:1;transform:none}}
/* OT-185 is booked at 9:00, on top of OT-184 (amber), and at 70 % moves to its free slot at 12:00 */
@keyframes fb-o185{
  0%,9%{opacity:0;transform:translate(-24cqw,-3cqw);box-shadow:inset .45cqw 0 0 #7d97dc}
  11.5%{opacity:1;transform:translate(-24cqw,3.4cqw);box-shadow:inset .45cqw 0 0 #7d97dc,0 0 0 .2cqw #e3a749}
  12.5%,70%{opacity:1;transform:translate(-24cqw,3.4cqw);box-shadow:inset .45cqw 0 0 #d99a3c,0 0 0 .25cqw #e3a749;background-color:#fdf1dc;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  75%,100%{opacity:1;transform:none;box-shadow:inset .45cqw 0 0 #7d97dc;background-color:#e5ecfb}}
@keyframes fb-warn{0%,13.5%{opacity:0;transform:translateY(.6cqw)}15.5%,71%{opacity:1;transform:none}72.5%,100%{opacity:0;transform:none}}
@keyframes fb-ok{0%,72.5%{opacity:0;transform:translateY(.6cqw)}74.5%,100%{opacity:1;transform:none}}
@keyframes fb-note{0%,39%{opacity:0;transform:translateY(1.2cqw)}42%,100%{opacity:1;transform:none}}
@keyframes fb-n1{0%,39%{opacity:1}40%,72.5%{opacity:1}74%,100%{opacity:0}}
@keyframes fb-n2{0%,73.5%{opacity:0;transform:translateY(.6cqw)}75.5%,100%{opacity:1;transform:none}}
@keyframes fb-rule{0%,50%{opacity:0;transform:scale(.94)}53%,100%{opacity:1;transform:none}}
@keyframes fb-p1{0%,54%{opacity:0;transform:none}54.6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}58.6%{opacity:1;transform:translate(59cqw,7.95cqw)}59%,100%{opacity:0;transform:translate(59cqw,7.95cqw)}}
@keyframes fb-p2{0%,55.5%{opacity:0;transform:none}56.1%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}58.8%{opacity:1;transform:translateY(9.25cqw)}59.1%,100%{opacity:0;transform:translateY(9.25cqw)}}
@keyframes fb-l{0%,58.69%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}59.5%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}59.82%,100%{transform:none}}
@keyframes fb-r{0%,58.69%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}59.5%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}59.82%,100%{transform:none}}
@keyframes fb-edge{0%,59.41%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}59.68%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}61.53%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes fb-prop{0%,60.5%{opacity:0;transform:translateY(-6cqw) scale(.92)}63.5%,100%{opacity:1;transform:none}}
@keyframes fb-cur{0%,64%{opacity:0;transform:translate(90cqw,68cqw)}65%{opacity:1;transform:translate(90cqw,68cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}67.5%,69%{opacity:1;transform:translate(79.3cqw,54.6cqw)}71%{opacity:0;transform:translate(80cqw,58cqw)}72%,100%{opacity:0;transform:translate(80cqw,58cqw)}}
@keyframes fb-press{0%,68%{transform:none}68.4%{transform:scale(.94)}69.4%,100%{transform:none}}
@keyframes fb-k0{0%,68.5%{opacity:1}68.7%,100%{opacity:0}}
@keyframes fb-k1{0%,68.6%{opacity:0}68.9%,100%{opacity:1}}

/* ---------------------------------------------------------------------------
   FC · Consultoría IA · «Rápido no siempre significa rentable». An office
   summarises 120 documents a month by hand, 10 min each: 20 h. A test with
   20 of them: 18 good, 2 to correct. Counting the review, 5 min a document,
   about 10 h a month (120 × 5 = 600 min). With a person always reviewing,
   the hand chooses «Ampliar la prueba» (to 100): the piece measures, it never
   decides. No price in the film (Alberto, 28-sep: it would read as ours).
     0–22    close on today: 120 a month, 10 min each · 8 «20 h»
     22→28   medium on the test · 26 its 20 documents · 32/33.5/35 pills
     40      click · 41–47 the results, row by row · 47 «18 válidos · 2 a corregir»
     50→56   the whole time: 55 «2 min» + 58 «3 min» = 61 «5 min» · 64 «≈ 10 h»
     68→74   wide · 70 the decision · 80→83 the hand · 83.6 press · 84 swap
   Shots (X, Y, S): today 18,22,2.1 · test 51,29,1.55 · time 36,52,1.45 · wide
   --------------------------------------------------------------------------- */
.film-consultoria{--film-bg:#e8e7f1;--film-dot:#cbc8de}
.c-hoy{left:3cqw;top:6cqw;width:30cqw;height:32cqw}
.c-hoy .lf-lab,.c-test .lf-lab,.c-time .lf-lab,.c-dec .lf-lab{left:2.6cqw;top:2.8cqw}
.c-t{left:2.6cqw;top:5.1cqw;font-size:2.4cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.c-row{left:2.6cqw;right:2.6cqw;height:3.4cqw}
.c-row.r1{top:10.4cqw}.c-row.r2{top:14.4cqw}
.c-row span,.c-dr span{left:0;top:.4cqw;font-size:1.8cqw;color:#27364a}
.c-row b,.c-dr b{right:0;top:.3cqw;font-size:1.95cqw;font-weight:700;color:#17202b;font-variant-numeric:tabular-nums}
.c-rule{left:2.6cqw;right:2.6cqw;top:19.2cqw;height:1px;background:#e3e8ef}
.c-tot{left:2.6cqw;right:2.6cqw;top:20.6cqw;height:5cqw}
.c-tot span{left:0;top:1.4cqw;font-size:1.8cqw;color:#5d6b82}
.c-tot b{right:0;top:0;font-size:3.6cqw;font-weight:800;letter-spacing:-.03em;color:#93600f;font-variant-numeric:tabular-nums}
.c-sm{right:2.6cqw;top:26.6cqw;font-size:1.4cqw;color:#8390a3}
.c-test{left:36cqw;top:6cqw;width:30cqw;height:32cqw}
.c-tiles{left:2.6cqw;top:6.2cqw;width:24.9cqw;height:21cqw;display:grid!important;grid-template-columns:repeat(5,4.3cqw);grid-auto-rows:4.6cqw;gap:.85cqw}
.rw .c-tiles i{position:relative;border-radius:.55cqw;font-size:1.9cqw;font-weight:800;line-height:4.6cqw;text-align:center}
.t0 i{background:#f1f3f8 linear-gradient(#cfd6e2,#cfd6e2) .9cqw 1.2cqw/2.5cqw .32cqw no-repeat;box-shadow:inset 0 0 0 .15cqw #e1e5ee}
.t0 i::after{content:"";position:absolute;left:.9cqw;top:2.2cqw;width:1.7cqw;height:.32cqw;background:#cfd6e2;box-shadow:0 1cqw 0 #cfd6e2}
.t1 i{background:#eaf0ff;box-shadow:inset 0 0 0 .15cqw #c3d2f7;color:#1f3fb8}
.t1 i.x{background:#fdf1dc;box-shadow:inset 0 0 0 .18cqw #ecc27f;color:#a8630f}
.c-res{left:2.6cqw;top:27.6cqw;font-size:1.8cqw;color:#5d6b82}
.c-res b,.c-res em{position:static!important;display:inline!important;font-weight:700}
.c-res b{color:#1f3fb8}.c-res em{color:#a8630f}
.c-vb{left:47.7cqw;top:40.5cqw;width:6.6cqw;border-radius:1.5cqw}
.c-p1,.c-p2,.c-p3{left:49.3cqw;top:33.5cqw}
.c-time{left:3cqw;top:50.5cqw;width:63cqw;height:18.5cqw}
.c-chip{top:6cqw;width:17cqw;height:6.4cqw;border-radius:1cqw;background:#f3f5f9}
.c-chip small{left:1.4cqw;top:1cqw;font-size:1.3cqw;color:#5d6b82}
.c-chip b{left:1.4cqw;top:2.9cqw;font-size:2.4cqw;font-weight:800;letter-spacing:-.02em;color:#17202b;font-variant-numeric:tabular-nums}
.c-chip.k1{left:2.6cqw}.c-chip.k2{left:22.8cqw}.c-chip.k3{left:43cqw;background:#eaf0ff;box-shadow:inset 0 0 0 .15cqw #c3d2f7}
.c-chip.k3 b{color:#1f3fb8}
.c-op{top:7.6cqw;width:3.2cqw;text-align:center;font-size:2.4cqw;font-weight:700;color:#8390a3}
.c-op.o1{left:19.6cqw}.c-op.o2{left:39.8cqw}
.c-sum{left:2.6cqw;right:2.6cqw;top:13.4cqw;height:4cqw}
.c-sum span{left:0;top:.7cqw;font-size:1.75cqw;color:#5d6b82}
.c-sum b{right:0;top:0;font-size:2.7cqw;font-weight:800;letter-spacing:-.03em;color:#1f3fb8}
.c-dec{left:67.5cqw;top:10cqw;width:29.5cqw;height:45cqw}
.c-big{left:2.6cqw;top:5.2cqw;font-size:3.8cqw;font-weight:800;letter-spacing:-.035em;color:#1f3fb8}
.c-bs{left:2.6cqw;top:10.2cqw;font-size:1.7cqw;color:#5d6b82}
.c-rule2{left:2.6cqw;right:2.6cqw;top:14cqw;height:1px;background:#e3e8ef}
.c-dr{left:2.6cqw;right:2.6cqw;height:3.4cqw}
.c-dr span{font-size:1.65cqw}.c-dr b{font-size:1.8cqw}
.c-dr.d1{top:15.8cqw}.c-dr.d2{top:20cqw}.c-dr.d3{top:24.2cqw}
.c-dr.d3 b{color:#a8630f}
.c-btn{left:2.6cqw;right:2.6cqw;height:4.4cqw;border-radius:2.2cqw;text-align:center;font-size:1.6cqw;font-weight:700;line-height:4.4cqw}
.c-btn.g{top:30.4cqw;background:#fff;box-shadow:inset 0 0 0 .18cqw #d5dbe5;color:#39424f}
.c-btn.m{top:36.2cqw;background:#17202b;color:#fff}
.c-btn.m span{left:0;right:0;top:0}
.c-btn .m0{opacity:0}
.c-cur{left:0;top:0}

.lf-consultoria.is-playing .rw{animation-name:fc-cam,lf-fade}
.lf-consultoria.is-playing .c-hoy .r1{animation-name:fa-row}
.lf-consultoria.is-playing .c-hoy .r2{animation-name:fa-row2}
.lf-consultoria.is-playing .c-tot{animation-name:fc-tot}
.lf-consultoria.is-playing .c-sm{animation-name:fc-sm}
.lf-consultoria.is-playing .c-test{animation-name:fc-test}
.lf-consultoria.is-playing .t1{animation-name:fc-t1}
.lf-consultoria.is-playing .c-res{animation-name:fc-res}
.lf-consultoria.is-playing .t1 i.x{animation-name:fc-x}
.lf-consultoria.is-playing .c-p1{animation-name:fc-p1}
.lf-consultoria.is-playing .c-p2{animation-name:fc-p2}
.lf-consultoria.is-playing .c-p3{animation-name:fc-p3}
.lf-consultoria.is-playing .c-vb{animation-name:fc-edge}
.lf-consultoria.is-playing .c-vb .vb-l{animation-name:fc-l}
.lf-consultoria.is-playing .c-vb .vb-r{animation-name:fc-r}
.lf-consultoria.is-playing .c-time{animation-name:fc-time}
.lf-consultoria.is-playing .k1{animation-name:fc-k1}
.lf-consultoria.is-playing .o1,.lf-consultoria.is-playing .k2{animation-name:fc-k2}
.lf-consultoria.is-playing .o2,.lf-consultoria.is-playing .k3{animation-name:fc-k3}
.lf-consultoria.is-playing .c-sum{animation-name:fc-sum}
.lf-consultoria.is-playing .c-dec{animation-name:fc-dec}
.lf-consultoria.is-playing .c-dr.d1{animation-name:fc-d1}
.lf-consultoria.is-playing .c-dr.d2{animation-name:fc-d2}
.lf-consultoria.is-playing .c-dr.d3{animation-name:fc-d3}
.lf-consultoria.is-playing .c-btn.g,.lf-consultoria.is-playing .c-btn.m{animation-name:fc-btns}
.lf-consultoria.is-playing .c-btn .m0{animation-name:fc-m0}
.lf-consultoria.is-playing .c-btn .m1{animation-name:fc-m1}
.lf-consultoria.is-playing .c-cur{animation-name:fc-cur}
.lf-consultoria.is-playing .loop-cap span:nth-child(1){animation-name:fc-c1}
.lf-consultoria.is-playing .loop-cap span:nth-child(2){animation-name:fc-c2}
.lf-consultoria.is-playing .loop-cap span:nth-child(3){animation-name:fa-c3}

@keyframes fc-cam{
  0%,22%{transform:translate(50cqw,37.5cqw) scale(2.1) translate(-18cqw,-22cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  28%,50%{transform:translate(50cqw,37.5cqw) scale(1.55) translate(-51cqw,-29cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  56%,68%{transform:translate(50cqw,37.5cqw) scale(1.45) translate(-36cqw,-52cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  74%,100%{transform:translate(50cqw,37.5cqw) scale(1) translate(-50cqw,-37.5cqw)}}
@keyframes fc-tot{0%,8%{opacity:0;transform:scale(.9)}10.5%,100%{opacity:1;transform:none}}
@keyframes fc-sm{0%,10%{opacity:0}12%,100%{opacity:1}}
@keyframes fc-test{0%,25%{opacity:0;transform:translateY(1.2cqw)}28.5%,100%{opacity:1;transform:none}}
@keyframes fc-t1{0%,41%{clip-path:inset(0 0 100% 0);animation-timing-function:steps(4,jump-start)}47%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fc-res{0%,47%{opacity:0;transform:translateY(.6cqw)}49%,100%{opacity:1;transform:none}}
@keyframes fc-x{0%,49%{transform:none}50%{transform:scale(1.18)}51.5%,100%{transform:none}}
@keyframes fc-p1{0%,32%{opacity:0;transform:none}32.6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}36%{opacity:1;transform:translateY(9.6cqw)}36.4%,100%{opacity:0;transform:translateY(9.6cqw)}}
@keyframes fc-p2{0%,33.5%{opacity:0;transform:none}34.1%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}37.5%{opacity:1;transform:translateY(9.6cqw)}37.9%,100%{opacity:0;transform:translateY(9.6cqw)}}
@keyframes fc-p3{0%,35%{opacity:0;transform:none}35.6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}39%{opacity:1;transform:translateY(9.6cqw)}39.3%,100%{opacity:0;transform:translateY(9.6cqw)}}
@keyframes fc-l{0%,39.19%{transform:translateX(-5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}40%{transform:translateX(.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}40.32%,100%{transform:none}}
@keyframes fc-r{0%,39.19%{transform:translateX(5px);animation-timing-function:cubic-bezier(.45,0,.9,.35)}40%{transform:translateX(-.35px);animation-timing-function:cubic-bezier(.2,0,.2,1)}40.32%,100%{transform:none}}
@keyframes fc-edge{0%,39.91%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}40.18%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}42.03%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes fc-time{0%,52%{opacity:0;transform:translateY(1.2cqw)}55%,100%{opacity:1;transform:none}}
@keyframes fc-k1{0%,55%{opacity:0;transform:translateY(.6cqw)}57%,100%{opacity:1;transform:none}}
@keyframes fc-k2{0%,58%{opacity:0;transform:translateY(.6cqw)}60%,100%{opacity:1;transform:none}}
@keyframes fc-k3{0%,61%{opacity:0;transform:translateY(.6cqw)}63%,100%{opacity:1;transform:none}}
@keyframes fc-sum{0%,64%{opacity:0;transform:translateY(.6cqw)}66%,100%{opacity:1;transform:none}}
@keyframes fc-dec{0%,70%{opacity:0;transform:translateY(1.2cqw)}73%,100%{opacity:1;transform:none}}
@keyframes fc-d1{0%,73%{opacity:0}75%,100%{opacity:1}}
@keyframes fc-d2{0%,75%{opacity:0}77%,100%{opacity:1}}
@keyframes fc-d3{0%,77%{opacity:0}79%,100%{opacity:1}}
@keyframes fc-btns{0%,78%{opacity:0;transform:translateY(.6cqw)}80%,83.2%{opacity:1;transform:none}83.6%{opacity:1;transform:scale(.97)}84.6%,100%{opacity:1;transform:none}}
@keyframes fc-m0{0%,83.8%{opacity:1}84%,100%{opacity:0}}
@keyframes fc-m1{0%,83.9%{opacity:0}84.2%,100%{opacity:1}}
@keyframes fc-cur{0%,80%{opacity:0;transform:translate(93cqw,70cqw)}81%{opacity:1;transform:translate(93cqw,70cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}83%,84.4%{opacity:1;transform:translate(81.6cqw,48cqw)}86.5%{opacity:0;transform:translate(82.3cqw,51.4cqw)}87%,100%{opacity:0;transform:translate(82.3cqw,51.4cqw)}}
@keyframes fc-c1{0%,23%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes fc-c2{0%,24.5%{opacity:0;transform:translateY(4px)}26.5%,73%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-4px)}}

/* ---------------------------------------------------------------------------
   FM · Cómo trabajamos. One process (the dispatch report of FA) through the
   four steps, one station each, left to right, over the four columns of text
   below; the column being told gets a blue line (.steps li::before). The
   stage is 16:5 (the world is 100 × 31.25 cqw) and does not move; on a phone
   it is 4:3 and the camera frames one station at a time (scale 2.4).
     0–24    Escuchamos: the notes of the first talk, the condition «se revisan»
     22→26   the line to Priorizamos · 28–34 three candidates, with their hours
     36→39.5 the hand goes to the first · 40 press · 40.5 «Preparar el informe», chosen
     47→51   the line to Construimos · 53/54.5 pills into the piece · 58.5 click
     59.5–63 the ten reports, row by row: 9 ✓ and 1 to review
     72→76   the line to Medimos · 78–83 before 10 h / after 2 h · 85 «8 h»
     75–88   step 4 marked; at rest no step is marked: the story is complete
   --------------------------------------------------------------------------- */
.film-metodo{--film-bg:#e6ebf2;--film-dot:#c9d2e0}
.film-metodo .rw{height:31.25cqw}
.m-line{left:12.5cqw;top:2.1cqw;width:75cqw;height:.25cqw;background:#cfd6e2}
.m-seg{top:2.1cqw;width:25cqw;height:.25cqw;background:#2453ec;transform-origin:0 50%}
.m-seg.g1{left:12.5cqw}.m-seg.g2{left:37.5cqw}.m-seg.g3{left:62.5cqw}
.m-dot{top:1.5cqw;width:1.45cqw;height:1.45cqw;margin-left:-.72cqw;border-radius:50%;background:#2453ec;box-shadow:0 0 0 .35cqw var(--film-bg)}
.m-dot.d1{left:12.5cqw}.m-dot.d2{left:37.5cqw}.m-dot.d3{left:62.5cqw}.m-dot.d4{left:87.5cqw}
.m-st{top:4cqw;width:22cqw;height:24.5cqw;border-radius:1.2cqw}
.m-st.s1{left:1.5cqw}.m-st.s2{left:26.5cqw}.m-st.s3{left:51.5cqw}.m-st.s4{left:76.5cqw}
.m-st .lf-lab{left:1.6cqw;top:1.6cqw;font-size:1.05cqw}
.m-t{left:1.6cqw;top:3.6cqw;font-size:1.55cqw;font-weight:750;letter-spacing:-.02em;color:#17202b}
.m-l{left:1.6cqw;font-size:1.45cqw;color:#27364a}
.m-l.l1{top:7.4cqw}.m-l.l2{top:10cqw}
.m-q{left:1.2cqw;right:1.2cqw;top:14cqw;height:7.6cqw;padding:1.3cqw 1.2cqw;border-radius:.8cqw;background:#fdf6e8;box-shadow:inset 0 0 0 .14cqw #efd3a2;font-size:1.3cqw;line-height:1.45;font-style:italic!important;color:#7a4f0c}
.m-it{left:1cqw;right:1cqw;height:3.6cqw;border-radius:.7cqw;background:#f3f5f9}
.m-it.i1{top:4.2cqw;background:#eaf0ff;box-shadow:inset 0 0 0 .15cqw #9fb5f0}
.m-it.i2{top:8.4cqw}.m-it.i3{top:12.6cqw}
.m-it span{left:.9cqw;top:1cqw;font-size:1.32cqw;color:#27364a}
.m-it.i1 span{color:#1f3fb8;font-weight:650}
.m-it b{right:.9cqw;top:1cqw;font-size:1.35cqw;font-weight:700;color:#17202b;font-variant-numeric:tabular-nums}
.m-keep{left:1.6cqw;top:18cqw;font-size:1.2cqw;font-weight:600;color:#1f3fb8}
.m-vb{left:8.6cqw;top:3.8cqw;width:4.8cqw;border-radius:1.1cqw}
.m-tiles{left:1.6cqw;top:10.2cqw;width:18.8cqw;height:7.1cqw;display:grid!important;grid-template-columns:repeat(5,3.2cqw);grid-auto-rows:3.2cqw;gap:.7cqw}
.rw .m-tiles i{position:relative;border-radius:.45cqw;font-size:1.45cqw;font-weight:800;line-height:3.2cqw;text-align:center}
.m-tiles.t0 i{background:#f1f3f8 linear-gradient(#cfd6e2,#cfd6e2) .6cqw .9cqw/1.9cqw .26cqw no-repeat;box-shadow:inset 0 0 0 .13cqw #e1e5ee}
.m-tiles.t1 i{background:#eaf0ff;box-shadow:inset 0 0 0 .13cqw #c3d2f7;color:#1f3fb8}
.m-tiles.t1 i.x{background:#fdf1dc;box-shadow:inset 0 0 0 .15cqw #ecc27f;color:#a8630f}
.m-res{left:1.6cqw;top:19.4cqw;font-size:1.35cqw;color:#5d6b82}
.m-res b,.m-res em{position:static!important;display:inline!important;font-weight:700}
.m-res b{color:#1f3fb8}.m-res em{color:#a8630f}
.m-bl{left:1.6cqw;font-size:1.3cqw;color:#5d6b82}
.m-bl.b1{top:4.6cqw}.m-bl.b2{top:10.6cqw}
.m-bar{left:1.6cqw;height:2.4cqw;border-radius:.6cqw;transform-origin:0 50%}
.m-bar.r1{top:6.8cqw;width:14.5cqw;background:#e9b766}
.m-bar.r2{top:12.8cqw;width:2.9cqw;background:#2453ec}
.m-bv{right:1.6cqw;font-size:1.6cqw;font-weight:800;font-variant-numeric:tabular-nums}
.m-bv.v1{top:7cqw;color:#93600f}.m-bv.v2{top:13cqw;color:#1f3fb8}
.m-win{left:1.6cqw;top:17cqw;font-size:1.62cqw;font-weight:800;letter-spacing:-.025em;color:#1f3fb8}
.m-inc{left:1.6cqw;top:20.3cqw;font-size:1.2cqw;color:#5d6b82}
.m-p1,.m-p2{left:47cqw;top:9.8cqw;width:2.8cqw;height:1.25cqw}
.m-cur{left:0;top:0;width:2.6cqw;height:2.6cqw}

.lf-metodo.is-playing .rw{animation-name:lf-fade}
.lf-metodo.is-playing .m-seg.g1{animation-name:fm-g1}
.lf-metodo.is-playing .m-seg.g2{animation-name:fm-g2}
.lf-metodo.is-playing .m-seg.g3{animation-name:fm-g3}
.lf-metodo.is-playing .m-dot.d2{animation-name:fm-d2}
.lf-metodo.is-playing .m-dot.d3{animation-name:fm-d3}
.lf-metodo.is-playing .m-dot.d4{animation-name:fm-d4}
.lf-metodo.is-playing .m-st.s1{animation-name:fm-s1}
.lf-metodo.is-playing .m-st.s2{animation-name:fm-s2}
.lf-metodo.is-playing .m-st.s3{animation-name:fm-s3}
.lf-metodo.is-playing .m-st.s4{animation-name:fm-s4}
.lf-metodo.is-playing .m-t{animation-name:fm-t}
.lf-metodo.is-playing .m-l.l1{animation-name:fm-l1}
.lf-metodo.is-playing .m-l.l2{animation-name:fm-l2}
.lf-metodo.is-playing .m-q{animation-name:fm-q}
.lf-metodo.is-playing .m-it.i1{animation-name:fm-i1,fm-sel}
.lf-metodo.is-playing .m-it.i1 span{animation-name:fm-selt}
.lf-metodo.is-playing .m-it.i2{animation-name:fm-i2}
.lf-metodo.is-playing .m-it.i3{animation-name:fm-i3}
.lf-metodo.is-playing .m-keep{animation-name:fm-keep}
.lf-metodo.is-playing .m-cur{animation-name:fm-cur}
.lf-metodo.is-playing .m-p1{animation-name:fm-p1}
.lf-metodo.is-playing .m-p2{animation-name:fm-p2}
.lf-metodo.is-playing .m-vb{animation-name:fm-edge}
.lf-metodo.is-playing .m-vb .vb-l{animation-name:fa-l}
.lf-metodo.is-playing .m-vb .vb-r{animation-name:fa-r}
.lf-metodo.is-playing .m-tiles.t1{animation-name:fm-t1}
.lf-metodo.is-playing .m-res{animation-name:fm-res}
.lf-metodo.is-playing .m-bar.r1{animation-name:fm-r1}
.lf-metodo.is-playing .m-bar.r2{animation-name:fm-r2}
.lf-metodo.is-playing .m-bv.v1{animation-name:fm-v1}
.lf-metodo.is-playing .m-bv.v2{animation-name:fm-v2}
.lf-metodo.is-playing .m-win{animation-name:fm-win}
.lf-metodo.is-playing .m-inc{animation-name:fm-inc}
.lf-metodo.is-playing .steps li:nth-child(1)::before{animation-name:fm-k1}
.lf-metodo.is-playing .steps li:nth-child(2)::before{animation-name:fm-k2}
.lf-metodo.is-playing .steps li:nth-child(3)::before{animation-name:fm-k3}
.lf-metodo.is-playing .steps li:nth-child(4)::before{animation-name:fm-k4}
.lf-metodo.is-playing .steps li::before{animation-duration:20s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,0,0,1)}

@keyframes fm-g1{0%,22%{transform:scaleX(0)}26%,100%{transform:none}}
@keyframes fm-g2{0%,47%{transform:scaleX(0)}51%,100%{transform:none}}
@keyframes fm-g3{0%,72%{transform:scaleX(0)}76%,100%{transform:none}}
@keyframes fm-d2{0%,25.5%{background-color:#cfd6e2}26.5%,100%{background-color:#2453ec}}
@keyframes fm-d3{0%,50.5%{background-color:#cfd6e2}51.5%,100%{background-color:#2453ec}}
@keyframes fm-d4{0%,75.5%{background-color:#cfd6e2}76.5%,100%{background-color:#2453ec}}
@keyframes fm-s1{0%,1.5%{opacity:0;transform:translateY(1cqw)}4.5%,100%{opacity:1;transform:none}}
@keyframes fm-s2{0%,25%{opacity:0;transform:translateY(1cqw)}28%,100%{opacity:1;transform:none}}
@keyframes fm-s3{0%,50%{opacity:0;transform:translateY(1cqw)}53%,100%{opacity:1;transform:none}}
@keyframes fm-s4{0%,75%{opacity:0;transform:translateY(1cqw)}78%,100%{opacity:1;transform:none}}
@keyframes fm-t{0%,4%{opacity:0}6%,100%{opacity:1}}
@keyframes fm-l1{0%,6%{opacity:0;transform:translateY(.5cqw)}8%,100%{opacity:1;transform:none}}
@keyframes fm-l2{0%,8%{opacity:0;transform:translateY(.5cqw)}10%,100%{opacity:1;transform:none}}
@keyframes fm-q{0%,11%{opacity:0;transform:translateY(.5cqw)}14%,100%{opacity:1;transform:none}}
@keyframes fm-i1{0%,28%{opacity:0;transform:translateY(.5cqw)}30%,100%{opacity:1;transform:none}}
@keyframes fm-i2{0%,30%{opacity:0;transform:translateY(.5cqw)}32%,100%{opacity:1;transform:none}}
@keyframes fm-i3{0%,32%{opacity:0;transform:translateY(.5cqw)}34%,100%{opacity:1;transform:none}}
/* the person chooses where to start: the hand presses the first one */
@keyframes fm-sel{0%,40.2%{background-color:#f3f5f9;box-shadow:inset 0 0 0 0 #9fb5f0}41.5%,100%{background-color:#eaf0ff;box-shadow:inset 0 0 0 .15cqw #9fb5f0}}
@keyframes fm-selt{0%,40.2%{color:#27364a}41.5%,100%{color:#1f3fb8}}
@keyframes fm-keep{0%,43%{opacity:0}45%,100%{opacity:1}}
@keyframes fm-cur{0%,35.5%{opacity:0;transform:translate(44cqw,26cqw)}36.5%{opacity:1;transform:translate(44cqw,26cqw);animation-timing-function:cubic-bezier(.45,0,.2,1)}39.5%,40.8%{opacity:1;transform:translate(35.8cqw,9.6cqw)}41.2%{transform:translate(35.8cqw,9.6cqw) scale(.9)}43%{opacity:0;transform:translate(36.5cqw,12cqw)}44%,100%{opacity:0;transform:translate(36.5cqw,12cqw)}}
@keyframes fm-p1{0%,53%{opacity:0;transform:none}53.6%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}56.8%{opacity:1;transform:translate(14.3cqw,-.3cqw)}57.2%,100%{opacity:0;transform:translate(14.3cqw,-.3cqw)}}
@keyframes fm-p2{0%,54.5%{opacity:0;transform:translateY(1.6cqw)}55.1%{opacity:1;transform:translateY(1.6cqw);animation-timing-function:cubic-bezier(.45,0,.55,1)}57.8%{opacity:1;transform:translate(14.3cqw,-.3cqw)}58.1%,100%{opacity:0;transform:translate(14.3cqw,-.3cqw)}}
@keyframes fm-edge{0%,58.41%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}58.68%{box-shadow:inset 0 0 0 .4cqw #2453ec,0 1.6cqw 3.2cqw -1.4cqw #243f7370}60.53%,100%{box-shadow:inset 0 0 0 .25cqw #c9d7f5,0 1.6cqw 3.2cqw -1.4cqw #243f7370}}
@keyframes fm-t1{0%,59.5%{clip-path:inset(0 0 100% 0);animation-timing-function:steps(2,jump-start)}63%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fm-res{0%,63%{opacity:0;transform:translateY(.5cqw)}65%,100%{opacity:1;transform:none}}
@keyframes fm-r1{0%,78%{transform:scaleX(0)}81%,100%{transform:none}}
@keyframes fm-r2{0%,81%{transform:scaleX(0)}83%,100%{transform:none}}
@keyframes fm-v1{0%,80%{opacity:0}81.5%,100%{opacity:1}}
@keyframes fm-v2{0%,83%{opacity:0}84.5%,100%{opacity:1}}
@keyframes fm-win{0%,85%{opacity:0;transform:translateY(.5cqw)}87%,100%{opacity:1;transform:none}}
@keyframes fm-inc{0%,87%{opacity:0}88.5%,100%{opacity:1}}
@keyframes fm-k1{0%,2%{transform:scaleX(0)}4%,23%{transform:none}25%,100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes fm-k2{0%,25%{transform:scaleX(0)}27%,48%{transform:none}50%,100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes fm-k3{0%,50%{transform:scaleX(0)}52%,73%{transform:none}75%,100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes fm-k4{0%,75%{transform:scaleX(0)}77%,87%{transform:none}89%,100%{transform:scaleX(0);transform-origin:100% 50%}}
/* On a phone: a 4:3 stage that frames one station at a time; at rest, the result. */
@media(max-width:760px){
  .metodo.loop-film .film-stage{aspect-ratio:4/3}
  /* the neighbouring stations fade into the ground at the edges instead of showing cut */
  .metodo .film-stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,var(--film-bg) 0,var(--film-bg) 18%,transparent 23%,transparent 77%,var(--film-bg) 82%,var(--film-bg) 100%)}
  .film-metodo .rw{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-87.5cqw,-16.25cqw)}
  .lf-metodo.is-playing .rw{animation-name:fm-cam,lf-fade}
}
@keyframes fm-cam{
  0%,23.5%{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-12.5cqw,-16.25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  26.5%,48.5%{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-37.5cqw,-16.25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  51.5%,73.5%{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-62.5cqw,-16.25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  76.5%,100%{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-87.5cqw,-16.25cqw)}}

/* ---------------------------------------------------------------------------
   On a phone the stage is ~360 px wide: the wide shots would leave the text at
   6–7 px. Each film gets its own camera there (Codex, 28-sep: «reencuadrar
   antes que reducir»): closer shots, one card at a time, and a rest frame on
   the card that tells the result. Same timing as the desktop camera.
   --------------------------------------------------------------------------- */
@media(max-width:760px){
  .film-automatizar .rw{transform:translate(50cqw,37.5cqw) scale(2.6) translate(-79.5cqw,-58cqw)}
  .lf-automatizar.is-playing .rw{animation-name:fa-cam-m,lf-fade}
  .film-a-medida .rw{transform:translate(50cqw,37.5cqw) scale(2.25) translate(-84cqw,-41cqw)}
  .lf-a-medida.is-playing .rw{animation-name:fb-cam-m,lf-fade}
  .film-consultoria .rw{transform:translate(50cqw,37.5cqw) scale(1.55) translate(-82.25cqw,-32.5cqw)}
  .lf-consultoria.is-playing .rw{animation-name:fc-cam-m,lf-fade}
}
@keyframes fa-cam-m{
  0%,22%{transform:translate(50cqw,37.5cqw) scale(2.6) translate(-79.5cqw,-19cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  28%,38%{transform:translate(50cqw,37.5cqw) scale(1.75) translate(-30.5cqw,-26cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  44%,49%{transform:translate(50cqw,37.5cqw) scale(1.75) translate(-30.5cqw,-48cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  54%,73%{transform:translate(50cqw,37.5cqw) scale(2.1) translate(-79.5cqw,-48cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  78%,85%{transform:translate(50cqw,37.5cqw) scale(1.22) translate(-30.5cqw,-37.5cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  89%,100%{transform:translate(50cqw,37.5cqw) scale(2.6) translate(-79.5cqw,-58cqw)}}
@keyframes fb-cam-m{
  0%,24%{transform:translate(50cqw,37.5cqw) scale(2) translate(-30cqw,-24cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  31%,37%{transform:translate(50cqw,37.5cqw) scale(2.4) translate(-26cqw,-20cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  43%,48%{transform:translate(50cqw,37.5cqw) scale(1.5) translate(-35cqw,-60cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  53%,58%{transform:translate(50cqw,37.5cqw) scale(2.6) translate(-84cqw,-14cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  62%,70%{transform:translate(50cqw,37.5cqw) scale(2.25) translate(-84cqw,-41cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  75%,85%{transform:translate(50cqw,37.5cqw) scale(1.62) translate(-36cqw,-24cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  89%,100%{transform:translate(50cqw,37.5cqw) scale(2.25) translate(-84cqw,-41cqw)}}
@keyframes fc-cam-m{
  0%,22%{transform:translate(50cqw,37.5cqw) scale(2.3) translate(-18cqw,-22cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  28%,50%{transform:translate(50cqw,37.5cqw) scale(2.2) translate(-51cqw,-23cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  55%,60%{transform:translate(50cqw,37.5cqw) scale(2.2) translate(-22cqw,-59.7cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  63%,68%{transform:translate(50cqw,37.5cqw) scale(2.2) translate(-48cqw,-59.7cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  73%,78%{transform:translate(50cqw,37.5cqw) scale(2.3) translate(-82.25cqw,-25cqw);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  81%,100%{transform:translate(50cqw,37.5cqw) scale(1.55) translate(-82.25cqw,-32.5cqw)}}