/*
Theme Name: Motion Agency V31 Fatfish Polished
Theme URI: https://test.tudominio.pe/
Author: ChatGPT
Description: Tema WordPress UX/UI con transición de proyecto tipo barrido: la imagen del proyecto se estira full hero, el título viaja a su posición final y un sweep revela el color real del hero sin oscurecimiento ni salto visual.
Version: 31.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: motion-agency-v8
*/
:root{
  --ink:#111111;--ink2:#191919;--paper:#f5efe4;--paper2:#fff8eb;--red:#e1252f;--red2:#b71520;--cream:#f7ead8;--white:#fff;--muted:#80786d;--line:rgba(17,17,17,.12);
  --display:Impact,"Arial Black",Haettenschweiler,"Roboto Condensed",system-ui,sans-serif;--body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.76,0,.24,1);--ease3:cubic-bezier(.83,0,.17,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden}body.lock,body.is-loading{overflow:hidden}a{text-decoration:none;color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}.container{width:min(1320px,calc(100% - 48px));margin-inline:auto}.narrow{width:min(980px,calc(100% - 48px));margin-inline:auto}.red{color:var(--red)}.muted{color:var(--muted)}.display{font-family:var(--display);font-size:clamp(64px,10.5vw,164px);line-height:.76;letter-spacing:-.085em;text-transform:uppercase;margin:0}.eyebrow{display:inline-flex;gap:10px;align-items:center;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.18em;color:var(--red);margin-bottom:20px}.eyebrow:before{content:"";width:36px;height:2px;background:currentColor;border-radius:99px}.btn{border:0;border-radius:999px;background:var(--red);color:#fff;padding:14px 22px;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:12px;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 16px 35px rgba(225,37,47,.22);transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)}.btn:after{content:'↗';font-size:15px}.btn:before{content:'';position:absolute;inset:0;background:#fff;z-index:-1;transform:translateX(-110%) skewX(-18deg);transition:.48s var(--ease)}.btn:hover{color:var(--red);transform:translateY(-3px);box-shadow:0 24px 50px rgba(225,37,47,.32)}.btn:hover:before{transform:translateX(0)}
body.no-loader .loader{display:none!important}.loader{position:fixed;inset:0;background:var(--ink);z-index:99999;color:#fff;display:grid;place-items:center;transition:opacity .78s var(--ease),visibility .78s var(--ease)}.loader.hide{opacity:0;visibility:hidden;pointer-events:none}.loader:before,.loader:after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:bottom;animation:loaderDoor 1.22s var(--ease3) both}.loader:after{background:#080808;animation-delay:.09s}.loader-box{position:relative;z-index:3;text-align:center;width:min(820px,86vw)}.loader-word{font-family:var(--display);font-size:clamp(68px,12vw,190px);line-height:.72;letter-spacing:-.095em;text-transform:lowercase;clip-path:inset(0 0 100% 0);animation:clipIn .8s .18s var(--ease) forwards}.loader-word span{color:var(--red)}.loader-bar{height:3px;background:rgba(255,255,255,.16);border-radius:999px;margin:28px auto 0;width:min(460px,70vw);overflow:hidden}.loader-bar i{display:block;height:100%;width:0;background:var(--red);animation:load 1.28s .18s var(--ease) forwards}.loader-caption{margin-top:14px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.56)}@keyframes loaderDoor{0%{transform:scaleY(1)}55%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes clipIn{to{clip-path:inset(0)}}@keyframes load{to{width:100%}}
.wipe{position:fixed;inset:0;z-index:9990;pointer-events:none;visibility:hidden}.wipe-layer{position:absolute;inset:0;transform:translateY(105%);transition:transform .76s var(--ease3)}.wipe-layer.one{background:var(--red)}.wipe-layer.two{background:var(--ink);transition-delay:.08s}.wipe-layer.three{background:#fff;transition-delay:.16s;mix-blend-mode:difference;opacity:.85}.wipe.on{visibility:visible}.wipe.on .wipe-layer{transform:translateY(0)}.wipe span{position:absolute;left:clamp(22px,7vw,90px);bottom:clamp(24px,6vw,80px);font-family:var(--display);font-size:clamp(64px,12vw,188px);line-height:.72;letter-spacing:-.095em;text-transform:uppercase;color:#fff;z-index:2;opacity:0;transform:translateY(70px);transition:.48s .18s var(--ease)}.wipe.on span{opacity:1;transform:none}.route-enter{position:fixed;inset:0;background:var(--ink);z-index:9980;pointer-events:none;transform:translateY(0);transition:transform .8s var(--ease3)}.route-enter.out{transform:translateY(-105%)}
.cursor{display:none;position:fixed;z-index:9998;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--red);mix-blend-mode:difference;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .25s var(--ease),background .25s}.cursor:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(255,255,255,.55);border-radius:inherit;opacity:0;transition:.25s}@media(pointer:fine){.cursor{display:block}body.cursor-big .cursor{width:78px;height:78px;background:#fff;opacity:.78}body.cursor-big .cursor:after{opacity:1}}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:0%;z-index:1200;mix-blend-mode:difference}.header{position:fixed;z-index:1000;left:0;right:0;top:0;padding:22px clamp(18px,4vw,58px);display:flex;justify-content:space-between;align-items:center;color:#fff;mix-blend-mode:difference;pointer-events:none}.brand,.header-actions{pointer-events:auto}.brand{font-family:var(--display);font-size:25px;letter-spacing:-.085em;line-height:.8;text-transform:lowercase}.brand span{color:var(--red)}.header-actions{display:flex;gap:10px}.pill{border:0;border-radius:999px;background:var(--red);color:#fff;padding:11px 17px;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;transition:.3s var(--ease);position:relative;overflow:hidden}.pill.alt{background:#fff;color:#111}.pill:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.14);transform:translateY(100%);transition:.32s var(--ease)}.pill:hover{transform:translateY(-3px) rotate(-2deg)}.pill:hover:before{transform:translateY(0)}
.panel{position:fixed;inset:0;z-index:960;display:grid;grid-template-columns:1.1fr .9fr;transform:translateY(-105%);transition:transform .9s var(--ease3);overflow:hidden;color:#fff;background:var(--red);visibility:hidden}.panel.open{transform:translateY(0);visibility:visible}.panel:before{content:'';position:absolute;inset:-20%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 45px);transform:rotate(-4deg)}.panel:after{content:"";position:absolute;inset:auto -10% -18% -10%;height:46%;background:#080808;transform:rotate(-4deg)}.panel-left,.panel-right{position:relative;z-index:1}.panel-left{display:flex;align-items:center;padding:clamp(42px,7vw,105px)}.panel-right{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(36px,5vw,82px);border-left:1px solid rgba(255,255,255,.22)}.panel-close{position:absolute;top:clamp(20px,4vw,50px);right:clamp(20px,4vw,58px);z-index:5;border:0;border-radius:999px;background:#fff;color:var(--red);padding:11px 16px;font-size:12px;font-weight:950;text-transform:uppercase}.panel-watermark{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:23vw;color:rgba(255,255,255,.08);letter-spacing:-.1em;transform:rotate(-8deg);pointer-events:none}.navbig{display:grid;gap:4px}.navbig a{font-family:var(--display);font-size:clamp(66px,10vw,176px);line-height:.73;letter-spacing:-.09em;text-transform:uppercase;opacity:0;transform:translateY(95px) rotate(2deg);transition:opacity .72s var(--ease),transform .72s var(--ease),color .25s}.panel.open .navbig a{opacity:1;transform:none}.panel.open .navbig a:nth-child(2){transition-delay:.07s}.panel.open .navbig a:nth-child(3){transition-delay:.14s}.panel.open .navbig a:nth-child(4){transition-delay:.21s}.navbig a:hover{color:transparent;-webkit-text-stroke:2px #fff;transform:translateX(18px)!important}.panel-copy{font-size:clamp(20px,2.3vw,34px);line-height:1.05;font-weight:900;max-width:470px}.panel-small{margin-top:24px;font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.68)}.contact-panel{background:var(--ink);grid-template-columns:.9fr 1.1fr}.contact-panel:after{background:var(--red);height:40%;bottom:-23%;opacity:.95}.contact-panel .panel-left{background:var(--red)}.contact-title{font-family:var(--display);font-size:clamp(66px,9vw,155px);line-height:.71;letter-spacing:-.095em;text-transform:uppercase;margin:0;opacity:0;transform:translateY(78px);transition:.76s .1s var(--ease)}.contact-panel.open .contact-title{opacity:1;transform:none}.contact-form{width:min(700px,100%);margin-inline:auto;position:relative;z-index:2;opacity:0;transform:translateY(70px);transition:.78s .18s var(--ease)}.contact-panel.open .contact-form{opacity:1;transform:none}.field{display:grid;gap:8px;margin-bottom:18px}.field label{font-size:11px;text-transform:uppercase;letter-spacing:.17em;color:rgba(255,255,255,.65);font-weight:950}.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);outline:0;color:#fff;padding:14px 0;font-size:clamp(22px,3vw,38px);font-weight:850;width:100%;transition:border .25s}.field textarea{min-height:116px;resize:vertical}.field input:focus,.field textarea:focus{border-color:var(--red)}.note{font-size:13px;line-height:1.45;color:rgba(255,255,255,.62);margin-top:16px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hero{min-height:100svh;padding:130px 0 80px;display:grid;place-items:center;background:var(--paper2);position:relative;overflow:hidden}.noise{position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.12) .6px,transparent .6px);background-size:5px 5px}.bg-type{position:absolute;inset:-5%;display:flex;flex-wrap:wrap;align-content:center;gap:2px 26px;font-family:var(--display);font-size:clamp(56px,8vw,126px);line-height:.76;letter-spacing:-.085em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.05);transform:rotate(-1.5deg);pointer-events:none}.bg-type b{color:rgba(225,37,47,.06);-webkit-text-stroke:0}.hero-grid{position:relative;z-index:2;width:min(1320px,calc(100% - 48px));display:grid;grid-template-columns:1.22fr .78fr;gap:44px;align-items:end}.hero-title{font-family:var(--display);font-size:clamp(76px,12vw,196px);line-height:.7;letter-spacing:-.1em;text-transform:uppercase;margin:0}.hero-title span{display:block;clip-path:inset(0 0 100% 0);transform:translateY(44px);animation:titleIn .86s var(--ease) forwards}.hero-title span:nth-child(2){animation-delay:.12s}.hero-title span:nth-child(3){animation-delay:.24s}@keyframes titleIn{to{clip-path:inset(0);transform:none}}.hero-side{max-width:510px;justify-self:end}.hero-side p{font-size:clamp(18px,2vw,29px);font-weight:850;line-height:1.05;margin:0 0 25px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.chips span{border:1px solid var(--line);border-radius:999px;padding:8px 11px;font-size:11px;font-weight:900;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.38);backdrop-filter:blur(8px)}.sticker{position:absolute;z-index:3;border-radius:50%;background:var(--red);color:#fff;width:92px;height:92px;display:grid;place-items:center;font-family:var(--display);letter-spacing:-.07em;font-size:28px;box-shadow:0 24px 50px rgba(225,37,47,.28);animation:float 4s ease-in-out infinite}.st1{left:8%;top:22%;transform:rotate(-10deg)}.st2{right:12%;top:18%;background:#111;animation-delay:.6s}.st3{right:22%;bottom:13%;width:70px;height:70px;font-size:22px;animation-delay:1.1s}.spotlight{position:absolute;left:50%;top:50%;width:42vw;height:42vw;background:radial-gradient(circle,rgba(225,37,47,.16),transparent 60%);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;filter:blur(8px)}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}.scroll{position:absolute;bottom:26px;right:clamp(22px,4vw,60px);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);writing-mode:vertical-rl}.scroll:before{content:"";display:block;width:1px;height:68px;background:currentColor;margin:0 auto 12px;animation:scrollLine 1.6s var(--ease) infinite}@keyframes scrollLine{0%,100%{transform:scaleY(.25);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.intro{background:var(--ink);color:#fff;padding:clamp(90px,12vw,190px) 0;position:relative;overflow:hidden}.intro:before{content:'WEB · BRAND · MOTION · UX ·';position:absolute;left:-4vw;top:20px;font-family:var(--display);font-size:14vw;line-height:.8;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap}.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:end}.intro h2{font-family:var(--display);font-size:clamp(58px,9vw,145px);line-height:.75;letter-spacing:-.085em;text-transform:uppercase;margin:0}.intro-card{background:var(--red);padding:clamp(28px,4vw,58px);border-radius:30px;transform:rotate(-2deg);box-shadow:0 40px 90px rgba(0,0,0,.28);position:relative;overflow:hidden}.intro-card:before{content:"";position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.2) 45%,transparent 68%);transform:translateX(-80%) rotate(10deg);animation:shine 5s var(--ease) infinite}.intro-card h3{font-family:var(--display);font-size:clamp(44px,5vw,88px);line-height:.8;letter-spacing:-.085em;text-transform:uppercase;margin:0 0 18px;position:relative}.intro-card p{font-size:clamp(17px,1.6vw,23px);font-weight:800;line-height:1.13;margin:0;color:rgba(255,255,255,.92);position:relative}@keyframes shine{0%,45%{transform:translateX(-85%) rotate(10deg)}75%,100%{transform:translateX(85%) rotate(10deg)}}
.projects{background:var(--paper);padding:clamp(90px,12vw,196px) 0;position:relative;overflow:hidden}.projects:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 88%,rgba(17,17,17,.06));pointer-events:none}.projects-head{display:grid;grid-template-columns:1fr .78fr;gap:36px;align-items:end;margin-bottom:64px}.projects-head p{font-size:clamp(17px,1.7vw,24px);font-weight:800;line-height:1.15;color:var(--muted);margin:0}.project-stage{position:relative;min-height:790px;perspective:1200px}.project-card{position:absolute;width:min(430px,82vw);background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:24px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.12);transition:transform .5s var(--ease),box-shadow .5s var(--ease),filter .5s}.project-card:hover{box-shadow:0 48px 115px rgba(0,0,0,.24);filter:saturate(1.06)}.project-card a{display:block}.visual{height:300px;background:linear-gradient(135deg,#1f1f1f,#444);position:relative;overflow:hidden}.visual:before{content:'';position:absolute;inset:24px;border:1px solid rgba(255,255,255,.28);border-radius:16px}.visual:after{content:'WEB';position:absolute;left:26px;bottom:20px;font-family:var(--display);font-size:72px;letter-spacing:-.08em;color:#fff}.visual i{position:absolute;right:24px;top:24px;width:70px;height:70px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:spin 8s linear infinite}.v2{background:linear-gradient(135deg,#e1252f,#541115)}.v2:after{content:'BRAND'}.v3{background:linear-gradient(135deg,#f5efe4,#b9b9b9)}.v3:after{content:'CASE';color:#111}.v4{background:linear-gradient(135deg,#111,#e1252f)}.v4:after{content:'UX'}.project-meta{padding:23px}.project-meta small{font-weight:950;color:var(--red);text-transform:uppercase;letter-spacing:.12em}.project-meta h3{font-family:var(--display);font-size:43px;line-height:.85;letter-spacing:-.075em;text-transform:uppercase;margin:10px 0 8px}.project-meta p{margin:0;color:var(--muted);font-weight:800}.open-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:950;text-transform:uppercase;color:var(--red)}.open-link:after{content:"↗"}.c1{left:0;top:42px;transform:rotate(-5deg)}.c2{right:3%;top:10px;transform:rotate(3deg)}.c3{left:50%;top:225px;transform:translateX(-50%) rotate(-1deg);z-index:4}.c4{left:8%;top:500px;transform:rotate(3deg)}.c5{right:0;top:482px;transform:rotate(-3deg)}.project-prompt{position:absolute;left:50%;top:96px;transform:translateX(-50%);font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--red);font-size:13px}.magnet-label{position:absolute;right:18px;top:18px;background:var(--red);color:#fff;border-radius:999px;padding:9px 12px;font-size:11px;font-weight:950;text-transform:uppercase;z-index:3}@keyframes spin{to{transform:rotate(360deg)}}
.marquee{overflow:hidden;background:var(--red);color:#fff;padding:24px 0;transform:rotate(-1deg) scale(1.02);position:relative;z-index:2}.marquee-track{display:flex;gap:30px;white-space:nowrap;font-family:var(--display);font-size:clamp(42px,7vw,106px);line-height:.82;letter-spacing:-.085em;text-transform:uppercase;animation:marq 22s linear infinite}.marquee-track span{display:inline-block}@keyframes marq{to{transform:translateX(-50%)}}
.services{background:var(--paper2);padding:clamp(90px,12vw,188px) 0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.service{border:1px solid var(--line);border-radius:28px;padding:32px;background:rgba(255,255,255,.48);position:relative;overflow:hidden;transition:transform .36s var(--ease),background .36s}.service:after{content:"";position:absolute;inset:auto 20px 20px auto;width:62px;height:62px;border-radius:50%;background:var(--red);opacity:.08;transition:.36s}.service:hover{transform:translateY(-8px);background:#fff}.service:hover:after{transform:scale(2);opacity:.13}.service small{color:var(--red);font-weight:950}.service h3{font-family:var(--display);font-size:56px;letter-spacing:-.075em;text-transform:uppercase;line-height:.85;margin:20px 0}.service p{color:var(--muted);font-weight:750;line-height:1.35;margin:0}.cta{background:var(--ink);color:#fff;text-align:center;padding:clamp(95px,14vw,230px) 0;position:relative;overflow:hidden}.cta:before{content:"CONTACT CONTACT CONTACT";position:absolute;left:-4%;top:18%;font-family:var(--display);font-size:14vw;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.075);letter-spacing:-.09em;white-space:nowrap}.cta h2{font-family:var(--display);font-size:clamp(74px,13vw,198px);line-height:.7;letter-spacing:-.1em;text-transform:uppercase;margin:0 0 30px;position:relative}.footer{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#101010;color:#fff;padding:34px clamp(22px,5vw,70px);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.footer strong{font-family:var(--display);font-size:25px;letter-spacing:-.08em;text-transform:lowercase}.page-shell{min-height:70vh;padding:150px 0 90px;background:var(--paper)}.entry-title{font-family:var(--display);font-size:clamp(62px,10vw,150px);line-height:.78;letter-spacing:-.08em;text-transform:uppercase}.entry-content{font-size:18px;line-height:1.65}.case-hero{min-height:95svh;background:var(--ink);color:#fff;display:grid;place-items:end;padding:140px 0 80px;position:relative;overflow:hidden}.case-hero:before{content:'PROJECT PROJECT PROJECT PROJECT';position:absolute;inset:auto auto 8% -4%;font-family:var(--display);font-size:13vw;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);letter-spacing:-.08em;white-space:nowrap}.case-title{font-family:var(--display);font-size:clamp(82px,13vw,205px);line-height:.7;letter-spacing:-.1em;text-transform:uppercase;margin:12px 0 22px}.case-text{font-size:clamp(18px,2vw,29px);font-weight:800;line-height:1.1;max-width:660px}.case-visual{height:430px;border-radius:30px;background:linear-gradient(135deg,#f4f4f4,#a8a8a8);margin-top:52px;position:relative;overflow:hidden}.case-visual:after{content:'IMAGINA';position:absolute;left:30px;bottom:22px;font-family:var(--display);font-size:106px;line-height:.8;letter-spacing:-.085em;color:#111}.case-body{background:var(--paper2);padding:112px 0}.case-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.case-grid h2{font-family:var(--display);font-size:clamp(50px,7vw,112px);line-height:.78;letter-spacing:-.085em;text-transform:uppercase;margin:0}.reveal{opacity:0;transform:translateY(52px);clip-path:inset(0 0 18% 0);transition:opacity .86s var(--ease),transform .86s var(--ease),clip-path .86s var(--ease)}.reveal.show{opacity:1;transform:none;clip-path:inset(0)}.split{display:inline-block;overflow:hidden}.split>span{display:inline-block;transform:translateY(108%);transition:transform .86s var(--ease)}.split.show>span{transform:none}
@media(max-width:900px){.container,.narrow,.hero-grid{width:min(100% - 30px,1320px)}.panel,.contact-panel{grid-template-columns:1fr}.panel-right{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:24px}.form-row{grid-template-columns:1fr}.hero{padding-top:112px}.hero-grid,.intro-grid,.projects-head,.case-grid{grid-template-columns:1fr}.hero-side{justify-self:start}.sticker{display:none}.project-stage{min-height:auto;display:grid;gap:20px}.project-card{position:relative;inset:auto!important;width:100%;transform:none!important}.visual{height:230px}.project-prompt{display:none}.service-grid{grid-template-columns:1fr}.footer{display:grid}.contact-form{padding-top:30px}.contact-title{font-size:72px}.navbig a{font-size:64px}.display{font-size:66px}.project-meta h3{font-size:36px}.header{padding:18px}.pill{padding:10px 13px}.case-visual:after{font-size:62px}.hero-title{font-size:76px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none;clip-path:none}.split>span{transform:none}.loader,.wipe,.route-enter{display:none!important}body{overflow:auto!important}}

/* V6 PROJECT MORPH — transición tipo caso de estudio */
.project-card.featured-project{z-index:8;transform-style:preserve-3d}
.project-card.featured-project .project-open{display:block;height:100%;position:relative;color:inherit;isolation:isolate}
.project-card.featured-project .project-meta h3{transition:transform .55s var(--ease),letter-spacing .55s var(--ease),color .35s var(--ease)}
.project-card.featured-project:hover .project-meta h3{transform:translateY(-8px);letter-spacing:-.075em;color:var(--red)}
.project-card.featured-project:hover .visual{filter:saturate(1.2) contrast(1.08);transform:scale(1.035)}
.project-hover-title{position:fixed;inset:0;z-index:850;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .28s var(--ease);mix-blend-mode:difference}
.project-hover-title span{font-family:var(--display);font-size:clamp(82px,14vw,235px);line-height:.68;letter-spacing:-.105em;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.86);text-align:center;transform:translateY(34px) scale(.96);transition:transform .5s var(--ease),-webkit-text-stroke-color .35s var(--ease)}
body.project-hovering .project-hover-title{opacity:1}
body.project-hovering .project-hover-title span{transform:none}
.project-follow-dot{position:fixed;z-index:9997;left:0;top:0;width:82px;height:82px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.68);transition:opacity .22s var(--ease),transform .22s var(--ease);box-shadow:0 18px 45px rgba(225,37,47,.35)}
body.project-hovering .project-follow-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}
.project-morph{position:fixed;inset:0;z-index:9992;pointer-events:none;visibility:hidden;overflow:hidden;background:transparent}
.project-morph.active{visibility:visible}
.project-morph .morph-bg{position:absolute;inset:0;background:var(--paper2);transform:translateY(100%);transition:transform .72s var(--ease3)}
.project-morph .morph-red{position:absolute;left:0;right:0;bottom:0;height:32vh;background:var(--red);transform:translateY(110%);transition:transform .62s .07s var(--ease3)}
.project-morph.active .morph-bg,.project-morph.active .morph-red{transform:translateY(0)}
.morph-title-clone{position:fixed;z-index:9994;font-family:var(--display);font-size:clamp(54px,8.2vw,142px);line-height:.72;letter-spacing:-.095em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transform-origin:left top;will-change:transform,left,top,color,opacity;filter:drop-shadow(0 22px 35px rgba(0,0,0,.08))}
.morph-title-clone:after{content:attr(data-label);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.2px var(--red);transform:translate(7px,7px);z-index:-1;opacity:.75}
body.morph-running .header,body.morph-running .progress{opacity:0;transition:opacity .22s var(--ease)}
.case-hero{position:relative;min-height:92vh;display:flex;align-items:flex-start;padding-top:clamp(128px,17vh,190px);overflow:hidden;background:var(--paper2)}
.case-hero:before{content:attr(data-case-title);position:absolute;left:-4vw;top:12vh;font-family:var(--display);font-size:clamp(92px,18vw,280px);line-height:.68;letter-spacing:-.105em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(17,17,17,.08);white-space:nowrap;pointer-events:none}
.case-title{font-family:var(--display);font-size:clamp(70px,12vw,190px);line-height:.72;letter-spacing:-.1em;text-transform:uppercase;margin:0 0 24px;max-width:900px;clip-path:inset(0 0 100% 0);transform:translateY(90px);animation:caseTitleLand .95s .2s var(--ease) forwards}
.route-skip-loader .case-title{animation-delay:.36s}
@keyframes caseTitleLand{to{clip-path:inset(0);transform:none}}
.case-text{max-width:580px;font-size:clamp(18px,2vw,28px);line-height:1.12;font-weight:800;color:#2a2927;opacity:0;transform:translateY(30px);animation:caseCopyIn .65s .58s var(--ease) forwards}@keyframes caseCopyIn{to{opacity:1;transform:none}}
.case-visual{border-radius:28px;overflow:hidden;box-shadow:0 36px 100px rgba(0,0,0,.18);transform:translateY(40px) rotate(-2deg);opacity:0;animation:caseVisualIn .85s .5s var(--ease) forwards}@keyframes caseVisualIn{to{opacity:1;transform:translateY(0) rotate(-2deg)}}
.project-card .magnet-label{transition:transform .35s var(--ease),background .35s var(--ease)}.project-card:hover .magnet-label{transform:translate(-50%,-50%) scale(1.08);background:var(--red)}
@media(max-width:800px){.project-hover-title span{font-size:20vw}.project-follow-dot{display:none}.morph-title-clone{font-size:17vw;white-space:normal;width:86vw}.case-title{font-size:18vw}.case-hero{padding-top:120px}}

/* V7 PROJECT CINEMATIC — transición de proyecto afinada según video */
.project-hover-title{z-index:760;mix-blend-mode:normal}
.project-hover-title span{font-size:clamp(88px,13.5vw,230px);color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.40);opacity:.95;letter-spacing:-.115em;filter:drop-shadow(0 18px 50px rgba(0,0,0,.22))}
body.project-hovering .project-card:not(.featured-project){filter:grayscale(.5) brightness(.82);transition:filter .45s var(--ease)}
body.project-hovering .featured-project{z-index:40}
body.project-hovering .featured-project .project-meta h3{color:#fff;transform:translateY(-14px) scale(1.04)}
.project-follow-dot{width:74px;height:74px;font-size:9px;background:#e1252f;box-shadow:0 20px 60px rgba(225,37,47,.45)}
body.cinema-running{overflow:hidden!important;cursor:wait}
.project-cinema{position:fixed;inset:0;z-index:9990;pointer-events:none;overflow:hidden;isolation:isolate;background:transparent}
.project-cinema .cinema-shade{position:absolute;inset:0;background:#171717;opacity:0;transition:opacity .28s var(--ease)}
.project-cinema.phase-two .cinema-shade{opacity:1}
.project-cinema .cinema-paper{position:absolute;inset:0;background:#f4f1eb;transform:translateY(105%);transition:transform .78s .12s cubic-bezier(.76,0,.24,1)}
.project-cinema.phase-three .cinema-paper{transform:translateY(0)}
.project-cinema .cinema-cut{position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,38% 0,18% 100%,0 100%);transform:translateX(-105%);transition:transform .82s .18s cubic-bezier(.76,0,.24,1)}
.project-cinema.phase-three .cinema-cut{transform:translateX(0)}
.project-cinema .cinema-redline{position:absolute;left:0;right:0;top:0;height:7px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .72s .18s cubic-bezier(.76,0,.24,1)}
.project-cinema.phase-three .cinema-redline{transform:scaleX(1)}
.cinema-frame{position:fixed;z-index:9993;overflow:hidden;background:#222;box-shadow:0 38px 120px rgba(0,0,0,.34);will-change:left,top,width,height,transform,border-radius;transform-origin:center center}
.cinema-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.32),transparent 28%,rgba(225,37,47,.2) 72%,transparent);mix-blend-mode:screen;opacity:.7;z-index:3;transform:translateX(-120%);animation:cinemaGlint .8s .18s cubic-bezier(.76,0,.24,1) forwards}
.cinema-frame i{position:absolute;inset:0;background:inherit}
@keyframes cinemaGlint{to{transform:translateX(120%)}}
.cinema-title{position:fixed;z-index:9994;font-family:var(--display);font-size:clamp(62px,7vw,134px);line-height:.72;letter-spacing:-.105em;text-transform:uppercase;white-space:nowrap;transform-origin:left top;will-change:left,top,transform,color;filter:drop-shadow(0 24px 50px rgba(0,0,0,.18))}
.cinema-title:after{content:attr(data-label);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.2px var(--red);transform:translate(7px,7px);z-index:-1;opacity:.7}
.project-cinema .cinema-meta{position:absolute;z-index:9995;left:5.6vw;bottom:9vh;font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:950;color:#111;opacity:0;transform:translateY(28px);transition:opacity .38s .62s var(--ease),transform .38s .62s var(--ease)}
.project-cinema.phase-three .cinema-meta{opacity:1;transform:none}
body.cinema-running .header,body.cinema-running .progress,body.cinema-running .cursor{opacity:0!important;transition:opacity .2s var(--ease)}

/* Llegada del proyecto: simula continuidad desde la transición, no preloader */
html.project-morph-arrival .route-enter{background:#f4f1eb;transform:translateY(0);animation:arrivalPaper .62s .08s cubic-bezier(.76,0,.24,1) forwards}
@keyframes arrivalPaper{to{transform:translateY(-105%)}}
html.project-morph-arrival .case-hero{background:#f4f1eb}
html.project-morph-arrival .case-hero:after{content:"";position:absolute;right:6vw;top:18vh;width:min(43vw,660px);height:62vh;border-radius:0;background:linear-gradient(135deg,#222,#555 45%,#151515);box-shadow:0 38px 120px rgba(0,0,0,.2);transform:translateY(16px);opacity:.2;animation:arrivalGhost .72s .24s var(--ease) forwards;pointer-events:none}
@keyframes arrivalGhost{to{opacity:0;transform:translateY(-10px)}}
html.project-morph-arrival .case-title{animation-delay:.18s;clip-path:inset(0 0 100% 0);transform:translateY(86px)}
html.project-morph-arrival .case-text{animation-delay:.56s}
html.project-morph-arrival .case-visual{animation-delay:.42s}
.case-hero{align-items:flex-start}.case-hero .container{position:relative;z-index:2}.case-title{max-width:820px}.case-visual{margin-top:42px;height:min(56vh,560px);background:linear-gradient(135deg,#141414,#474747 50%,#101010);position:relative}.case-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 35%,rgba(225,37,47,.25));mix-blend-mode:screen}.case-visual:after{content:"digital case";position:absolute;left:28px;bottom:24px;color:#fff;font-family:var(--display);font-size:clamp(42px,7vw,96px);letter-spacing:-.08em;text-transform:uppercase;line-height:.75;opacity:.9}
@media(max-width:800px){.project-cinema .cinema-cut{clip-path:polygon(0 0,100% 0,100% 22%,0 38%)}.cinema-title{font-size:17vw;white-space:normal;width:86vw}.project-cinema .cinema-meta{left:7vw;bottom:5vh}.cinema-frame{max-height:46vh}.case-visual{height:360px}html.project-morph-arrival .case-hero:after{display:none}}


/* V8 PROJECT REVEAL — cierre afinado: la transición termina mostrando el proyecto, no una cortina vacía */
html.project-morph-arrival .route-enter{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  transform:translateY(-105%)!important;
}
html.project-morph-arrival body{
  background:#f4f1eb;
}
html.project-morph-arrival .header,
html.project-morph-arrival .progress{
  opacity:1;
}
html.project-morph-arrival .case-hero{
  min-height:100svh;
  background:#f4f1eb;
  color:#111;
  padding-top:clamp(118px,15vh,170px);
}
html.project-morph-arrival .case-title{
  clip-path:inset(0);
  transform:translateY(-10px) scale(.992);
  opacity:1;
  animation:caseArrivalSettle .72s .04s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes caseArrivalSettle{
  0%{transform:translateY(-18px) scale(.985);letter-spacing:-.112em;filter:blur(.2px)}
  100%{transform:none;letter-spacing:-.1em;filter:none}
}
html.project-morph-arrival .case-text{
  opacity:0;
  transform:translateY(22px);
  animation:caseCopyIn .58s .22s var(--ease) forwards;
}
html.project-morph-arrival .case-visual{
  opacity:1;
  transform:translateY(0) rotate(-2deg) scale(1);
  animation:caseVisualSettle .8s .08s var(--ease) forwards;
}
@keyframes caseVisualSettle{
  0%{transform:translateY(10px) rotate(-1deg) scale(1.015);filter:contrast(1.08)}
  100%{transform:translateY(0) rotate(-2deg) scale(1);filter:none}
}
html.project-morph-arrival .case-hero:after{
  display:none!important;
}
.project-cinema.final-lock .cinema-paper{
  transform:translateY(0);
}
.project-cinema.final-lock .cinema-frame{
  box-shadow:0 45px 130px rgba(0,0,0,.18);
}
.project-cinema.final-lock .cinema-title{
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
}


/* V9 SEAMLESS PROJECT HERO — el último frame de la transición ES el primer frame del proyecto */
html.project-morph-arrival .loader,
html.project-morph-arrival .route-enter{
  display:none!important;
}
.case-hero{
  min-height:100svh!important;
  background:#f4f1eb!important;
  color:#111!important;
  padding:0!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
}
.case-hero:before{
  content:attr(data-case-title)!important;
  position:absolute!important;
  left:-3.6vw!important;
  top:10.5vh!important;
  font-family:var(--display)!important;
  font-size:clamp(96px,18vw,286px)!important;
  line-height:.68!important;
  letter-spacing:-.108em!important;
  color:transparent!important;
  -webkit-text-stroke:1.4px rgba(17,17,17,.065)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  z-index:0!important;
}
.case-hero .container{
  width:100%!important;
  min-height:100svh!important;
  margin:0!important;
  position:relative!important;
  z-index:2!important;
}
.case-kicker,
.case-text,
.case-actions{
  position:absolute;
  left:5.6vw;
  z-index:4;
}
.case-kicker{
  top:12vh;
  margin:0!important;
}
.case-title{
  position:absolute;
  left:5.55vw;
  top:clamp(92px,16vh,170px);
  z-index:5;
  width:min(44vw,820px);
  max-width:min(44vw,820px)!important;
  margin:0!important;
  font-size:clamp(70px,11.6vw,185px)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
  color:#111!important;
  clip-path:inset(0)!important;
  transform:none!important;
  opacity:1!important;
  animation:none!important;
}
.case-text{
  top:clamp(335px,52vh,540px);
  width:min(42vw,620px);
  max-width:min(42vw,620px)!important;
  font-size:clamp(17px,1.65vw,25px)!important;
  line-height:1.13!important;
  color:#292724!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.case-actions{
  top:clamp(440px,68vh,680px);
}
.case-visual{
  position:absolute!important;
  right:6vw!important;
  top:18vh!important;
  width:min(43vw,660px)!important;
  height:62vh!important;
  margin:0!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#141414,#474747 50%,#101010)!important;
  box-shadow:0 38px 120px rgba(0,0,0,.22)!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  z-index:3!important;
  overflow:hidden!important;
}
.case-visual:before{opacity:.95!important;}
.case-visual:after{
  content:'digital case'!important;
  left:28px!important;
  bottom:24px!important;
  color:#fff!important;
}
.case-body{
  background:#fff!important;
  padding:clamp(84px,12vw,150px) 0!important;
}
html.project-morph-arrival .case-title,
html.project-morph-arrival .case-text,
html.project-morph-arrival .case-visual{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  opacity:1!important;
}
html.project-morph-arrival .case-hero:after{display:none!important;}
html.project-morph-arrival .header,
html.project-morph-arrival .progress{opacity:1!important;}

/* Ajustes finales de la escena overlay para que termine exactamente donde empieza el hero */
.project-cinema.final-lock .cinema-paper{background:#f4f1eb!important;}
.project-cinema.final-lock .cinema-frame{
  right:auto!important;
  border-radius:0!important;
  transform:none!important;
  box-shadow:0 38px 120px rgba(0,0,0,.22)!important;
}
.project-cinema.final-lock .cinema-title{
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
  filter:none!important;
}
.project-cinema.final-lock .cinema-title:after{display:none!important;}
.project-cinema .cinema-case-copy{
  position:absolute;
  z-index:9995;
  left:5.6vw;
  top:clamp(335px,52vh,540px);
  width:min(42vw,620px);
  color:#292724;
  font-weight:800;
  font-size:clamp(17px,1.65vw,25px);
  line-height:1.13;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .42s .62s var(--ease),transform .42s .62s var(--ease);
}
.project-cinema.phase-three .cinema-case-copy{opacity:1;transform:none;}
.project-cinema .cinema-kicker{
  position:absolute;
  z-index:9995;
  left:5.6vw;
  top:12vh;
  color:var(--red);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .32s .48s var(--ease),transform .32s .48s var(--ease);
}
.project-cinema.phase-three .cinema-kicker{opacity:1;transform:none;}

@media(max-width:900px){
  .case-hero{min-height:auto!important;padding:118px 0 70px!important;}
  .case-hero .container{width:min(100% - 30px,1320px)!important;min-height:auto!important;margin-inline:auto!important;}
  .case-kicker,.case-title,.case-text,.case-actions,.case-visual{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;max-width:100%!important;}
  .case-title{font-size:18vw!important;margin:16px 0 22px!important;}
  .case-text{font-size:19px!important;margin-bottom:24px!important;}
  .case-actions{margin-bottom:30px!important;}
  .case-visual{height:360px!important;}
  .project-cinema .cinema-case-copy,.project-cinema .cinema-kicker{display:none!important;}
}


/* V10 SEAMLESS FINAL HERO — overlay y hero real comparten la misma geometría */
:root{
  --case-left:5.55vw;
  --case-kicker-top:12vh;
  --case-title-top:clamp(92px,16vh,170px);
  --case-title-w:min(44vw,820px);
  --case-title-fs:clamp(70px,11.6vw,185px);
  --case-copy-top:clamp(335px,52vh,540px);
  --case-copy-w:min(42vw,620px);
  --case-actions-top:clamp(440px,68vh,680px);
  --case-visual-right:6vw;
  --case-visual-top:18vh;
  --case-visual-w:min(43vw,660px);
  --case-visual-h:62vh;
}
body.cinema-final .header,
body.cinema-final .progress{
  opacity:1!important;
}
body.cinema-final .cursor{opacity:0!important;}
.case-hero{
  min-height:100svh!important;
  background:#f4f1eb!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
}
.case-hero .container{
  width:100%!important;
  max-width:none!important;
  min-height:100svh!important;
  margin:0!important;
  padding:0!important;
}
.case-kicker{left:var(--case-left)!important;top:var(--case-kicker-top)!important;}
.case-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
  clip-path:inset(0)!important;
  transform:none!important;
  opacity:1!important;
  animation:none!important;
}
.case-text{left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;opacity:1!important;transform:none!important;animation:none!important;}
.case-actions{left:var(--case-left)!important;top:var(--case-actions-top)!important;}
.case-visual{
  right:var(--case-visual-right)!important;
  top:var(--case-visual-top)!important;
  width:var(--case-visual-w)!important;
  height:var(--case-visual-h)!important;
  border-radius:0!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.project-cinema.final-lock .cinema-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
  transform:none!important;
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
  filter:none!important;
}
.project-cinema.final-lock .cinema-frame{
  left:calc(100vw - var(--case-visual-right) - var(--case-visual-w))!important;
  top:var(--case-visual-top)!important;
  width:var(--case-visual-w)!important;
  height:var(--case-visual-h)!important;
  border-radius:0!important;
  transform:none!important;
}
.project-cinema.final-lock .cinema-kicker{left:var(--case-left)!important;top:var(--case-kicker-top)!important;opacity:1!important;transform:none!important;}
.project-cinema.final-lock .cinema-case-copy{left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;opacity:1!important;transform:none!important;}
html.project-morph-arrival .case-title,
html.project-morph-arrival .case-text,
html.project-morph-arrival .case-visual,
html.project-morph-arrival .case-kicker,
html.project-morph-arrival .case-actions{transition:none!important;animation:none!important;}
@media(max-width:900px){
  :root{--case-left:7vw;--case-title-top:15vh;--case-title-w:86vw;--case-title-fs:17vw;--case-copy-top:auto;--case-copy-w:86vw;--case-visual-right:7vw;--case-visual-top:46vh;--case-visual-w:86vw;--case-visual-h:38vh;}
}


/* V11 FULL BACKGROUND PROJECT TRANSITION — continuidad real: último frame = hero final */
:root{
  --case-left:clamp(24px,6vw,92px);
  --case-title-top:clamp(112px,18vh,180px);
  --case-title-fs:clamp(76px,12.6vw,206px);
  --case-title-w:min(76vw,1120px);
  --case-copy-top:clamp(360px,58vh,580px);
  --case-copy-w:min(52vw,720px);
  --case-actions-top:clamp(470px,74vh,700px);
  --case-bg:#f4f1eb;
}
/* El header/logo no desaparece en transición */
body.cinema-running .header{opacity:1!important;z-index:10020!important;mix-blend-mode:difference!important;transition:none!important}
body.cinema-running .progress{opacity:0!important}
body.cinema-running .cursor{opacity:0!important}

/* Hover del título: sigue el cursor como capa viva */
.project-hover-title{
  position:fixed!important;left:0;top:0;z-index:780;pointer-events:none;opacity:0;visibility:hidden;
  transform:translate3d(-50%,-50%,0) scale(.88);transition:opacity .25s var(--ease),visibility .25s var(--ease);
  mix-blend-mode:difference;
}
.project-hover-title span{
  display:block;font-family:var(--display);font-size:clamp(82px,14vw,245px)!important;line-height:.7;letter-spacing:-.115em;text-transform:uppercase;white-space:nowrap;
  color:transparent!important;-webkit-text-stroke:1.8px rgba(255,255,255,.82)!important;filter:drop-shadow(0 20px 60px rgba(0,0,0,.35));
}
body.project-hovering .project-hover-title{opacity:1;visibility:visible}
body.project-hovering .featured-project .visual{filter:contrast(1.12) saturate(1.08);transform:scale(1.035)}
body.project-hovering .featured-project .project-meta h3{opacity:.35;transform:translateY(-8px)}
body.project-hovering .project-card:not(.featured-project){filter:grayscale(.7) brightness(.68);transition:filter .42s var(--ease)}

/* Nueva escena de transición */
.project-cinema{background:transparent!important;z-index:9995!important;}
.project-cinema .cinema-shade,.project-cinema .cinema-paper,.project-cinema .cinema-cut,.project-cinema .cinema-redline,.project-cinema .cinema-frame,.project-cinema .cinema-meta{display:none!important}
.transfer-bg{position:fixed;z-index:9996;overflow:hidden;background:#171717;box-shadow:0 40px 120px rgba(0,0,0,.36);will-change:left,top,width,height,transform,border-radius,opacity;}
.transfer-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.05) 46%,rgba(0,0,0,.32));z-index:2;opacity:1;transition:opacity .6s var(--ease)}
.transfer-bg i{position:absolute;inset:0;background:inherit;transform:scale(1.04)}
.transfer-paper{position:fixed;inset:0;background:var(--case-bg);z-index:9997;opacity:0;pointer-events:none;will-change:opacity;}
.cinema-title{z-index:9999!important;max-width:var(--case-title-w);}
.cinema-title:after{display:none!important}
.project-cinema .cinema-kicker,.project-cinema .cinema-case-copy{
  z-index:10000!important;left:var(--case-left)!important;color:#111!important;opacity:0;transform:translateY(22px);transition:opacity .4s var(--ease),transform .4s var(--ease)
}
.project-cinema .cinema-kicker{top:calc(var(--case-title-top) - 58px)!important;color:var(--red)!important}
.project-cinema .cinema-case-copy{top:var(--case-copy-top)!important;width:var(--case-copy-w)!important}
.project-cinema.phase-readable .cinema-kicker,.project-cinema.phase-readable .cinema-case-copy{opacity:1!important;transform:none!important}
.project-cinema.phase-paper .transfer-bg:before{opacity:0}

/* Hero del proyecto: misma composición que el final de transición */
.case-hero{min-height:100svh!important;background:var(--case-bg)!important;color:#111!important;padding:0!important;display:block!important;position:relative!important;overflow:hidden!important;}
.case-hero .container{width:100%!important;max-width:none!important;min-height:100svh!important;margin:0!important;padding:0!important;position:relative!important;z-index:3!important;}
.case-hero:before{content:attr(data-case-title)!important;position:absolute!important;left:-4vw!important;top:7vh!important;font-family:var(--display)!important;font-size:clamp(110px,20vw,330px)!important;line-height:.68!important;letter-spacing:-.11em!important;color:transparent!important;-webkit-text-stroke:1.5px rgba(17,17,17,.06)!important;white-space:nowrap!important;z-index:1!important;pointer-events:none!important;}
.case-bg{position:absolute;inset:0;background:linear-gradient(135deg,#111,#4a4a4a 48%,#151515);z-index:0;opacity:0;pointer-events:none;}
.case-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,.08) 46%,rgba(0,0,0,.34));}
html.project-morph-arrival .case-bg{opacity:1;animation:caseBgToPaper .78s .12s cubic-bezier(.76,0,.24,1) forwards;}
@keyframes caseBgToPaper{0%{opacity:1;filter:contrast(1.05)}100%{opacity:0;filter:contrast(1)}}
.case-kicker,.case-title,.case-text,.case-actions{position:absolute!important;left:var(--case-left)!important;z-index:5!important;}
.case-kicker{top:calc(var(--case-title-top) - 58px)!important;margin:0!important;}
.case-title{top:var(--case-title-top)!important;width:var(--case-title-w)!important;max-width:var(--case-title-w)!important;margin:0!important;font-size:var(--case-title-fs)!important;line-height:.72!important;letter-spacing:-.1em!important;color:#111!important;clip-path:inset(0)!important;transform:none!important;opacity:1!important;animation:none!important;}
.case-text{top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;font-size:clamp(18px,1.85vw,28px)!important;line-height:1.12!important;font-weight:850!important;color:#292724!important;opacity:1!important;transform:none!important;animation:none!important;}
.case-actions{top:var(--case-actions-top)!important;}
.case-visual{display:none!important;}
html.project-morph-arrival .case-title,html.project-morph-arrival .case-text,html.project-morph-arrival .case-kicker,html.project-morph-arrival .case-actions{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;}
html.project-morph-arrival .loader,html.project-morph-arrival .route-enter{display:none!important;}

@media(max-width:900px){
  :root{--case-left:7vw;--case-title-top:18vh;--case-title-fs:18vw;--case-title-w:86vw;--case-copy-top:48vh;--case-copy-w:84vw;--case-actions-top:72vh;}
  .project-hover-title span{font-size:22vw!important;white-space:normal;width:88vw;text-align:center;}
  .project-cinema .cinema-kicker,.project-cinema .cinema-case-copy{display:none!important;}
  .case-hero{min-height:100svh!important;padding:0!important;}
  .case-text{font-size:19px!important;}
}


/* V12 SWEEP PROJECT CONTINUITY — reemplaza oscurecimiento final por barrido y alinea estado final */
:root{
  --case-left:clamp(24px,6vw,92px);
  --case-title-top:clamp(112px,18vh,180px);
  --case-title-fs:clamp(76px,12.6vw,206px);
  --case-title-w:min(76vw,1120px);
  --case-copy-top:clamp(360px,58vh,580px);
  --case-copy-w:min(52vw,720px);
  --case-actions-top:clamp(470px,74vh,700px);
  --case-bg:#f4f1eb;
}
/* Logo siempre visible durante navegación de proyecto */
body.cinema-running .header{opacity:1!important;z-index:10030!important;mix-blend-mode:difference!important;transition:none!important;}
body.cinema-running .progress,body.cinema-running .cursor{opacity:0!important;}

/* La imagen cubre todo el hero antes del barrido */
.transfer-bg{position:fixed!important;z-index:9996!important;overflow:hidden!important;background:#171717!important;box-shadow:none!important;will-change:left,top,width,height,transform,border-radius,opacity!important;}
.transfer-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 45%,rgba(0,0,0,.26));z-index:2;opacity:1;transition:opacity .42s var(--ease)!important;}
.transfer-bg i{position:absolute;inset:0;background:inherit;transform:scale(1.045);}

/* Barrido final: NO fade/oscurecimiento. Es una lámina color hero que barre la imagen. */
.transfer-paper{
  position:fixed!important;
  inset:-1px -12vw -1px -12vw!important;
  background:var(--case-bg)!important;
  z-index:9997!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:translate3d(-112%,0,0) skewX(-7deg)!important;
  transform-origin:left center!important;
  will-change:transform!important;
  box-shadow:34px 0 0 var(--red),78px 0 70px rgba(225,37,47,.22)!important;
}
.transfer-paper:after{
  content:"";position:absolute;right:-5px;top:0;bottom:0;width:5px;background:var(--red);box-shadow:0 0 40px rgba(225,37,47,.5);
}
.project-cinema.phase-paper .transfer-paper{transform:translate3d(0,0,0) skewX(0deg)!important;transition:transform .72s cubic-bezier(.76,0,.24,1)!important;}
.project-cinema.phase-paper .transfer-bg:before{opacity:0!important;}

/* El último frame del overlay usa exactamente la geometría del hero real */
.project-cinema.final-lock .cinema-title,
.cinema-title.final-lock-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
  transform:none!important;
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
  filter:none!important;
}
.project-cinema.final-lock .cinema-kicker,
.project-cinema.phase-readable .cinema-kicker{
  left:var(--case-left)!important;top:calc(var(--case-title-top) - 58px)!important;color:var(--red)!important;opacity:1!important;transform:none!important;
}
.project-cinema.final-lock .cinema-case-copy,
.project-cinema.phase-readable .cinema-case-copy{
  left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;color:#292724!important;opacity:1!important;transform:none!important;
}

/* El hero real inicia ya en el mismo estado que el barrido final; sin fondo oscuro de llegada */
html.project-morph-arrival .case-bg{opacity:0!important;animation:none!important;display:none!important;}
html.project-morph-arrival .case-hero{background:var(--case-bg)!important;}
html.project-morph-arrival .case-title,
html.project-morph-arrival .case-text,
html.project-morph-arrival .case-kicker,
html.project-morph-arrival .case-actions{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;}
html.project-morph-arrival .loader,html.project-morph-arrival .route-enter{display:none!important;}

/* Mismo layout del hero en reposo */
.case-hero{min-height:100svh!important;background:var(--case-bg)!important;color:#111!important;padding:0!important;display:block!important;position:relative!important;overflow:hidden!important;}
.case-hero .container{width:100%!important;max-width:none!important;min-height:100svh!important;margin:0!important;padding:0!important;position:relative!important;z-index:3!important;}
.case-kicker,.case-title,.case-text,.case-actions{position:absolute!important;left:var(--case-left)!important;z-index:5!important;}
.case-kicker{top:calc(var(--case-title-top) - 58px)!important;margin:0!important;}
.case-title{top:var(--case-title-top)!important;width:var(--case-title-w)!important;max-width:var(--case-title-w)!important;margin:0!important;font-size:var(--case-title-fs)!important;line-height:.72!important;letter-spacing:-.1em!important;color:#111!important;clip-path:inset(0)!important;transform:none!important;opacity:1!important;animation:none!important;}
.case-text{top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;font-size:clamp(18px,1.85vw,28px)!important;line-height:1.12!important;font-weight:850!important;color:#292724!important;opacity:1!important;transform:none!important;animation:none!important;}
.case-actions{top:var(--case-actions-top)!important;}
.case-visual{display:none!important;}

@media(max-width:900px){
  :root{--case-left:7vw;--case-title-top:18vh;--case-title-fs:18vw;--case-title-w:86vw;--case-copy-top:48vh;--case-copy-w:84vw;--case-actions-top:72vh;}
  .transfer-paper{inset:-1px -20vw!important;transform:translate3d(-125%,0,0) skewX(-8deg)!important;}
  .project-cinema .cinema-kicker,.project-cinema .cinema-case-copy{display:none!important;}
  .case-text{font-size:19px!important;}
}


/* V13 SWEEP LAYER REVEAL — capa de color de izquierda a derecha que luego desaparece */
body.project-arrival-sweep .header{opacity:1!important;z-index:10030!important;mix-blend-mode:difference!important}
.arrival-sweep-layer{
  position:fixed;
  inset:-2px -14vw -2px -14vw;
  background:var(--case-bg);
  z-index:10015;
  pointer-events:none;
  transform:translate3d(0,0,0) skewX(0deg);
  will-change:transform;
  box-shadow:34px 0 0 var(--red),78px 0 70px rgba(225,37,47,.22);
}
.arrival-sweep-layer::after{
  content:"";
  position:absolute;
  right:-5px;
  top:0;
  bottom:0;
  width:5px;
  background:var(--red);
  box-shadow:0 0 40px rgba(225,37,47,.45);
}
.arrival-sweep-layer.play{
  animation:arrivalSweepOut .82s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes arrivalSweepOut{
  from{transform:translate3d(0,0,0) skewX(0deg)}
  to{transform:translate3d(112%,0,0) skewX(7deg)}
}
/* la capa saliente entra de izquierda a derecha y no oscurece */
.transfer-paper{
  inset:-2px -14vw -2px -14vw!important;
  box-shadow:34px 0 0 var(--red),78px 0 70px rgba(225,37,47,.22)!important;
}
.project-cinema.phase-paper .transfer-paper{
  transform:translate3d(0,0,0) skewX(0deg)!important;
  transition:transform .66s cubic-bezier(.76,0,.24,1)!important;
}
html.project-morph-arrival .case-hero,
html.project-morph-arrival .case-hero .container,
html.project-morph-arrival .case-title,
html.project-morph-arrival .case-text,
html.project-morph-arrival .case-kicker,
html.project-morph-arrival .case-actions{
  transition:none!important;
  animation:none!important;
}
html.project-morph-arrival .case-hero{background:var(--case-bg)!important}
html.project-morph-arrival .case-bg{display:none!important}
@media(max-width:900px){
  .arrival-sweep-layer,.transfer-paper{inset:-2px -22vw -2px -22vw!important}
}


/* V14 PERFECT PROJECT TRANSITION — corrige doble logo, preloader y barrido final */
html.route-skip-loader .loader,
html.project-morph-arrival .loader,
html.project-arrival-sweep .loader{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.route-skip-loader .route-enter,
html.project-morph-arrival .route-enter,
html.project-arrival-sweep .route-enter{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
html.route-skip-loader body.is-loading,
html.project-morph-arrival body.is-loading,
html.project-arrival-sweep body.is-loading{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
/* Solo queda el logo real del header. No se duplica una marca dentro del overlay. */
.transfer-brand{display:none!important;visibility:hidden!important;opacity:0!important;}
body.cinema-running .header,
html.project-arrival-sweep .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10030!important;
  mix-blend-mode:difference!important;
  transition:none!important;
}
/* Barrido de salida: la capa entra de izquierda a derecha más lenta, como una lámina de color. */
.transfer-paper{
  transform:translate3d(-118%,0,0) skewX(-7deg)!important;
  transition:none!important;
  opacity:1!important;
  z-index:9998!important;
}
.project-cinema.phase-paper .transfer-paper{
  transform:translate3d(0,0,0) skewX(0deg)!important;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1)!important;
}
.project-cinema.final-lock .transfer-paper{
  transform:translate3d(0,0,0) skewX(0deg)!important;
}
.project-cinema.final-lock .cinema-title,
.cinema-title.final-lock-title{
  opacity:1!important;
  transform:none!important;
}
/* Capa de llegada: ya existe desde el primer paint de la página del proyecto, así no aparece el preloader ni flash oscuro. */
.arrival-sweep-layer{
  display:none;
  position:fixed;
  inset:-2px -16vw -2px -16vw;
  background:var(--case-bg,#f4f1eb);
  z-index:10015;
  pointer-events:none;
  transform:translate3d(0,0,0) skewX(0deg);
  will-change:transform;
  box-shadow:34px 0 0 var(--red),78px 0 70px rgba(225,37,47,.22);
}
.arrival-sweep-layer::after{
  content:"";
  position:absolute;
  right:-5px;
  top:0;
  bottom:0;
  width:5px;
  background:var(--red);
  box-shadow:0 0 44px rgba(225,37,47,.45);
}
html.project-arrival-sweep .arrival-sweep-layer{
  display:block;
}
html.arrival-sweep-play .arrival-sweep-layer{
  animation:arrivalSweepOutV14 1.08s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes arrivalSweepOutV14{
  0%{transform:translate3d(0,0,0) skewX(0deg)}
  100%{transform:translate3d(116%,0,0) skewX(7deg)}
}
/* El hero real queda cargado bajo la capa, exactamente en la posición final. */
html.project-morph-arrival .case-hero,
html.project-arrival-sweep .case-hero{
  background:var(--case-bg,#f4f1eb)!important;
}
html.project-morph-arrival .case-bg,
html.project-arrival-sweep .case-bg{
  display:none!important;
  opacity:0!important;
  animation:none!important;
}
html.project-morph-arrival .case-kicker,
html.project-morph-arrival .case-title,
html.project-morph-arrival .case-text,
html.project-morph-arrival .case-actions,
html.project-arrival-sweep .case-kicker,
html.project-arrival-sweep .case-title,
html.project-arrival-sweep .case-text,
html.project-arrival-sweep .case-actions{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
@media(max-width:900px){
  .arrival-sweep-layer,.transfer-paper{inset:-2px -24vw -2px -24vw!important;}
  .project-cinema.phase-paper .transfer-paper{transition-duration:1s!important;}
  html.arrival-sweep-play .arrival-sweep-layer{animation-duration:1s!important;}
}


/* V15 SEAMLESS SWEEP NO RELOAD
   Corrige: doble logo, preloader en navegación interna, barrido demasiado rápido
   y salto visual entre último frame de transición y hero real. */
:root{
  --case-left:clamp(72px,4.8vw,98px);
  --case-title-top:clamp(168px,26.2vh,255px);
  --case-title-fs:clamp(88px,12.45vw,198px);
  --case-title-w:min(64vw,1060px);
  --case-copy-top:clamp(560px,68vh,640px);
  --case-copy-w:min(48vw,720px);
  --case-actions-top:clamp(680px,81vh,760px);
  --case-bg:#f4f1eb;
}

/* Sin preloader ni capa negra al llegar desde un proyecto */
html.project-morph-arrival .loader,
html.project-morph-arrival .route-enter,
html.project-arrival-hold .loader,
html.project-arrival-hold .route-enter,
html.route-skip-loader .loader{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.project-arrival-hold body,
html.project-morph-arrival body{background:var(--case-bg)!important;}

/* La página del proyecto ya está lista debajo de la lámina */
html.project-morph-arrival .case-hero,
html.project-arrival-hold .case-hero{
  background:var(--case-bg)!important;
  min-height:100svh!important;
  padding:0!important;
  overflow:hidden!important;
}
html.project-morph-arrival .case-kicker,
html.project-morph-arrival .case-title,
html.project-morph-arrival .case-text,
html.project-morph-arrival .case-actions,
html.project-arrival-hold .case-kicker,
html.project-arrival-hold .case-title,
html.project-arrival-hold .case-text,
html.project-arrival-hold .case-actions{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}

/* Misma geometría exacta para transición y hero real */
.case-kicker,
.project-cinema.final-lock .cinema-kicker,
.project-cinema.phase-readable .cinema-kicker{
  left:var(--case-left)!important;
  top:calc(var(--case-title-top) - 58px)!important;
}
.case-title,
.project-cinema.final-lock .cinema-title,
.cinema-title.final-lock-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
  transform:none!important;
  filter:none!important;
}
.case-text,
.project-cinema.final-lock .cinema-case-copy,
.project-cinema.phase-readable .cinema-case-copy{
  left:var(--case-left)!important;
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
  color:#292724!important;
  opacity:1!important;
  transform:none!important;
}
.case-actions{left:var(--case-left)!important;top:var(--case-actions-top)!important;}

/* La silueta de fondo ya no aparece diferente tras cargar */
.case-hero:before{
  left:-2.7vw!important;
  top:clamp(95px,16vh,150px)!important;
  font-size:clamp(120px,17vw,290px)!important;
  opacity:.7!important;
  -webkit-text-stroke:1.25px rgba(17,17,17,.055)!important;
}

/* Solo un logo: el real del header. No se clona logo en overlay. */
.transfer-brand{display:none!important;}
body.cinema-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10040!important;
  mix-blend-mode:difference!important;
}
body.cinema-running .progress,
body.cinema-running .cursor{opacity:0!important;}

/* Barrido de salida: una lámina entra de izquierda a derecha y cubre la navegación */
.transfer-paper{
  position:fixed!important;
  inset:-2px -18vw -2px -18vw!important;
  background:var(--case-bg)!important;
  z-index:10020!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:translate3d(-118%,0,0) skewX(-7deg)!important;
  transform-origin:left center!important;
  box-shadow:42px 0 0 var(--red),92px 0 80px rgba(225,37,47,.20)!important;
  will-change:transform!important;
}
.transfer-paper::after{
  content:"";
  position:absolute;
  right:-6px;
  top:0;
  bottom:0;
  width:6px;
  background:var(--red);
  box-shadow:0 0 48px rgba(225,37,47,.46);
}
.project-cinema.phase-paper .transfer-paper{
  transform:translate3d(0,0,0) skewX(0deg)!important;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1)!important;
}

/* Llegada: la misma lámina ya cubre el proyecto y sale a la derecha.
   Así no se ve la recarga. */
.arrival-sweep-layer{
  position:fixed!important;
  inset:-2px -18vw -2px -18vw!important;
  background:var(--case-bg)!important;
  z-index:10050!important;
  pointer-events:none!important;
  transform:translate3d(0,0,0) skewX(0deg)!important;
  will-change:transform!important;
  box-shadow:42px 0 0 var(--red),92px 0 80px rgba(225,37,47,.20)!important;
}
.arrival-sweep-layer::after{
  content:"";
  position:absolute;
  right:-6px;
  top:0;
  bottom:0;
  width:6px;
  background:var(--red);
  box-shadow:0 0 48px rgba(225,37,47,.46);
}
.arrival-sweep-layer.play{
  animation:arrivalSweepOutV15 1.08s cubic-bezier(.76,0,.24,1) forwards!important;
}
@keyframes arrivalSweepOutV15{
  0%{transform:translate3d(0,0,0) skewX(0deg)}
  100%{transform:translate3d(118%,0,0) skewX(7deg)}
}

html.project-morph-arrival .case-bg,
html.project-arrival-hold .case-bg{
  display:none!important;
  opacity:0!important;
  animation:none!important;
}
.project-cinema.phase-paper .transfer-bg:before{opacity:0!important;}

@media(max-width:900px){
  :root{
    --case-left:7vw;
    --case-title-top:22vh;
    --case-title-fs:18vw;
    --case-title-w:86vw;
    --case-copy-top:50vh;
    --case-copy-w:84vw;
    --case-actions-top:73vh;
  }
  .transfer-paper,
  .arrival-sweep-layer{inset:-2px -26vw -2px -26vw!important;}
}


/* V16 AJAX SEAMLESS PROJECT
   Carga el proyecto bajo la lámina sin recargar la página: no hay preloader,
   no hay pantalla vacía y el barrido continúa como una sola escena. */
.project-cinema.content-ready .transfer-bg,
.project-cinema.content-ready .cinema-title,
.project-cinema.content-ready .cinema-kicker,
.project-cinema.content-ready .cinema-case-copy{
  opacity:0!important;
  transition:opacity .001s linear!important;
}
.project-cinema.ajax-sweep-out .transfer-paper{
  transform:translate3d(118%,0,0) skewX(7deg)!important;
  transition:transform 1.08s cubic-bezier(.76,0,.24,1)!important;
}
html.ajax-project-ready .case-hero,
html.ajax-project-ready .case-hero .container,
html.ajax-project-ready .case-title,
html.ajax-project-ready .case-text,
html.ajax-project-ready .case-kicker,
html.ajax-project-ready .case-actions{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  transform:none!important;
}
html.ajax-project-ready .case-bg{display:none!important;opacity:0!important;}
html.ajax-project-ready .loader,
html.ajax-project-ready .route-enter{display:none!important;opacity:0!important;visibility:hidden!important;}
html.ajax-project-ready body{background:var(--case-bg)!important;}
/* Durante AJAX mantenemos un solo logo real y ocultamos todo rastro de duplicado. */
.project-cinema .transfer-brand{display:none!important;}
body.cinema-running .header{opacity:1!important;visibility:visible!important;z-index:10060!important;mix-blend-mode:difference!important;}
/* La lámina debe tener suficiente tiempo para cubrir y luego salir, no parecer flash. */
.project-cinema.phase-paper .transfer-paper{transition-duration:1.18s!important;}
.project-cinema.ajax-sweep-out .transfer-paper{transition-duration:1.12s!important;}


/* V17 VIRTUAL SEAMLESS PROJECT
   El error anterior era técnico: aunque el overlay era correcto, el proyecto se cargaba después.
   Esta versión inyecta el hero debajo de la capa y actualiza la URL con history.pushState. */
:root{
  --case-left:clamp(78px,4.85vw,100px);
  --case-title-top:clamp(170px,26vh,248px);
  --case-title-fs:clamp(88px,12.35vw,198px);
  --case-title-w:min(64vw,1060px);
  --case-copy-top:clamp(560px,68vh,640px);
  --case-copy-w:min(48vw,720px);
  --case-actions-top:clamp(680px,81vh,760px);
  --case-bg:#f4f1eb;
}
html.project-virtual-ready .loader,
html.project-virtual-ready .route-enter,
html.ajax-project-ready .loader,
html.ajax-project-ready .route-enter{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html.project-virtual-ready body,html.ajax-project-ready body{background:var(--case-bg)!important;}

/* Misma geometría entre título final del overlay y hero real */
.case-kicker,.project-cinema.final-lock .cinema-kicker,.project-cinema.phase-readable .cinema-kicker{left:var(--case-left)!important;top:calc(var(--case-title-top) - 58px)!important;}
.case-title,.project-cinema.final-lock .cinema-title,.cinema-title.final-lock-title{left:var(--case-left)!important;top:var(--case-title-top)!important;width:var(--case-title-w)!important;max-width:var(--case-title-w)!important;font-size:var(--case-title-fs)!important;line-height:.72!important;letter-spacing:-.1em!important;color:#111!important;-webkit-text-stroke:0 transparent!important;transform:none!important;filter:none!important;}
.case-text,.project-cinema.final-lock .cinema-case-copy,.project-cinema.phase-readable .cinema-case-copy{left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;color:#292724!important;opacity:1!important;transform:none!important;}
.case-actions{left:var(--case-left)!important;top:var(--case-actions-top)!important;}
.case-hero{background:var(--case-bg)!important;min-height:100svh!important;padding:0!important;overflow:hidden!important;}
.case-hero .container{max-width:none!important;width:100%!important;min-height:100svh!important;margin:0!important;padding:0!important;}
.case-kicker,.case-title,.case-text,.case-actions{position:absolute!important;z-index:5!important;opacity:1!important;animation:none!important;transition:none!important;transform:none!important;}
.case-bg{display:none!important;opacity:0!important;}
.case-hero:before{left:-2.7vw!important;top:clamp(95px,16vh,150px)!important;font-size:clamp(120px,17vw,290px)!important;opacity:.7!important;-webkit-text-stroke:1.25px rgba(17,17,17,.055)!important;}

/* Un solo logo: el real. El overlay no clona marca. */
.transfer-brand{display:none!important;}
body.cinema-running .header{opacity:1!important;visibility:visible!important;z-index:10060!important;mix-blend-mode:difference!important;}
body.cinema-running .progress,body.cinema-running .cursor{opacity:0!important;}

/* Barrido más lento y continuo: cubre toda la pantalla antes de cambiar el contenido */
.transfer-paper{position:fixed!important;inset:-2px -18vw -2px -18vw!important;background:var(--case-bg)!important;z-index:10020!important;opacity:1!important;pointer-events:none!important;transform:translate3d(-118%,0,0) skewX(-7deg)!important;transform-origin:left center!important;box-shadow:42px 0 0 var(--red),92px 0 80px rgba(225,37,47,.20)!important;will-change:transform!important;}
.transfer-paper:after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:6px;background:var(--red);box-shadow:0 0 48px rgba(225,37,47,.46);}
.project-cinema.phase-paper .transfer-paper{transform:translate3d(0,0,0) skewX(0deg)!important;transition:transform 1.16s cubic-bezier(.76,0,.24,1)!important;}
.project-cinema.content-ready .transfer-bg,.project-cinema.content-ready .cinema-title,.project-cinema.content-ready .cinema-kicker,.project-cinema.content-ready .cinema-case-copy{opacity:0!important;transition:opacity .001s linear!important;}
.project-cinema.ajax-sweep-out .transfer-paper{transform:translate3d(118%,0,0) skewX(7deg)!important;transition:transform 1.24s cubic-bezier(.76,0,.24,1)!important;}
html.project-virtual-ready .case-title,html.project-virtual-ready .case-text,html.project-virtual-ready .case-kicker,html.project-virtual-ready .case-actions{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;}
@media(max-width:900px){:root{--case-left:7vw;--case-title-top:22vh;--case-title-fs:18vw;--case-title-w:86vw;--case-copy-top:50vh;--case-copy-w:84vw;--case-actions-top:73vh}.transfer-paper{inset:-2px -26vw!important;}}


/* V18 TRUE CONTINUITY FIX
   Error detectado: el overlay escondía título/copy cuando la lámina crema cubría la pantalla.
   Resultado: pantalla crema vacía = sensación de recarga.
   Corrección: mantener el título/copy clonados sobre la lámina hasta que el proyecto real esté debajo. */

/* Nunca ocultar título ni textos durante el hold del barrido */
.project-cinema.hold-overlay-copy.content-ready .cinema-title,
.project-cinema.hold-overlay-copy.content-ready .cinema-kicker,
.project-cinema.hold-overlay-copy.content-ready .cinema-case-copy{
  opacity:1!important;
  visibility:visible!important;
  transition:none!important;
}

/* Solo desaparece el fondo-imagen transferido; el texto queda para evitar vacío visual */
.project-cinema.hold-overlay-copy.content-ready .transfer-bg{
  opacity:0!important;
  transition:opacity .18s linear!important;
}

/* El título overlay se mantiene exactamente encima del título real */
.project-cinema.hold-overlay-copy .cinema-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
  transform:none!important;
  filter:none!important;
  z-index:10055!important;
}
.project-cinema.hold-overlay-copy .cinema-kicker{
  left:var(--case-left)!important;
  top:calc(var(--case-title-top) - 58px)!important;
  color:var(--red)!important;
  opacity:1!important;
  transform:none!important;
  z-index:10056!important;
}
.project-cinema.hold-overlay-copy .cinema-case-copy{
  left:var(--case-left)!important;
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
  color:#292724!important;
  opacity:1!important;
  transform:none!important;
  z-index:10056!important;
}

/* El barrido sale más lento y con presencia, no como flash/recarga */
.project-cinema.ajax-sweep-out .transfer-paper{
  transform:translate3d(118%,0,0) skewX(7deg)!important;
  transition:transform 1.38s cubic-bezier(.76,0,.24,1)!important;
}

/* Mientras sale la lámina, el contenido del proyecto ya está abajo con el mismo layout */
html.project-virtual-ready .case-hero{
  background:var(--case-bg)!important;
  min-height:100svh!important;
}
html.project-virtual-ready .case-title,
html.project-virtual-ready .case-text,
html.project-virtual-ready .case-kicker,
html.project-virtual-ready .case-actions{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}

/* Cuando se quita el overlay, no debe haber diferencia visible con lo que queda debajo */
html.project-virtual-ready .case-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.72!important;
  letter-spacing:-.1em!important;
}
html.project-virtual-ready .case-kicker{
  left:var(--case-left)!important;
  top:calc(var(--case-title-top) - 58px)!important;
}
html.project-virtual-ready .case-text{
  left:var(--case-left)!important;
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
}

/* Desactivar por completo cualquier rastro de preloader/capa negra en la ruta virtual */
html.project-virtual-ready .loader,
html.project-virtual-ready .route-enter,
html.ajax-project-ready .loader,
html.ajax-project-ready .route-enter{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Un solo logo: el header real */
.transfer-brand{display:none!important;}
body.cinema-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10080!important;
  mix-blend-mode:difference!important;
}
body.cinema-running .header .brand{opacity:1!important}

/* No dejar que el body bloquee o salte después de inyectar el proyecto */
html.project-virtual-ready,
html.ajax-project-ready{
  background:var(--case-bg)!important;
  scroll-behavior:auto!important;
}


/* V19 PROJECT IMAGE DEMO — imagen real para probar mejor la transición */
.visual.v3,
.featured-project .visual.v3{
  background-image:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.04) 46%,rgba(0,0,0,.34)),url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.visual.v3:before{border-color:rgba(255,255,255,.38)!important;mix-blend-mode:screen;}
.visual.v3:after{content:'MOTION';color:#fff!important;text-shadow:0 18px 45px rgba(0,0,0,.42);}
.transfer-bg.has-project-image{
  background-image:linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.05) 46%,rgba(0,0,0,.26)),url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.transfer-bg.has-project-image i{display:none!important;}
.case-demo-image{
  min-height:min(64vh,620px);
  border-radius:32px;
  background-image:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.02)),url('assets/img/imagina-motion-demo.jpg');
  background-size:cover;
  background-position:center;
  box-shadow:0 38px 110px rgba(0,0,0,.18);
  margin:40px 0 0;
  position:relative;
  overflow:hidden;
}
.case-demo-image:after{
  content:'Imagen demo del proyecto';
  position:absolute;
  left:28px;
  bottom:24px;
  color:#fff;
  font-family:var(--display);
  font-size:clamp(42px,7vw,104px);
  line-height:.72;
  letter-spacing:-.08em;
  text-transform:uppercase;
  max-width:720px;
}
.project-cinema.phase-paper .transfer-bg.has-project-image:before{opacity:0!important;}


/* V20 FATFISH-FLOW PROJECT TRANSITION
   Corrección principal respecto al reporte:
   - No existe pantalla crema vacía.
   - La transición crea el hero final dentro del mismo overlay.
   - Imagen full-screen -> fondo claro -> imagen del caso a la derecha.
   - El título/copy overlay quedan exactamente encima del hero real hasta retirar la escena. */
:root{
  --case-bg:#f4f1eb;
  --case-left:clamp(54px,5.1vw,96px);
  --case-title-top:clamp(154px,21.8vh,220px);
  --case-title-fs:clamp(82px,10.9vw,178px);
  --case-title-w:min(52vw,900px);
  --case-copy-top:clamp(510px,63vh,620px);
  --case-copy-w:min(43vw,650px);
  --case-actions-top:clamp(650px,78vh,740px);
  --case-asset-left:min(57vw,1040px);
  --case-asset-top:clamp(156px,19vh,220px);
  --case-asset-w:clamp(300px,28vw,520px);
  --case-asset-h:clamp(220px,31vh,360px);
}

/* Header real únicamente; sin logo duplicado */
.transfer-brand{display:none!important;}
body.cinema-running .header{opacity:1!important;visibility:visible!important;z-index:10090!important;mix-blend-mode:difference!important;}
body.cinema-running .progress,body.cinema-running .cursor{opacity:0!important;}
html.ajax-project-ready .loader,html.ajax-project-ready .route-enter,html.project-virtual-ready .loader,html.project-virtual-ready .route-enter{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}

/* Escena de transición */
.project-cinema.fatfish-flow-scene{background:transparent!important;z-index:9995!important;isolation:isolate;}
.project-cinema.fatfish-flow-scene .transfer-bg{position:fixed!important;z-index:9996!important;overflow:hidden!important;background:#111!important;box-shadow:none!important;will-change:left,top,width,height,transform,opacity,filter!important;}
.project-cinema.fatfish-flow-scene .transfer-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.08) 46%,rgba(0,0,0,.32));z-index:2;opacity:1!important;}
.project-cinema.fatfish-flow-scene .transfer-bg i{display:none!important;}
.project-cinema.fatfish-flow-scene .transfer-paper{position:fixed!important;inset:-2px -18vw!important;background:var(--case-bg)!important;z-index:10010!important;opacity:1!important;pointer-events:none!important;transform:translate3d(-118%,0,0) skewX(-7deg);box-shadow:42px 0 0 var(--red),95px 0 80px rgba(225,37,47,.16)!important;will-change:transform!important;}
.project-cinema.fatfish-flow-scene .transfer-paper:after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:6px;background:var(--red);box-shadow:0 0 46px rgba(225,37,47,.45);}
.project-cinema.fatfish-flow-scene .transfer-asset{position:fixed!important;z-index:10036!important;border-radius:0!important;overflow:hidden!important;background-color:#141414!important;box-shadow:0 28px 90px rgba(0,0,0,.16)!important;opacity:0;will-change:opacity,transform;}
.project-cinema.fatfish-flow-scene .transfer-asset:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 38%,rgba(225,37,47,.18));mix-blend-mode:screen;}
.project-cinema.fatfish-flow-scene .transfer-asset:after{content:"MOTION";position:absolute;left:24px;bottom:18px;font-family:var(--display);font-size:clamp(42px,5.8vw,96px);line-height:.72;letter-spacing:-.08em;color:#fff;text-transform:uppercase;text-shadow:0 20px 54px rgba(0,0,0,.42);}

/* Texto de transición y hero real deben coincidir */
.project-cinema.fatfish-flow-scene .cinema-title,
.case-title{left:var(--case-left)!important;top:var(--case-title-top)!important;width:var(--case-title-w)!important;max-width:var(--case-title-w)!important;font-size:var(--case-title-fs)!important;line-height:.72!important;letter-spacing:-.1em!important;}
.project-cinema.fatfish-flow-scene .cinema-title{z-index:10055!important;color:#111!important;-webkit-text-stroke:0 transparent!important;filter:none!important;}
.project-cinema.fatfish-flow-scene .cinema-title:after{display:none!important;}
.project-cinema.fatfish-flow-scene .cinema-kicker,
.project-cinema.fatfish-flow-scene .cinema-case-copy{position:fixed!important;z-index:10056!important;opacity:0;transform:translateY(22px);transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);}
.project-cinema.fatfish-flow-scene.phase-readable .cinema-kicker,
.project-cinema.fatfish-flow-scene.phase-readable .cinema-case-copy{opacity:1!important;transform:none!important;}
.project-cinema.fatfish-flow-scene .cinema-kicker{left:var(--case-left)!important;top:calc(var(--case-title-top) - 58px)!important;color:var(--red)!important;}
.project-cinema.fatfish-flow-scene .cinema-case-copy{left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;color:#292724!important;}
.project-cinema.fatfish-flow-scene.hold-overlay-copy.content-ready .cinema-title,
.project-cinema.fatfish-flow-scene.hold-overlay-copy.content-ready .cinema-kicker,
.project-cinema.fatfish-flow-scene.hold-overlay-copy.content-ready .cinema-case-copy,
.project-cinema.fatfish-flow-scene.hold-overlay-copy.content-ready .transfer-asset{opacity:1!important;visibility:visible!important;transition:none!important;}
.project-cinema.fatfish-flow-scene.hold-overlay-copy.content-ready .transfer-bg{opacity:0!important;transition:opacity .12s linear!important;}
.project-cinema.fatfish-flow-scene.ajax-sweep-out .transfer-paper{transform:translate3d(118%,0,0) skewX(7deg)!important;transition:transform 1.32s cubic-bezier(.76,0,.24,1)!important;}

/* Hero real de proyecto: mismo layout que el frame final de la transición */
.case-hero.fatfish-flow-hero,
.case-hero{min-height:100svh!important;background:var(--case-bg)!important;color:#111!important;padding:0!important;display:block!important;position:relative!important;overflow:hidden!important;}
.case-hero .container{width:100%!important;max-width:none!important;min-height:100svh!important;margin:0!important;padding:0!important;position:relative!important;z-index:3!important;}
.case-hero:before{content:attr(data-case-title)!important;position:absolute!important;left:-2.8vw!important;top:clamp(96px,16vh,154px)!important;font-family:var(--display)!important;font-size:clamp(120px,17vw,290px)!important;line-height:.68!important;letter-spacing:-.11em!important;color:transparent!important;-webkit-text-stroke:1.25px rgba(17,17,17,.055)!important;white-space:nowrap!important;z-index:1!important;pointer-events:none!important;}
.case-kicker,.case-title,.case-text,.case-actions{position:absolute!important;left:var(--case-left)!important;z-index:5!important;opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}
.case-kicker{top:calc(var(--case-title-top) - 58px)!important;margin:0!important;color:var(--red)!important;}
.case-title{top:var(--case-title-top)!important;color:#111!important;clip-path:inset(0)!important;}
.case-text{top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;font-size:clamp(18px,1.75vw,27px)!important;line-height:1.12!important;font-weight:850!important;color:#292724!important;}
.case-actions{top:var(--case-actions-top)!important;}
.case-asset{position:absolute!important;left:var(--case-asset-left)!important;top:var(--case-asset-top)!important;width:var(--case-asset-w)!important;height:var(--case-asset-h)!important;z-index:4!important;background-image:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/img/imagina-motion-demo.jpg')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:0 28px 90px rgba(0,0,0,.16)!important;overflow:hidden!important;}
.case-asset:after{content:"MOTION";position:absolute;left:24px;bottom:18px;font-family:var(--display);font-size:clamp(42px,5.8vw,96px);line-height:.72;letter-spacing:-.08em;color:#fff;text-transform:uppercase;text-shadow:0 20px 54px rgba(0,0,0,.42);}
.case-bg,.case-visual{display:none!important;}
html.project-virtual-ready .case-title,html.project-virtual-ready .case-text,html.project-virtual-ready .case-kicker,html.project-virtual-ready .case-actions{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}

@media(max-width:900px){
  :root{--case-left:7vw;--case-title-top:20vh;--case-title-fs:18vw;--case-title-w:86vw;--case-copy-top:52vh;--case-copy-w:84vw;--case-actions-top:76vh;--case-asset-left:7vw;--case-asset-top:62vh;--case-asset-w:86vw;--case-asset-h:30vh;}
  .project-cinema.fatfish-flow-scene .cinema-case-copy{display:none!important;}
  .project-cinema.fatfish-flow-scene .transfer-paper{inset:-2px -26vw!important;}
}


/* V21 FATFISH MATCH — replaces blank/reload-like sweep with true project-to-hero morph */
:root{
  --case-bg:#f4f1eb;
  --case-left:clamp(42px,5.35vw,104px);
  --case-title-top:clamp(164px,23.5vh,245px);
  --case-title-fs:clamp(58px,7.15vw,138px);
  --case-title-w:min(47vw,820px);
  --case-copy-top:clamp(430px,58vh,570px);
  --case-copy-w:min(42vw,620px);
  --case-actions-top:clamp(610px,76vh,720px);
  --case-asset-left:min(58vw,1060px);
  --case-asset-top:clamp(136px,17vh,210px);
  --case-asset-w:clamp(300px,29vw,540px);
  --case-asset-h:clamp(230px,32vh,370px);
}

/* absolutely no preloader/route wipe for virtual project transition */
html.project-virtual-ready .loader,
html.project-virtual-ready .route-enter,
html.ff-final-ready .loader,
html.ff-final-ready .route-enter,
body.ff-running .loader,
body.ff-running .route-enter{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}

body.ff-running{overflow:hidden!important;background:#111!important;}
body.ff-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10100!important;
  mix-blend-mode:difference!important;
}
body.ff-running .progress,
body.ff-running .cursor{opacity:0!important;}

.ff-transition-scene{
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
}
.ff-bg{
  position:fixed;
  z-index:10001;
  overflow:hidden;
  background:#171717;
  background-size:cover;
  background-position:center;
  box-shadow:none;
  will-change:left,top,width,height,transform,filter,opacity;
}
.ff-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.52),rgba(0,0,0,.06) 52%,rgba(0,0,0,.34));
  opacity:.92;
}
.ff-paper{
  position:fixed;
  inset:0;
  z-index:10002;
  background:var(--case-bg);
  clip-path:inset(0 100% 0 0);
  will-change:clip-path;
}
.ff-asset{
  position:fixed;
  z-index:10005;
  opacity:0;
  background:#d8d4ca;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  box-shadow:0 28px 78px rgba(0,0,0,.14);
  will-change:opacity,transform;
}
.ff-title{
  position:fixed;
  z-index:10006;
  font-family:var(--display);
  line-height:.73;
  letter-spacing:-.095em;
  text-transform:uppercase;
  white-space:normal;
  max-width:var(--case-title-w);
  transform-origin:left top;
  will-change:left,top,width,font-size,color,transform;
}
.ff-kicker,.ff-copy{
  position:fixed;
  z-index:10006;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);
}
.ff-kicker{
  font-size:11px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
}
.ff-copy{
  font-size:clamp(16px,1.45vw,24px);
  line-height:1.1;
  font-weight:850;
  color:#292724;
}
.ff-transition-scene.ff-readable .ff-kicker,
.ff-transition-scene.ff-readable .ff-copy{
  opacity:1;
  transform:none;
}
.ff-transition-scene.ff-final .ff-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  color:#111!important;
  -webkit-text-stroke:0 transparent!important;
  transform:none!important;
}
.ff-transition-scene.ff-remove{
  opacity:0;
  transition:opacity .34s linear;
}

/* Real project hero must be the exact final frame of the overlay */
.case-hero.fatfish-flow-hero,
.case-hero{
  min-height:100svh!important;
  background:var(--case-bg)!important;
  color:#111!important;
  padding:0!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
}
.case-hero .container{
  width:100%!important;
  max-width:none!important;
  min-height:100svh!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  z-index:3!important;
}
.case-hero:before{
  content:attr(data-case-title)!important;
  position:absolute!important;
  left:-2.8vw!important;
  top:clamp(92px,15vh,150px)!important;
  font-family:var(--display)!important;
  font-size:clamp(115px,16.5vw,286px)!important;
  line-height:.68!important;
  letter-spacing:-.11em!important;
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(17,17,17,.052)!important;
  white-space:nowrap!important;
  z-index:1!important;
  pointer-events:none!important;
}
.case-kicker,.case-title,.case-text,.case-actions{
  position:absolute!important;
  left:var(--case-left)!important;
  z-index:5!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}
.case-kicker{
  top:calc(var(--case-title-top) - 58px)!important;
  margin:0!important;
}
.case-title{
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  margin:0!important;
  font-size:var(--case-title-fs)!important;
  line-height:.73!important;
  letter-spacing:-.095em!important;
  white-space:normal!important;
  color:#111!important;
  clip-path:inset(0)!important;
}
.case-text{
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
  font-size:clamp(16px,1.45vw,24px)!important;
  line-height:1.1!important;
  font-weight:850!important;
  color:#292724!important;
}
.case-actions{top:var(--case-actions-top)!important;}
.case-asset{
  display:block!important;
  position:absolute!important;
  left:var(--case-asset-left)!important;
  top:var(--case-asset-top)!important;
  width:var(--case-asset-w)!important;
  height:var(--case-asset-h)!important;
  z-index:4!important;
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 28px 78px rgba(0,0,0,.14)!important;
}
.case-asset:after{
  content:'MOTION';
  position:absolute;
  left:20px;
  bottom:18px;
  font-family:var(--display);
  font-size:clamp(38px,5.4vw,88px);
  line-height:.72;
  letter-spacing:-.08em;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 18px 50px rgba(0,0,0,.42);
}
.case-bg,.case-visual{display:none!important;}
html.project-virtual-ready .case-title,
html.project-virtual-ready .case-text,
html.project-virtual-ready .case-kicker,
html.project-virtual-ready .case-actions{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}

@media(max-width:900px){
  :root{
    --case-left:7vw;
    --case-title-top:20vh;
    --case-title-fs:17vw;
    --case-title-w:86vw;
    --case-copy-top:48vh;
    --case-copy-w:84vw;
    --case-actions-top:74vh;
    --case-asset-left:7vw;
    --case-asset-top:60vh;
    --case-asset-w:86vw;
    --case-asset-h:30vh;
  }
  .ff-copy{display:none!important;}
  .ff-title{max-width:86vw;}
}


/* V22 FATFISH CLOSER
   Correcciones detectadas al comparar:
   1) Nuestra home seguía visible detrás del morph: Fatfish pasa a una escena oscura limpia.
   2) El título saltaba demasiado al centro; ahora viaja más directo a su posición final.
   3) El blanco/fondo claro debe aparecer como transformación del proyecto, no como pantalla vacía.
*/

/* Escena oscura sólida: elimina el ruido de las cards antiguas detrás */
.ff-transition-scene{
  background:#101010!important;
  isolation:isolate!important;
}
.ff-transition-scene::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9997;
  background:#101010;
  pointer-events:none;
}
.ff-bg{z-index:9998!important;}
.ff-paper{z-index:9999!important;}
.ff-asset{z-index:10001!important;}
.ff-title,.ff-kicker,.ff-copy{z-index:10002!important;}

/* Header visible, un solo logo, como en referencia */
body.ff-running .header,
body.cinema-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10050!important;
  mix-blend-mode:difference!important;
}
body.ff-running .header .brand{opacity:1!important;}
.transfer-brand{display:none!important;}

/* Mientras la escena está activa, no se ven cards ni fondo de la home */
body.ff-running main{
  pointer-events:none!important;
}

/* La capa clara no debe verse como recarga, debe ser el lienzo del proyecto */
.ff-paper{
  background:var(--case-bg)!important;
  box-shadow:none!important;
}

/* El asset final queda más parecido al objeto gráfico de Fatfish: grande pero no como card flotante random */
:root{
  --case-left:clamp(32px,4.2vw,78px);
  --case-title-top:clamp(142px,23vh,220px);
  --case-title-fs:clamp(62px,7.6vw,132px);
  --case-title-w:min(52vw,860px);
  --case-copy-top:clamp(430px,58vh,555px);
  --case-copy-w:min(36vw,560px);
  --case-actions-top:clamp(550px,74vh,680px);
  --case-asset-left:clamp(720px,63vw,1040px);
  --case-asset-top:clamp(152px,21vh,235px);
  --case-asset-w:min(28vw,430px);
  --case-asset-h:min(31vw,430px);
}

/* Match de overlay y hero final: sin cambio perceptible al quitar la escena */
.ff-transition-scene.ff-final .ff-title,
.case-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
}
.ff-transition-scene.ff-final .ff-kicker,
.case-kicker{
  left:var(--case-left)!important;
  top:calc(var(--case-title-top) - 52px)!important;
}
.ff-transition-scene.ff-final .ff-copy,
.case-text{
  left:var(--case-left)!important;
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
}

/* El overlay no desaparece con un fade largo; se quita cuando ya está calcado al hero */
.ff-transition-scene.ff-remove{
  opacity:1!important;
  transition:none!important;
}

/* Se elimina la escena sin flash: el hero real ya está debajo con el mismo layout */
html.fatfish-flow-ready .case-hero,
html.project-virtual-ready .case-hero{
  background:var(--case-bg)!important;
}
html.fatfish-flow-ready .case-title,
html.fatfish-flow-ready .case-text,
html.fatfish-flow-ready .case-kicker,
html.project-virtual-ready .case-title,
html.project-virtual-ready .case-text,
html.project-virtual-ready .case-kicker{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  transform:none!important;
}

/* El fondo fantasma del título en el hero debe ser sutil; antes competía con el título real */
.case-hero:before{
  opacity:.45!important;
  top:clamp(80px,13vh,130px)!important;
  font-size:clamp(98px,14vw,240px)!important;
  -webkit-text-stroke:1.1px rgba(17,17,17,.045)!important;
}

/* Asset final: más gráfico, menos card. */
.case-asset,
.ff-asset{
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.case-asset:before,
.ff-asset:before{
  content:"";
  position:absolute;
  inset:-8%;
  background:inherit;
  background-size:cover;
  background-position:center;
  clip-path:polygon(8% 0,100% 10%,92% 100%,0 88%);
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.14));
}
.case-asset:after{
  z-index:2;
}

/* Evitar preloader y route overlay en la ruta virtual */
html.fatfish-flow-ready .loader,
html.fatfish-flow-ready .route-enter,
html.project-virtual-ready .loader,
html.project-virtual-ready .route-enter{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

@media(max-width:900px){
  :root{
    --case-left:7vw;
    --case-title-top:20vh;
    --case-title-fs:15.5vw;
    --case-title-w:86vw;
    --case-copy-top:48vh;
    --case-copy-w:84vw;
    --case-actions-top:72vh;
    --case-asset-left:52vw;
    --case-asset-top:54vh;
    --case-asset-w:40vw;
    --case-asset-h:40vw;
  }
}


/* V23 FATFISH CONTINUITY — ajuste fino comparando reporte 8 vs Fatfish
   - La home queda cubierta por una escena oscura limpia inmediatamente.
   - La imagen del proyecto se vuelve full-screen antes del fondo claro.
   - El título permanece visible durante toda la transformación.
   - La capa clara es el fondo del proyecto, no una pantalla de recarga.
   - El último frame del overlay coincide con el hero real. */
:root{
  --case-bg:#f4f1eb;
  --case-left:clamp(42px,4.8vw,92px);
  --case-title-top:clamp(150px,23vh,220px);
  --case-title-fs:clamp(58px,7.4vw,132px);
  --case-title-w:min(52vw,850px);
  --case-copy-top:clamp(430px,59vh,560px);
  --case-copy-w:min(38vw,590px);
  --case-actions-top:clamp(550px,74vh,680px);
  --case-asset-left:clamp(680px,61vw,1040px);
  --case-asset-top:clamp(140px,20vh,220px);
  --case-asset-w:min(31vw,470px);
  --case-asset-h:min(34vw,500px);
}
.ff-transition-scene.v23-scene{position:fixed!important;inset:0!important;z-index:9995!important;pointer-events:none!important;overflow:hidden!important;background:transparent!important;isolation:isolate!important;}
.ff-transition-scene.v23-scene::before{display:none!important;}
.ff-dark{position:fixed;inset:0;background:#101010;z-index:9996;opacity:0;}
.ff-bg{position:fixed!important;z-index:9997!important;overflow:hidden!important;background:#111;background-size:cover;background-position:center;will-change:left,top,width,height,transform,filter,border-radius;box-shadow:none!important;}
.ff-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 50%,rgba(0,0,0,.28));opacity:1;transition:opacity .35s var(--ease);z-index:1;}
.ff-image-over .ff-bg{z-index:10002!important;clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%);filter:drop-shadow(0 32px 48px rgba(0,0,0,.16))!important;}
.ff-image-over .ff-bg::before{opacity:0!important;}
.ff-paper{position:fixed!important;inset:0!important;z-index:10000!important;background:var(--case-bg)!important;clip-path:inset(0 100% 0 0);box-shadow:none!important;will-change:clip-path;}
.ff-title{position:fixed!important;z-index:10004!important;font-family:var(--display);line-height:.78;letter-spacing:-.085em;text-transform:uppercase;white-space:normal;will-change:left,top,width,font-size,color,transform;-webkit-font-smoothing:antialiased;}
.ff-kicker,.ff-copy{position:fixed!important;z-index:10005!important;opacity:0;transform:translateY(14px);transition:opacity .32s var(--ease), transform .32s var(--ease);}
.ff-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:900;color:var(--red)!important;}
.ff-copy{font-size:clamp(16px,1.35vw,24px);line-height:1.08;font-weight:850;color:#292724!important;}
.ff-readable .ff-kicker,.ff-readable .ff-copy{opacity:1!important;transform:none!important;}
.ff-final .ff-title,.case-title{left:var(--case-left)!important;top:var(--case-title-top)!important;width:var(--case-title-w)!important;max-width:var(--case-title-w)!important;font-size:var(--case-title-fs)!important;line-height:.78!important;letter-spacing:-.085em!important;color:#111!important;transform:none!important;-webkit-text-stroke:0 transparent!important;}
.ff-final .ff-kicker,.case-kicker{left:var(--case-left)!important;top:calc(var(--case-title-top) - 52px)!important;}
.ff-final .ff-copy,.case-text{left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;}
.ff-remove{opacity:1!important;transition:none!important;}
body.ff-running .header,body.cinema-running .header{opacity:1!important;visibility:visible!important;z-index:10080!important;mix-blend-mode:difference!important;}
body.ff-running .progress,body.ff-running .cursor{opacity:0!important;}
body.ff-running main{pointer-events:none!important;}
.transfer-brand{display:none!important;}
html.project-virtual-ready .loader,html.project-virtual-ready .route-enter,html.fatfish-flow-ready .loader,html.fatfish-flow-ready .route-enter,html.ff-final-ready .loader,html.ff-final-ready .route-enter{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html.project-virtual-ready .case-hero,html.fatfish-flow-ready .case-hero{background:var(--case-bg)!important;min-height:100svh!important;padding:0!important;overflow:hidden!important;}
html.project-virtual-ready .case-title,html.project-virtual-ready .case-text,html.project-virtual-ready .case-kicker,html.project-virtual-ready .case-actions,html.fatfish-flow-ready .case-title,html.fatfish-flow-ready .case-text,html.fatfish-flow-ready .case-kicker,html.fatfish-flow-ready .case-actions{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;}
.case-hero:before{left:-2vw!important;top:clamp(72px,11vh,120px)!important;font-size:clamp(96px,13vw,230px)!important;opacity:.42!important;-webkit-text-stroke:1px rgba(17,17,17,.045)!important;}
.case-asset{display:block!important;position:absolute!important;left:var(--case-asset-left)!important;top:var(--case-asset-top)!important;width:var(--case-asset-w)!important;height:var(--case-asset-h)!important;z-index:4!important;background-image:url('assets/img/imagina-motion-demo.jpg')!important;background-size:cover!important;background-position:center!important;border-radius:0!important;box-shadow:none!important;clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important;filter:drop-shadow(0 32px 48px rgba(0,0,0,.16));}
.case-asset:after{content:'MOTION';position:absolute;left:20px;bottom:18px;font-family:var(--display);font-size:clamp(38px,5.4vw,88px);line-height:.72;letter-spacing:-.08em;color:#fff;text-transform:uppercase;text-shadow:0 18px 50px rgba(0,0,0,.42);z-index:2;}
.case-bg,.case-visual{display:none!important;}
@media(max-width:900px){:root{--case-left:7vw;--case-title-top:20vh;--case-title-fs:15.5vw;--case-title-w:86vw;--case-copy-top:48vh;--case-copy-w:84vw;--case-actions-top:72vh;--case-asset-left:52vw;--case-asset-top:54vh;--case-asset-w:40vw;--case-asset-h:40vw}.ff-copy{display:none!important}.ff-title{max-width:86vw}.ff-bg{clip-path:none!important}.ff-image-over .ff-bg{clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important}}


/* V24 — Fatfish source-aligned project transition
   Based on the source architecture: transition-overlay__project-inner has two title layers:
   one title inside the image and one title outside on the project surface. */
.ff-transition-scene.v24-source-flow{
  position:fixed!important;
  inset:0!important;
  z-index:9990!important;
  background:rgba(244,241,235,0);
  overflow:hidden!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
.v24-source-flow .ff-stage{
  position:fixed!important;
  inset:0!important;
  z-index:9991!important;
  background:#222!important;
  opacity:0;
}
.v24-source-flow .ff-project-inner{
  position:fixed!important;
  inset:0!important;
  z-index:9992!important;
  display:grid!important;
  visibility:hidden;
}
.v24-source-flow .ff-project-text,
.v24-source-flow .ff-project-image{
  grid-column:1/1!important;
  grid-row:1!important;
}
.v24-source-flow .ff-project-text{
  position:fixed!important;
  inset:0!important;
  z-index:9993!important;
  background:transparent!important;
}
.v24-source-flow .ff-project-image{
  position:fixed!important;
  z-index:9995!important;
  background:#222!important;
  overflow:hidden!important;
  will-change:left,top,width,height,clip-path,transform,border-radius!important;
  box-shadow:none!important;
}
.v24-source-flow .ff-img{
  position:absolute!important;
  inset:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg');
  background-size:cover!important;
  background-position:center!important;
  transform:scale(1.025);
}
.v24-source-flow .ff-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.10) 52%,rgba(0,0,0,.34));
  z-index:1;
}
.v24-source-flow .ff-project-image .visual,
.v24-source-flow .ff-project-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.v24-source-flow .ff-title-inside-wrap{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
}
.v24-source-flow .ff-title-inside,
.v24-source-flow .ff-title-outside{
  position:fixed!important;
  font-family:var(--display)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  margin:0!important;
  will-change:left,top,width,font-size,color,transform,opacity!important;
}
.v24-source-flow .ff-title-inside{
  z-index:9998!important;
}
.v24-source-flow .ff-title-outside{
  z-index:9994!important;
  color:#111!important;
  opacity:0;
}
.v24-source-flow .ff-kicker,
.v24-source-flow .ff-copy{
  position:fixed!important;
  z-index:9994!important;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1);
}
.v24-source-flow .ff-kicker{
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.18em!important;
  font-weight:900!important;
  color:var(--red)!important;
}
.v24-source-flow .ff-copy{
  font-size:clamp(16px,1.35vw,24px)!important;
  line-height:1.08!important;
  font-weight:850!important;
  color:#292724!important;
}
.v24-source-flow.ff-readable .ff-kicker,
.v24-source-flow.ff-readable .ff-copy{
  opacity:1!important;
  transform:none!important;
}
.v24-source-flow.ff-final .ff-title-outside,
.v24-source-flow.ff-final .ff-kicker,
.v24-source-flow.ff-final .ff-copy{
  opacity:1!important;
  transform:none!important;
}
.v24-source-flow.ff-remove{
  opacity:1!important;
  transition:none!important;
}

/* Make the real project hero identical to final frame */
html.ff-source-ready .case-title,
html.ff-source-ready .case-kicker,
html.ff-source-ready .case-text,
html.ff-source-ready .case-actions,
html.ff-source-ready .case-asset,
html.ff-source-ready .case-hero{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  opacity:1!important;
}
html.ff-source-ready .case-hero{
  background:var(--case-bg)!important;
  min-height:100svh!important;
  overflow:hidden!important;
}
html.ff-source-ready .case-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  color:#111!important;
}
html.ff-source-ready .case-kicker{left:var(--case-left)!important;top:calc(var(--case-title-top) - 52px)!important;}
html.ff-source-ready .case-text{left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;max-width:var(--case-copy-w)!important;}
html.ff-source-ready .case-asset{
  left:var(--case-asset-left)!important;
  top:var(--case-asset-top)!important;
  width:var(--case-asset-w)!important;
  height:var(--case-asset-h)!important;
  clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important;
  border-radius:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
}

/* Kill old wipe/preloader participation in project flow */
html.ff-source-ready .loader,
html.ff-source-ready .route-enter,
body.ff-running .loader,
body.ff-running .route-enter{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.ff-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10080!important;
  mix-blend-mode:difference!important;
}
body.ff-running main{
  pointer-events:none!important;
}
body.ff-running .progress,
body.ff-running .cursor{
  opacity:0!important;
}

@media(max-width:900px){
  .v24-source-flow .ff-copy{display:none!important;}
  .v24-source-flow .ff-title-inside,
  .v24-source-flow .ff-title-outside{max-width:86vw!important;}
}


/* V25 — estabilidad de transición tipo Fatfish
   1) Intercepta cualquier link de proyecto temprano.
   2) Elimina preloader en URLs de proyecto directas.
   3) Mantiene la escena hasta que el hero real ya está pintado. */
html.project-direct .loader,
html.project-direct .route-enter,
html.project-direct .wipe,
html.route-skip-loader .loader{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.project-direct body.is-loading{
  overflow:auto!important;
}
html.project-direct body,
html.project-direct main{
  opacity:1!important;
}

/* Evita la pantalla negra vacía: la imagen siempre queda visible sobre la escena oscura. */
.v24-source-flow .ff-stage{
  background:#222!important;
}
.v24-source-flow .ff-project-image{
  background:#222!important;
}
.v24-source-flow .ff-img{
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  opacity:1!important;
}
.v24-source-flow .ff-project-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.10) 50%,rgba(0,0,0,.34));
  pointer-events:none;
}

/* Fatfish usa el título blanco dentro de la imagen y el negro debajo.
   Esta regla evita que ambos se vean desfasados al final. */
.v24-source-flow.ff-final .ff-title-inside{
  opacity:0!important;
}
.v24-source-flow.ff-final .ff-title-outside{
  opacity:1!important;
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
}

/* El overlay se quita sin fade, pero después de que el proyecto virtual ya fue pintado. */
.v24-source-flow.ff-remove{
  opacity:1!important;
  transition:none!important;
}
html.ff-source-ready .case-asset{
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
}

/* Ocultar barras/loader residuales durante el flujo */
body.ff-running .loader,
body.ff-running .route-enter,
body.ff-running .wipe{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
body.ff-running{
  overflow:hidden!important;
}


/* V26 PROJECT CLICK LOCK
   Corrige el error visto en reporte 10: al hacer click el navegador hacía navegación normal,
   aparecía pantalla negra/spinner y recién luego el proyecto. */
html.project-direct,
html.project-direct body,
html.project-direct main{
  background:var(--case-bg)!important;
}
html.project-direct .loader,
html.project-direct .route-enter,
html.project-direct .wipe,
html.project-direct .progress,
html.route-skip-loader .loader,
html.route-skip-loader .route-enter{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.project-direct body.is-loading,
html.route-skip-loader body.is-loading{
  overflow:auto!important;
}
html.project-direct body,
html.project-direct main,
html.route-skip-loader body,
html.route-skip-loader main{
  opacity:1!important;
}

/* Evitar que el click lance dos transiciones o que el enlace reciba eventos durante el morph */
body.ff-running a,
body.morph-running a{
  pointer-events:none!important;
}

/* En la transición tipo Fatfish, la home no debe reaparecer ni un frame */
body.ff-running main{
  opacity:1!important;
}
.ff-transition-scene.v24-source-flow{
  z-index:10020!important;
}
.v24-source-flow .ff-stage{
  z-index:10021!important;
}
.v24-source-flow .ff-project-inner{
  z-index:10022!important;
}
body.ff-running .header{
  z-index:10080!important;
}


/* V27 FATFISH OVERLAY FLIP
   Corrección real vista en reporte 11:
   - No navegación normal.
   - No pantalla negra de carga.
   - El proyecto final se pinta debajo inmediatamente.
   - La imagen overlay se transforma a asset y revela el título negro real debajo. */
.ff-transition-scene.v27-flow{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
  isolation:isolate!important;
}
.v27-stage{
  position:fixed!important;
  inset:0!important;
  z-index:10001!important;
  background:#222!important;
  opacity:1;
  will-change:opacity!important;
}
.v27-image{
  position:fixed!important;
  z-index:10003!important;
  overflow:hidden!important;
  background:#222!important;
  box-shadow:none!important;
  will-change:left,top,width,height,clip-path,transform,border-radius!important;
}
.v27-img{
  position:absolute!important;
  inset:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg');
  background-size:cover!important;
  background-position:center!important;
  transform:scale(1.025);
}
.v27-img:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.12) 50%,rgba(0,0,0,.34));
  z-index:1;
}
.v27-image img,
.v27-image .visual{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.v27-title-inside{
  position:fixed!important;
  z-index:10004!important;
  font-family:var(--display)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  margin:0!important;
  will-change:left,top,width,font-size,color,transform,opacity!important;
}

/* Final project must exactly match overlay end state */
html.ff-v27-ready .loader,
html.ff-v27-ready .route-enter,
body.ff-running .loader,
body.ff-running .route-enter{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.ff-v27-ready body,
html.ff-v27-ready{
  background:var(--case-bg)!important;
  scroll-behavior:auto!important;
}
html.ff-v27-ready .case-hero{
  background:var(--case-bg)!important;
  min-height:100svh!important;
  overflow:hidden!important;
  padding:0!important;
}
html.ff-v27-ready .case-title,
html.ff-v27-ready .case-kicker,
html.ff-v27-ready .case-text,
html.ff-v27-ready .case-actions,
html.ff-v27-ready .case-asset{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  opacity:1!important;
}
html.ff-v27-ready .case-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  color:#111!important;
}
html.ff-v27-ready .case-kicker{
  left:var(--case-left)!important;
  top:calc(var(--case-title-top) - 52px)!important;
}
html.ff-v27-ready .case-text{
  left:var(--case-left)!important;
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
}
html.ff-v27-ready .case-asset{
  display:block!important;
  position:absolute!important;
  left:var(--case-asset-left)!important;
  top:var(--case-asset-top)!important;
  width:var(--case-asset-w)!important;
  height:var(--case-asset-h)!important;
  z-index:4!important;
  clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important;
  border-radius:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
}
html.ff-v27-ready .case-bg,
html.ff-v27-ready .case-visual{
  display:none!important;
}
body.ff-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10080!important;
  mix-blend-mode:difference!important;
}
body.ff-running .progress,
body.ff-running .cursor{
  opacity:0!important;
}
body.ff-running main{
  pointer-events:none!important;
}

/* Avoid old V24/V25 layers from participating if CSS remains cached */
.ff-transition-scene.v27-flow .ff-stage,
.ff-transition-scene.v27-flow .ff-bg,
.ff-transition-scene.v27-flow .ff-paper,
.ff-transition-scene.v27-flow .ff-title,
.ff-transition-scene.v27-flow .ff-kicker,
.ff-transition-scene.v27-flow .ff-copy,
.ff-transition-scene.v27-flow .ff-project-inner{
  display:none!important;
}

@media(max-width:900px){
  .v27-title-inside{max-width:86vw!important;}
}


/* V28 FATFISH EXACT FLOW
   Objetivo: eliminar los estados intermedios vistos en reporte 12.
   - No copy/kicker duplicado dentro del overlay.
   - El proyecto final se pinta debajo desde el primer frame.
   - La imagen overlay actúa como máscara: full screen -> asset derecho.
   - El título blanco está dentro de la imagen; el título negro real ya está debajo. */
.ff-transition-scene.v28-flow{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  overflow:hidden!important;
  pointer-events:none!important;
  isolation:isolate!important;
  background:transparent!important;
}
.v28-dark{
  position:fixed!important;
  inset:0!important;
  z-index:10001!important;
  background:#222!important;
  opacity:0;
  will-change:opacity!important;
}
.v28-image{
  position:fixed!important;
  z-index:10003!important;
  overflow:hidden!important;
  background:#222!important;
  box-shadow:none!important;
  will-change:left,top,width,height,clip-path,transform,border-radius!important;
}
.v28-img{
  position:absolute!important;
  inset:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg');
  background-size:cover!important;
  background-position:center!important;
  transform:scale(1.025);
}
.v28-img:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.11) 50%,rgba(0,0,0,.32));
  z-index:1;
  opacity:1;
}
.v28-image img,
.v28-image .visual{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.v28-title-inside{
  position:absolute!important;
  z-index:3!important;
  font-family:var(--display)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  margin:0!important;
  will-change:left,top,width,font-size,color,transform,opacity!important;
}

/* El hero real debe estar debajo, fijo y listo. */
html.ff-v28-ready .loader,
html.ff-v28-ready .route-enter,
body.ff-running .loader,
body.ff-running .route-enter{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.ff-v28-ready,
html.ff-v28-ready body{
  background:var(--case-bg)!important;
  scroll-behavior:auto!important;
}
html.ff-v28-ready .case-hero{
  background:var(--case-bg)!important;
  min-height:100svh!important;
  overflow:hidden!important;
  padding:0!important;
}
html.ff-v28-ready .case-title,
html.ff-v28-ready .case-text,
html.ff-v28-ready .case-kicker,
html.ff-v28-ready .case-actions,
html.ff-v28-ready .case-asset{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  transform:none!important;
}
html.ff-v28-ready .case-title{
  left:var(--case-left)!important;
  top:var(--case-title-top)!important;
  width:var(--case-title-w)!important;
  max-width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  color:#111!important;
}
html.ff-v28-ready .case-kicker{
  left:var(--case-left)!important;
  top:calc(var(--case-title-top) - 52px)!important;
}
html.ff-v28-ready .case-text{
  left:var(--case-left)!important;
  top:var(--case-copy-top)!important;
  width:var(--case-copy-w)!important;
  max-width:var(--case-copy-w)!important;
}
html.ff-v28-ready .case-asset{
  display:block!important;
  position:absolute!important;
  left:var(--case-asset-left)!important;
  top:var(--case-asset-top)!important;
  width:var(--case-asset-w)!important;
  height:var(--case-asset-h)!important;
  z-index:4!important;
  clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important;
  border-radius:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
}
html.ff-v28-ready .case-bg,
html.ff-v28-ready .case-visual{
  display:none!important;
}
body.ff-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10080!important;
  mix-blend-mode:difference!important;
}
body.ff-running .progress,
body.ff-running .cursor{
  opacity:0!important;
}
body.ff-running main{
  pointer-events:none!important;
}

/* Neutraliza overlays anteriores si CSS viejo queda en caché mezclado. */
.ff-transition-scene.v28-flow .v27-stage,
.ff-transition-scene.v28-flow .ff-stage,
.ff-transition-scene.v28-flow .ff-bg,
.ff-transition-scene.v28-flow .ff-paper,
.ff-transition-scene.v28-flow .ff-title,
.ff-transition-scene.v28-flow .ff-kicker,
.ff-transition-scene.v28-flow .ff-copy,
.ff-transition-scene.v28-flow .ff-project-inner{
  display:none!important;
}

@media(max-width:900px){
  .v28-title-inside{max-width:86vw!important;}
}


/* V29 FATFISH-INSPIRED SYSTEM
   No usa assets/código propietario: replica la arquitectura visual detectada:
   load overlay, menu/contact overlay, cards con título inside/outside y project transition inner. */
:root{
  --ff-red:#cb413f;
  --ff-gold:#cab99a;
  --ff-ink:#222222;
  --ff-paper:#f4f1eb;
  --ff-ease:cubic-bezier(.76,0,.24,1);
  --ff-ease-out:cubic-bezier(.16,1,.3,1);
  --display:Impact,"Arial Black",system-ui,sans-serif;
  --bodyfont:"Roboto Slab",Georgia,serif;
}
html{background:var(--ff-ink);scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{background:var(--ff-paper)!important;color:var(--ff-ink)!important;font-family:var(--bodyfont);}

/* Preloader closer to source: dark overlay + word/cursor, only first load */
.loader{
  background:#222!important;
  z-index:20000!important;
}
.loader-box{display:flex!important;align-items:center!important;justify-content:center!important;gap:18px!important;flex-direction:row!important}
.loader-word{
  font-family:var(--display)!important;font-size:clamp(44px,8vw,132px)!important;
  text-transform:lowercase!important;letter-spacing:-.08em!important;color:#fff!important;line-height:.8!important;
}
.loader-word span{color:#fff!important}
.loader-cursor{
  width:2px;height:clamp(60px,13vw,190px);background:#fff;animation:ffBlink .7s steps(2,start) infinite;
}
.loader-caption{position:absolute!important;bottom:8vh!important;left:50%!important;transform:translateX(-50%)!important;color:#fff!important;opacity:.55!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-size:11px!important}
@keyframes ffBlink{to{visibility:hidden}}

/* Header proportions */
.header{height:auto!important;padding:clamp(18px,2.1vw,34px) clamp(24px,3.6vw,56px)!important;z-index:10080!important}
.brand{font-family:var(--display)!important;font-size:clamp(20px,2.2vw,36px)!important;letter-spacing:-.08em!important;text-transform:lowercase!important;color:#111!important}
.brand span{color:var(--ff-red)!important}
.header-actions{gap:12px!important}
.pill{background:var(--ff-red)!important;color:#fff!important;border-radius:7rem!important;padding:.72rem 1.35rem .82rem!important;font-family:var(--display)!important;text-transform:uppercase!important;font-size:13px!important;letter-spacing:.04em!important;border:0!important;overflow:hidden}
.pill.alt{background:#111!important;color:#fff!important}
.pill:after,.btn:after{content:"";position:absolute;inset:0;background:var(--ff-gold);z-index:-1;transform:translateX(-105%);transition:transform .45s var(--ff-ease)}
.pill:hover:after,.btn:hover:after{transform:translateX(0)}
.pill,.btn{position:relative;z-index:1;overflow:hidden}

/* Home intro like source expertises-marquee: huge rows, icons, descriptions */
.hero{min-height:100svh!important;background:var(--ff-paper)!important;overflow:hidden!important;padding:clamp(90px,12vh,150px) 0 clamp(70px,10vh,110px)!important}
.noise,.spotlight{display:none!important}
.bg-type{
  opacity:.035!important;color:transparent!important;-webkit-text-stroke:1px #222!important;
  font-family:var(--display)!important;font-size:clamp(110px,16vw,260px)!important;line-height:.72!important;letter-spacing:-.1em!important;
}
.hero-grid{display:block!important;width:min(92vw,1840px)!important;margin:0 auto!important}
.hero-title{margin:0!important;display:grid!important;gap:0!important}
.hero-title span{
  display:block!important;font-family:var(--display)!important;font-size:clamp(58px,10.4vw,210px)!important;
  line-height:.86!important;letter-spacing:-.085em!important;text-transform:uppercase!important;color:#111!important;
  white-space:nowrap!important;position:relative!important;
}
.hero-title span:nth-child(1){justify-self:start}
.hero-title span:nth-child(2){justify-self:center;color:transparent!important;-webkit-text-stroke:1.5px #111!important}
.hero-title span:nth-child(3){justify-self:end}
.hero-title span:before,.hero-title span:after{
  content:attr(data-copy);position:absolute;top:0;color:transparent;-webkit-text-stroke:1px rgba(34,34,34,.08);white-space:nowrap;z-index:-1
}
.hero-title span:nth-child(1):before{right:100%;margin-right:1.4rem;content:"Identidad"}
.hero-title span:nth-child(1):after{left:100%;margin-left:1.4rem;content:"Identidad"}
.hero-title span:nth-child(2):before{right:100%;margin-right:1.4rem;content:"Web"}
.hero-title span:nth-child(2):after{left:100%;margin-left:1.4rem;content:"Web"}
.hero-title span:nth-child(3):before{right:100%;margin-right:1.4rem;content:"Estrategia"}
.hero-title span:nth-child(3):after{left:100%;margin-left:1.4rem;content:"Estrategia"}
.hero .eyebrow{margin-left:calc(8vw + 10px);margin-bottom:1.2rem;color:var(--ff-red)!important;font-weight:900!important;letter-spacing:.23em!important}
.hero-side{
  width:min(42vw,650px)!important;margin:2.5rem 0 0 43vw!important;display:block!important;opacity:1!important;transform:none!important
}
.hero-side p{font-size:clamp(18px,1.4vw,26px)!important;line-height:1.28!important;font-weight:300!important}
.chips{display:none!important}
.sticker{
  background:transparent!important;color:var(--ff-gold)!important;box-shadow:none!important;border:0!important;
  font-size:clamp(34px,5vw,92px)!important;filter:drop-shadow(2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff);
  animation:ffSwayY 9s cubic-bezier(.445,.05,.55,.95) infinite;
}
.st1{left:74vw!important;top:18vh!important}.st2{left:8vw!important;top:74vh!important}.st3{right:10vw!important;bottom:12vh!important}
@keyframes ffSwayY{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) rotate(4deg)}50%{transform:translateY(8px) rotate(-6deg)}75%{transform:translateY(-7px) rotate(7deg)}}

/* Content sections cleaner like source */
.intro,.services{background:var(--ff-paper)!important;color:#111!important}
.intro-grid{grid-template-columns:1.2fr .8fr!important;gap:8vw!important}
.intro h2,.display{font-family:var(--display)!important;letter-spacing:-.08em!important;line-height:.85!important;text-transform:uppercase!important}
.intro h2{font-size:clamp(52px,8vw,160px)!important}
.intro-card{border:0!important;background:transparent!important;border-left:2px solid var(--ff-red)!important;border-radius:0!important;padding:0 0 0 2rem!important;box-shadow:none!important}

/* Projects resemble source cards: image/content with inside white title and outside black title */
.projects{background:#222!important;color:#fff!important;min-height:120svh!important}
.projects .display,.projects-head p{color:#fff!important}
.projects-head{max-width:1024px!important;margin-bottom:4rem!important}
.project-stage{min-height:1050px!important;position:relative!important}
.project-card{
  border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;border:0!important;
  transition:filter .45s var(--ff-ease),transform .45s var(--ff-ease)!important
}
.project-card .visual{
  border-radius:0!important;clip-path:polygon(6% 0,100% 7%,94% 100%,0 90%)!important;box-shadow:0 32px 90px rgba(0,0,0,.35)!important;
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;background-size:cover!important;background-position:center!important
}
.project-card .visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 55%,rgba(0,0,0,.36));z-index:1}
.project-card .visual i{opacity:0!important}
.project-card .project-meta{
  background:transparent!important;color:#fff!important;padding:0!important;margin-top:.9rem!important
}
.project-card .project-meta h3{
  font-family:var(--display)!important;color:transparent!important;-webkit-text-stroke:1.1px rgba(255,255,255,.72)!important;
  font-size:clamp(34px,4.8vw,90px)!important;line-height:.8!important;letter-spacing:-.08em!important;text-transform:uppercase!important;
}
.project-card .project-meta p,.project-card small{color:rgba(255,255,255,.65)!important}
.featured-project{width:min(48vw,780px)!important;z-index:10!important}
.featured-project .visual{height:min(46vw,620px)!important}
.featured-project .project-meta h3{font-size:clamp(50px,7.6vw,138px)!important;white-space:nowrap!important}
body.project-hovering .project-card:not(.featured-project){filter:grayscale(.75) brightness(.58)!important}
body.project-hovering .featured-project .visual{transform:scale(1.025)!important}
.project-hover-title span{
  font-family:var(--display)!important;font-size:clamp(82px,13.5vw,245px)!important;letter-spacing:-.09em!important;
  color:transparent!important;-webkit-text-stroke:1.5px rgba(255,255,255,.92)!important
}
.project-follow-dot{background:var(--ff-red)!important}

/* Source-style menu overlay */
.panel{background:transparent!important;z-index:15000!important}
.panel:before{content:"";position:absolute;inset:0;background:rgba(34,34,34,.70);opacity:0;transition:opacity .35s var(--ff-ease)}
.panel:after{content:"";position:absolute;inset:0;background:var(--ff-red);transform:translateY(-105%);transition:transform .72s var(--ff-ease);z-index:-1}
.panel.open:before{opacity:1}
.panel.open:after{transform:translateY(0)}
.panel-left,.panel-right{z-index:2}
.navbig a{
  font-family:var(--display)!important;font-size:clamp(48px,8vw,150px)!important;line-height:1.06!important;letter-spacing:-.08em!important;
  color:#fff!important;text-transform:uppercase!important;display:inline-block!important
}
.navbig a:after{content:attr(href);display:none}
.navbig a:hover{color:var(--ff-gold)!important}
.panel-watermark{color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.18)!important;font-family:var(--display)!important;font-size:clamp(120px,23vw,390px)!important;letter-spacing:-.1em!important}
.panel-copy{font-size:clamp(18px,1.4vw,26px)!important;line-height:1.25!important;color:#fff!important}

/* Contact overlay source-style form lines */
.contact-panel:after{background:var(--ff-red)!important}
.contact-title{font-family:var(--display)!important;font-size:clamp(64px,11vw,190px)!important;letter-spacing:-.09em!important;line-height:.82!important;text-transform:uppercase!important;color:#fff!important}
.contact-form{background:transparent!important;border:0!important;box-shadow:none!important}
.field label{font-family:var(--bodyfont)!important;font-weight:300!important;color:#fff!important;opacity:.85!important}
.field input,.field textarea{
  border:0!important;border-bottom:1px solid rgba(255,255,255,.28)!important;background:transparent!important;color:rgba(255,255,255,.65)!important;border-radius:0!important;
  font-family:var(--bodyfont)!important;font-size:22px!important;padding:0 0 12px!important
}
.field textarea{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 48px,rgba(255,255,255,.18) 49px)!important;min-height:180px!important}

/* Project hero final: closer to source project-intro */
:root{
  --case-left:clamp(48px,7.5vw,140px);
  --case-title-top:clamp(125px,21vh,230px);
  --case-title-fs:clamp(76px,7.8vw,150px);
  --case-title-w:min(58vw,930px);
  --case-copy-top:clamp(380px,58vh,560px);
  --case-copy-w:min(42vw,620px);
  --case-actions-top:clamp(510px,74vh,690px);
  --case-asset-left:clamp(58vw,63vw,70vw);
  --case-asset-top:clamp(150px,24vh,250px);
  --case-asset-w:min(31vw,520px);
  --case-asset-h:min(30vw,500px);
  --case-bg:#f4f1eb;
}
.case-title{font-family:var(--display)!important;letter-spacing:-.085em!important;line-height:.82!important;text-transform:uppercase!important}
.case-kicker{color:var(--ff-red)!important;font-weight:900!important;letter-spacing:.18em!important;text-transform:uppercase!important}
.case-text{font-family:var(--bodyfont)!important;font-weight:300!important;font-size:clamp(18px,1.55vw,28px)!important;line-height:1.24!important}

/* Transition: Fatfish-like project inner based on view-source: image layer + title-inside, real black title below */
.ff-transition-scene.v29-flow{background:transparent!important;z-index:12000!important;pointer-events:none!important}
.v29-flow .v28-dark{background:#222!important;z-index:12001!important}
.v29-flow .v28-image{z-index:12004!important;background:#222!important;overflow:hidden!important}
.v29-flow .v28-img{background-image:url('assets/img/imagina-motion-demo.jpg');background-size:cover!important;background-position:center!important;transform:scale(1.025)!important}
.v29-flow .v28-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.10) 52%,rgba(0,0,0,.34));z-index:1}
.v29-flow .v28-title-inside{font-family:var(--display)!important;letter-spacing:-.085em!important;line-height:.78!important;z-index:3!important}
/* reduce dead black feeling: final project is already visible below, black is only a short mask */
body.ff-running main{opacity:1!important;pointer-events:none!important}
body.ff-running .header{z-index:13000!important;mix-blend-mode:difference!important;opacity:1!important}

/* Generic link wipe: red illustration grid closer to transition-overlay images */
.wipe{z-index:18000!important;background:var(--ff-red)!important;visibility:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .72s var(--ff-ease)}
.wipe.on{visibility:visible;clip-path:inset(0 0 0 0)}
.wipe:before{
  content:"✦ ☕ ⚡ ● ✹ ◇ UX WEB BRAND ✦ ☕ ⚡ ● ✹ ◇";
  position:absolute;inset:-10vh -10vw;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(70px,11vw,180px);line-height:1.5;color:rgba(255,255,255,.18);
  transform:rotate(-8deg);word-spacing:2vw;animation:ffWipeFloat 1.4s var(--ff-ease) infinite alternate
}
.wipe-layer,.wipe span{display:none!important}
@keyframes ffWipeFloat{to{transform:rotate(-8deg) translateY(-24px)}}

@media(max-width:900px){
  .hero-title span{font-size:18vw!important;white-space:normal!important}
  .hero-side{width:86vw!important;margin:2rem auto 0!important}
  .intro-grid{display:block!important}
  .project-stage{min-height:920px!important}
  .featured-project{width:86vw!important;left:7vw!important}
  .case-asset{opacity:.35!important}
  :root{
    --case-left:7vw;--case-title-top:19vh;--case-title-fs:15vw;--case-title-w:86vw;
    --case-copy-top:47vh;--case-copy-w:84vw;--case-actions-top:72vh;
    --case-asset-left:48vw;--case-asset-top:52vh;--case-asset-w:46vw;--case-asset-h:42vw;
  }
}


/* =========================================================
   V30 FATFISH-LIKE SYSTEM — global visual + transition
   Basado en la arquitectura observada:
   - project card inside/outside title
   - transition project image + inside white title + outside black title
   - screen menu/contact overlay full red
   ========================================================= */
:root{
  --ff-red:#cb413f;
  --ff-gold:#cab99a;
  --ff-dark:#222;
  --ff-paper:#f4f2ed;
  --ff-text:#222;
  --ff-ease:cubic-bezier(.76,0,.24,1);
  --ff-ease-out:cubic-bezier(.19,1,.22,1);
  --wrapper-margin:2.5rem;
  --wrapper-w:calc(100vw - var(--wrapper-margin) * 2);
  --wrapper-col:calc(var(--wrapper-w) / 12);
  --case-left:calc(var(--wrapper-col) * 1.15 + var(--wrapper-margin));
  --case-title-top:clamp(150px,25vh,238px);
  --case-title-fs:clamp(80px,8.9vw,172px);
  --case-title-w:min(58vw,960px);
  --case-copy-top:clamp(420px,62vh,600px);
  --case-copy-w:min(39vw,620px);
  --case-actions-top:clamp(545px,78vh,730px);
  --case-asset-left:calc(100vw - min(42vw,680px) - 6vw);
  --case-asset-top:clamp(155px,20vh,210px);
  --case-asset-w:min(42vw,680px);
  --case-asset-h:clamp(360px,58vh,630px);
  --project-title-fs:clamp(68px,8vw,154px);
}
html,body{background:var(--ff-paper)!important;color:var(--ff-text)!important;}
body{font-family:"Roboto Slab", Georgia, serif!important;font-weight:200!important;}
h1,h2,h3,h4,.brand,.nav a,.btn,.ff-title-inside,.ff-title-outside,.case-title,.project-card h3,.project-card__title{
  font-family:Impact, "Arial Black", system-ui, sans-serif!important;
  font-weight:900!important;
  letter-spacing:-.075em!important;
  text-transform:uppercase!important;
}
main{background:var(--ff-paper)!important;}

/* Header */
.header{
  position:fixed!important;top:0!important;left:0!important;right:0!important;height:5.8rem!important;
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  padding:1.55rem var(--wrapper-margin)!important;z-index:10080!important;
  mix-blend-mode:normal!important;pointer-events:none!important;background:transparent!important;
}
.header *{pointer-events:auto!important}
.brand{font-size:clamp(22px,1.25vw,28px)!important;line-height:.78!important;color:var(--ff-text)!important;text-decoration:none!important;letter-spacing:-.12em!important;}
.brand span{color:var(--ff-red)!important}
.nav,.header-actions{display:flex!important;align-items:center!important;gap:.7rem!important;}
.nav a:not(.btn),.header .btn,.menu-toggle,.contact-toggle,[data-menu-toggle],[data-contact-toggle]{
  border-radius:999px!important;border:0!important;padding:.67rem 1.22rem!important;
  font-family:Arial, sans-serif!important;font-size:.78rem!important;letter-spacing:.09em!important;font-weight:900!important;text-transform:uppercase!important;
  text-decoration:none!important;line-height:1!important;transition:transform .35s var(--ff-ease),background .35s var(--ff-ease),color .35s var(--ff-ease)!important;
}
.header .btn,.contact-toggle,[data-contact-toggle]{background:var(--ff-dark)!important;color:#fff!important;}
.menu-toggle,[data-menu-toggle]{background:#00c8b8!important;color:#111!important;}
.header .btn:hover,.menu-toggle:hover,[data-menu-toggle]:hover,[data-contact-toggle]:hover{transform:translateY(-2px)!important}

/* Fatfish-like loader */
.loader{background:#222!important;color:#fff!important;z-index:20000!important;}
.loader .loader-logo,.loader span{font-family:Impact,"Arial Black",sans-serif!important;letter-spacing:-.08em!important;text-transform:lowercase!important;}
.loader:after{
  content:"";position:absolute;left:22%;top:18%;height:64%;width:1px;background:#fff;
  animation:ffBlink .7s steps(2,start) infinite;
}
@keyframes ffBlink{to{visibility:hidden}}

/* Home intro: large expertise marquees */
.hero,.home-hero,.ff-home-intro{
  min-height:100svh!important;background:var(--ff-paper)!important;color:var(--ff-text)!important;overflow:hidden!important;
  display:flex!important;align-items:center!important;padding:8rem 0 6rem!important;
}
.hero .container,.home-hero .container{width:var(--wrapper-w)!important;max-width:none!important;margin:auto!important;}
.hero h1,.home-hero h1{
  font-size:clamp(62px,11.5vw,220px)!important;line-height:.84!important;letter-spacing:-.095em!important;margin:0!important;
}
.hero .outline,.stroke-word,.marquee-stroke{
  color:transparent!important;-webkit-text-stroke:1.2px rgba(34,34,34,.13)!important;
}
.hero p,.home-hero p{font-size:clamp(18px,1.4vw,26px)!important;line-height:1.28!important;max-width:620px!important;font-weight:200!important;margin-top:2rem!important}

/* Project list/cards — source-like inside/outside titles */
.projects,.project-section,#proyectos{
  background:var(--ff-paper)!important;color:var(--ff-text)!important;padding:8rem 0 10rem!important;
}
.projects-grid,.project-list,.cases-grid{
  display:grid!important;grid-template-columns:repeat(12,1fr)!important;gap:5rem 2rem!important;width:var(--wrapper-w)!important;margin:0 auto!important;
}
.project-card{
  min-height:clamp(420px,62vh,720px)!important;position:relative!important;display:block!important;overflow:visible!important;
  background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ff-text)!important;isolation:isolate!important;
}
.project-card:nth-child(odd){grid-column:2/span 6!important;}
.project-card:nth-child(even){grid-column:6/span 6!important;margin-top:7rem!important;}
.project-card.featured-project{grid-column:2/span 8!important;}
.project-card .visual,.project-card__image{
  position:absolute!important;inset:0!important;overflow:hidden!important;background:#222!important;border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)!important;box-shadow:none!important;transition:filter .45s var(--ff-ease),transform .55s var(--ff-ease)!important;
}
.project-card .visual:before,.project-card__image:before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.08) 50%,rgba(0,0,0,.28));z-index:2;pointer-events:none;
}
.project-card .visual img,.project-card__img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
.project-card:hover .visual{filter:brightness(.68) saturate(1.05)!important;transform:scale(1.012)!important;}
.project-card .project-meta,.project-card__infos{position:absolute!important;left:1.4rem!important;bottom:1.4rem!important;z-index:5!important;color:#fff!important;}
.project-card h3{font-size:clamp(44px,7.6vw,142px)!important;line-height:.78!important;}
.project-card__title,.project-card .project-meta h3{
  position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  width:max-content!important;max-width:88vw!important;z-index:7!important;font-size:var(--project-title-fs)!important;line-height:.82!important;
  color:transparent!important;-webkit-text-stroke:1.3px #fff!important;text-align:center!important;pointer-events:none!important;
}
.project-card__title--outside,.project-card .outside-title{
  z-index:3!important;-webkit-text-stroke:1.1px rgba(34,34,34,.55)!important;color:transparent!important;
}
.project-card .project-open,.project-card__link-overlay{
  position:absolute!important;inset:0!important;z-index:20!important;text-indent:-9999px!important;overflow:hidden!important;
}
.project-card .magnet-label{display:none!important;}

/* Cursor hover text */
.project-hover-title span{
  font-size:clamp(88px,12.5vw,220px)!important;line-height:.78!important;letter-spacing:-.085em!important;
  -webkit-text-stroke:1.3px rgba(255,255,255,.74)!important;color:transparent!important;
}
.project-follow-dot{background:var(--ff-red)!important;color:#fff!important;width:78px!important;height:78px!important;}

/* Fullscreen menu/contact */
.panel,.motion-menu,.contact-panel,[data-menu],[data-contact]{
  position:fixed!important;inset:0!important;z-index:10050!important;background:var(--ff-red)!important;color:#fff!important;
  transform:translateY(-105%)!important;transition:transform .82s var(--ff-ease)!important;overflow:hidden!important;
}
.panel.open,.motion-menu.open,.contact-panel.open,[data-menu].open,[data-contact].open{transform:translateY(0)!important;}
.panel:after,.motion-menu:after,.contact-panel:after{
  content:"";position:absolute;left:0;right:0;bottom:-7vw;height:12vw;background:var(--ff-red);border-radius:0 0 50% 50%;
}
.panel a,.motion-menu a{
  font-family:Impact,"Arial Black",sans-serif!important;font-size:clamp(56px,8vw,150px)!important;line-height:1.05!important;
  letter-spacing:-.075em!important;color:#fff!important;text-transform:uppercase!important;text-decoration:none!important;
}
.panel a:hover,.motion-menu a:hover{color:var(--ff-gold)!important;}
.contact-panel input,.contact-panel textarea,[data-contact] input,[data-contact] textarea{
  background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.35)!important;color:#fff!important;
  font-family:"Roboto Slab",Georgia,serif!important;font-size:clamp(18px,2.2vw,44px)!important;border-radius:0!important;
}
.contact-panel input::placeholder,.contact-panel textarea::placeholder{color:rgba(255,255,255,.55)!important}

/* Project hero — same geometry as final transition frame */
.case-hero.fatfish-flow-hero,.case-hero{
  min-height:100svh!important;background:var(--ff-paper)!important;padding:0!important;overflow:hidden!important;color:var(--ff-text)!important;position:relative!important;
}
.case-hero .container{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-height:100svh!important;position:relative!important;}
.case-title{
  position:absolute!important;left:var(--case-left)!important;top:var(--case-title-top)!important;width:var(--case-title-w)!important;
  font-size:var(--case-title-fs)!important;line-height:.78!important;letter-spacing:-.085em!important;color:#222!important;margin:0!important;
  animation:none!important;transform:none!important;clip-path:none!important;opacity:1!important;
}
.case-kicker{position:absolute!important;left:var(--case-left)!important;top:calc(var(--case-title-top) - 52px)!important;color:var(--ff-red)!important;font-size:11px!important;letter-spacing:.18em!important;font-weight:900!important;text-transform:uppercase!important;}
.case-text{position:absolute!important;left:var(--case-left)!important;top:var(--case-copy-top)!important;width:var(--case-copy-w)!important;font-size:clamp(17px,1.4vw,25px)!important;line-height:1.12!important;font-weight:200!important;color:#292724!important;}
.case-actions{position:absolute!important;left:var(--case-left)!important;top:var(--case-actions-top)!important;}
.case-asset{
  display:block!important;position:absolute!important;left:var(--case-asset-left)!important;top:var(--case-asset-top)!important;width:var(--case-asset-w)!important;height:var(--case-asset-h)!important;
  z-index:4!important;background-image:url('assets/img/imagina-motion-demo.jpg')!important;background-size:cover!important;background-position:center!important;
  clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important;filter:drop-shadow(0 32px 48px rgba(0,0,0,.16))!important;
}
.case-bg,.case-visual{display:none!important}

/* V30 transition overlay — closer to Fatfish source */
.ff-transition-scene.v30-source-exact{
  position:fixed!important;inset:0!important;z-index:9990!important;overflow:hidden!important;pointer-events:none!important;isolation:isolate!important;background:transparent!important;
}
.v30-source-exact .ff-stage{position:fixed!important;inset:0!important;background:#222!important;z-index:9991!important;opacity:0;}
.v30-source-exact .ff-project-inner{position:fixed!important;inset:0!important;display:grid!important;z-index:9992!important;visibility:hidden;}
.v30-source-exact .ff-project-text,.v30-source-exact .ff-project-image{grid-column:1/1!important;grid-row:1!important;}
.v30-source-exact .ff-project-text{position:fixed!important;inset:0!important;z-index:9993!important;background:var(--ff-paper)!important;clip-path:inset(0 100% 0 0);}
.v30-source-exact .ff-project-image{position:fixed!important;z-index:9995!important;overflow:hidden!important;background:#222!important;will-change:left,top,width,height,clip-path,transform,border-radius!important;}
.v30-source-exact .ff-img{position:absolute!important;inset:0!important;background-image:url('assets/img/imagina-motion-demo.jpg');background-size:cover!important;background-position:center!important;transform:scale(1.025);}
.v30-source-exact .ff-img:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.08) 50%,rgba(0,0,0,.32));z-index:1;}
.v30-source-exact .ff-title-inside-wrap{position:absolute!important;inset:0!important;z-index:3!important;}
.v30-source-exact .ff-title-inside,.v30-source-exact .ff-title-outside{
  position:fixed!important;font-family:Impact,"Arial Black",sans-serif!important;line-height:.78!important;letter-spacing:-.085em!important;text-transform:uppercase!important;
  white-space:normal!important;margin:0!important;will-change:left,top,width,font-size,color,transform,opacity!important;
}
.v30-source-exact .ff-title-inside{z-index:9998!important;}
.v30-source-exact .ff-title-outside{z-index:9994!important;color:#222!important;opacity:0;}
.v30-source-exact .ff-kicker,.v30-source-exact .ff-copy{
  position:fixed!important;z-index:9994!important;opacity:0;transform:translateY(12px);transition:opacity .28s var(--ff-ease-out),transform .28s var(--ff-ease-out)!important;
}
.v30-source-exact .ff-readable .ff-kicker,.v30-source-exact .ff-readable .ff-copy{opacity:1!important;transform:none!important;}
.v30-source-exact.ff-readable .ff-kicker,.v30-source-exact.ff-readable .ff-copy,.v30-source-exact.ff-final .ff-title-outside{opacity:1!important;transform:none!important;}
.v30-source-exact.ff-remove{opacity:1!important;transition:none!important;}
html.ff-source-ready .loader,html.ff-source-ready .route-enter,body.ff-running .loader,body.ff-running .route-enter{display:none!important;opacity:0!important;visibility:hidden!important;}
body.ff-running .header{opacity:1!important;visibility:visible!important;z-index:10080!important;mix-blend-mode:difference!important;}
body.ff-running main{pointer-events:none!important;}
body.ff-running .progress,body.ff-running .cursor{opacity:0!important;}

@media(max-width:900px){
  :root{
    --wrapper-margin:5vw;
    --case-left:7vw;
    --case-title-top:20vh;
    --case-title-fs:15.8vw;
    --case-title-w:86vw;
    --case-copy-top:48vh;
    --case-copy-w:84vw;
    --case-actions-top:72vh;
    --case-asset-left:52vw;
    --case-asset-top:55vh;
    --case-asset-w:40vw;
    --case-asset-h:40vw;
  }
  .projects-grid,.project-list,.cases-grid{display:block!important;width:90vw!important;}
  .project-card,.project-card:nth-child(odd),.project-card:nth-child(even),.project-card.featured-project{margin:0 0 5rem!important;min-height:420px!important;grid-column:auto!important;}
  .v30-source-exact .ff-copy{display:none!important}
}


/* =========================================================
   V31 FIXES AFTER VIDEO REVIEW
   Problems fixed:
   1) black empty stage during project transition
   2) preloader/route layer showing on project URL
   3) overlay title/image not visible early enough
   4) cache still serving older JS due old version
   ========================================================= */

/* No loader on project/direct or internal route. */
html.route-skip-loader .loader,
html.project-direct .loader,
html.project-direct .route-enter,
html.ff-source-ready .loader,
html.ff-source-ready .route-enter,
body.ff-running .loader,
body.ff-running .route-enter,
body.no-loader .loader{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.route-skip-loader body,
html.project-direct body{
  overflow:auto!important;
}

/* Cleaner first fold: less accidental overlap, more Fatfish-like marquee rhythm */
.hero-title{
  display:flex!important;
  flex-direction:column!important;
  gap:.02em!important;
}
.hero-title span{
  display:block!important;
}
.hero-title span:nth-child(2){
  margin-left:clamp(120px,22vw,420px)!important;
  color:transparent!important;
  -webkit-text-stroke:1.4px #222!important;
}
.hero-title span:nth-child(3){
  margin-left:clamp(210px,34vw,620px)!important;
}
.hero-side{
  max-width:440px!important;
  margin-left:auto!important;
}

/* Project cards: avoid the "small black box" feeling and keep all cards image based */
.project-card .visual,
.project-card__image{
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
}
.project-card .visual i{opacity:0!important}

/* V31 transition: project inner must be visible immediately.
   In the video, the black empty screen happened because the stage was visible
   while the image/text layer was still hidden or behind it. */
.ff-transition-scene.v31-fixed{
  position:fixed!important;
  inset:0!important;
  z-index:9990!important;
  overflow:hidden!important;
  pointer-events:none!important;
  isolation:isolate!important;
  background:transparent!important;
}
.v31-fixed .ff-stage{
  position:fixed!important;
  inset:0!important;
  z-index:9991!important;
  background:#222!important;
  opacity:0;
}
.v31-fixed .ff-project-inner{
  position:fixed!important;
  inset:0!important;
  z-index:9992!important;
  display:grid!important;
  visibility:visible!important;
}
.v31-fixed .ff-project-text,
.v31-fixed .ff-project-image{
  grid-column:1/1!important;
  grid-row:1!important;
}
.v31-fixed .ff-project-text{
  position:fixed!important;
  inset:0!important;
  z-index:9993!important;
  background:var(--ff-paper)!important;
  clip-path:inset(0 100% 0 0);
}
.v31-fixed .ff-project-image{
  position:fixed!important;
  z-index:9997!important;
  overflow:hidden!important;
  background:#222!important;
  will-change:left,top,width,height,clip-path,transform,border-radius!important;
  box-shadow:none!important;
}
.v31-fixed .ff-img{
  position:absolute!important;
  inset:0!important;
  background-image:url('assets/img/imagina-motion-demo.jpg');
  background-size:cover!important;
  background-position:center!important;
  transform:scale(1.03);
}
.v31-fixed .ff-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.50),rgba(0,0,0,.10) 50%,rgba(0,0,0,.34));
  z-index:1;
}
.v31-fixed .ff-title-inside-wrap{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
}
.v31-fixed .ff-title-inside,
.v31-fixed .ff-title-outside{
  position:fixed!important;
  font-family:Impact,"Arial Black",sans-serif!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  text-transform:uppercase!important;
  white-space:normal!important;
  margin:0!important;
  will-change:left,top,width,font-size,color,transform,opacity!important;
}
.v31-fixed .ff-title-inside{z-index:10002!important;}
.v31-fixed .ff-title-outside{z-index:9994!important;color:#222!important;opacity:0;}
.v31-fixed .ff-kicker,
.v31-fixed .ff-copy{
  position:fixed!important;
  z-index:9994!important;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .28s cubic-bezier(.19,1,.22,1),transform .28s cubic-bezier(.19,1,.22,1)!important;
}
.v31-fixed.ff-readable .ff-kicker,
.v31-fixed.ff-readable .ff-copy,
.v31-fixed.ff-final .ff-title-outside{
  opacity:1!important;
  transform:none!important;
}
.v31-fixed.ff-remove{opacity:1!important;transition:none!important;}

/* Keep header alive but not duplicated. */
body.ff-running .header{
  opacity:1!important;
  visibility:visible!important;
  z-index:10080!important;
  mix-blend-mode:difference!important;
}
body.ff-running main{pointer-events:none!important}
body.ff-running .progress,
body.ff-running .cursor{opacity:0!important}

/* Ensure final project equals overlay final frame. */
html.ff-source-ready .case-hero{
  background:var(--ff-paper)!important;
  min-height:100svh!important;
  overflow:hidden!important;
}
html.ff-source-ready .case-title,
html.ff-source-ready .case-kicker,
html.ff-source-ready .case-text,
html.ff-source-ready .case-actions,
html.ff-source-ready .case-asset{
  animation:none!important;
  transition:none!important;
  transform:none!important;
  opacity:1!important;
}
html.ff-source-ready .case-asset{
  background-image:url('assets/img/imagina-motion-demo.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  clip-path:polygon(7% 0,100% 8%,92% 100%,0 88%)!important;
}
@media(max-width:900px){
  .hero-title span:nth-child(2),.hero-title span:nth-child(3){margin-left:0!important}
  .v31-fixed .ff-copy{display:none!important}
}