.work{--work-soft:color-mix(in srgb, var(--background) 72%, var(--foreground));--work-tab:color-mix(in srgb, var(--background) 68%, var(--foreground));--work-rule:color-mix(in srgb, var(--background) 14%, transparent);--work-gap:max(12px, 16 / 1440 * 100vw);--work-media-max:max(320px, 100svh - 72px - 48px - max(24px, 32 / 1440 * 100vw) - 14px - max(48px, 56 / 1440 * 100vw));background:var(--foreground);color:var(--background);flex-direction:column;gap:max(40px,3.88889vw);padding-block:max(80px,10vw) max(72px,7.77778vw);display:flex}.work-head{padding-inline:var(--gutter);justify-content:space-between;align-items:flex-end;gap:16px 32px;display:flex}.work-head .btn-text{color:var(--background);flex:none}.work-head .btn:focus-visible,.work-tab:focus-visible,.work-card:focus-visible{outline-color:var(--background)}.work-tabs{flex-direction:column;gap:max(24px,2.22222vw);display:flex}.work-tablist{margin-inline:var(--gutter);background:linear-gradient(var(--work-rule), var(--work-rule)) no-repeat 0 100% / 100% 1px;scrollbar-width:none;gap:max(24px,2.5vw);display:flex;position:relative;overflow-x:auto}.work-tablist:after{content:"";background:var(--background);transform-origin:0 0;width:1px;height:1px;transform:translateX(var(--ind-x,0)) scaleX(var(--ind-w,0));position:absolute;bottom:0;left:0}.work-tablist[data-ind-ready]:after{transition:transform var(--dur-ui-slow) var(--ease-ui)}@media (prefers-reduced-motion:reduce){.work-tablist[data-ind-ready]:after{transition:none}}.work-tablist::-webkit-scrollbar{display:none}.work-tab{min-height:48px;color:var(--work-tab);font:inherit;letter-spacing:-.015em;cursor:pointer;transition:color var(--dur-ui) var(--ease-ui), scale var(--dur-spring) var(--ease-spring);background:0 0;border:0;border-radius:3px;flex:none;margin:0;padding:0;font-size:max(16px,1.38889vw);font-weight:500;position:relative}.work-tab:active{scale:var(--press-scale);transition:color var(--dur-ui) var(--ease-ui), scale var(--dur-press) var(--ease-ui)}.work-tab[aria-selected=true]{color:var(--background)}@media (hover:hover) and (pointer:fine){.work-tab:hover{color:var(--background)}}.work-tab:focus-visible{outline:var(--focus-width) solid var(--background);outline-offset:var(--focus-offset)}.work-tabs[data-changed] .work-panel:not([hidden]){animation:work-panel-in var(--dur-ui-slow) var(--ease-ui)}@keyframes work-panel-in{0%{opacity:0}}.work-grid{gap:var(--work-gap);padding:0 var(--gutter);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;list-style:none;display:grid}.work-card{color:inherit;transition:scale var(--dur-spring) var(--ease-spring);border-radius:3px;flex-direction:column;gap:14px;text-decoration:none;display:flex}a.work-card:active{scale:var(--press-scale-lg);transition:scale var(--dur-press) var(--ease-ui)}.work-card:focus-visible{outline:var(--focus-width) solid var(--foreground);outline-offset:var(--focus-offset)}.work-media{isolation:isolate;aspect-ratio:3/4;background:var(--gray);border-radius:3px;position:relative;overflow:hidden}.work-bg{object-fit:cover;width:100%;height:100%;transition:transform 1.2s var(--ease-quint);position:absolute;inset:0}.work-slides{transition:transform 1.2s var(--ease-quint);position:absolute;inset:0}.work-slide{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity 0s .5s;position:absolute;inset:0}.work-media[data-fit],.work-shot-panel{background:var(--tone)}.work-shot-panel{overflow:hidden}.work-slides[data-fit]{inset:auto}.work-slides[data-fit=wide]{aspect-ratio:2400/1596;width:100.8%;top:-.6%;left:-.4%}.work-slides[data-fit=tall]{aspect-ratio:1600/2777;width:95%;top:0;left:2.5%}.work-slides[data-fit] .work-slide{object-fit:contain}.work-slide[data-state=prev]{z-index:1;opacity:1}.work-slide[data-state=top]{z-index:2;opacity:1;transition:opacity .5s var(--ease-quart)}.work-slide[data-state=base]{z-index:1;opacity:1;transition:none}.work-slide[data-state=out]{z-index:2;opacity:0;transition:opacity .7s var(--ease-quart)}.work-soon{background:color-mix(in srgb, var(--background) 7%, var(--foreground));transition:transform 1.2s var(--ease-quint);place-items:center;display:grid;position:absolute;inset:0}.work-soon-icon{width:30%;height:auto}.work-soon[data-kind=logo] .work-soon-icon{width:46%}.work-backdrop:after{content:"";background:url(/fv/work/grain.webp) 0 0/160px 160px;position:absolute;inset:0}.work-backdrop~.work-soon{background:0 0}.work-backdrop[data-backdrop=nabi-erp]{background:radial-gradient(110% 70% at 88% 0,#cc246c8c,#0000 62%),radial-gradient(90% 60% at 0 100%,#78124099,#0000 70%),linear-gradient(165deg,#2b0f1c,#10060b)}.work-backdrop[data-backdrop=autoescuela-gti]{background:radial-gradient(100% 65% at 100% 100%,#e2231a80,#0000 65%),radial-gradient(80% 55% at 0 0,#ffffff1a,#0000 70%),linear-gradient(160deg,#232427,#0f1012)}.work-backdrop[data-backdrop=pbb-porrino]{background:radial-gradient(90% 60% at 15% 0,#fff3,#0000 65%),radial-gradient(100% 70% at 100% 100%,#280408a6,#0000 70%),linear-gradient(170deg,#c42a2d,#8f1519 58%,#4b0a0e)}.work-backdrop[data-backdrop=pro-lift-formacion]{background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#0000 1px 40px),repeating-linear-gradient(90deg,#ffffff09 0 1px,#0000 1px 40px),radial-gradient(85% 60% at 75% 5%,#96ebd76b,#0000 65%),radial-gradient(90% 65% at 0 100%,#24968780,#0000 70%),linear-gradient(165deg,#0d2a27,#061412)}.work-backdrop[data-backdrop=musa]{background:radial-gradient(120% 60% at 50% 110%,#d618548c,#0000 65%),radial-gradient(70% 50% at 15% 0,#7e0e4073,#0000 70%),linear-gradient(#13060c,#060204)}.work-backdrop[data-backdrop=ticketera-la-fabrica]{background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,#0000 1px 28px),radial-gradient(90% 55% at 100% 0,#d612126b,#0000 65%),linear-gradient(170deg,#161616,#080808)}.work-backdrop[data-backdrop=g-eventum]{background:radial-gradient(95% 60% at 92% 0,#fc840c52,#0000 72%),radial-gradient(90% 60% at 0 100%,#0a125099,#0000 70%),linear-gradient(160deg,#4258ff,#2235c8 55%,#121c6e)}.work-backdrop[data-backdrop=actionerp]{background:radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--background) 16%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--foreground) 86%, var(--background)), var(--foreground) 60%)}.work-video{opacity:0;transition:opacity .4s var(--ease-quart), transform 1.2s var(--ease-quint)}.work-video[data-playing]{opacity:1}.work-progress{z-index:3;pointer-events:none;gap:4px;display:flex;position:absolute;inset:auto 12px 12px}.work-seg{background:color-mix(in srgb, var(--background) 38%, transparent);border-radius:1px;flex:1;height:2px;overflow:hidden}.work-seg-fill{background:var(--background);transform-origin:0;height:100%;transition:transform .7s var(--ease-quart);display:block;transform:scaleX(0)}.work-seg[data-state=done] .work-seg-fill{transform:none}.work-seg[data-state=active] .work-seg-fill{animation:work-seg var(--work-step,1.4s) linear forwards}@keyframes work-seg{to{transform:none}}.work-device{z-index:1;background:var(--background);box-shadow:0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent), 0 28px 56px -28px color-mix(in srgb, var(--foreground) 70%, transparent);transition:transform .8s var(--ease-quart);position:absolute;left:50%;overflow:hidden}.work-screen{flex:1;display:block;position:relative}.work-screen img{object-fit:cover;object-position:top}.work-desktop{aspect-ratio:16/11;border-radius:4px;flex-direction:column;width:70%;display:flex;top:50%;transform:translate(-50%,-50%)}.work-bar{border-bottom:1px solid color-mix(in srgb, var(--foreground) 6%, transparent);flex:none;align-items:center;gap:4px;height:7%;min-height:10px;padding-inline:4%;display:flex}.work-bar i{background:color-mix(in srgb, var(--foreground) 18%, transparent);border-radius:50%;width:5px;height:5px}.work-phone{aspect-ratio:9/19.5;border:5px solid var(--foreground);background:var(--foreground);border-radius:18%/8.3%;width:46%;bottom:0;transform:translate(-50%,22%)}.work-phone .work-screen{border-radius:15%/7%;height:100%;overflow:hidden}.work-cta{z-index:2;background:var(--background);height:32px;color:var(--foreground);opacity:0;transition:opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);border-radius:3px;align-items:center;gap:6px;padding-inline:12px;font-size:13px;font-weight:500;display:inline-flex;position:absolute;bottom:12px;left:12px;transform:translateY(6px)}.work-card[data-device=phone] .work-cta,.work-card[data-device=photo] .work-cta{top:12px;bottom:auto;transform:translateY(-6px)}.work-caption{align-items:flex-start;gap:14px;display:flex}.work-mark{aspect-ratio:1;border-radius:3px;flex:none;place-items:center;width:max(48px,3.88889vw);display:grid}.work-mark[data-kind=logo]{background:color-mix(in srgb, var(--background) 8%, transparent)}.work-mark img{height:auto;display:block}.work-text{min-width:0}.work-name{letter-spacing:-.01em;margin:0;font-size:max(15px,1.11111vw);font-weight:600;line-height:1.25}.work-name span{transition:background-size var(--dur-ui-slow) var(--ease-ui);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:1px}.work-line{color:var(--work-soft);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0 0;font-size:13px;line-height:1.45;display:-webkit-box;overflow:hidden}@media (prefers-reduced-motion:no-preference){.work-card:focus-visible .work-desktop{transform:translate(-50%,calc(-50% - 10px))}.work-card:focus-visible .work-phone{transform:translate(-50%,12%)}.work-card:focus-visible .work-cta{opacity:1;transform:none}.work-card:focus-visible .btn-arrow-tip{transform:translateX(var(--arrow-shift))}a.work-card:focus-visible .work-name span{background-size:100% 1px}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.work-card:hover .work-desktop{transform:translate(-50%,calc(-50% - 10px))}.work-card:hover .work-phone{transform:translate(-50%,12%)}.work-card:hover .work-cta{opacity:1;transform:none}.work-card:hover .btn-arrow-line{opacity:1}.work-card:hover .btn-arrow-tip{transform:translateX(var(--arrow-shift))}a.work-card:hover .work-name span{background-size:100% 1px}}.work-rail{--rail-w:calc(.3 * (100cqw - var(--gutter) - 3 * var(--work-gap)));--rail-h:min(calc((100cqw - 2 * var(--gutter) - 2 * var(--work-gap)) / 3 * 4 / 3), var(--work-media-max));position:relative;container-type:inline-size}.work-rail-btn{display:none}@media (min-width:48rem){.work-grid .work-media{max-height:var(--work-media-max)}.work-rail-list{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-block:-6px;padding-block:6px;display:flex;position:relative;overflow:auto hidden}.work-rail-list::-webkit-scrollbar{display:none}.work-rail-list>li{flex:0 0 var(--rail-w);scroll-snap-align:start}@media (pointer:coarse){.work-rail-list>li{scroll-snap-stop:always}}.work-rail-list .work-media{aspect-ratio:auto;height:var(--rail-h)}}.work-rail[data-wide] .work-media{aspect-ratio:3/2}.work-rail[data-wide]{--rail-w:calc(.42 * (100cqw - var(--gutter) - 2 * var(--work-gap)));--rail-h:calc(var(--rail-w) * 2 / 3)}@media (min-width:48rem) and (hover:hover) and (pointer:fine){.work-rail-btn{top:calc(var(--rail-h) / 2 - 22px);z-index:4;background:var(--background);width:44px;height:44px;color:var(--foreground);cursor:pointer;transition:opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui), scale var(--dur-spring) var(--ease-spring);border:0;border-radius:3px;place-items:center;padding:0;display:grid;position:absolute}.work-rail-btn:active{scale:var(--press-scale);transition:opacity var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui), scale var(--dur-press) var(--ease-ui)}.work-rail-btn[data-dir=prev]{left:calc(var(--gutter) + 12px)}.work-rail-btn[data-dir=next]{right:calc(var(--gutter) + 12px)}.work-rail-btn svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:16px;height:16px}@media (prefers-reduced-motion:no-preference){.work-rail-btn:hover[data-dir=next]{transform:translate(2px)}.work-rail-btn:hover[data-dir=prev]{transform:translate(-2px)}}.work-rail-btn:focus-visible{outline:var(--focus-width) solid var(--background);outline-offset:var(--focus-offset)}.work-rail-btn[data-off]{opacity:0;pointer-events:none}}@media not (min-width:48rem){.work-grid{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;gap:12px;display:flex;overflow:auto hidden}.work-grid::-webkit-scrollbar{display:none}.work-grid>li{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 round(76vw,1px)}.work-grid[data-loop]:has(.reveal-rise[data-in]) .reveal-rise{opacity:1;transition:opacity 1.2s var(--ease-quint) var(--reveal-delay,0s), transform 1.2s var(--ease-quint) var(--reveal-delay,0s);transform:none}}@media (prefers-reduced-motion:reduce){.work-bg,.work-slides,.work-slide,.work-seg-fill,.work-soon,.work-device,.work-cta,.work-name span,.work-tab,.work-rail-btn{transition:none}.work-tabs[data-changed] .work-panel:not([hidden]){animation:none}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.work-media{--aperture-y:5%;--aperture-x:5%;--aperture-radius:3px;animation:linear both sfx-aperture;animation-timeline:--sfx-work-row;animation-range:entry entry 80%}}@media (prefers-reduced-motion:no-preference){.work [role=tabpanel]{view-timeline:--sfx-work-row block}.work-bg,.work-slides,.work-soon{--settle:1.06;animation:linear both sfx-settle;animation-timeline:--sfx-work-row;animation-range:entry entry 80%}}}
