:root{
  --navy:#09174A; --ink:#060F33; --paper:#F2F0EB; --orange:#FF6A1F; --blue:#2A45D6; --white:#fff;
  --m:clamp(18px,4vw,64px);
  --gap:clamp(72px,9vw,150px);
  --disp:'Space Grotesk','Inter',system-ui,sans-serif; --text:'Inter',system-ui,sans-serif;
}
/* Estética: todo con puntas rectas, igual que la letra y los chevrones del logo. Nada de círculos ni esquinas redondeadas (salvo las pantallas de los celulares). */
*{box-sizing:border-box;margin:0;border-radius:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--paper);color:var(--navy);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:var(--navy)}
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:700;letter-spacing:-.04em;line-height:.98}
h2{font-size:clamp(36px,6vw,104px)}
p{max-width:62ch}
.wrap{padding-inline:var(--m);max-width:1760px;margin-inline:auto}
.sec{padding-block:var(--gap)}
button{font:inherit;color:inherit}
.sh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m);align-items:end;padding-block:var(--gap) clamp(28px,4vw,56px)}
.sh p{font-size:clamp(16px,1.4vw,19px)}
@media(max-width:820px){.sh{grid-template-columns:1fr;gap:12px}}

/* logo */
.mk{width:34px;height:34px;flex:none}
.mk.big{width:clamp(72px,9vw,110px);height:auto}
.mk.xs{width:24px;height:24px}
.wm{font:700 21px/1 var(--disp);letter-spacing:-.04em}
.wm b{font-weight:500;opacity:.6;margin-left:.28em}

