/* Animated isometric illustrations (iso-art.mjs). Each box paints its top (ft), its left face (fl)
   and its right face (fr); the tone class on the box picks the colours. */
.iso{display:block;width:100%;height:100%;overflow:visible;
  --m1:#fbfbfb;--m2:#dfe0e2;--m3:#bdbec2;
  --s1:#4b4f56;--s2:#2e3136;--s3:#1d1f23;
  --c1:#eef0f3;--c2:#c8cbd1;--c3:#a3a7ae;
  --p1:#ffffff;--p2:#dadadc;--p3:#c3c3c6;
  --k1:#131417;--glow:#f4f5f7;--on-s:#ffffff}
/* Slate variant for light backgrounds: the main and secondary tones trade places. */
.iso-slate .iso{
  --m1:#4b4f56;--m2:#2e3136;--m3:#1d1f23;
  --s1:#fbfbfb;--s2:#dfe0e2;--s3:#bdbec2;
  --p1:#3d4147;--p2:#26292d;--p3:#181a1d;--on-s:#1d1f23}

.iso polygon,.iso path,.iso ellipse{stroke-linejoin:round}
.iso .m .ft{fill:var(--m1);stroke:var(--m1)}.iso .m .fl{fill:var(--m2);stroke:var(--m2)}.iso .m .fr{fill:var(--m3);stroke:var(--m3)}
.iso .s .ft{fill:var(--s1);stroke:var(--s1)}.iso .s .fl{fill:var(--s2);stroke:var(--s2)}.iso .s .fr{fill:var(--s3);stroke:var(--s3)}
.iso .c .ft{fill:var(--c1);stroke:var(--c1)}.iso .c .fl{fill:var(--c2);stroke:var(--c2)}.iso .c .fr{fill:var(--c3);stroke:var(--c3)}
.iso .p .ft{fill:var(--p1);stroke:var(--p1)}.iso .p .fl{fill:var(--p2);stroke:var(--p2)}.iso .p .fr{fill:var(--p3);stroke:var(--p3)}
.iso :is(.ft,.fl,.fr){stroke-width:.6}

/* Flat drawings on the faces. */
.iso .xw{fill:var(--m1)}.iso .xs{fill:var(--s2)}.iso .xc{fill:var(--c2)}.iso .xk{fill:var(--k1)}.iso .xg{fill:var(--glow)}
.iso .col{opacity:.45}
.iso :is(.xk-line,.xg-line,.xon-line,.xs-line,.xs-thick,.xk-stroke,.steam,.belt,.flow,.cable){fill:none;stroke-linecap:round;stroke-linejoin:round}
.iso .xk-line,.iso .xk-stroke{stroke:var(--s2);stroke-width:1.7}
.iso .xs-line{stroke:var(--s2);stroke-width:1.4}
.iso .xg-line{stroke:var(--glow);stroke-width:1.8}
.iso .xon-line{stroke:var(--on-s);stroke-width:1.7}
.iso .xs-thick{stroke:var(--s2);stroke-width:5}
.iso .xbox{fill:var(--m1);stroke:var(--s2);stroke-width:1.3}
.iso .cursor{fill:var(--k1);stroke:#fff;stroke-width:1.2}
.iso .lens{fill:rgba(255,255,255,.38);stroke:var(--c3);stroke-width:4}
.iso .cable{stroke:var(--s2);stroke-width:1.3}
.iso .steam{stroke:var(--c3);stroke-width:1.6}
.iso .belt{stroke:var(--glow);stroke-width:2;stroke-dasharray:6 8;opacity:.55;animation:iso-belt 1s linear infinite}
.iso .belt-dark{stroke:var(--s2);opacity:.35}
.iso .flow{stroke:var(--s2);stroke-width:2;stroke-dasharray:5 6;opacity:.7;animation:iso-belt 1.4s linear infinite}
.iso .xt{fill:var(--s2);font:600 9px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.02em}
.iso .xt-step{font-size:10px}
@keyframes iso-belt{to{stroke-dashoffset:-14}}

/* Every animated part turns and scales around its own centre. */
.iso :is(.a-grow,.a-pop,.a-drop,.f-spin,.f-swing,.f-swing-small,.f-pulse,.f-float,.f-blink,.f-steam,.web-cursor,.web-press,.shop-jump,.shop-ship,.follow-card,.follow-check,.auto-in,.auto-out,.sup-fix,.sup-dots,.sup-ok,.und-lens,.del-box,.del-check,.del-flash,.foc-piece,.foc-link,.case-tile,.case-lid){transform-box:fill-box;transform-origin:50% 50%}
/* Build-up loops share the scene's cycle (--t) and start after their own delay (--d). */
.iso :is(.a-grow,.a-pop,.a-drop,.web-cursor,.web-press,.shop-jump,.shop-ship,.follow-card,.follow-check,.auto-in,.auto-out,.sup-fix,.sup-dots,.sup-ok,.und-lens,.del-box,.del-check,.del-flash,.foc-piece,.foc-link){animation-duration:var(--t,6s);animation-delay:var(--d,0s);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.iso .a-grow{transform-origin:0 50%;animation-name:iso-grow}
.iso .a-pop{animation-name:iso-pop}
.iso .a-drop{animation-name:iso-drop}
@keyframes iso-grow{0%{transform:scaleX(0);opacity:1}14%,88%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
@keyframes iso-pop{0%{transform:scale(.3);opacity:0}10%{transform:scale(1.08);opacity:1}15%,86%{transform:scale(1);opacity:1}96%,100%{transform:scale(.7);opacity:0}}
@keyframes iso-drop{0%{transform:translateY(-46px);opacity:0}12%{transform:translateY(2px);opacity:1}15%,86%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}

/* Ambient motion. */
.iso .f-spin{animation:iso-spin 6s linear infinite}
.iso .f-swing{transform-origin:50% 85%;animation:iso-swing 2.4s ease-in-out infinite}
.iso .f-swing-small{transform-origin:50% 0;animation:iso-sway 3.2s ease-in-out infinite}
.iso .f-pulse{animation:iso-pulse 1.6s ease-in-out infinite}
.iso .f-float{animation:iso-float 4.2s ease-in-out var(--d,0s) infinite}
.iso .f-blink{animation:iso-blink 1.1s steps(1,end) var(--d,0s) infinite}
.iso .f-steam{animation:iso-steam 2.6s ease-out infinite}
@keyframes iso-spin{to{transform:rotate(360deg)}}
@keyframes iso-swing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}}
@keyframes iso-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes iso-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
@keyframes iso-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes iso-blink{0%{opacity:1}50%{opacity:.15}}
@keyframes iso-steam{0%{opacity:0;transform:none}40%{opacity:.85}100%{opacity:0;transform:translateY(9px)}}

/* Scene timelines. On the faces the local vertical axis points up, so +y moves up there. */
.iso .web-cursor{animation-name:web-cursor}
@keyframes web-cursor{0%,22%{transform:translate(34px,40px);opacity:0}32%{opacity:1}52%{transform:none}56%{transform:scale(.85)}60%,88%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}
.iso .web-press{animation-name:web-press}
@keyframes web-press{0%,54%{transform:none}57%{transform:scale(.9)}62%,100%{transform:none}}
.iso .shop-jump{animation-name:shop-jump}
@keyframes shop-jump{0%{transform:translate(-110px,-22px);opacity:0}8%{transform:translate(-110px,-22px);opacity:1}24%{transform:translate(-55px,-62px)}38%{transform:translate(0,0)}42%{transform:translate(0,2px)}46%,88%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}
.iso .shop-ship{animation-name:shop-ship}
@keyframes shop-ship{0%,46%{transform:translateY(-24px);opacity:0}56%,80%{transform:none;opacity:1}96%,100%{transform:translate(30px,17px);opacity:0}}
.iso .follow-card{animation-name:follow-card}
@keyframes follow-card{0%{transform:none;opacity:0}6%,22%{transform:none;opacity:1}36%,52%{transform:translate(37px,16px);opacity:1}66%,92%{transform:translate(74px,16px);opacity:1}100%{transform:translate(74px,16px);opacity:0}}
.iso .follow-check{animation-name:iso-badge}
@keyframes iso-badge{0%,66%{transform:scale(.3);opacity:0}72%{transform:scale(1.15);opacity:1}76%,92%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
.iso .auto-in{animation-name:auto-in;animation-timing-function:linear}
.iso .auto-out{animation-name:auto-out;animation-timing-function:linear}
@keyframes auto-in{0%{transform:none;opacity:0}10%{opacity:1}42%{transform:translate(48.5px,28px);opacity:1}48%,100%{transform:translate(48.5px,28px);opacity:0}}
@keyframes auto-out{0%,50%{transform:none;opacity:0}56%{opacity:1}92%{transform:translate(48.5px,28px);opacity:1}100%{transform:translate(48.5px,28px);opacity:0}}
.iso .sup-fix{animation-name:sup-fix}
@keyframes sup-fix{0%,38%{transform:scale(.8);opacity:.25}48%{transform:scale(1.15);opacity:1}54%,90%{transform:scale(1);opacity:1}100%{transform:scale(.8);opacity:.25}}
.iso .sup-dots{animation-name:sup-dots}
@keyframes sup-dots{0%,55%{opacity:1}60%,100%{opacity:0}}
.iso .sup-ok{animation-name:sup-ok}
@keyframes sup-ok{0%,58%{transform:scale(.4);opacity:0}66%{transform:scale(1.1);opacity:1}70%,94%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.iso .und-lens{animation-name:und-lens;animation-timing-function:ease-in-out}
@keyframes und-lens{0%,22%{transform:none}33%,55%{transform:translate(52px,30px)}66%,88%{transform:translate(-24px,44px)}100%{transform:none}}
.iso .del-box{animation-name:del-box;animation-timing-function:linear}
@keyframes del-box{0%{transform:none;opacity:0}8%{transform:none;opacity:1}70%{transform:translate(86.6px,50px);opacity:1}82%,100%{transform:translate(86.6px,50px);opacity:0}}
.iso .del-flash{animation-name:del-flash}
@keyframes del-flash{0%,36%{opacity:.25}42%,52%{opacity:1}58%,100%{opacity:.25}}
.iso .del-check{animation-name:del-check}
@keyframes del-check{0%,50%{transform:scale(.3);opacity:0}56%{transform:scale(1.15);opacity:1}60%,84%{transform:none;opacity:1}92%,100%{transform:none;opacity:0}}
.iso .foc-piece{animation-name:foc-piece}
@keyframes foc-piece{0%,12%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}40%,84%{transform:none}100%{transform:translate(var(--sx),var(--sy)) rotate(var(--sr))}}
.iso .foc-link{animation-name:foc-link}
@keyframes foc-link{0%,36%{opacity:0}46%,80%{opacity:1}90%,100%{opacity:0}}
/* Process hero: each stage's sign arrives slowly on its own step, one after another. */
.iso .lens-ring{fill:rgba(255,255,255,.4);stroke:var(--s2);stroke-width:2.6}
.iso .xs-handle{stroke-width:3.2}
.iso :is(.st-f1,.st-f2,.st-f3,.st-f4,.st-drop,.st-lid,.st-check,.st-tick){transform-box:fill-box;transform-origin:50% 50%;animation-duration:var(--t,12s);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.33,0,.2,1)}
.iso .st-f1{animation-name:st-f1}.iso .st-f2{animation-name:st-f2}.iso .st-f3{animation-name:st-f3}.iso .st-f4{animation-name:st-f4}
.iso .st-drop{animation-name:st-drop}.iso .st-lid{animation-name:st-lid}.iso .st-check{animation-name:st-check}
.iso .st-tick{animation-name:st-tick}.iso .st-tick-late{animation-name:st-tick-late}
@keyframes st-f1{0%,3%{opacity:0;transform:translateY(-18px)}15%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes st-f2{0%,22%{opacity:0;transform:translateY(-18px)}34%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes st-tick{0%,35%{opacity:0}39%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes st-tick-late{0%,40%{opacity:0}44%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes st-f3{0%,46%{opacity:0;transform:translateY(-18px)}56%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes st-drop{0%,57%{opacity:0;transform:translateY(-34px)}64%{opacity:1;transform:translateY(1px)}66%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes st-f4{0%,68%{opacity:0;transform:translateY(-18px)}77%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes st-lid{0%,68%{opacity:0;transform:translateY(-18px)}77%,79%{opacity:1;transform:none}84%,92%{opacity:1;transform:translate(7px,-13px) rotate(20deg)}98%,100%{opacity:0;transform:translate(7px,-13px) rotate(20deg)}}
@keyframes st-check{0%,83%{opacity:0;transform:translateY(8px) scale(.3)}88%{opacity:1;transform:translateY(-2px) scale(1.15)}90%,93%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
/* Pop-out, on computers only: the illustrations grow past their frame (frames stop clipping
   them), each one towards the side with free space so no text or control is covered. On
   tablets and phones they stay inside their frame. */
.iso-holder,.iso-layer{pointer-events:none}
.iso-measure *{animation:none!important;transition:none!important}
@media(min-width:1100px) and (hover:hover){
  :is([data-iso],.iso-layer)>.iso{filter:drop-shadow(0 22px 24px rgba(0,0,0,.2))}
  /* Enfoque: grows upwards, clear of the "Entender" card below. */
  .fx-object-statement>.iso{transform:scale(1.35);transform-origin:63% 100%}
  .fx-object-about>.iso{transform:scale(1.35)}
  /* Home services: bigger, out of each card's bottom-right corner. */
  .svc-card{overflow:visible}
  .svc-card-figure .iso-layer>.iso{transform:translate(24%,38%) scale(1.45);transform-origin:100% 100%}
  .svc-card-figure .iso-layer>:is(.iso-web,.iso-followup,.iso-support){transform:translate(24%,38%) scale(1.7)}
  .svc-card-figure .iso-layer>.iso-software{transform:translate(24%,38%) scale(1.3)}
  /* Process monitor: bigger, out of the screen's top-right corner. */
  .process-section{overflow-x:clip;overflow-y:visible}
  .process-stage .iso-layer>.iso{transform:translate(50%,-42%) scale(1.55);transform-origin:100% 0}
  /* FAQ: bigger, out of the glass frame's top, right and bottom. */
  .faq-stage .iso-layer>.iso{transform:scale(1.45);transform-origin:58% 32%}
  .faq-stage .iso-layer>.iso[data-fit="tall"]{transform:scale(1.5);transform-origin:50% 25%}
  /* Services page studio: raised above its glass frame and a little bigger. */
  :root:root:root .svc-aside .svc-stage{flex:0 0 auto;height:min(300px,46svh);overflow:visible}
  .svc-stage .iso-layer>.iso{transform:translateY(-30%) scale(1.25);transform-origin:50% 0}
  .fx-object-pay>.iso{transform:scale(1.35)}
}
@media(min-width:1100px) and (max-width:1199px) and (hover:hover){.fx-object-statement>.iso{transform:scale(1.22)}}
@media(min-width:1100px) and (max-width:1279px) and (hover:hover){.process-stage .iso-layer>.iso{transform:translate(38%,-42%) scale(1.55)}}
/* FAQ scenes. */
.iso .xc-thin{fill:none;stroke:var(--c3);stroke-width:1}
.iso .xt-tag{fill:var(--on-s);font-size:11px}
.iso .glass{fill:rgba(255,255,255,.35);stroke:var(--c3);stroke-width:1.2}
.iso .grid{opacity:.16}
.iso .sig{fill:none;stroke:var(--s2);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:0;animation:faq-sign var(--t,6s) ease-in-out infinite both}
.iso .sig-late{animation-name:faq-sign-late}
@keyframes faq-sign{0%,30%{stroke-dashoffset:60}50%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes faq-sign-late{0%,62%{stroke-dashoffset:60}78%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.iso :is(.faq-pencil,.faq-light,.faq-lens,.sand-top,.sand-bottom,.time-marker,.chg-out,.chg-in,.sales-bubble,.sales-bar,.f-swing-tag){transform-box:fill-box;transform-origin:50% 50%}
.iso :is(.faq-light,.faq-lens,.sand-top,.sand-bottom,.time-marker,.chg-out,.chg-in,.sales-bubble){animation-duration:var(--t,6s);animation-delay:var(--d,0s);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.iso .faq-pencil{animation:faq-pencil 2.4s ease-in-out infinite}
@keyframes faq-pencil{0%,100%{transform:none}50%{transform:translate(-26px,-15px)}}
.iso .f-swing-tag{transform-origin:50% 100%;animation:iso-sway 2.8s ease-in-out infinite}
.iso .faq-light{animation-name:faq-light}
@keyframes faq-light{0%,62%{opacity:.3}70%,94%{opacity:1}100%{opacity:.3}}
.iso .faq-lens{animation-name:faq-lens;animation-timing-function:ease-in-out}
@keyframes faq-lens{0%,26%{transform:none}38%,58%{transform:translate(-36px,21px)}70%,100%{transform:none}}
.iso .sand-top{transform-origin:50% 0;animation-name:sand-top;animation-timing-function:linear}
.iso .sand-bottom{transform-origin:50% 0;animation-name:sand-bottom;animation-timing-function:linear}
@keyframes sand-top{0%{transform:scaleY(1)}90%{transform:scaleY(.05)}100%{transform:scaleY(1)}}
@keyframes sand-bottom{0%{transform:scaleY(.05)}90%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
.iso .time-marker{animation-name:time-marker}
@keyframes time-marker{0%{transform:none;opacity:0}6%,26%{transform:none;opacity:1}36%,56%{transform:translate(26px,15px);opacity:1}66%,88%{transform:translate(52px,30px);opacity:1}96%,100%{transform:translate(52px,30px);opacity:0}}
.iso .chg-out{animation-name:chg-out}
@keyframes chg-out{0%{transform:translateY(-30px);opacity:0}6%,22%{transform:none;opacity:1}36%,100%{transform:translateY(-44px);opacity:0}}
.iso .chg-in{animation-name:chg-in}
@keyframes chg-in{0%,36%{transform:translateY(-50px);opacity:0}50%{transform:translateY(2px);opacity:1}54%,90%{transform:none;opacity:1}98%,100%{transform:none;opacity:0}}
.iso .sales-bubble{animation-name:sales-bubble}
@keyframes sales-bubble{0%{transform:translate(20px,12px);opacity:0}15%{transform:none;opacity:1}70%{transform:translate(-16px,-46px) scale(.6);opacity:1}80%,100%{transform:translate(-16px,-46px) scale(.4);opacity:0}}
.iso .sales-bar{transform-origin:50% 100%;animation:sales-bar 3s ease-in-out var(--d,0s) infinite}
@keyframes sales-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}

/* Briefcase: at rest the lid lifts and the six services rise out in an arc. */
.iso .case-lid{transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.iso .case-tile{opacity:0;transform:translateY(24px) scale(.4);transition:transform .8s cubic-bezier(.3,1.3,.5,1) calc(.25s + var(--i) * .09s),opacity .4s ease calc(.25s + var(--i) * .09s)}
.is-rest .iso .case-lid{transform:translateY(-14px)}
.is-rest .iso .case-tile{opacity:1;transform:translate(var(--tx),var(--ty))}

/* Holders. A stage keeps the leaving scene a moment while the next one comes in. */
.iso-holder{position:relative}
[data-iso]>.iso,.iso-layer{position:absolute;inset:0}
.iso-layer>.iso{width:100%;height:100%}
.iso-layer{animation:iso-enter .6s cubic-bezier(.2,.8,.2,1) both}
.iso-layer.is-leaving{animation:iso-leave .4s ease both}
@keyframes iso-enter{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes iso-leave{to{opacity:0;transform:translateY(-12px)}}
.svc-card-figure .iso-layer{inset:6% 4%}
.process-stage .iso-layer{inset:8%}
.svc-stage .iso-layer{inset:10% 6%}
.iso-holder .service-stage-fallback{display:none}
.faq-stage .iso-layer{inset:6%}



/* Heroes: the illustration crosses the giant word, then rests and floats. */
.iso-hero{position:absolute;top:0;left:0;z-index:1;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.iso-hero.is-rest>.iso{animation:iso-float 4.6s ease-in-out infinite}

.iso-paused .iso *,.iso-paused.iso-hero>.iso{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .iso *,.iso-layer,.iso-hero>.iso{animation:none!important;transition:none!important}
  .iso .sup-dots{display:none}
}