/* barra */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:clamp(16px,3vw,44px);padding:14px var(--m);color:var(--white);transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s}
.nav.solid{background:rgba(6,15,51,.94)}
.nav.hide{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.nav nav{display:flex;gap:clamp(14px,2.2vw,32px)}
.nav nav a{text-decoration:none;font-size:15px;font-weight:500;opacity:.85}
.nav nav a:hover{opacity:1;color:var(--orange)}
@media(max-width:900px){.nav nav{display:none}}
.lg .nav{position:static;background:var(--ink)}

.btn{display:inline-block;background:var(--orange);color:var(--navy);font:700 16px/1 var(--text);padding:19px 28px;text-decoration:none;border:0;cursor:pointer}
.btn.sm{padding:13px 18px;font-size:14px}
.btn.dark{background:var(--navy);color:var(--white)}
.link{font-weight:600;text-underline-offset:5px}
.acts{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center}

/* hero */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--white);display:flex;align-items:flex-end;overflow:hidden;padding:130px 0 clamp(40px,5vw,72px)}
.mesh{position:absolute;inset:0;width:100%;height:100%}
.grain{position:absolute;inset:0;opacity:.09;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.hw{position:relative;width:100%}
.hero h1{font-size:clamp(46px,9.2vw,184px);line-height:.9;letter-spacing:-.055em}
.ln{display:block;overflow:hidden;padding:.04em 0 .1em}
.ln>span{display:block}
.g{background:linear-gradient(90deg,#fff 0%,#ffd7bf 40%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hb{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--m);align-items:end;margin-top:clamp(20px,3vw,44px)}
.hb .sub{font-size:clamp(17px,1.5vw,21px);color:#d6dcf0}
.hb .acts{justify-self:end}
@media(max-width:820px){.hb{grid-template-columns:1fr}.hb .acts{justify-self:start}}
.scrollhint{position:absolute;right:var(--m);bottom:18px;display:none;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#c3cbe6}
.scrollhint i{width:2px;height:42px;background:linear-gradient(var(--orange),transparent)}
@media(min-width:900px){.scrollhint{display:flex}}

/* cintas: el separador es el logo (dos chevrones) */
.mq{overflow:hidden;background:var(--orange);color:var(--navy);padding-block:clamp(10px,1.4vw,20px)}
.mq>div{display:flex;width:max-content;font:700 clamp(34px,6vw,96px)/1 var(--disp);letter-spacing:-.045em;align-items:center}
.mq span{padding-inline:clamp(14px,2vw,30px);display:flex;align-items:center}
.mq span::after{content:"";display:block;width:.62em;height:.5em;margin-left:clamp(28px,4vw,56px);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 12 32 24'><polygon points='21,12 28,12 40,24 28,36 21,36 33,24' fill='white'/><polygon points='8,12 15,12 27,24 15,36 8,36 20,24' fill='%2309174A'/></svg>") center/contain no-repeat}
.mq.big{background:var(--ink);color:transparent}
.mq.big>div{-webkit-text-stroke:2px var(--orange);font-size:clamp(60px,12vw,200px)}
.mq.big span::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8 12 32 24'><polygon points='21,12 28,12 40,24 28,36 21,36 33,24' fill='white'/><polygon points='8,12 15,12 27,24 15,36 8,36 20,24' fill='%23FF6A1F'/></svg>")}

/* frase que se enciende */
.stm .words{font:700 clamp(28px,4.8vw,84px)/1.04 var(--disp);letter-spacing:-.045em;max-width:20em}
.pg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,72px)}
.pg>div{background:var(--white);padding:clamp(18px,2vw,28px);border-top:6px solid var(--orange)}
.pg h3{font-size:clamp(19px,1.8vw,26px);margin-bottom:10px;letter-spacing:-.03em}
.pg p{font-size:15px}
@media(max-width:900px){.pg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pg{grid-template-columns:1fr}}

/* antes / después */
.bas{background:var(--navy);color:var(--white)}
.pinbox{padding:var(--gap) 0}
.bag{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.bat{display:grid;gap:20px;align-content:center}
.bat h2{font-size:clamp(34px,4.6vw,80px)}
.sw{display:grid}
.sw>p{grid-area:1/1}
.st{font:700 clamp(20px,2vw,32px)/1.1 var(--disp);letter-spacing:-.03em;color:var(--orange)}
.bd{color:#d6dcf0;font-size:clamp(16px,1.4vw,20px)}
.s2,.d2{opacity:0}
.bat .btn{justify-self:start}
@media(max-width:900px){.bag{grid-template-columns:1fr}}
.ba{position:relative;isolation:isolate;--p:50%}
.ba::before{content:"";position:absolute;inset:20px -20px -20px 20px;background:var(--orange);z-index:-1}
.bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#e9e7e1;color:#444;font-size:12px}
.bar i{width:10px;height:10px;background:#bbb}
.bar span{margin-left:10px;background:#fff;padding:3px 12px;flex:1;max-width:260px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stagebox{position:relative;aspect-ratio:5/4;overflow:hidden;background:#fff}
.stagebox>div{position:absolute;inset:0}
.after{container-type:inline-size;display:flex;flex-direction:column}
.after .msite{flex:1;display:flex;flex-direction:column}
.after .m-hero{flex:1}
.before{background:#c9c9c9;font:12px/1.3 'Times New Roman',serif;color:#000;padding:8px;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ob{background:#00f;color:#ff0;font-weight:700;text-align:center;padding:6px;font-size:clamp(11px,1.3vw,15px)}
.om{background:#ff0;color:#a00000;font-weight:700;margin:5px 0;white-space:nowrap;overflow:hidden;padding:2px}
.om span{display:inline-block}
.before p{margin:5px 0;max-width:none;font-size:clamp(10px,1vw,13px)}
.orow{display:flex;gap:5px;margin-top:8px}.orow i{flex:1;height:clamp(30px,5vw,60px);background:#999}
.lab{position:absolute;top:12px;z-index:3;background:var(--ink);color:var(--white);font:600 12px var(--text);padding:5px 10px}
.l1{left:12px}.l2{right:12px}
.knob{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--orange);z-index:3;translate:-50% 0}
.knob::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;background:var(--orange);translate:-50% -50%;rotate:45deg;box-shadow:0 0 0 5px rgba(255,106,31,.3)}
.fx .bas{height:340svh}
.fx .pinbox{position:sticky;top:0;height:100svh;padding:90px 0 40px;display:flex;align-items:center;overflow:hidden}
.fx .bag{width:100%}
@media(max-width:900px){.fx .bas{height:auto}.fx .pinbox{position:static;height:auto;padding:var(--gap) 0}.fx .s2,.fx .d2{display:none}}

/* mini-webs, perfiles y anuncios de marcas ficticias (se escalan con el tamaño de su contenedor) */
.msite{background:var(--c3);color:var(--c1);font:500 2cqw/1.35 var(--text);width:100%}
.m-nav{display:flex;align-items:center;gap:3cqw;padding:2.2cqw 4cqw;background:var(--c1);color:var(--c3)}
.m-nav b{font:700 3cqw/1 var(--disp);letter-spacing:-.03em;margin-right:auto}
.m-nav span{font-size:1.8cqw;opacity:.85}
.m-nav em{font-style:normal;font:700 1.8cqw var(--text);background:var(--c0);color:var(--cb);padding:1.2cqw 2.2cqw}
.m-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3cqw;padding:5cqw 4cqw;align-items:center}
.m-ht h4{font:700 6.4cqw/.95 var(--disp);letter-spacing:-.05em;color:var(--c1);margin-bottom:2cqw}
.m-ht p{font-size:2.1cqw;max-width:34ch;margin-bottom:3cqw}
.m-ht em{font-style:normal;font:700 2cqw var(--text);background:var(--c0);color:var(--cb);padding:1.6cqw 3cqw;display:inline-block}
.m-ill{background:var(--c2);aspect-ratio:1;display:grid;place-items:center;padding:4cqw}
.m-ill svg{width:100%}
.m-sec{padding:5cqw 4cqw;background:var(--c1);color:var(--c3)}
.m-sec h5{font:700 4cqw var(--disp);margin-bottom:2.4cqw;letter-spacing:-.04em}
.m-sec ul{list-style:none;padding:0}
.m-sec li{display:flex;align-items:baseline;gap:1.5cqw;padding:1.4cqw 0;font-size:2.3cqw}
.m-sec li i{flex:1;border-bottom:.3cqw dotted rgba(255,255,255,.35)}
.m-sec li b{color:var(--c2)}
.m-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:5cqw 4cqw}
.m-feat div{background:var(--c2);padding:3cqw;display:grid;gap:2cqw;min-height:16cqw;align-content:space-between}
.m-feat i{width:4cqw;height:4cqw;background:var(--c0)}
.m-feat span{font:700 2.4cqw/1.1 var(--disp)}
.m-info{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:2cqw 4cqw 5cqw}
.m-info h5{font:700 2.6cqw var(--disp);margin-top:1.6cqw}
.m-info p{font-size:2.1cqw}
.m-map{background-color:var(--c2);background-image:repeating-linear-gradient(0deg,transparent 0 3cqw,rgba(0,0,0,.09) 3cqw 3.3cqw),repeating-linear-gradient(90deg,transparent 0 3cqw,rgba(0,0,0,.09) 3cqw 3.3cqw);min-height:18cqw;position:relative}
.m-map u{position:absolute;left:50%;top:45%;width:4cqw;height:4cqw;background:var(--c0);translate:-50% -50%;rotate:45deg}
.m-foot{display:flex;justify-content:space-between;padding:3cqw 4cqw;background:var(--c1);color:var(--c3);font-size:2cqw}
.m-foot b{font-family:var(--disp)}

.igp{background:#fff;color:#111;font:400 3.4cqw/1.3 var(--text);padding-bottom:4cqw}
.ig-top{display:flex;justify-content:space-between;align-items:center;padding:3cqw 4cqw;font:700 4cqw var(--text)}
.ig-top i{width:5cqw;height:5cqw;border:.7cqw solid #111}
.ig-head{display:flex;gap:6cqw;align-items:center;padding:2cqw 4cqw}
.ig-av{width:20cqw;height:20cqw;background:var(--c1);color:var(--c3);display:grid;place-items:center;font:700 10cqw var(--disp);flex:none}
.ig-st{display:flex;gap:4cqw;flex:1;justify-content:space-between}
.ig-st div{display:grid;text-align:center}
.ig-st b{font:700 4.2cqw var(--text)}.ig-st span{font-size:2.5cqw}
.ig-bio{display:grid;padding:2cqw 4cqw;font-size:3.2cqw}.ig-bio b{font-size:3.6cqw}
.ig-btn{display:flex;gap:2cqw;padding:2cqw 4cqw}
.ig-btn span{flex:1;text-align:center;padding:2cqw;background:#efefef;font:700 3.2cqw var(--text)}
.ig-btn span:first-child{background:#0866FF;color:#fff}
.ig-hl{display:flex;gap:4cqw;padding:3cqw 4cqw}
.ig-hl div{display:grid;gap:1cqw;justify-items:center;font-size:2.6cqw}
.ig-hl i{width:14cqw;height:14cqw;background:var(--c0)}.ig-hl i.c1{background:var(--c1)}.ig-hl i.c2{background:var(--c2)}.ig-hl i.c3{background:var(--c3);outline:.6cqw solid var(--c1)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5cqw}
.it{aspect-ratio:1;display:flex;align-items:flex-end;padding:2.6cqw;position:relative;overflow:hidden;font:700 5.6cqw/.95 var(--disp);letter-spacing:-.04em}
.it b{position:relative;z-index:1}
.it.c0{background:var(--c0);color:var(--cb)}.it.c1{background:var(--c1);color:var(--c3)}.it.c2{background:var(--c2);color:var(--c1)}.it.c3{background:var(--c3);color:var(--c1);box-shadow:inset 0 0 0 .6cqw var(--c2)}
.it.wi{display:flex}
.it svg{position:absolute;right:-5cqw;top:-3cqw;width:72%}

.adp{container-type:inline-size;background:#fff;color:#111;position:absolute;left:0;top:3%;width:66%;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.ad-h{display:flex;gap:3cqw;align-items:center;padding:3cqw}
.ad-h .ig-av{width:10cqw;height:10cqw;font-size:5cqw}
.ad-h b{display:block;font:700 4cqw var(--text)}.ad-h span{font-size:3cqw;opacity:.6}
.ad-c{position:relative;aspect-ratio:1;background:var(--c0);color:var(--cb);padding:6cqw;overflow:hidden}
.ad-t b{display:block;font:700 11cqw/.92 var(--disp);letter-spacing:-.05em;max-width:6em}
.ad-t span{display:inline-block;margin-top:3cqw;background:var(--c3);color:var(--c1);padding:1.4cqw 3cqw;font:700 3.4cqw var(--text)}
.ad-i{position:absolute;right:3cqw;bottom:2cqw;width:58%}
.ad-c u{position:absolute;left:6cqw;bottom:6cqw;background:var(--c2);color:var(--c1);padding:3cqw 4cqw;font:700 6cqw var(--disp);text-decoration:none}
.ad-b{display:flex;justify-content:space-between;align-items:center;background:#0866FF;color:#fff;padding:3.4cqw 4cqw;font:700 3.6cqw var(--text)}
.ad-b i{width:4cqw;height:4cqw;border:solid #fff;border-width:.8cqw .8cqw 0 0;rotate:45deg}

/* servicios apilados (precio incluido) */
.svs{background:var(--paper)}
.sp{position:relative;padding:clamp(56px,7vw,100px) 0}
.sp-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:center;transform-origin:50% 0}
.ix{display:flex;align-items:center;gap:10px}
.ix em{font:500 14px var(--disp);letter-spacing:.06em;opacity:.65;font-style:normal}
.spt{display:grid;gap:16px;align-content:center}
.spt small{font:600 14px var(--text);opacity:.75}
.spt h3{font-size:clamp(44px,7vw,124px);line-height:.9;letter-spacing:-.055em}
.spt>p{font-size:clamp(17px,1.5vw,21px)}
.spt ul{list-style:none;padding:0;display:grid;gap:8px;font-weight:500}
.spt li{padding-left:24px;position:relative}
.spt li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:12px;background:var(--orange);clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%)}
.pr{display:grid;gap:4px;margin-top:6px}
.pr b{font:700 clamp(38px,5.6vw,92px)/1 var(--disp);letter-spacing:-.055em}
.pr span{font-size:15px;opacity:.8;max-width:44ch}
.spt .btn{justify-self:start;margin-top:6px}
.spv{display:grid;place-items:center}
.s-marca{background:var(--orange);color:var(--navy)}
.s-marca .btn{background:var(--navy);color:var(--white)}
.s-marca li::before{background:var(--navy)}
.s-anuncios{background:var(--navy);color:var(--white)}
.s-webs{background:var(--paper)}
.s-redes{background:var(--ink);color:var(--white)}
.s-seo{background:var(--white)}
.s-3d{background:var(--blue);color:var(--white)}
.s-3d .btn{background:var(--white);color:var(--navy)}
.s-video{background:#E6E1D6}
.s-consultoria{background:var(--navy);color:var(--white)}
.sn{padding-block:clamp(28px,4vw,56px);background:var(--paper);max-width:none}
.sn p{max-width:72ch;font-size:15px;opacity:.8}
.fx .sp{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
.fx .sp-in{width:100%}
@media(max-width:900px){.fx .sp{position:relative;min-height:0}.sp-in{grid-template-columns:1fr}}

/* escenas de cada servicio */
.v{position:relative;width:min(100%,560px);aspect-ratio:1/1;display:grid;place-items:center}
.v-marca{container-type:inline-size;box-shadow:0 30px 60px rgba(6,15,51,.3);background:#fff}
.bb{width:100%;height:100%;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1.2fr .8fr;gap:2.4cqw;padding:2.4cqw;background:var(--c3)}
.bb>div{padding:3cqw;display:grid}
.bb-logo{background:var(--c1);color:var(--c3);place-items:center;align-content:center;gap:1.4cqw;text-align:center}
.bb-badge{width:22cqw;height:22cqw;background:var(--c0);color:var(--cb);display:grid;place-items:center;font:700 13cqw var(--disp)}
.bb-logo b{font:700 6cqw var(--disp);letter-spacing:-.04em}.bb-logo span{font-size:2.8cqw;opacity:.7}
.bb-sw{grid-template-columns:repeat(4,1fr);padding:0!important}
.bb-sw div{display:flex;align-items:flex-end;padding:1.4cqw}
.bb-sw span{font:600 1.7cqw var(--text);background:rgba(255,255,255,.88);color:#111;padding:.4cqw .8cqw}
.bb-type{background:var(--c2);color:var(--c1);align-content:space-between}
.bb-type b{font:700 20cqw/.85 var(--disp);letter-spacing:-.06em}.bb-type span{font-size:2.6cqw}
.bb-card{background:var(--c0);color:var(--cb);align-content:space-between;rotate:-3deg;box-shadow:0 2cqw 4cqw rgba(0,0,0,.25)}
.bb-card b{font:700 5.6cqw var(--disp);letter-spacing:-.04em}.bb-card span{font-size:2.6cqw}.bb-card i{font-style:normal;font-size:2.4cqw;opacity:.8}

.v-ads .bars{position:absolute;right:0;bottom:3%;width:28%;height:68%;display:flex;align-items:flex-end;gap:7%}
.bars span{flex:1;height:var(--h);background:var(--orange);transform-origin:bottom}
.bars span:nth-child(even){background:#fff}
.v-web{justify-items:stretch;aspect-ratio:5/4.4;background:#fff;overflow:hidden;color:#2b1608;align-content:start;grid-template-rows:auto 1fr;box-shadow:0 30px 60px rgba(6,15,51,.22)}
.v-web .scr{overflow:hidden;width:100%;height:100%;container-type:inline-size}
.v-web .roll,.v-phone .roll{will-change:transform}
.v-phone{width:min(54%,300px);aspect-ratio:9/18.5;background:#14181f;border-radius:30px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.v-phone .scr{height:100%;border-radius:23px;overflow:hidden;background:#fff;container-type:inline-size;width:100%}
.v-seo{aspect-ratio:auto;width:min(100%,540px);background:#fff;color:#1b1b1b;display:grid;gap:0;box-shadow:0 30px 60px rgba(6,15,51,.15);container-type:inline-size;padding:clamp(16px,2.6vw,30px)}
.g-bar{display:flex;gap:3cqw;align-items:center}
.g-bar b{font:700 5.4cqw var(--disp);letter-spacing:-.04em;color:#4285F4}
.sb{flex:1;border:2px solid #dfe1e5;padding:1.8cqw 2.6cqw;font-size:3.4cqw;display:flex;align-items:center;min-height:9cqw}
.sb u{width:2px;height:1.2em;background:var(--orange);margin-left:2px;text-decoration:none}
.g-map{height:24cqw;margin:3.5cqw 0;position:relative;background-color:#e6ecdd;background-image:repeating-linear-gradient(0deg,transparent 0 5cqw,rgba(0,0,0,.07) 5cqw 5.4cqw),repeating-linear-gradient(90deg,transparent 0 5cqw,rgba(0,0,0,.07) 5cqw 5.4cqw)}
.pin{position:absolute;left:46%;top:38%;width:5cqw;height:5cqw;background:var(--orange);rotate:45deg}
.pin.p2{left:20%;top:55%;background:#9aa0a6}.pin.p3{left:72%;top:22%;background:#9aa0a6}
.g-res{padding:2cqw 0}
.g-res i{font-style:normal;font-size:2.6cqw;color:#0F6B7A;font-weight:700}
.g-res b{display:block;font:700 4cqw var(--text);color:#1a0dab}
.g-res p{font-size:3cqw;max-width:none;color:#444}
.g-res.top{background:#FFF1E8;padding:2.6cqw 3cqw;border-left:1.2cqw solid var(--orange)}
.v-3d{perspective:1300px}
.x3{--s:clamp(220px,30vw,400px);position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(28deg)}
.ch{position:absolute;inset:0;transform-style:preserve-3d}
.ch i{position:absolute;inset:0;transform:translateZ(calc(var(--k)*4px - 44px));filter:brightness(calc(.5 + var(--k)*.024))}
.ch.front i{background:#FF6A1F;clip-path:polygon(16.7% 25%,31.3% 25%,56.3% 50%,31.3% 75%,16.7% 75%,41.7% 50%)}
.ch.back i{background:#fff;transform:translateZ(calc(var(--k)*4px - 92px));clip-path:polygon(43.8% 25%,58.3% 25%,83.3% 50%,58.3% 75%,43.8% 75%,68.8% 50%)}
.v-3d .sh{position:absolute;bottom:8%;width:50%;height:5%;background:rgba(0,0,0,.28);filter:blur(14px)}
.v-vid{aspect-ratio:auto;width:min(100%,540px);display:grid;gap:14px;align-content:center}
.mon{aspect-ratio:16/9;background:var(--navy);position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(6,15,51,.3)}
.mon svg{width:100%;height:100%}
.tl{position:relative;background:var(--white);padding:14px;display:grid;gap:8px;overflow:hidden}
.tr{display:flex;gap:6px;height:clamp(24px,3vw,36px)}
.tr span{width:var(--w);background:var(--c)}
.ph{position:absolute;top:0;bottom:0;left:6%;width:3px;background:var(--navy)}
.v-ck{width:min(100%,520px);aspect-ratio:auto;background:#fff;color:var(--navy);padding:clamp(20px,3vw,36px);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.v-ck ul{list-style:none;padding:0;display:grid;gap:clamp(14px,2vw,22px);width:100%}
.v-ck li{display:flex;gap:14px;align-items:center;font:700 clamp(17px,1.9vw,24px)/1.15 var(--disp);letter-spacing:-.03em}
.v-ck i{width:clamp(24px,2.6vw,32px);aspect-ratio:1;border:3px solid var(--navy);flex:none;position:relative}
.v-ck i::after{content:"";position:absolute;left:28%;top:10%;width:30%;height:56%;border:solid var(--navy);border-width:0 4px 4px 0;rotate:40deg;opacity:0}

/* trabajos: tira horizontal fijada */
.wks{background:var(--paper);padding-bottom:var(--gap)}
.hpin{overflow-x:auto;padding:0 0 16px}
.track{display:flex;gap:clamp(18px,3vw,48px);padding-inline:var(--m);width:max-content}
.wkc{width:clamp(300px,52vw,860px);flex:none;background:var(--white)}
.board{position:relative}

.bw{position:absolute;left:5%;top:9%;width:66%;background:#fff;box-shadow:0 24px 50px rgba(0,0,0,.28);z-index:1}
.bs{container-type:inline-size;height:clamp(200px,24vw,380px);overflow:hidden}
.bp{position:absolute;right:6%;top:6%;width:25%;aspect-ratio:9/18.5;background:#111;border:5px solid #111;border-radius:12px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.35);container-type:inline-size;z-index:2}
.wi{padding:18px 24px 24px;display:grid;gap:8px}
.wi h3{font:700 clamp(18px,1.6vw,24px) var(--disp);letter-spacing:-.03em}
.tg{display:flex;gap:6px;flex-wrap:wrap}
.tg span{font:600 12px var(--text);background:var(--paper);padding:4px 10px}
.wi p{font-size:13px;opacity:.65}
.fx .hs{height:var(--hh,320svh)}
.fx .hpin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;padding:0}
@media(max-width:820px){.fx .hs{height:auto}.fx .hpin{position:static;height:auto;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory}.wkc{width:84vw;scroll-snap-align:center}}

/* cómo trabajamos */
.how{background:var(--ink);color:var(--white)}
.how ol{list-style:none;padding:0;margin-top:clamp(32px,5vw,72px);display:grid;gap:clamp(28px,4vw,64px);position:relative}
.pline{position:absolute;left:clamp(34px,5vw,70px);top:0;bottom:0;width:3px;background:rgba(255,255,255,.14);display:none}
.pline::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleY(var(--lp,1));transform-origin:top}
.fx .pline{display:block}
.how li{display:grid;grid-template-columns:clamp(70px,10vw,150px) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:start;position:relative}
.how .n{font:700 clamp(64px,10vw,170px)/.82 var(--disp);color:var(--orange);letter-spacing:-.07em;background:var(--ink);position:relative;z-index:1}
.how li h3{font-size:clamp(26px,4vw,64px);margin-bottom:12px}
.how li p{font-size:clamp(16px,1.4vw,20px);color:#d6dcf0}
.how .more{margin-top:clamp(36px,5vw,72px);padding:clamp(22px,3vw,40px);background:var(--navy);display:flex;gap:clamp(16px,3vw,36px);align-items:flex-start;border-left:8px solid var(--orange)}
.how .more .mk{width:clamp(44px,5vw,72px);height:auto}
.how .more h3{font-size:clamp(22px,2.6vw,40px);margin-bottom:8px}
.how .more p{color:#d6dcf0}

/* preguntas */
.fg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--m);align-items:start}
.fg h2{position:sticky;top:100px}
.qs{display:grid;gap:10px}
.qs details{background:var(--white)}
.qs summary{cursor:pointer;list-style:none;padding:clamp(18px,2vw,26px);font:700 clamp(17px,1.8vw,24px)/1.2 var(--disp);letter-spacing:-.025em;display:flex;justify-content:space-between;gap:20px}
.qs summary::-webkit-details-marker{display:none}
.qs summary span{color:var(--orange);font-size:1.4em;line-height:1;transition:transform .25s}
.qs details[open] summary span{transform:rotate(45deg)}
.qs p{padding:0 clamp(18px,2vw,26px) clamp(18px,2vw,26px);font-size:16px}
@media(max-width:860px){.fg{grid-template-columns:1fr}.fg h2{position:static}}

/* cierre */
.close{background:var(--ink);color:var(--white);padding:clamp(40px,5vw,80px) 0 28px;overflow:hidden}
.cta{background:var(--orange);color:var(--navy);padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:end}
.cta h2{font-size:clamp(34px,5.4vw,92px)}
.cta p{margin-top:14px;font-size:clamp(16px,1.4vw,19px)}
.cta .acts{justify-self:end;flex-direction:column;align-items:flex-start}
@media(max-width:860px){.cta{grid-template-columns:1fr}.cta .acts{justify-self:start}}
.giant{font:700 clamp(60px,19vw,420px)/.8 var(--disp);letter-spacing:-.08em;color:var(--orange);white-space:nowrap;margin:clamp(36px,5vw,72px) 0 0;text-align:center;opacity:.95}
.meta{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:14px;padding-top:28px;color:#c3cbe6}
.meta p{max-width:none}

/* legales */
.legal{padding:48px var(--m) var(--gap);max-width:calc(72ch + 2 * var(--m))}
.legal h1{font-size:clamp(36px,5vw,72px);margin-bottom:24px}
.legal h2{font-size:clamp(22px,2.4vw,32px);margin:40px 0 12px;letter-spacing:-.02em}
.legal p,.legal li{margin-bottom:12px}
.legal ul{padding-left:22px}
.lg .close{padding:28px 0}

/* intro y cursor (solo con JS) */
.pre,.cur{display:none}
.fx .pre{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;color:var(--white)}
.pre .pin{display:grid;place-items:center;gap:18px;justify-items:center}
.cnt{font:700 clamp(44px,7vw,110px)/1 var(--disp);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.fx.mouse .cur{display:block;position:fixed;left:0;top:0;z-index:150;pointer-events:none}
.cur i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--orange)}
.cur em{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.9);mix-blend-mode:difference;display:grid;place-items:center;font:600 11px var(--text);font-style:normal;color:#fff;transition:width .25s,height .25s,left .25s,top .25s}
.cur.big em{width:92px;height:92px;left:-46px;top:-46px;background:var(--orange);border-color:var(--orange);mix-blend-mode:normal;color:var(--navy)}
.fx.mouse,.fx.mouse a,.fx.mouse button,.fx.mouse summary{cursor:none}

/* estados iniciales de las animaciones (solo si cargó GSAP) */
.fx .rv{opacity:0}
.fx .ln>span{visibility:hidden}
.fx .hb,.fx .scrollhint{opacity:0}
.fx .stm .w{opacity:.13}
.fx .pg>div{opacity:0}

@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq2{from{transform:translateX(0)}to{transform:translateX(-35%)}}
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(-62%)}}
@keyframes spin{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
@keyframes float{0%,100%{translate:0 -10px}50%{translate:0 10px}}
@keyframes playhead{from{left:6%}to{left:94%}}
@keyframes blink{50%{opacity:0}}
@keyframes tick{0%,10%{background:transparent}20%,100%{background:var(--orange)}}
@keyframes tickc{0%,12%{opacity:0}22%,100%{opacity:1}}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes grow{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
@keyframes la2{0%,8%{transform:translateX(-26px);opacity:0}22%,86%{transform:none;opacity:1}100%{opacity:0}}
@keyframes la1{0%,16%{transform:translateX(-26px);opacity:0}32%,86%{transform:none;opacity:1}100%{opacity:0}}
@keyframes ltx{0%,36%{opacity:0;transform:translateX(-10px)}50%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(prefers-reduced-motion:no-preference){
  .mq>div{animation:marq 48s linear infinite}
  .om span{animation:mq2 8s linear infinite alternate}
  .v-web .roll{animation:roll 16s ease-in-out infinite alternate}
  .v-phone .roll{animation:roll 24s ease-in-out infinite alternate}
  .x3{animation:spin 11s linear infinite}
  .v-3d{animation:float 5s ease-in-out infinite}
  .ph{animation:playhead 6s linear infinite}
  .mon .a2{animation:la2 6s cubic-bezier(.2,.7,.2,1) infinite}
  .mon .a1{animation:la1 6s cubic-bezier(.2,.7,.2,1) infinite}
  .mon .tx,.mon .tx2{animation:ltx 6s ease-out infinite}
  .sb u{animation:blink 1s steps(1) infinite}
  .v-ck li:nth-child(1) i{animation:tick 8s infinite}.v-ck li:nth-child(1) i::after{animation:tickc 8s infinite}
  .v-ck li:nth-child(2) i{animation:tick 8s 1.6s infinite both}.v-ck li:nth-child(2) i::after{animation:tickc 8s 1.6s infinite both}
  .v-ck li:nth-child(3) i{animation:tick 8s 3.2s infinite both}.v-ck li:nth-child(3) i::after{animation:tickc 8s 3.2s infinite both}
  .v-ck li:nth-child(4) i{animation:tick 8s 4.8s infinite both}.v-ck li:nth-child(4) i::after{animation:tickc 8s 4.8s infinite both}
  .sp.on .bars span{animation:grow 1.2s cubic-bezier(.2,.7,.2,1) both}
  .sp.on .bars span:nth-child(2){animation-delay:.1s}.sp.on .bars span:nth-child(3){animation-delay:.2s}.sp.on .bars span:nth-child(4){animation-delay:.3s}.sp.on .bars span:nth-child(5){animation-delay:.4s}.sp.on .bars span:nth-child(6){animation-delay:.5s}
  .sp.on .bb-logo,.sp.on .bb-card{animation:draw 1.2s cubic-bezier(.3,.7,.2,1) both}
  .scrollhint i{animation:hint 2s ease-in-out infinite}
}

.v-seo,.v-vid,.v-ck,.v-web{justify-items:stretch}
.v-seo{align-content:start}

.v-3d .sh{bottom:14%;height:3%;filter:blur(10px)}