:root{
  color-scheme:dark;
  --bg:#000; --fg:#fff; --fg2:#d6d9e2; --muted:#8c909b;
  --card:#0b0b10; --card2:#12121a; --card3:#1a1a24;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.18);
  --glass:rgba(14,14,20,.62);
  --blue:#2f6bff; --blue2:#6b9bff; --blueglow:rgba(47,107,255,.45);
  --btn-w-bg:#fff; --btn-w-fg:#000; --btn-d-bg:rgba(255,255,255,.08); --btn-d-fg:#fff;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-head:'Manrope',system-ui,sans-serif; --f-body:'Inter','Manrope',system-ui,sans-serif; --f-serif:'Instrument Serif',Georgia,serif;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#f5f6fa; --fg:#07070b; --fg2:#2a2d38; --muted:#5d6272;
  --card:#fff; --card2:#eceef5; --card3:#e1e4ee;
  --line:rgba(0,0,0,.1); --line2:rgba(0,0,0,.18);
  --glass:rgba(255,255,255,.7);
  --blue2:#1d54e6; --blueglow:rgba(47,107,255,.28);
  --btn-w-bg:#07070b; --btn-w-fg:#fff; --btn-d-bg:rgba(0,0,0,.07); --btn-d-fg:#07070b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-padding-top:100px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--f-body);font-weight:400;background:var(--bg);color:var(--fg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .6s var(--ease),color .6s var(--ease)}
h1,h2,h3,h4,.btn,.eyebrow,.tag,.nav__links a,.row__t,.price,.stats b,.foot__word,.loader__n,.statement{font-family:var(--f-head)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
em{font-style:normal}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--blue2)}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue);color:#fff}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.muted{color:var(--muted)}
.sec{padding:clamp(80px,11vw,150px) 0;position:relative}
.skip{position:fixed;left:16px;top:-60px;z-index:999;background:#fff;color:#000;padding:10px 16px;border-radius:99px;transition:top .3s}
.skip:focus{top:16px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* loader */
.loader{position:fixed;inset:0;z-index:500;background:var(--bg);color:var(--fg);display:grid;place-items:center;transition:transform 1.1s var(--ease) .1s}
.loader__mark{width:min(230px,56vw);height:auto;animation:lm 1.4s var(--ease) infinite alternate}
:root[data-theme=light] .loader__mark{filter:invert(1)}
@keyframes lm{from{opacity:.3;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.loader__n{position:absolute;right:28px;bottom:22px;font-weight:200;font-size:clamp(48px,9vw,110px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.loader.done{transform:translateY(-100%)}
.loader.gone{display:none}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:opacity .2s}
.cursor__ring{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.55);mix-blend-mode:difference;display:grid;place-items:center;transition:transform .45s var(--ease),background-color .3s,border-color .3s}
.cursor__ring b{font-weight:500;font-size:13px;color:#fff;opacity:0;transition:opacity .25s;white-space:nowrap}
.cursor.is-link .cursor__ring{transform:scale(1.6);background:rgba(255,255,255,.12)}
.cursor.is-view .cursor__ring{transform:scale(2.5);background:var(--blue);border-color:var(--blue);mix-blend-mode:normal}
.cursor.is-view .cursor__ring b{opacity:1;transform:scale(.4)}
.cursor.is-view .cursor__dot{opacity:0}
.cursor.is-text .cursor__ring{transform:scale(.2)}
@media (hover:hover) and (pointer:fine){.has-cursor,.has-cursor a,.has-cursor button{cursor:none}.has-cursor input,.has-cursor textarea{cursor:text}}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--blue);z-index:200}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .16em;margin:0 -.06em -.16em}
[data-split] .w>span{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;opacity:0;transition:transform 1.2s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--i)*70ms + .1s)}
[data-split].in .w>span{transform:none;opacity:1}

/* nav: floating pill */
.nav{position:fixed;inset:0 0 auto;z-index:100;display:flex;justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 16px 0;pointer-events:none}
.nav__pill{pointer-events:auto;display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding:8px 10px 8px 22px;border-radius:99px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--line);box-shadow:0 14px 40px -18px rgba(0,0,0,.6);transition:transform .6s var(--ease),background-color .4s}
.logo img{height:26px;width:auto}
:root[data-theme=light] .logo img,:root[data-theme=light] .foot__brand img{filter:invert(1)}
.nav__links{display:flex;gap:2px}
.nav__links a{position:relative;padding:8px 14px;border-radius:99px;font-size:14px;font-weight:500;overflow:hidden;display:inline-block;height:36px;line-height:20px;color:transparent;transition:background-color .3s}
.nav__links a::before,.nav__links a::after{content:attr(data-roll);display:block;transition:transform .55s var(--ease)}
.nav__links a::before{color:var(--muted)}
.nav__links a::after{position:absolute;left:14px;top:8px;transform:translateY(130%);color:var(--fg)}
.nav__links a:hover::before{transform:translateY(-130%)}
.nav__links a:hover::after{transform:none}
.nav__links a.active::before{color:var(--fg)}
.nav__links a.active{background:var(--btn-d-bg)}
.switch{width:46px;height:26px;border-radius:99px;background:var(--card3);position:relative;flex:none;transition:background-color .4s}
.switch__k{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--fg);transition:transform .5s var(--ease)}
:root[data-theme=light] .switch__k{transform:translateX(20px)}
.burger{display:none;width:42px;height:42px;border-radius:50%;background:var(--btn-d-bg);position:relative;flex:none}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:24px}
.burger[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;font-weight:500;font-size:15px;position:relative;overflow:hidden;isolation:isolate;transition:color .3s,background-color .4s}
.btn>span{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;will-change:transform;transition:transform .35s var(--ease)}
.btn--sm>span{padding:10px 22px;font-size:14px}
.btn svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--block{width:100%}
/* hover fill: a wide sheet with a curved top rises from below and ends well past every edge, so no corner is left uncovered */
.btn::after{content:"";position:absolute;left:-25%;top:100%;width:150%;height:230%;border-radius:50% 50% 0 0/38% 38% 0 0;transition:top .7s var(--ease);z-index:-1;pointer-events:none}
.btn:hover::after{top:-65%}
.btn--white{background:var(--btn-w-bg);color:var(--btn-w-fg)}.btn--white::after{background:var(--blue)}.btn--white:hover{color:#fff}
.btn--dark{background:var(--btn-d-bg);color:var(--btn-d-fg);box-shadow:0 0 0 1px var(--line) inset}.btn--dark::after{background:var(--fg)}.btn--dark:hover{color:var(--bg)}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 10px 36px -10px var(--blue)}.btn--blue::after{background:var(--fg)}.btn--blue:hover{color:var(--bg)}

/* hero */
.hero{position:relative;padding:clamp(120px,14vw,170px) 0 0;text-align:center;overflow:clip}
.hero__glow{position:absolute;left:50%;bottom:-34vw;width:130vw;height:56vw;transform:translateX(-50%);border-radius:50%;background:var(--blue);filter:blur(120px);opacity:.55;pointer-events:none}
:root[data-theme=light] .hero__glow{opacity:.28}
.hero__in{position:relative}
.tag{display:inline-block;padding:7px 16px;border-radius:99px;background:var(--btn-d-bg);box-shadow:0 0 0 1px var(--line) inset;font-size:13px;font-weight:500;color:var(--fg2);margin-bottom:26px}
.hero__title{font-size:clamp(40px,7.4vw,104px);line-height:1;letter-spacing:-.05em;font-weight:300;max-width:13ch;margin:0 auto 24px}
.hero__title .serif{font-size:1.06em;letter-spacing:-.03em}
.hero__sub{max-width:700px;margin:0 auto 36px;color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.65;letter-spacing:-.005em;text-wrap:balance}
.hero__sub strong{color:var(--fg,#fff);font-weight:500}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(50px,7vw,90px)}

/* shared mock bits (editor + gallery) */
.m-btn{display:inline-block;background:var(--blue);color:#fff;padding:.5em 1.4em;border-radius:99px;font-weight:500;width:max-content;font-family:var(--f-body)}
.m-btn--w{background:#fff;color:#000}
.m-photo{aspect-ratio:4/3;background:radial-gradient(circle at 30% 20%,#6b9bff,transparent 55%),#0b1a44}
.m-photo--b{background:radial-gradient(circle at 70% 80%,#9ec0ff,transparent 55%),#2f6bff}
.m-img{aspect-ratio:1.1;background:#e6e8ee;position:relative}
.m-t{display:grid;gap:.3em;align-content:start}
.m-t strong{font-weight:600}.m-t span{color:#555}
.m-t--fin{align-content:start;justify-items:center;text-align:center;gap:calc(var(--u)*1);padding:calc(var(--u)*1.6) calc(var(--u)*1) 0;border-radius:calc(var(--u)*1.6);background:linear-gradient(160deg,#5b8cff,#2f6bff 55%,#1f48c9);color:#fff;box-shadow:0 calc(var(--u)*1.6) calc(var(--u)*3) calc(var(--u)*-1.2) rgba(47,107,255,.6)}
.m-t--fin strong{color:#fff;font-size:1.05em;letter-spacing:-.02em}
.m-t--fin .chk{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);border-radius:50%;background:#fff;color:#2f6bff;display:grid;place-items:center}
.m-t--fin .chk svg{width:58%;height:58%}
.m-img em{position:absolute;left:.4em;top:.4em;font-style:normal;background:var(--blue);color:#fff;padding:.05em .5em;font-weight:600;font-size:.85em}

/* headings */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);margin-bottom:22px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--blue2)}
.h2{font-size:clamp(34px,5.2vw,72px);line-height:1.04;letter-spacing:-.045em;font-weight:300;max-width:18ch}
.h2 .serif{font-size:1.05em}
.sec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(40px,5vw,64px);flex-wrap:wrap}
.sec__head p{max-width:340px}
.sec__head--c{flex-direction:column;align-items:center;text-align:center}
.sec__head--c p{max-width:420px}
.sec__head--c .h2{margin-inline:auto}

/* intro */
.statement{font-size:clamp(26px,4vw,54px);line-height:1.2;letter-spacing:-.04em;font-weight:300;max-width:1000px}
.statement .sw{opacity:.18}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
.stats b{display:block;font-size:clamp(40px,6vw,84px);font-weight:200;letter-spacing:-.05em;line-height:1.05;font-variant-numeric:tabular-nums}
.stats span{font-size:15px;color:var(--muted)}

/* 3D gallery */
.gal{position:relative;height:520vh;background:var(--bg)}
.gal__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(47,107,255,.28),transparent 70%),var(--bg)}
.gal__swirl{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.gal__swirl path{fill:none;stroke:var(--blue);stroke-width:1.4;stroke-dasharray:12 22;opacity:.55;animation:swirl 26s linear infinite}
.gal__swirl path:nth-child(2){animation-duration:34s;animation-direction:reverse;opacity:.4}
.gal__swirl path:nth-child(3){animation-duration:30s;stroke:var(--blue2);opacity:.35}
.gal__swirl path:nth-child(4){animation-duration:40s;animation-direction:reverse}
@keyframes swirl{to{stroke-dashoffset:-680}}
.gal__title{position:absolute;left:0;right:0;top:13%;text-align:center;font-size:clamp(46px,9vw,150px);font-weight:300;letter-spacing:-.06em;line-height:1;z-index:0;pointer-events:none}
.gal__title .serif{font-size:1.04em}
.gal__scene{--w:clamp(250px,25vw,400px);position:relative;z-index:1;width:var(--w);height:calc(var(--w)*.8);perspective:1700px;margin-top:6vh}
.gal__ring{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-7deg) rotateY(var(--ry,0deg));will-change:transform}
.gcard{position:absolute;inset:0;transform:rotateY(calc(var(--i)*60deg)) translateZ(calc(var(--w)*1.12));backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 80px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12);opacity:var(--o,1);transition:box-shadow .5s,filter .5s}
.gcard:hover{box-shadow:0 30px 90px -20px var(--blue),0 0 0 2px var(--blue)}
.gcard .shot{container-type:inline-size;aspect-ratio:16/10;overflow:hidden;color:#0b0b0d}
.gcard__i{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:rgba(9,9,13,.9);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;transform:translateY(101%);transition:transform .6s var(--ease)}
.gcard:hover .gcard__i{transform:none}
.gcard__i h3{font-size:15px;font-weight:500;font-family:var(--f-head)}
.gcard__i span{font-size:12px;color:#9a9ea8}
.gal__hint{position:absolute;bottom:5vh;left:0;right:0;text-align:center;font-size:13px;color:var(--muted);z-index:2}
.m{font-size:2.2cqw;padding:3cqw;display:grid;gap:2.4cqw;align-content:start;height:100%}
.shot .m-h{display:flex;align-items:center;gap:2.4cqw;font-weight:500}
.shot .m-h b{font-weight:700;margin-right:auto}
.shot .m-h i{font-style:normal;background:var(--blue);color:#fff;padding:.7cqw 2cqw;border-radius:99px}
.m-dark .m-h{background:#0b0b0d;color:#fff;margin:-3cqw -3cqw 0;padding:2.2cqw 3cqw}
.shot .m-btn{padding:1cqw 2.6cqw}
.m-search{flex:1;background:#fff;color:#666;padding:.5cqw 1.4cqw;font-weight:400}
.m-banner{background:var(--blue);color:#fff;padding:2.6cqw 3cqw;font-size:4cqw;font-weight:300;letter-spacing:-.04em;font-family:var(--f-head)}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8cqw}
.m-grid--5{grid-template-columns:repeat(5,1fr)}
.m-grid--3{grid-template-columns:repeat(3,1fr)}
.m-big{font-size:6cqw;font-weight:300;letter-spacing:-.05em;line-height:1;margin-bottom:1.6cqw;font-family:var(--f-head)}
.m-big--xl{font-size:8.6cqw;margin:1cqw 0 0;max-width:10ch}
.m-small{color:#555;margin-bottom:2cqw;max-width:26ch}
.m-split{display:grid;grid-template-columns:1.1fr 1fr;gap:3cqw;align-items:center}
.m-chips{display:flex;gap:1.4cqw;flex-wrap:wrap}
.m-chip{background:#eef0f5;padding:.6cqw 1.8cqw;border-radius:99px}
.m-bar2{display:flex;gap:1.4cqw;align-items:center;background:#eef0f5;padding:1.4cqw 2cqw;font-weight:500}
.m-bar2 span{padding-right:1.4cqw}
.m-bar2 i{margin-left:auto;font-style:normal;background:var(--blue);color:#fff;padding:.7cqw 2cqw;border-radius:99px}
.m-rows div{display:flex;justify-content:space-between;padding:1.4cqw 2cqw;font-weight:500}
.m-rows div:nth-child(odd){background:#eef0f5}

/* services */
.list{border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(47,107,255,.18),transparent 70%);transform:translateX(-101%);transition:transform .8s var(--ease)}
.row.open::before,.row.glow::before{transform:none}
@media(hover:hover){.row:hover::before{transform:none}}
.row__btn{position:relative;width:100%;display:flex;align-items:center;gap:clamp(18px,4vw,60px);padding:clamp(22px,3vw,36px) 4px;text-align:left}
.row__n{font-size:14px;color:var(--muted);font-weight:500;width:28px;font-variant-numeric:tabular-nums;transition:color .4s}
.row__t{font-size:clamp(26px,4vw,56px);font-weight:300;letter-spacing:-.045em;line-height:1.1;transition:transform .7s var(--ease)}
.row__i{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);position:relative;flex:none;transition:background-color .4s,transform .7s var(--ease),border-color .4s}
.row__i::before,.row__i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%)}
.row__i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .6s var(--ease)}
.row.open .row__t,.row.glow .row__t{transform:translateX(14px)}
@media(hover:hover){.row:hover .row__t{transform:translateX(14px)}}
.row.open .row__n,.row.glow .row__n{color:var(--blue2)}
@media(hover:hover){.row:hover .row__n{color:var(--blue2)}}
.row.open .row__i{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.row.open .row__i::before,.row.open .row__i::after{background:#fff}
.row.open .row__i::after{transform:translate(-50%,-50%) rotate(0)}
.row__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.row.open .row__b{grid-template-rows:1fr}
.row__b>div{overflow:hidden;min-height:0;padding-left:calc(28px + clamp(18px,4vw,60px) + 14px)}
.row__b p{color:var(--fg2);max-width:540px;font-size:17px;padding-bottom:18px;opacity:0;transform:translateY(12px);transition:opacity .6s .1s,transform .7s var(--ease) .1s}
.tags{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:34px;opacity:0;transition:opacity .6s .2s}
.tags li{font-size:13px;padding:6px 14px;border:1px solid var(--line2);border-radius:99px;color:var(--fg2)}
.row.open .row__b p{opacity:1;transform:none}
.row.open .tags{opacity:1}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.bcard{position:relative;overflow:hidden;padding:clamp(24px,3vw,38px);border-radius:26px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:26px;min-height:380px;transition:border-color .4s,transform .6s var(--ease)}
.bcard:hover{border-color:rgba(107,155,255,.5);transform:translateY(-4px)}
.bcard--7{grid-column:span 7}.bcard--5{grid-column:span 5}
.bcard__t h3{font-size:clamp(22px,2.2vw,30px);font-weight:300;letter-spacing:-.03em;margin-bottom:8px}
.bcard__t p{color:var(--muted);max-width:34em;font-size:15.5px}
.brief{display:grid;gap:10px;margin-top:auto}
.brief li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;background:var(--card2);font-size:15px;color:var(--fg2);opacity:.45;transition:opacity .6s var(--ease),background-color .6s}
.brief i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);flex:none;position:relative;transition:background-color .5s,border-color .5s}
.brief i::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .4s var(--ease)}
.in .brief li{opacity:1}
.in .brief li i{background:var(--blue);border-color:var(--blue)}
.in .brief li i::after{transform:rotate(45deg) scale(1)}
.in .brief li:nth-child(1),.in .brief li:nth-child(1) i,.in .brief li:nth-child(1) i::after{transition-delay:.4s}
.in .brief li:nth-child(2),.in .brief li:nth-child(2) i,.in .brief li:nth-child(2) i::after{transition-delay:.8s}
.in .brief li:nth-child(3),.in .brief li:nth-child(3) i,.in .brief li:nth-child(3) i::after{transition-delay:1.2s}
.in .brief li:nth-child(4),.in .brief li:nth-child(4) i,.in .brief li:nth-child(4) i::after{transition-delay:1.6s}
.phone{margin:auto auto -10px;width:190px;height:240px;border-radius:30px 30px 0 0;border:6px solid #1c1c26;border-bottom:0;background:#fff;color:#0b0b0d;overflow:hidden;transition:transform .8s var(--ease)}
.bcard:hover .phone{transform:translateY(-10px)}
.phone__s{padding:16px 14px;display:grid;gap:10px;font-size:11px}
.phone__s b{font-size:12px}
.phone__h{font-size:20px;line-height:1.05;font-weight:300;letter-spacing:-.04em;font-family:var(--f-head)}
.phone .m-btn{font-size:11px}
.phone__g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone__g i{aspect-ratio:1.2;background:#e6e8ee}
.chart{display:flex;align-items:flex-end;gap:12px;height:190px;margin-top:auto}
.chart i{flex:1;height:var(--h);background:var(--card3);border-radius:8px 8px 0 0;transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.1s var(--ease),background-color .5s}
.in .chart i{transform:none;background:var(--blue)}
.in .chart i:nth-child(1){transition-delay:.1s}.in .chart i:nth-child(2){transition-delay:.18s}.in .chart i:nth-child(3){transition-delay:.26s}.in .chart i:nth-child(4){transition-delay:.34s}.in .chart i:nth-child(5){transition-delay:.42s}.in .chart i:nth-child(6){transition-delay:.5s}.in .chart i:nth-child(7){transition-delay:.58s}
.code{margin-top:auto;padding:20px 22px;border-radius:16px;background:#07070b;color:#cfd3df;font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-height:168px;overflow:hidden;white-space:pre}
.code code{font:inherit}
.code .t{color:#6b9bff}.code .a{color:#9ec0ff}.code .s{color:#8fd3a8}
.caret{display:inline-block;width:8px;height:1.1em;background:#6b9bff;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cms{margin-top:auto;border-radius:16px;background:var(--card2);overflow:hidden}
.cms li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:14px 18px;font-size:14.5px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.cms li:last-child{border-bottom:0}
.cms em{font-style:normal;color:var(--muted);font-size:13px}
.cms b{font-weight:500;font-size:12px;padding:3px 10px;border-radius:99px;background:rgba(47,107,255,.18);color:var(--blue2)}
.cms b.soon{background:var(--card3);color:var(--muted)}
.in .cms li{opacity:1;transform:none}
.in .cms li:nth-child(1){transition-delay:.2s}.in .cms li:nth-child(2){transition-delay:.35s}.in .cms li:nth-child(3){transition-delay:.5s}.in .cms li:nth-child(4){transition-delay:.65s}
.clock{width:min(100%,230px);margin:auto}
.clock__f{fill:#07070b;stroke:var(--line2);stroke-width:2}
:root[data-theme=light] .clock__f{fill:#fff}
#ticks line{stroke:var(--muted);stroke-width:1.5}
#ticks line.big{stroke:var(--fg);stroke-width:2.6}
.clock__h,.clock__m{stroke:var(--fg);stroke-width:5;transform-origin:100px 100px}
.clock__m{stroke-width:3.5}
.clock__s{stroke:var(--blue);stroke-width:1.8;transform-origin:100px 100px}
.clock__c{fill:var(--blue);stroke:none}

/* slider */
.ctrl{display:flex;align-items:center;gap:16px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ctrl button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line2);font-size:18px;transition:background-color .3s,color .3s,transform .4s var(--ease)}
.ctrl button:hover{background:var(--fg);color:var(--bg);transform:scale(1.08)}
.slider{display:grid;overflow:hidden;border-radius:30px}
.quote{grid-area:1/1;padding:clamp(32px,6vw,76px);border-radius:30px;background:var(--card);border:1px solid var(--line);opacity:0;transform:translateX(40px);visibility:hidden;transition:opacity .7s var(--ease),transform .9s var(--ease),visibility 0s .7s;position:relative;overflow:hidden}
.quote::before{content:"“";position:absolute;top:-40px;right:40px;font-size:320px;line-height:1;font-weight:200;font-family:var(--f-serif);color:rgba(47,107,255,.16)}
.quote.is-on{opacity:1;transform:none;visibility:visible;transition:opacity .7s var(--ease),transform .9s var(--ease),visibility 0s}
.quote.out{transform:translateX(-40px)}
.quote blockquote{font-size:clamp(22px,3vw,40px);line-height:1.3;letter-spacing:-.03em;font-weight:300;max-width:900px;margin-bottom:38px;position:relative;font-family:var(--f-head)}
.quote figcaption{display:flex;gap:14px;align-items:center}
.quote figcaption i{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:500}
.quote figcaption b{display:block;font-weight:500}
.quote figcaption span{color:var(--muted);font-size:14px}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc button{width:100%;display:flex;align-items:center;gap:22px;padding:26px 4px;text-align:left;font-family:var(--f-head);font-size:clamp(18px,2vw,23px);font-weight:300;letter-spacing:-.02em;transition:color .3s}
.acc button span{font-size:13px;color:var(--blue2);font-weight:500;width:24px}
.acc button:hover{color:var(--blue2)}
.acc button i{margin-left:auto;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line2);position:relative;transition:background-color .4s,transform .6s var(--ease)}
.acc button i::before,.acc button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%)}
.acc button i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .6s var(--ease)}
.acc button[aria-expanded=true] i{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.acc button[aria-expanded=true] i::before,.acc button[aria-expanded=true] i::after{background:#fff}
.acc button[aria-expanded=true] i::after{transform:translate(-50%,-50%) rotate(0)}
.acc__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.acc__b>div{overflow:hidden;min-height:0}
.acc__b p{padding:0 4px 28px 50px;color:var(--muted);max-width:620px}
.acc__i:has(button[aria-expanded=true]) .acc__b{grid-template-rows:1fr}

/* cta */
.cta__box{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:clamp(30px,6vw,80px);border-radius:36px;background:var(--card);border:1px solid var(--line2);overflow:hidden}
.cta__glow{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.75) 0%,rgba(47,107,255,.34) 38%,transparent 70%);top:-400px;left:-300px;pointer-events:none}   /* gradient instead of filter:blur, which leaves a hard edge on iOS inside overflow:hidden */
.cta__l,.form{position:relative}
.cta__l .muted{margin:20px 0 30px;max-width:420px}
.contact{display:grid;gap:16px}
.contact li{display:flex;gap:14px;align-items:center;color:var(--fg2)}
.contact svg{width:22px;height:22px;color:var(--blue2);flex:none}
.contact a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.form{display:grid;gap:16px;align-content:start;padding:30px;border-radius:24px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.form label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--fg2)}
.form input,.form textarea{width:100%;font:inherit;font-weight:400;color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;outline:0;resize:vertical;transition:border-color .3s,box-shadow .3s}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
.form input:focus,.form textarea:focus{border-color:var(--blue2);box-shadow:0 0 0 4px rgba(47,107,255,.22)}
.form .invalid{border-color:#ff6b6b}
.form__msg{font-size:14px;min-height:20px;text-align:center;color:var(--blue2)}

/* footer */
.foot{border-top:1px solid var(--line);padding:70px 0 0;overflow:hidden;background:var(--bg)}
.foot__in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:30px}
.foot__brand img{height:30px;width:auto;margin-bottom:18px}
.foot__brand p{color:var(--muted);max-width:300px;font-size:15px}
.foot h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue2);margin-bottom:18px;font-weight:500}
.foot__in a{display:block;color:var(--muted);margin-bottom:10px;font-size:15px;transition:color .3s,transform .4s var(--ease)}
.foot__in a:hover{color:var(--fg);transform:translateX(4px)}
.foot__in a.foot__ig{display:flex;align-items:center;gap:8px}
.foot__ig svg{width:1.15em;height:1.15em;flex:none}
.foot__word{font-size:clamp(120px,27vw,420px);font-weight:200;letter-spacing:-.07em;line-height:.8;text-align:center;padding:20px 0 0;margin-bottom:-.06em;user-select:none;color:transparent;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),var(--blue2),var(--line2) 55%);-webkit-background-clip:text;background-clip:text;transform:translateY(30%);opacity:0;transition:transform 1.6s var(--ease),opacity 1.6s var(--ease)}
.foot__word.in{transform:none;opacity:1}
.foot__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:14px;color:var(--muted);position:relative;background:var(--bg)}
.foot__bot a:hover{color:var(--fg)}

/* responsive */
@media(max-width:1000px){
  .faq,.cta__box,.tools__in{grid-template-columns:1fr;gap:44px}
  .foot__in{grid-template-columns:1fr 1fr}
  .bcard--7,.bcard--5{grid-column:span 12}
  .ed__body{grid-template-columns:150px 1fr}
  .ed__props{display:none}
}
@media(max-width:800px){
  .nav__links,.nav__cta{display:none}
  .burger{display:block}
  .nav__pill{width:100%;justify-content:space-between;padding-left:18px}
  .nav__links.open{display:flex;position:fixed;inset:calc(76px + env(safe-area-inset-top)) 16px auto;flex-direction:column;gap:0;padding:10px;border-radius:24px;background:var(--card);border:1px solid var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.45);z-index:5;overscroll-behavior:contain;pointer-events:auto}
  .nav__links.open a{height:auto;line-height:1.4;padding:14px 16px;font-size:17px;color:var(--fg)}
  .nav__links.open a::before,.nav__links.open a::after{display:none}
  .ed__body{grid-template-columns:1fr;height:auto}
  .ed__layers{display:none}
  .ed__canvas{height:420px}
  .ed__avs,.ed__zoom{display:none}
  .ed__dev{margin-inline:0 auto}
  /* gallery: simple vertical list on small screens */
  .gal{height:auto;padding:90px 0}
  .gal__pin{position:static;height:auto;display:block;background:none;padding:0 16px}
  .gal__swirl,.gal__hint{display:none}
  .gal__title{position:static;font-size:clamp(46px,14vw,80px);margin-bottom:34px;text-align:left}
  .gal__scene{width:auto;height:auto;perspective:none;margin-top:0}
  .gal__ring{position:static;transform:none!important;display:grid;gap:22px}
  .gcard{position:relative;transform:none;opacity:1!important;backface-visibility:visible}
  .gcard__i{position:static;transform:none}
  .plans{grid-template-columns:1fr}
  .stats{gap:10px}.stats b{font-size:34px}.stats span{font-size:12px}
  .row__b>div{padding-left:4px}
  .acc button{font-size:17px}.acc__b p{padding-left:4px}
  .foot__in{grid-template-columns:1fr}
  .tools__g li{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,[data-split] .w>span,.foot__word{opacity:1;transform:none}
  .statement .sw{opacity:1}
  .chart i{transform:none}.cms li,.brief li{opacity:1;transform:none}
}

/* marquee base */
.marq{border-block:1px solid var(--line);overflow:hidden;background:var(--bg)}
.marq__track{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq__row{display:flex;width:max-content;will-change:transform}
.marq__row span{font-weight:200;letter-spacing:-.04em;line-height:1.1;white-space:nowrap;display:flex;align-items:center;padding-right:40px;gap:40px}
.marq__row span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
/* ===== v4: hero page, marquee, business section, pricing, gallery ===== */
:root{--stroke:rgba(255,255,255,.35)}
:root[data-theme=light]{--stroke:rgba(0,0,0,.4)}

/* hero stage: example page in a browser */
.stage{position:relative;max-width:1060px;margin-inline:auto;perspective:1600px}
.browser{--rx:16deg;--sc:.92;border-radius:18px;overflow:hidden;background:#09090d;box-shadow:0 0 0 1px rgba(47,107,255,.28),0 -10px 90px -10px var(--blueglow);transform:rotateX(var(--rx)) scale(var(--sc));transform-origin:50% 100%;will-change:transform;text-align:left}
.bbar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.bbar i{width:10px;height:10px;border-radius:50%;background:#2c2c3a}
.bbar span{margin:0 auto;font-size:12px;color:#8c909b;background:rgba(255,255,255,.06);padding:4px 40px;border-radius:99px}
.pg{container-type:inline-size;background:#fff;color:#0b0b0d;max-height:clamp(330px,40vw,520px);overflow:hidden}
.site{--u:1cqw;font-size:calc(var(--u)*1.5);line-height:1.35;position:relative}
.s-nav{display:flex;align-items:center;gap:calc(var(--u)*2.4);padding:calc(var(--u)*2) calc(var(--u)*3);font-weight:500}
.s-nav b{font-weight:700;margin-right:auto}
.s-nav i{font-style:normal;background:var(--blue);color:#fff;padding:calc(var(--u)*.6) calc(var(--u)*1.8);border-radius:99px}
.s-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(var(--u)*3);align-items:center;padding:calc(var(--u)*4) calc(var(--u)*3)}
.s-big{font-size:calc(var(--u)*5.2);line-height:1;letter-spacing:-.05em;font-weight:300;margin-bottom:calc(var(--u)*1.6);font-family:var(--f-head)}
.s-p{color:#555;margin-bottom:calc(var(--u)*2);max-width:30ch}
.s-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2);padding:calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*4)}
.s-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*1.2);padding:calc(var(--u)*2) calc(var(--u)*3)}
.s-strip .m-img{aspect-ratio:1}
.float{position:absolute;padding:14px 18px;border-radius:16px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:0 24px 50px -18px rgba(0,0,0,.7);z-index:2;will-change:transform;text-align:left}
.float small{display:block;font-size:12px;color:var(--muted)}
.float b{font-size:24px;font-weight:300;letter-spacing:-.02em;font-family:var(--f-head)}
.float b span{font-size:13px;color:var(--muted)}
.float strong{display:block;font-size:15px;font-weight:500}
.float--a{left:-40px;top:20%;min-width:170px}
.float--b{right:-36px;top:10%;display:flex;gap:12px;align-items:center}
.float--b .ic{width:36px;height:36px;border-radius:10px;background:rgba(47,107,255,.2);color:var(--blue2);display:grid;place-items:center}
.float--c{right:7%;bottom:-28px;min-width:190px}
.bar{height:4px;border-radius:9px;background:var(--line2);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--blue2);border-radius:9px;transition:transform 1.8s 1s var(--ease)}
.in .bar i{transform:scaleX(var(--s))}
.spark{width:100%;height:34px;margin-top:6px;stroke:var(--blue2);stroke-width:2;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 2.2s 1.2s var(--ease)}
.in .spark{stroke-dashoffset:0}

/* marquee: business types */
.marq{padding:34px 0 10px}
.marq__lbl{text-align:center;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.marq__track{padding-bottom:26px}
.marq__row span{font-size:clamp(34px,5vw,64px);color:transparent;-webkit-text-stroke:1px var(--stroke);transition:color .4s,-webkit-text-stroke-color .4s}
.marq__row span:hover{color:var(--fg);-webkit-text-stroke-color:var(--fg)}

/* business section */
.biz__grid{display:grid;grid-template-columns:.75fr 1.6fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.biz__tabs{display:grid;gap:4px;align-content:start}
.biz__tabs button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-radius:16px;font-family:var(--f-head);font-size:clamp(18px,1.8vw,24px);font-weight:300;letter-spacing:-.03em;text-align:left;color:var(--muted);transition:background-color .4s,color .4s,transform .5s var(--ease)}
.biz__tabs button::after{content:"→";opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ease)}
.biz__tabs button:hover{color:var(--fg)}
.biz__tabs button[aria-selected=true]{background:var(--blue);color:#fff;transform:translateX(6px)}
.biz__tabs button[aria-selected=true]::after{opacity:1;transform:none}
.biz__panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,3vw,40px);padding:clamp(24px,3.4vw,48px);border-radius:28px;background:var(--card);border:1px solid var(--line);min-height:470px}
.biz__panel::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:var(--blue);filter:blur(120px);opacity:.26;right:-140px;top:-160px;pointer-events:none}
.biz__t,.biz__vis{position:relative}
.biz__t h3{font-size:clamp(28px,3.2vw,46px);line-height:1.04;letter-spacing:-.045em;font-weight:300;margin-bottom:14px}
.biz__t p{color:var(--muted);margin-bottom:22px;max-width:30em}
.biz__t ul{display:grid;gap:12px;margin-bottom:28px}
.biz__t li{display:flex;gap:12px;color:var(--fg2);font-size:15.5px}
.biz__t li::before,.pcard li::before,.speed li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;background:rgba(47,107,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b9bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:2px}
.biz__vis{align-self:center}
.browser--s{--rx:0deg;--sc:1;transform:none;box-shadow:0 30px 70px -26px #000,0 0 0 1px rgba(255,255,255,.1)}
.pg--s{max-height:none;aspect-ratio:4/3.2}
.site--s{--u:1.5cqw}
.biz__t>*,.biz__vis{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.biz__panel.swap .biz__t>*,.biz__panel.swap .biz__vis{opacity:0;transform:translateY(12px)}

/* pricing */
.pricing{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:stretch}
.pcard{position:relative;overflow:hidden;border-radius:30px;padding:clamp(28px,4vw,52px);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:18px}
.pcard>*{position:relative}
.pcard h3{font-size:clamp(24px,2.6vw,36px);font-weight:300;letter-spacing:-.04em;line-height:1.05}
.pcard--main{background:linear-gradient(160deg,rgba(47,107,255,.22),transparent 55%),var(--card);border-color:rgba(107,155,255,.45)}
.pcard__glow{position:absolute!important;width:520px;height:520px;border-radius:50%;background:var(--blue);filter:blur(130px);opacity:.3;top:-260px;right:-160px;pointer-events:none}
.pcard__tag{align-self:flex-start;padding:6px 14px;border-radius:99px;background:var(--blue);color:#fff;font-size:12px;font-weight:500}
.pcard__tag--alt{background:var(--btn-d-bg);color:var(--fg2);box-shadow:0 0 0 1px var(--line) inset}
.pcard__price{display:flex;align-items:flex-end;gap:clamp(14px,3vw,34px);flex-wrap:wrap;margin-top:6px}
.pp small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.pp__n{display:flex;align-items:baseline;gap:4px;font-family:var(--f-head)}
.pp__n b{font-size:clamp(64px,8vw,116px);font-weight:200;letter-spacing:-.06em;line-height:.95;font-variant-numeric:tabular-nums}
.pp__n span{font-size:clamp(26px,3vw,40px);font-weight:300}
.pp em{font-style:normal;font-size:14px;color:var(--muted)}
.pp__plus{font-style:normal;font-size:clamp(32px,4vw,52px);font-weight:200;color:var(--blue2);padding-bottom:28px}
.pcard__total{font-size:15px;color:var(--fg2);padding:12px 16px;border-radius:14px;background:var(--btn-d-bg);width:fit-content}
.pcard__total b{font-family:var(--f-head);font-weight:500}
.pcard__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);margin-top:6px;padding-top:22px}
.pcard__cols h4{font-size:13px;font-weight:500;color:var(--blue2);margin-bottom:12px;letter-spacing:.04em}
.pcard ul{display:grid;gap:10px}
.pcard li{display:flex;gap:10px;color:var(--fg2);font-size:15px}
.pcard--main>.btn{align-self:flex-start;margin-top:6px}
.pcard--alt{background:var(--card2)}
.alt__p{font-family:var(--f-head);font-size:clamp(26px,2.8vw,38px);font-weight:300;letter-spacing:-.04em;line-height:1.1}
.pcard--alt ul{flex:1;margin-bottom:6px}
.assure{display:flex;justify-content:center;gap:12px 34px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:14px}
.assure li{display:flex;align-items:center;gap:8px}
.assure li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* bento: speed card */
.speed{display:flex;align-items:center;gap:clamp(18px,3vw,36px);margin-top:auto;flex-wrap:wrap}
.speed__g{position:relative;width:150px;height:150px;flex:none}
.gauge{width:100%;height:100%;transform:rotate(-90deg)}
.g-bg{fill:none;stroke:var(--card3);stroke-width:9}
.g-fg{fill:none;stroke:var(--blue);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2s .3s var(--ease)}
.in .g-fg{stroke-dashoffset:2}
.speed__g b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-head);font-weight:200;font-size:46px;letter-spacing:-.05em}
.speed ul{display:grid;gap:12px}
.speed li{display:flex;gap:10px;color:var(--fg2);font-size:15px}

/* 3D gallery v2 */
.gal__scene{--w:clamp(300px,31vw,520px);height:calc(var(--w)*.64);margin-top:1vh}
.gcard{transform:rotateY(calc(var(--i)*60deg)) translateZ(calc(var(--w)*1.08)) translateY(var(--y,0px)) scale(var(--s,1));filter:blur(var(--b,0px));will-change:transform,filter}
.gcard__i{display:none}
.gal__floor{position:absolute;left:50%;bottom:7%;width:70vw;max-width:1100px;height:16vw;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(47,107,255,.4),transparent 65%);filter:blur(22px);pointer-events:none}
.gal__info{position:absolute;left:50%;transform:translateX(-50%);bottom:9vh;z-index:3;display:flex;align-items:center;gap:22px;padding:10px 12px 10px 22px;border-radius:99px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);white-space:nowrap}
.gal__n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.gal__txt{transition:opacity .35s,transform .45s var(--ease)}
.gal__txt h3{font-family:var(--f-head);font-size:17px;font-weight:500;line-height:1.2}
.gal__txt span{font-size:13px;color:var(--muted)}
.gal__txt.swap{opacity:0;transform:translateY(6px)}
.gal__hint{bottom:3.2vh}
@media(max-width:1000px){.pricing{grid-template-columns:1fr}.biz__grid{grid-template-columns:1fr}.biz__tabs{grid-template-columns:repeat(2,1fr)}.biz__panel{grid-template-columns:1fr}}
@media(max-width:800px){
  .gcard{transform:none!important;filter:none!important}
  .gcard__i{display:flex}
  .gal__info,.gal__floor{display:none}
  .float--a,.float--b{display:none}
  .float--c{right:12px}
  .pcard__cols{grid-template-columns:1fr}
  .site .s-nav span{display:none}
  .s-hero{grid-template-columns:1fr}.s-hero .m-photo{display:none}
  .biz__tabs{grid-template-columns:1fr 1fr}
}


/* ===== v5: livelier hero ===== */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero__dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--line2) 1px,transparent 1.3px);background-size:34px 34px;mask-image:radial-gradient(ellipse 65% 55% at 50% 38%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 38%,#000 20%,transparent 75%);opacity:.7;animation:dots 14s linear infinite}
@keyframes dots{to{background-position:34px 34px}}
.tag{display:inline-flex;align-items:center;gap:10px}
.tag--clock{background:var(--card2);box-shadow:0 0 0 1px var(--line) inset}
.tag--clock b{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--fg)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue2);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(107,155,255,0)}0%{box-shadow:0 0 0 0 rgba(107,155,255,.6)}100%{box-shadow:0 0 0 0 rgba(107,155,255,0)}}
.hero__title .serif{background:linear-gradient(100deg,var(--blue2) 30%,var(--fg) 50%,var(--blue2) 70%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-130% 0}}

/* stage */
.stage::before{content:"";position:absolute;left:8%;right:8%;top:10%;bottom:-6%;border-radius:50%;background:var(--blue);filter:blur(110px);opacity:.38;z-index:-1;animation:glowPulse 7s ease-in-out infinite alternate}
@keyframes glowPulse{to{opacity:.6;transform:scale(1.08)}}
.stage::after{content:"";position:absolute;left:-3%;right:-3%;bottom:0;height:32%;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;z-index:1}
.browser{border:1px solid transparent;background:linear-gradient(#09090d,#09090d) padding-box,conic-gradient(from var(--ang),rgba(255,255,255,.1) 0 55%,rgba(107,155,255,1) 80%,rgba(255,255,255,.1) 100%) border-box;transform:rotateX(calc(var(--rx) + var(--rxo,0deg))) rotateY(var(--ry,0deg)) scale(var(--sc));animation:beam 7s linear infinite}
@keyframes beam{to{--ang:360deg}}
.browser--s{animation:none;background:#09090d;border-color:rgba(255,255,255,.1);transform:none}
.pg{max-height:clamp(360px,42vw,560px)}

/* live page content */
.site--live .m-img{overflow:hidden}
.site--live .m-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 30%,rgba(255,255,255,.55),transparent 46%)}
.g1{background:linear-gradient(135deg,#1e3a8a,#60a5fa)!important}
.g2{background:linear-gradient(135deg,#0f172a,#475569)!important}
.g3{background:linear-gradient(135deg,#3730a3,#a5b4fc)!important}
.m-photo--live{position:relative;overflow:hidden;background:#0b1a44;aspect-ratio:4/3}
.m-photo--live b{position:absolute;border-radius:50%;filter:blur(calc(var(--u)*2.4))}
.m-photo--live b:nth-child(1){width:62%;aspect-ratio:1;left:-6%;top:-10%;background:#6b9bff;animation:drift1 9s ease-in-out infinite alternate}
.m-photo--live b:nth-child(2){width:58%;aspect-ratio:1;right:-8%;bottom:-14%;background:#2f6bff;animation:drift2 11s ease-in-out infinite alternate}
.m-photo--live b:nth-child(3){width:34%;aspect-ratio:1;left:38%;top:30%;background:#a5b4fc;opacity:.8;animation:drift3 8s ease-in-out infinite alternate}
.m-photo--live::after{content:"";position:absolute;left:10%;bottom:12%;width:48%;height:28%;border-radius:calc(var(--u)*1);background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:photoFloat 6s ease-in-out infinite}
@keyframes drift1{to{transform:translate(28%,24%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-24%,-20%) scale(.9)}}
@keyframes drift3{to{transform:translate(-30%,34%) scale(1.25)}}
@keyframes photoFloat{50%{transform:translateY(calc(var(--u)*-1.6))}}


/* ===== v6: clean marquee, 3D scenes, bento animations, optional maintenance ===== */
:root{--marq:rgba(255,255,255,.3)}
:root[data-theme=light]{--marq:rgba(0,0,0,.32)}
.marq__row span{color:var(--marq);-webkit-text-stroke:0}
.marq__row span:hover{color:var(--fg);-webkit-text-stroke:0}
.marq__track--b{padding-bottom:4px;margin-top:2px}
.marq__track--b .marq__row span{font-size:clamp(14px,1.5vw,18px);font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);gap:30px;padding-right:30px}
.marq__track--b .marq__row span::after{width:5px;height:5px;background:var(--blue2)}
.marq__track--b .marq__row span:hover{color:var(--fg)}

/* 3D scenes (replace flat colour blocks) */
.m-photo--3d{position:relative;overflow:hidden;aspect-ratio:4/3;background:radial-gradient(circle at 50% 58%,#1a3a8f 0%,#0a1233 55%,#05070f 100%);perspective:calc(var(--u)*48)}
.m-photo--3d::before{content:"";position:absolute;left:14%;right:14%;bottom:8%;height:11%;border-radius:50%;background:radial-gradient(ellipse,rgba(107,155,255,.6),transparent 70%);filter:blur(calc(var(--u)*.8))}
.sc3{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-16deg);display:grid;place-items:center}
.core{position:absolute;left:50%;top:50%;width:calc(var(--u)*7);height:calc(var(--u)*7);margin:calc(var(--u)*-3.5) 0 0 calc(var(--u)*-3.5);border-radius:50%;background:radial-gradient(circle,#fff 0%,#7aa2ff 38%,transparent 70%);animation:corePulse 3s ease-in-out infinite alternate}
@keyframes corePulse{from{transform:scale(.8);opacity:.7}to{transform:scale(1.25);opacity:1}}
.cube{--S:calc(var(--u)*10);position:relative;width:var(--S);height:var(--S);transform-style:preserve-3d;animation:cubeSpin 14s linear infinite}
.cube .f{position:absolute;inset:0;border:1px solid rgba(190,210,255,.75);background:linear-gradient(135deg,rgba(107,155,255,.42),rgba(47,107,255,.1));box-shadow:inset 0 0 calc(var(--u)*2.2) rgba(107,155,255,.55)}
.cube .f1{transform:translateZ(calc(var(--S)/2))}
.cube .f2{transform:rotateY(180deg) translateZ(calc(var(--S)/2))}
.cube .f3{transform:rotateY(90deg) translateZ(calc(var(--S)/2))}
.cube .f4{transform:rotateY(-90deg) translateZ(calc(var(--S)/2))}
.cube .f5{transform:rotateX(90deg) translateZ(calc(var(--S)/2))}
.cube .f6{transform:rotateX(-90deg) translateZ(calc(var(--S)/2))}
@keyframes cubeSpin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
.ring{position:absolute;left:50%;top:50%;width:calc(var(--u)*22);height:calc(var(--u)*22);margin:calc(var(--u)*-11) 0 0 calc(var(--u)*-11);border-radius:50%;border:1px solid rgba(165,190,255,.5);transform-style:preserve-3d}
.ring::before{content:"";position:absolute;left:50%;top:0;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);margin:calc(var(--u)*-.55) 0 0 calc(var(--u)*-.55);border-radius:50%;background:#fff;box-shadow:0 0 calc(var(--u)*1.6) #8fb2ff}
.ring1{animation:ring1 9s linear infinite}
.ring2{width:calc(var(--u)*17);height:calc(var(--u)*17);margin:calc(var(--u)*-8.5) 0 0 calc(var(--u)*-8.5);animation:ring2 7s linear infinite reverse}
@keyframes ring1{from{transform:rotateX(74deg) rotateZ(0)}to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes ring2{from{transform:rotateY(70deg) rotateX(22deg) rotateZ(0)}to{transform:rotateY(70deg) rotateX(22deg) rotateZ(360deg)}}
.m-img.t3d{background:radial-gradient(circle at 50% 62%,#16307a,#070b1f 78%);perspective:calc(var(--u)*30);overflow:hidden}
.t3d .sc3{transform:rotateX(-14deg)}
.t3d .cube{--S:calc(var(--u)*6.4)}
.t3d .core{width:calc(var(--u)*5);height:calc(var(--u)*5);margin:calc(var(--u)*-2.5) 0 0 calc(var(--u)*-2.5)}
.t3d .ring{width:calc(var(--u)*13);height:calc(var(--u)*13);margin:calc(var(--u)*-6.5) 0 0 calc(var(--u)*-6.5)}
.t3d .ring2{width:calc(var(--u)*9.5);height:calc(var(--u)*9.5);margin:calc(var(--u)*-4.75) 0 0 calc(var(--u)*-4.75)}
.plates{position:relative;width:calc(var(--u)*12);height:calc(var(--u)*12);transform-style:preserve-3d;transform:rotateX(62deg) rotateZ(-38deg);animation:platesSpin 9s ease-in-out infinite alternate}
.plates i{position:absolute;inset:0;border:1px solid rgba(190,210,255,.75);background:linear-gradient(135deg,rgba(107,155,255,.4),rgba(47,107,255,.1));box-shadow:inset 0 0 calc(var(--u)*1.6) rgba(107,155,255,.5);animation:plateFloat 4s ease-in-out infinite}
.plates i:nth-child(1){transform:translateZ(0)}
.plates i:nth-child(2){transform:translateZ(calc(var(--u)*2.4));animation-delay:-1.3s}
.plates i:nth-child(3){transform:translateZ(calc(var(--u)*4.8));animation-delay:-2.6s}
@keyframes platesSpin{from{transform:rotateX(62deg) rotateZ(-70deg)}to{transform:rotateX(62deg) rotateZ(20deg)}}
@keyframes plateFloat{50%{translate:0 0 calc(var(--u)*1.2)}}

/* bento v2: looping animations */
.bcard.spot::before{z-index:2}
.brief{margin-top:auto;display:grid;gap:14px}
.brief ul{display:grid;gap:10px}
.brief li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;background:var(--card2);font-size:15px;color:var(--fg2);opacity:.4;animation:bOn 9s ease infinite;animation-delay:calc(var(--k)*1.25s)}
.brief li i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);flex:none;position:relative;animation:bChk 9s ease infinite;animation-delay:calc(var(--k)*1.25s)}
.brief li i::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);animation:bTick 9s ease infinite;animation-delay:calc(var(--k)*1.25s)}
@keyframes bOn{0%,4%{opacity:.4;transform:none}9%{opacity:1;transform:translateX(8px)}14%,88%{opacity:1;transform:none}96%,100%{opacity:.4}}
@keyframes bChk{0%,6%{background:transparent;border-color:var(--line2)}12%,88%{background:var(--blue);border-color:var(--blue)}96%,100%{background:transparent;border-color:var(--line2)}}
@keyframes bTick{0%,8%{transform:rotate(45deg) scale(0)}13%,88%{transform:rotate(45deg) scale(1)}96%,100%{transform:rotate(45deg) scale(0)}}
.brief__bar{height:4px;border-radius:9px;background:var(--card3);overflow:hidden}
.brief__bar i{display:block;height:100%;background:var(--blue);transform-origin:0 50%;animation:briefBar 9s linear infinite}
@keyframes briefBar{0%{transform:scaleX(0)}55%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}

.phone-wrap{perspective:900px;margin:auto auto -16px}
.phone{position:relative;width:200px;height:300px;border-radius:34px 34px 0 0;border:7px solid #1c1c26;border-bottom:0;background:#fff;color:#0b0b0d;overflow:hidden;transform:rotateX(var(--px,5deg)) rotateY(var(--py,-9deg));transition:transform .5s var(--ease);box-shadow:0 30px 70px -20px rgba(47,107,255,.55)}
.phone__notch{position:absolute;left:50%;top:6px;width:60px;height:16px;margin-left:-30px;border-radius:99px;background:#0b0b0d;z-index:3}
.phone__scr{position:absolute;inset:0;overflow:hidden}
.phone__in{padding:34px 14px 14px;display:grid;gap:10px;font-size:11px;animation:phoneScroll 9s ease-in-out infinite}
.phone__in b{font-family:var(--f-head)}
.phone .m-btn{font-size:11px;padding:.45em 1.2em}
@keyframes phoneScroll{0%,18%{transform:translateY(0)}45%,70%{transform:translateY(-38%)}92%,100%{transform:translateY(0)}}
.phone__g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone__g i{aspect-ratio:1.2;background:#e6e8ee}
.phone__l{height:8px;background:#e6e8ee;border-radius:5px}
.phone__l.s{width:60%}
.phone__n{position:absolute;left:8px;right:8px;top:30px;z-index:4;display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:14px;background:rgba(11,11,13,.94);color:#fff;font-size:10px;transform:translateY(-140%);opacity:0;animation:phoneNotif 9s infinite}
.phone__n span{width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none}
.phone__n small{display:block;opacity:.7;font-size:9px}
.phone__n b{font-weight:500;font-family:var(--f-head)}
@keyframes phoneNotif{0%,30%{transform:translateY(-140%);opacity:0}36%,52%{transform:none;opacity:1}58%,100%{transform:translateY(-140%);opacity:0}}

.chart2{position:relative;height:200px;margin-top:auto}
.chart2__bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:12px}
.chart2__bars i{flex:1;height:var(--h);background:var(--blue);border-radius:8px 8px 0 0;transform-origin:50% 100%;animation:barUp 6s var(--ease) infinite}
.chart2__bars i:nth-child(2){animation-delay:.08s}.chart2__bars i:nth-child(3){animation-delay:.16s}.chart2__bars i:nth-child(4){animation-delay:.24s}.chart2__bars i:nth-child(5){animation-delay:.32s}.chart2__bars i:nth-child(6){animation-delay:.4s}.chart2__bars i:nth-child(7){animation-delay:.48s}
@keyframes barUp{0%,3%{transform:scaleY(.04)}22%,86%{transform:scaleY(1)}96%,100%{transform:scaleY(.04)}}
.chart2__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart2__line path{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:lineDraw 6s ease infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
@keyframes lineDraw{0%,14%{stroke-dashoffset:100}38%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:100}}
.chart2__tip{position:absolute;right:0;top:-8px;padding:6px 14px;border-radius:99px;background:var(--fg);color:var(--bg);font:500 14px var(--f-head);z-index:2;animation:tip 6s infinite;opacity:0}
@keyframes tip{0%,30%{opacity:0;transform:translateY(8px) scale(.85)}38%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(8px)}}

@property --num{syntax:"<integer>";initial-value:0;inherits:false}
.g-fg{animation:gauge 6s ease-in-out infinite;transition:none}
@keyframes gauge{0%,6%{stroke-dashoffset:100}30%,86%{stroke-dashoffset:2}96%,100%{stroke-dashoffset:100}}
.speed__n{counter-reset:n var(--num);animation:num 6s ease-in-out infinite}
.speed__n::after{content:counter(n)}
@keyframes num{0%,6%{--num:0}30%,86%{--num:98}96%,100%{--num:0}}

.cms.step li{animation:rowShift .7s var(--ease)}
.cms.step li.new{animation:rowShift .7s var(--ease),rowIn .7s var(--ease)}
@keyframes rowShift{from{transform:translateY(-58px)}to{transform:none}}
@keyframes rowIn{from{opacity:0}to{opacity:1}}
.cms b.fresh{background:rgba(47,107,255,.3)}

/* pricing: price first, maintenance optional */
.pcard__list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:2px}
.opt{border-radius:18px;background:var(--btn-d-bg);box-shadow:0 0 0 1px var(--line) inset;overflow:hidden;transition:background-color .5s,box-shadow .5s}
.opt.on{background:rgba(47,107,255,.12);box-shadow:0 0 0 1px rgba(107,155,255,.55) inset}
.opt__head{width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px;text-align:left}
.opt__txt b{display:block;font-family:var(--f-head);font-weight:500;font-size:16px}
.opt__txt small{color:var(--muted);font-size:13px}
.opt__price{margin-left:auto;font-family:var(--f-head);font-size:22px;font-weight:300;white-space:nowrap}
.opt__price i{font-style:normal;font-size:13px;color:var(--muted);margin-left:2px}
.opt .switch{pointer-events:none}
.opt.on .switch{background:var(--blue)}
.opt.on .switch__k{transform:translateX(20px);background:#fff}
.opt__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.opt.on .opt__body{grid-template-rows:1fr}
.opt__body>div{overflow:hidden;min-height:0}
.opt__body ul{padding:2px 20px 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.opt__body li{display:flex;gap:10px;color:var(--fg2);font-size:15px}
.opt__body li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;background:rgba(47,107,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b9bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:2px}
.pcard__total{transition:opacity .3s}
@media(max-width:800px){.pcard__list,.opt__body ul{grid-template-columns:1fr}.opt__head{flex-wrap:wrap}.opt__price{margin-left:0}}
@media(prefers-reduced-motion:reduce){.brief li{opacity:1}.brief li i{background:var(--blue);border-color:var(--blue)}.brief li i::after{transform:rotate(45deg) scale(1)}.chart2__tip{opacity:1}.chart2__line path{stroke-dashoffset:0}.speed__n{--num:98}.g-fg{stroke-dashoffset:2}.phone__n{display:none}}

.shot--img{padding:0}
.shot--img img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== v7: stacked files ("Nuestro trabajo") ===== */
.stk{position:relative;height:calc(100svh * (var(--n) + 1.7));background:var(--bg)}
.stk__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:clamp(84px,11vh,112px)}
.stk__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.stk__title{font-size:clamp(38px,5.4vw,84px);font-weight:300;letter-spacing:-.05em;line-height:1}
.stk__title .serif{font-size:1.05em}
.stk__n{font:400 14px var(--f-head);color:var(--muted);font-variant-numeric:tabular-nums;padding-bottom:.6em}
.stk__stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:34px 0 calc(92px + 2vh)}
.stk__stack{position:relative;list-style:none;width:min(1020px,86vw,calc((100svh - 340px)*1.6));aspect-ratio:16/10;transform-origin:50% 55%;will-change:transform}
.sc{position:absolute;inset:0;transform-origin:50% 0;will-change:transform}
.sc>a{display:block;position:absolute;inset:0}
.sc__img{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 34px 70px -28px rgba(0,0,0,.9),0 0 0 1px var(--line2)}
.sc__img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1.2s var(--ease)}
.sc>a:hover .sc__img img{transform:scale(1.03)}
.sc__tab{position:absolute;left:calc(var(--i) * 19%);top:-35px;height:36px;padding:0 20px;border-radius:14px 14px 0 0;background:var(--card3);color:var(--fg2);display:flex;gap:10px;align-items:center;font:500 13px var(--f-head);white-space:nowrap;box-shadow:0 0 0 1px var(--line2) inset}
.sc__tab b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.stk__info{position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:22px;padding:8px 8px 8px 24px;border-radius:99px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);white-space:nowrap;transition:opacity .4s}
.stk__txt{transition:opacity .3s,transform .4s var(--ease)}
.stk__txt h3{font-family:var(--f-head);font-size:16px;font-weight:500;line-height:1.25}
.stk__txt span{font-size:13px;color:var(--muted)}
.stk__info.swap .stk__txt{opacity:0;transform:translateY(6px)}

/* "Ver más" seal that appears when the file is complete */
.more{position:absolute;right:max(24px,7vw);top:50%;width:clamp(170px,19vw,260px);aspect-ratio:1;display:grid;place-items:center;color:var(--fg);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%) scale(.55)}
.more__ring{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;stroke:none;animation:moreSpin 16s linear infinite}
.more__ring text{font:500 13.5px var(--f-head);letter-spacing:.2em;text-transform:uppercase}
.more__core{position:relative;width:62%;aspect-ratio:1;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;align-content:center;gap:2px;transition:transform .6s var(--ease)}
.more__core span{font:500 clamp(16px,1.6vw,20px) var(--f-head)}
.more__arr{width:30px;height:30px;transition:transform .5s var(--ease)}
.more:hover .more__core{transform:scale(1.1)}
.more:hover .more__arr{transform:translateX(6px)}
@keyframes moreSpin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){.more__ring{animation:none}}
@media(max-width:800px){.stk__n{display:none}}

/* ===== v8: bigger file stack, blurred "Ver más" finale, cleaner bento, softer reveals ===== */
.reveal{filter:blur(8px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{filter:none}
.cursor.is-view .cursor__ring{background:#fff;border-color:#fff}
.cursor.is-view .cursor__ring b{color:#000}

/* stack */
.stk__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-top:clamp(90px,12vw,160px);padding-bottom:clamp(20px,3vw,40px)}
.stk__sub{max-width:320px}
.stk__run{position:relative;height:calc(100svh * (var(--n) * .72 + 1.2))}
.stk__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:96px 0 0}
.stk__stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:46px 0 96px}
.stk__stack{--step:15%;width:min(1260px,92vw,calc((100svh - 96px - 46px - 96px) * 1.6));aspect-ratio:16/10;transform-origin:50% 55%}
.sc .shot{position:absolute;inset:0;aspect-ratio:auto;border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px var(--line2)}
.sc::after{content:"";position:absolute;inset:0;border-radius:18px;background:#000;opacity:var(--dim,0);pointer-events:none}
.sc__tab{left:calc(var(--i) * var(--step));top:-39px;height:40px;padding:0 22px;font-size:14px;transition:background-color .4s,color .4s}
.sc.on .sc__tab{background:var(--fg);color:var(--bg)}
.sc.on .sc__tab b{color:inherit;opacity:.55}
.stk__n{padding:0;font-size:13px}
.stk__info{padding:8px 8px 8px 22px;gap:20px}

/* the file blurs and "Ver más" sits on top */
.more{position:absolute;inset:0;right:auto;top:auto;width:auto;aspect-ratio:auto;transform:none;display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;color:#fff;opacity:0;visibility:hidden;pointer-events:none;z-index:5}
.more__t{font:300 clamp(48px,8.6vw,134px)/1 var(--f-head);letter-spacing:-.055em;text-shadow:0 6px 60px rgba(0,0,0,.55);text-align:center}
.more__t .serif{color:#fff;font-size:1.04em}
.more__s{display:inline-flex;align-items:center;gap:10px;font:500 15px var(--f-head);padding:12px 22px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .4s,color .4s}
.more__s svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.more:hover .more__s{background:#fff;color:#000}
.more:hover .more__s svg{transform:translateX(5px)}

/* phones: swipeable case-study cards (native scroll-snap, no scroll-jacking) instead of the pinned file stack */
.stk__dots,.sc__cap,.sc-end{display:none}
@media(max-width:800px){
  .stk__head{padding-top:84px;padding-bottom:26px}
  .stk__run{height:auto;padding:0 0 72px}
  .stk__pin{position:static;height:auto;display:block;padding:0;overflow:visible}
  .stk__stage{display:block;padding:0}
  .stk__stack{width:100%;aspect-ratio:auto;transform:none!important;filter:none!important;display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 9%;padding:10px 9% 26px;margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .stk__stack::-webkit-scrollbar{display:none}
  .sc{position:relative;inset:auto;flex:0 0 82%;scroll-snap-align:center;scroll-snap-stop:always;visibility:visible!important;pointer-events:auto!important;transform:scale(.93)!important;opacity:.45;transform-origin:50% 40%;transition:transform .55s var(--ease),opacity .45s}
  .sc.is-front{transform:none!important;opacity:1}
  .sc.on .sc__tab{background:none;color:var(--fg2)}
  .sc.on .sc__tab b{color:var(--blue2);opacity:1}
  .sc::after{display:none}
  .sc>a{display:block;position:relative;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line2),0 30px 60px -28px rgba(0,0,0,.9);overflow:hidden;padding:0 12px 14px}
  .sc__tab{position:static;display:flex;height:auto;padding:14px 4px 12px;gap:8px;font-size:13px;background:none;box-shadow:none;border-radius:0;color:var(--fg2)}
  .sc__tab b{font-weight:500;color:var(--blue2)}
  .sc .shot{position:relative;inset:auto;aspect-ratio:5/4;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
  .sc__cap{display:grid;gap:3px;padding:14px 4px 2px}
  .sc__cap strong{font:500 16px/1.25 var(--f-head);color:var(--fg)}
  .sc__cap span{font-size:13px;color:var(--muted)}
  .sc__cap em{font-style:normal;margin-top:10px;display:inline-flex;align-items:center;gap:8px;font:500 13px var(--f-head);color:var(--blue2)}
  .stk__info{display:none}
  .stk__dots{display:flex;align-items:center;gap:14px;width:82%;margin:2px auto 0}
  .stk__dots b{font:500 13px var(--f-head);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  .stk__dots b span{color:var(--fg)}
  .stk__bar{flex:1;height:2px;border-radius:2px;background:var(--line2);overflow:hidden}
  .stk__bar i{display:block;height:100%;width:100%;background:var(--fg);border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--p,.17));transition:transform .25s}
  .more{display:none}
  .sc-end{display:grid;flex:0 0 auto;scroll-snap-align:center;scroll-snap-stop:always;align-self:center;opacity:.6;transition:opacity .45s}
  .sc-end.is-front{opacity:1}
  .sc-end a{display:block;padding:0 4px}
  .sc-end span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:500 14px var(--f-head);padding:13px 20px;border-radius:99px;background:var(--fg);color:var(--bg)}
}

/* bento: cleaner pieces */
.chat{position:relative;margin-top:auto;display:grid;gap:10px;align-content:end}
.msg{display:flex;opacity:0;transform:translateY(14px) scale(.96);filter:blur(4px);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.34,1.4,.64,1),filter .5s var(--ease)}
.msg--in{transform-origin:0 100%;transform:translate(-10px,14px) scale(.96)}
.msg--out{transform-origin:100% 100%;transform:translate(10px,14px) scale(.96)}
.msg.show{opacity:1;transform:none;filter:none}
.chat.leave .msg{opacity:0;transform:translateY(-8px);filter:blur(3px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.msg span{max-width:76%;padding:12px 18px;border-radius:20px;font-size:15px;line-height:1.4}
.msg--in span{background:var(--card2);color:var(--fg2);border-bottom-left-radius:6px}
.msg--out{justify-content:flex-end}
.msg--out span{background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.typing{position:absolute;right:0;top:0;display:flex;gap:5px;padding:15px 18px;border-radius:20px;border-bottom-right-radius:6px;background:var(--blue);opacity:0;transition:opacity .3s}
.typing.in{right:auto;left:0;background:var(--card2);border-radius:20px;border-bottom-left-radius:6px}
.typing.in i{background:var(--fg2)}
.typing.show{opacity:1}
.typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.55;animation:dotB 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dotB{40%{transform:translateY(-4px);opacity:1}}

.lc{position:relative;height:220px;margin-top:auto}
.lc svg{position:absolute;left:0;top:0;width:100%;height:calc(100% - 26px);overflow:visible}
.lc__grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.lc__line{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lc__area{opacity:0}
.lc__dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(47,107,255,.35),0 0 24px var(--blue);opacity:0}
.lc__tip{position:absolute;left:0;top:0;padding:5px 12px;border-radius:99px;background:var(--fg);color:var(--bg);font:500 13px var(--f-head);white-space:nowrap;opacity:0;transform:translate(-100%,-170%)}
.lc__x{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

.g-bg,.g-fg{stroke-width:5}
.speed__n{font-size:42px!important}
.cms b{border-radius:8px}

.clockbox{display:flex;align-items:center;gap:clamp(18px,3vw,36px);margin-top:auto}
.clock{width:min(46%,210px);flex:none;margin:0}
.clock__f{fill:var(--card2);stroke:var(--line2);stroke-width:1.5}
:root[data-theme=light] .clock__f{fill:var(--card2)}
#ticks line{stroke:var(--muted);stroke-width:1.2}
#ticks line.big{stroke:var(--fg);stroke-width:2.2}
.clock__h{stroke:var(--fg);stroke-width:4.5;stroke-linecap:round}
.clock__m{stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.clock__s{stroke:var(--blue);stroke-width:1.6;stroke-linecap:round}
.clock__c{fill:var(--blue);stroke:none}
.clockbox__time{display:flex;align-items:baseline;gap:6px;font-family:var(--f-head)}
.clockbox__time b{font-size:clamp(40px,5vw,64px);font-weight:200;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.clockbox__time span{font-size:20px;color:var(--blue2);font-variant-numeric:tabular-nums}
.clockbox p{margin-top:10px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.clockbox p i{width:8px;height:8px;border-radius:50%;background:#34d399;animation:pulseG 2s infinite}
@keyframes pulseG{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%,100%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}
@media(max-width:800px){.clockbox{flex-wrap:wrap}.clock{width:150px}}
@media(prefers-reduced-motion:reduce){.msg,.msg--in,.msg--out{opacity:1;transform:none;filter:none}.lc__area{opacity:1}.lc__dot,.lc__tip{opacity:1}.reveal{filter:none}}

.more{right:0;top:0}
.sc .shot{container-type:inline-size;background:#fff;color:#0b0b0d;overflow:hidden;font-size:16px;line-height:1.3}
.sc .shot .m-search{background:#fff}
/* clock hands rotate via the SVG transform attribute (centre given explicitly), so no extra CSS origin */
.clock__h,.clock__m,.clock__s{transform-origin:0 0;transform-box:view-box}

/* gauge: starts when the card appears, fills quickly and reaches 100 */
.g-fg{animation:none;stroke-dashoffset:100}
.in .g-fg{animation:gauge2 6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes gauge2{0%{stroke-dashoffset:100}16%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:100}}
.speed__n{animation:none;--num:0}
.in .speed__n{animation:num2 6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes num2{0%{--num:0}16%,90%{--num:100}98%,100%{--num:0}}
@media(prefers-reduced-motion:reduce){.g-fg{stroke-dashoffset:0}.speed__n{--num:100}}

/* Header CTA buzz (animates the independent translate/rotate properties so it never fights the magnetic hover transform) */
.nav__cta.buzz{animation:buzz .7s cubic-bezier(.36,.07,.19,.97) both}
@keyframes buzz{
  0%,100%{translate:0 0;rotate:0deg}
  10%{translate:-3px 0;rotate:-2deg}20%{translate:3px 0;rotate:2deg}
  30%{translate:-3px 0;rotate:-1.5deg}40%{translate:3px 0;rotate:1.5deg}
  50%{translate:-2px 0;rotate:-1deg}60%{translate:2px 0;rotate:1deg}
  70%{translate:-1px 0;rotate:0deg}80%{translate:1px 0}
}

/* Theme switch icons: moon on the white knob in dark mode, sun on the dark knob in light mode */
#theme .switch__k{display:grid;place-items:center}
#theme .switch__k svg{position:absolute;width:12px;height:12px;transition:opacity .35s,transform .5s var(--ease)}
#theme .ico-moon{fill:#0b0c12;opacity:1;transform:rotate(0)}
#theme .ico-sun{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:0;transform:rotate(-70deg) scale(.6)}
:root[data-theme=light] #theme .ico-moon{opacity:0;transform:rotate(70deg) scale(.6)}
:root[data-theme=light] #theme .ico-sun{opacity:1;transform:rotate(0) scale(1)}

/* Mobile menu: dim the page behind the open panel so the links never compete with the hero text */
@media(max-width:800px){
  .nav:has(.burger[aria-expanded=true])::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:-1}
}

/* Header on phones: theme, contact and menu are three matching round buttons */
.navbtn{display:none}
@media(max-width:800px){
  .navbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--btn-d-bg);flex:none;color:var(--fg);transition:background-color .3s,transform .3s var(--ease)}
  .navbtn:active{transform:scale(.92)}
  .navbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .nav__pill{gap:8px}
  #theme{margin-left:auto;width:42px;height:42px;border-radius:50%;background:var(--btn-d-bg)}
  #theme .switch__k{inset:0;left:0;top:0;width:100%;height:100%;background:transparent;transform:none!important}
  #theme .switch__k svg{width:19px;height:19px}
  #theme .ico-moon{fill:var(--fg)}
  #theme .ico-sun{stroke:var(--fg)}
}

/* Speed gauge: the ring and the number are driven together from JS (extras2.js), so they always agree */
.g-fg,.in .g-fg{animation:none!important;transition:none!important}
.speed__n,.in .speed__n{animation:none!important;counter-reset:none}
.speed__n::after{content:none}

/* "Cuéntanos tu proyecto": big headline whose letters rise and turn blue around the cursor */
.more__t .mc{display:inline-block;--k:0;transform:translateY(calc(var(--k) * -16px)) scale(calc(1 + var(--k) * .1));color:color-mix(in srgb,var(--blue2) calc(var(--k) * 100%),#fff);transition:transform .45s var(--ease),color .45s var(--ease);will-change:transform}
.more__t .serif .mc{color:color-mix(in srgb,#fff calc(var(--k) * 100%),var(--blue2))}
.more__go{display:inline-block;vertical-align:.08em;width:.5em;height:.5em;margin-left:.18em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.more:hover .more__go{transform:translateX(.12em)}
@media(max-width:800px){.more__t .mc{transition:none}}

/* Light theme: the cursor sits in its own stacking context, so blend-mode "difference" can't invert the page: use real dark colours */
:root[data-theme=light] .cursor__dot{background:#0b0c12;mix-blend-mode:normal}
:root[data-theme=light] .cursor__ring{border-color:rgba(11,12,18,.6);mix-blend-mode:normal}
:root[data-theme=light] .cursor.is-link .cursor__ring{background:rgba(11,12,18,.08);border-color:rgba(11,12,18,.75)}
:root[data-theme=light] .cursor.is-view .cursor__ring{background:#0b0c12;border-color:#0b0c12}
:root[data-theme=light] .cursor.is-view .cursor__ring b{color:#fff}

/* Mascota del CTA del header: circulo claro con pantalla ancha; todo en % del diametro (--d). Los ojos siguen al cursor o al dedo, parpadean y se vuelven ^ ^ al pasar el raton / tocar */
.nav__cta>span{gap:10px;padding-left:17px;padding-right:16px}
.mascot{--ex:0px;--ey:0px;--d:30px;position:relative;display:block;flex:none;width:var(--d);height:var(--d);border-radius:50%;isolation:isolate;
  background:linear-gradient(180deg,#f4f7fd 0%,#dfe7f4 62%,#c3d0e6 100%);
  box-shadow:inset 0 calc(var(--d)*.02) 0 #fff,inset 0 calc(var(--d)*-.05) calc(var(--d)*.08) rgba(120,145,190,.45),0 calc(var(--d)*.05) calc(var(--d)*.1) calc(var(--d)*-.05) rgba(20,40,100,.4);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.mascot *{position:absolute;display:block}
.mascot .scr{left:13.5%;right:14%;top:19%;height:49%;border-radius:32%/38%;background:linear-gradient(180deg,#f7f9fe,#bccbe6);box-shadow:inset 0 0 0 calc(var(--d)*.012) rgba(255,255,255,.7),0 0 0 calc(var(--d)*.01) rgba(100,125,175,.5)}
.mascot .scr::before{content:"";position:absolute;inset:calc(var(--d)*.022);border-radius:inherit;background:linear-gradient(180deg,#3a3d44 0%,#24262b 55%,#17181c 100%);box-shadow:inset 0 calc(var(--d)*.02) calc(var(--d)*.04) rgba(0,0,0,.55)}
.mascot .chat{left:29%;top:23.5%;width:42%;height:42%;overflow:visible;z-index:2;opacity:0;fill:#fff;stroke:none;shape-rendering:geometricPrecision;animation:chatShow 9s infinite}
.mascot .chat circle{fill:#24262b}
.mascot .eye{top:34.5%;width:7.8%;height:15.5%;border-radius:99px;background:#fff;z-index:2;
  box-shadow:0 0 calc(var(--d)*.04) calc(var(--d)*.01) rgba(255,255,255,.9),0 0 calc(var(--d)*.1) calc(var(--d)*.02) rgba(255,255,255,.4);
  transform:translate(var(--ex),var(--ey));transition:height .25s var(--ease),width .25s var(--ease),border-radius .25s,margin .25s var(--ease),background-color .25s;animation:blink 5.5s infinite,eyeHide 9s infinite}
.mascot .eye:nth-of-type(1){left:30%}
.mascot .eye:nth-of-type(2){left:60%}
.mascot .b1,.mascot .b2{top:75.5%;height:4%;border-radius:99px;background:#3a3d44;box-shadow:inset 0 calc(var(--d)*.008) 0 rgba(0,0,0,.4)}
.mascot .b1{left:19%;width:12%}
.mascot .b2{left:51.5%;width:28%}
@keyframes blink{0%,92%,100%{scale:1 1}95%{scale:1 .12}}
/* cada pocos segundos los ojos se cambian por un icono de mensaje: invita a escribir */
@keyframes eyeHide{0%,70%,96%,100%{opacity:1}74%,92%{opacity:0}}
@keyframes chatShow{0%,72%,96%,100%{opacity:0}77%,92%{opacity:1}}
/* contento: ojos ^ ^ y saltito */
.nav__cta:hover .mascot{animation:hop .7s cubic-bezier(.34,1.56,.64,1)}
.nav__cta:hover .mascot .chat,.navbtn:active .mascot .chat{display:none}
.nav__cta:hover .mascot .eye,.navbtn:active .mascot .eye{height:5%;width:10%;border-radius:99px 99px 0 0;background:none;border-top:calc(var(--d)*.035) solid #fff;box-shadow:0 calc(var(--d)*-.012) calc(var(--d)*.04) rgba(190,225,255,.9);margin-top:calc(var(--d)*.03);margin-left:-1%;transform:translate(0,0);animation:none}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-5px) scale(.94,1.08)}55%{transform:translateY(0) scale(1.1,.9)}100%{transform:translateY(0) scale(1,1)}}
/* movil: la mascota va en el boton redondo; al tocarlo se pone contenta */
.navbtn{background:none;box-shadow:none;position:relative;width:46px;height:46px;overflow:visible}
.navbtn::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.5) 0%,rgba(190,200,225,.28) 40%,rgba(190,200,225,0) 70%);pointer-events:none}
.navbtn .mascot{--d:42px}
.navbtn:active .mascot{animation:hop .7s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){.mascot .eye{animation:none}.mascot .chat{display:none}.nav__cta:hover .mascot,.navbtn:active .mascot{animation:none}}

/* ===== v27 · hero story: the page is built live from code (director in hero-story.js) =====
   Without JS or with reduced motion nothing here hides: the stage shows the finished page next to its code. */
.stage{--ease2:cubic-bezier(.22,1.2,.36,1)}
.stage:not(.vis),.stage:not(.vis) *,.stage:not(.vis) *::before,.stage:not(.vis) *::after,.stage:not(.vis)::before{animation-play-state:paused!important}
.stage::before{background:hsl(222 100% 59%);opacity:0;animation:none}
.stage.lit::before{opacity:.16;animation:glowIn 1.6s var(--ease) both,glowSoft 7s ease-in-out 1.6s infinite alternate}
@keyframes glowIn{from{opacity:0}to{opacity:.16}}
/* nothing of the stage bleeds into the hero until the visitor scrolls to it */
.stage .browser{transition:box-shadow 1s var(--ease)}
.stage:not(.lit) .browser{box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* window: live viewport + code panel */
.pg{display:flex;height:clamp(360px,42vw,560px);max-height:none;background:#0c0e15;position:relative}
.vp{position:relative;flex:1 1 0;min-width:0;container-type:inline-size;background:#fff;color:#0b0b0d;overflow:hidden}
.site--live{--radius:18px}
.site--live .s-hero{position:relative;display:flex;counter-reset:pc var(--pct,52)}
.site--live .s-hero>div:first-child{position:relative;flex:var(--c,1.1) 1 0;min-width:0}
.site--live .s-hero>.m-photo{flex:1 1 0;min-width:0}
.site--live .m-btn--live{position:relative;display:inline-grid;margin-block:calc(var(--u)*.8) calc(var(--u)*.4);transition:transform .16s var(--ease),box-shadow .3s}
.site--live .m-btn--live .l1,.site--live .m-btn--live .l2{grid-area:1/1;text-align:center;transition:opacity .35s,transform .45s var(--ease)}
.site--live .m-btn--live .l2{opacity:0;transform:translateY(40%)}
.site--live .m-btn--live.done .l1{opacity:0;transform:translateY(-40%)}
.site--live .m-btn--live.done .l2{opacity:1;transform:none}
.site--live .m-btn--live.press{transform:scale(.94)}
.site--live .m-btn--live.ping{animation:ping .9s var(--ease)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,107,255,.6)}100%{box-shadow:0 0 0 calc(var(--u)*2.8) rgba(47,107,255,0)}}

/* headline: second line is re-set in the serif after a selection sweeps over it */
.site--live .swp{display:inline-grid;position:relative}
.site--live .swp .t1,.site--live .swp .t2{grid-area:1/1;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.site--live .swp .t2{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;font-size:1.14em;line-height:.9;color:var(--blue);opacity:0;filter:blur(3px)}
.site--live .swp::after{content:"";position:absolute;inset:-.05em -.08em;background:rgba(47,107,255,.22);box-shadow:inset 0 0 0 1px rgba(47,107,255,.65);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:transform .85s linear,opacity .4s}
.site--live .swp.sel::after{transform:scaleX(1);opacity:1}
.site--live.ser .swp .t1{opacity:0;filter:blur(3px)}
.site--live.ser .swp .t2{opacity:1;filter:none}

/* blueprint: grid, dashed boxes closing in on each block, width tag and drag handle on the column edge */
.site--live::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s var(--ease);
  background-image:linear-gradient(rgba(47,107,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,.14) 1px,transparent 1px);background-size:calc(var(--u)*3) calc(var(--u)*3);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 38%,transparent 92%);mask-image:radial-gradient(ellipse at 50% 42%,#000 38%,transparent 92%)}
.site--live.bp::before{opacity:1}
.site--live .s-nav,.site--live .s-hero>div:first-child,.site--live .m-photo--3d,.site--live .m-t{outline:1px dashed rgba(47,107,255,0);outline-offset:calc(var(--u)*1.8);transition:outline-color .6s,outline-offset .9s var(--ease)}
.site--live.bp .s-nav,.site--live.bp .s-hero>div:first-child,.site--live.bp .m-photo--3d,.site--live.bp .m-t{outline-color:rgba(47,107,255,.85);outline-offset:calc(var(--u)*.4)}
.site--live .s-hero>div:first-child::before{content:"w " counter(pc) "%";position:absolute;left:0;top:calc(var(--u)*-3);padding:calc(var(--u)*.3) calc(var(--u)*.9);border-radius:calc(var(--u)*.5);background:var(--blue);color:#fff;font:600 calc(var(--u)*1) ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:0;transition:opacity .5s;white-space:nowrap}
.site--live.bp .s-hero>div:first-child::before{opacity:1}
.site--live .hdl{position:absolute;top:calc(var(--u)*1);bottom:calc(var(--u)*1);width:0;left:calc(var(--u)*3 + (100% - var(--u)*9)*var(--c,1.1)/(var(--c,1.1) + 1) + var(--u)*1.5);border-left:1px dashed rgba(47,107,255,.8);opacity:0;transition:opacity .5s;pointer-events:none}
.site--live.bp .hdl{opacity:1}
.site--live .hdl::after{content:"";position:absolute;left:0;top:50%;width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);margin:calc(var(--u)*-.85) 0 0 calc(var(--u)*-.85);border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 0 0 calc(var(--u)*.5) rgba(47,107,255,.2)}

/* build-up: every block of the page arrives when its code is written */
.js-story .site--live [data-p]{opacity:0;transform:translateY(calc(var(--u)*1.6));filter:blur(calc(var(--u)*.5));transition:opacity .7s var(--ease),transform .95s var(--ease),filter .7s var(--ease)}
.js-story .site--live [data-p].on{opacity:1;transform:none;filter:none}
.site--live .m-photo--3d .sc3{transition:opacity 1s var(--ease),transform 1.3s var(--ease2)}
.site--live .m-photo--3d::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,#eceff6 0 7px,#e2e6f0 7px 14px);opacity:0;transition:opacity .9s var(--ease)}
.js-story .site--live .m-photo--3d::after{opacity:1}
.js-story .site--live .m-photo--3d .sc3{opacity:0;transform:rotateX(-16deg) scale(.55)}
.js-story .site--live .m-photo--3d.is3d::after{opacity:0}
.js-story .site--live .m-photo--3d.is3d .sc3{opacity:1;transform:rotateX(-16deg)}

/* design tokens: the cards are drawn from the variables being typed */
.tok{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:calc(var(--u,1cqw)*2);pointer-events:none;background:#fff;transition:opacity .7s var(--ease)}
.js-story .tok{display:flex}
.tok.out{opacity:0}
.tk{display:grid;justify-items:center;gap:6px;width:calc(var(--u,1cqw)*17);padding:calc(var(--u,1cqw)*2) calc(var(--u,1cqw)*1.2);border:1px solid #e5e8f0;border-radius:var(--tr,0px);background:#fff;box-shadow:0 14px 40px -22px rgba(8,12,40,.35);opacity:0;transform:translateY(16px) scale(.92);transition:opacity .6s var(--ease),transform .8s var(--ease2),border-radius .8s var(--ease)}
.tk.on{opacity:1;transform:none}
.tk b{font:600 calc(var(--u,1cqw)*1.3)/1 var(--f-head);color:#0b0b0d}
.tk span{font:500 calc(var(--u,1cqw)*1.1)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#5d6272}
.tk__sw{width:calc(var(--u,1cqw)*6);height:calc(var(--u,1cqw)*6);border-radius:50%;background:var(--tb,#d5d9e4);transition:background .6s var(--ease)}
.tk__r{width:calc(var(--u,1cqw)*6);height:calc(var(--u,1cqw)*6);background:#eef1fb;border:2px solid #2f6bff;border-radius:var(--tr2,0px);transition:border-radius .9s var(--ease2)}
.tk__aa{font-style:normal;font-size:calc(var(--u,1cqw)*5.4);line-height:1.1;color:#0b0b0d;font-family:var(--tf,Georgia,serif);transition:opacity .5s}

/* devtools-style highlight over the real element under the cursor */
.hl{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}
.hl.on{opacity:1}
.hl i,.hl b{position:absolute;transition:left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease)}
.hl__m{background:rgba(246,178,107,.55)}.hl__p{background:rgba(147,196,125,.6)}.hl__c{background:rgba(111,168,220,.65)}
.hl__t{padding:5px 8px;border-radius:5px;background:#1f2433;color:#fff;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vp::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;transform:translateX(-110%);pointer-events:none;background:linear-gradient(90deg,transparent,rgba(47,107,255,.2),transparent)}
.vp.scan::after{animation:scan 1.7s var(--ease) both}
@keyframes scan{to{transform:translateX(330%)}}

/* code panel */
.dev{flex:0 0 36%;max-width:390px;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden;background:#0c0e15;border-left:1px solid rgba(255,255,255,.08);color:#c9d4ff}
.dev__tabs{display:flex;align-items:stretch;gap:2px;padding:0 6px;border-bottom:1px solid rgba(255,255,255,.07);font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#6c7494;flex:none}
.dev__tabs span{padding:11px 11px 10px;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
.dev__tabs .on{color:#fff;border-bottom-color:#2f6bff}
.dev__tabs .dev__live{margin-left:auto;color:#34d399;border:0}
.dev__live i{width:6px;height:6px;border-radius:50%;background:#34d399;animation:livePulse 1.6s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.dev__body{position:relative;flex:1;min-height:0;overflow:hidden}
.code{counter-reset:ln;padding:12px 0 8px;font:500 11.5px/19px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transition:transform .5s var(--ease)}
.code .ln{display:block;white-space:pre;padding-right:10px;transition:background .5s}
.code .ln::before{counter-increment:ln;content:counter(ln);display:inline-block;width:34px;margin-right:12px;text-align:right;color:#444b6b}
.code .ln.fl{background:rgba(138,180,255,.16)}
.code .c{color:#5f6b91}.code .k{color:#c4a7ff}.code .o{color:#7d86a8}.code .p{color:#8ab4ff}.code .v{color:#ffcf8a}.code .n{color:#ff9d7a}.code .f{color:#7fdcff}.code .s{color:#9be3a8}
.car{display:inline-block;width:7px;height:14px;margin-left:1px;background:#8ab4ff;vertical-align:-2px;animation:carBlink 1s steps(2) infinite}
@keyframes carBlink{50%{opacity:0}}
.term{position:absolute;left:0;right:0;top:34px;bottom:0;padding:14px 14px 10px;background:#0c0e15;font:500 11.5px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c9d4ff;opacity:0;pointer-events:none;transition:opacity .5s var(--ease);white-space:pre-wrap}
.dev.term-on .term{opacity:1}
.term .pr{color:#34d399}.term .ok{color:#34d399}.term .dim{color:#6c7494}.term .hi{color:#fff}
.term .tb{display:inline-block;width:14ch;height:6px;margin:0 8px;vertical-align:middle;border-radius:9px;background:#1b2030;overflow:hidden}
.term .tb i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2f6bff,#8ab4ff)}

/* overlay: designer cursor and closing message */
.ov{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dc{position:absolute;left:0;top:0;width:20px;height:20px;z-index:9;opacity:0;transform-origin:3px 2px;transition:opacity .35s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.6L9.5 19z' fill='%23fff' stroke='%230b0b0d' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.dc.on{opacity:1}
.rip{position:absolute;left:0;top:0;width:0;height:0;z-index:8}
.rip::after{content:"";position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;border:2px solid #5b8cff;opacity:0}
.rip.go::after{animation:ripGo .65s var(--ease)}
@keyframes ripGo{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
.fin{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:28px;text-align:center;opacity:0;background:radial-gradient(ellipse at 50% 46%,rgba(9,12,30,.76),rgba(4,5,12,.94));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .7s var(--ease)}
.fin.on{opacity:1}
.fin__t{position:relative;font-family:var(--f-head);font-weight:300;font-size:clamp(34px,6.4vw,80px);letter-spacing:-.05em;line-height:1;color:#fff;opacity:0;transform:translateY(18px);filter:blur(8px);transition:opacity .8s var(--ease) .15s,transform 1s var(--ease) .15s,filter .8s var(--ease) .15s}
.fin__t .serif{color:#7aa2ff}
.fin__t::after{content:"";position:absolute;left:8%;right:8%;bottom:-12px;height:2px;background:linear-gradient(90deg,transparent,#5b8cff,transparent);transform:scaleX(0);transition:transform 1s var(--ease) .55s}
.fin__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fin__chips span{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:clamp(11px,1.25vw,14px);font-weight:500;opacity:0;transform:translateY(14px) scale(.92);transition:opacity .6s var(--ease),transform .8s var(--ease2)}
.fin.on .fin__t{opacity:1;transform:none;filter:none}
.fin.on .fin__t::after{transform:scaleX(1)}
.fin.on .fin__chips span{opacity:1;transform:none}
.fin.on .fin__chips span:nth-child(1){transition-delay:.75s}.fin.on .fin__chips span:nth-child(2){transition-delay:.9s}.fin.on .fin__chips span:nth-child(3){transition-delay:1.05s}.fin.on .fin__chips span:nth-child(4){transition-delay:1.2s}

/* floating cards: they arrive when their piece is built */
.float{animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{translate:0 -12px}}
.float--a{left:6%;bottom:-36px;top:auto;min-width:170px;animation-duration:6s;animation-delay:-3s}
.float--b{right:-3%;top:-34px;animation-duration:6.4s;animation-delay:-2s}
.float--c{right:-2.4%;bottom:7%;min-width:150px;animation-duration:7s;animation-delay:-4s}
.float--d{left:3%;top:-30px;animation-duration:5.6s;animation-delay:-1s}
.js-story .float{opacity:0;scale:.84;transition:opacity .6s var(--ease),scale .85s var(--ease2)}
.js-story .float.on{opacity:1;scale:1}
.brand{display:flex;align-items:center;gap:10px;margin-top:6px}
.brand i{width:22px;height:22px;border-radius:50%;background:#2f6bff;box-shadow:0 0 0 4px rgba(47,107,255,.28)}
.brand b{font:500 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;color:var(--fg)}
.aa{display:grid;margin-top:4px;font-size:36px;line-height:1.1;color:var(--fg)}
.aa span{grid-area:1/1;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.aa .a1{font-family:var(--f-head);font-weight:300}
.aa .a2{font-family:var(--f-serif);font-style:italic}
.fn{display:grid;font-size:12px;color:var(--muted)}
.fn span{grid-area:1/1;transition:opacity .6s var(--ease)}
.js-story .aa .a2,.js-story .fn .n2{opacity:0;filter:blur(3px)}
.js-story .float--a.ser .a1,.js-story .float--a.ser .n1{opacity:0;filter:blur(3px)}
.js-story .float--a.ser .a2,.js-story .float--a.ser .n2{opacity:1;filter:none}
.perf{position:relative;width:64px;height:64px;margin-top:6px}
.perf svg{width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:4}
.perf .g0{stroke:rgba(255,255,255,.12)}
.perf .g1{stroke:#34d399;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.js-story .perf .g1{stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease)}
.js-story .float--c.on .g1{stroke-dashoffset:0}
.perf b{position:absolute;inset:0;display:grid;place-items:center;font:600 20px/1 var(--f-head);letter-spacing:-.02em}
@media(max-width:800px){
  .stage::after{display:none}
  .amb-on .browser:not(.browser--s),.browser{-webkit-mask-image:none!important;mask-image:none!important}
  .marq{border-top:0}
  .dc,.rip,.site--live .hdl{display:none}
  .float--d,.float--c,.float--a{display:none}.float--b{right:2%;top:-30px}
  /* movil: la web arriba y el codigo debajo, para que no quede vacio y se entienda la historia */
  .pg{flex-direction:column;height:auto;max-height:none}
  .vp{flex:none}
  .site--live{--u:1.45cqw}
  .dev{flex:none;width:100%;max-width:none;height:150px;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .code{font-size:11px;line-height:18px}
  .site--live .s-hero>div:first-child::before{display:none}
  .site--live .s-hero>.m-photo{display:block}
  .site--live .s-cards{grid-template-columns:repeat(3,1fr)}
  .site--live .s-cards .m-img{aspect-ratio:1.15}
  /* la tarjeta final se coloca encima de las tres, asi no ocupa una fila mas ni deja un hueco */
  .site--live .s-cards .m-t{grid-row:1}
  .site--live .s-cards .m-t:nth-child(1){grid-column:1}.site--live .s-cards .m-t:nth-child(2){grid-column:2}.site--live .s-cards .m-t:nth-child(3){grid-column:3}
  .site--live .s-cards .m-t--fin{grid-column:1/-1;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2);padding:0}
  .site--live .s-hero{padding-block:calc(var(--u)*2.4)}
  .site--live .s-cards{gap:calc(var(--u)*1.4);padding:calc(var(--u)*1.2) calc(var(--u)*3) calc(var(--u)*2.6)}
  .site--live .s-nav{padding-block:calc(var(--u)*1.5)}
}
@media(prefers-reduced-motion:reduce){.stage,.stage *{animation:none!important}.fin{display:none}}


/* ---------- Nuestro trabajo: una web viva dentro de un dispositivo ---------- */
.work{padding-bottom:50px}
.wk__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:end;margin-bottom:6px}
.wk__intro h2{font-weight:400;font-size:clamp(40px,5.2vw,72px);letter-spacing:-.045em;line-height:1}
.wk__intro .eyebrow{margin-bottom:18px}
.wk__intro p{margin-top:14px;font-size:clamp(15px,1.5vw,18px)}
.wk__pick{position:relative;padding-top:64px}
.wk__thumbs{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.wk__th{aspect-ratio:1;border-radius:16px;border:0;background:var(--bg);color:#fff;font:700 clamp(10px,1.1vw,13px) var(--f-head);display:grid;place-items:center;text-align:center;padding:4px;cursor:pointer;position:relative;overflow:hidden;filter:grayscale(1) brightness(.92);opacity:.6;transition:filter .35s,opacity .35s,transform .35s var(--ease),box-shadow .35s}
.wk__th::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 60%)}
.wk__th span{position:relative;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.35);line-height:1.15}
.wk__th:hover{filter:none;opacity:1;transform:translateY(-3px)}
.wk__th.on{filter:none;opacity:1;box-shadow:0 0 0 3px var(--page),0 0 0 5px var(--fg)}
.wk__th--add{background:var(--card);color:var(--fg);filter:none;opacity:1;box-shadow:0 0 0 1px var(--line) inset;font-size:30px;font-weight:400}
.wk__th--add::after{display:none}
.wk__th--add span{text-shadow:none}
.wk__th--add:hover{background:var(--fg);color:var(--page)}
.work{--page:var(--bg)}
.wk__note{font:400 clamp(19px,2vw,25px)/1 'Shadows Into Light','Comic Sans MS',cursive;color:var(--fg);display:inline-flex;align-items:center;gap:8px;transform:rotate(-2deg);white-space:nowrap}
.wk__note svg{width:48px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wk__note--a{position:absolute;right:8px;top:6px}
.wk__note--a svg{order:-1;transform:translateY(14px)}
.wk__note--b{margin:42px 0 22px}
.wk__note--b svg{transform:translateY(14px)}

.wk__dev{position:relative;border-radius:30px;background:#0c0d12;padding:14px 14px 16px;box-shadow:0 50px 100px -40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.wk__dev::before{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a2c35}
.wk__bar{display:flex;align-items:flex-end;gap:14px;background:#e4e6ee;border-radius:16px 16px 0 0;padding:8px 14px 0;margin-top:6px}
.wk__dots{display:flex;gap:7px;padding-bottom:13px}
.wk__dots i{width:11px;height:11px;border-radius:50%;background:#c6c9d4}
.wk__tabs{display:flex;gap:6px;flex:1;min-width:0}
.wk__tab{display:flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:12px 12px 0 0;background:transparent;color:#6a6e7d;font:500 13px var(--f-body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .25s,color .25s;min-width:0}
.wk__tab i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.wk__tab span{opacity:.6;overflow:hidden;text-overflow:ellipsis}
.wk__tab:hover{background:rgba(255,255,255,.55)}
.wk__tab.on{background:#fff;color:#111}.wk__tab.on i{opacity:1;background:#111}
.wk__addr{display:flex;align-items:center;gap:10px;background:#fff;padding:9px 16px;border-bottom:1px solid #e5e7ef}
.wk__url{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#eef0f6;border-radius:99px;padding:6px 14px;font-size:13px;color:#444}
.wk__url svg,.wk__out svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wk__url b{font-weight:500}
.wk__out{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eef0f6;color:#111;transition:background .25s,color .25s}
.wk__out:hover{background:#111;color:#fff}
.wk__view{position:relative;overflow:hidden;background:#fff;border-radius:0 0 18px 18px;width:100%}
.wk__view iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.wk__dev.swap .wk__view{animation:wkIn .55s var(--ease)}
@keyframes wkIn{from{opacity:0;transform:translateY(10px)}}
.wk__cap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.wk__cap h3{font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.02em}
.wk__cap span{color:var(--muted);font-size:14px}
.wk__row{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:960px){.wk__top{grid-template-columns:1fr;gap:20px}.wk__pick{padding-top:38px}}
@media(max-width:760px){
  .wk__top{text-align:center}.wk__intro .eyebrow{margin-bottom:14px}
  .wk__thumbs{grid-template-columns:repeat(4,1fr);max-width:420px;margin:0 auto;gap:8px}
  .wk__note--a{position:static;margin:4px auto 30px;display:flex;justify-content:center}.wk__pick{padding-top:0}
  .wk__note--b{margin:32px 0 22px}
  .wk__dev{border-radius:26px;padding:10px 10px 12px}
  .wk__dots{display:none}.wk__bar{padding:6px 8px 0;border-radius:14px 14px 0 0;margin-top:6px}
  .wk__tabs{gap:4px}.wk__tab{flex:1;justify-content:center;padding:8px 6px;font-size:13px}.wk__tab span{display:none}
  .wk__addr{padding:7px 10px}
  .wk__view iframe{pointer-events:none}
  .wk__dev.wk-on .wk__view iframe{pointer-events:auto}
  .wk__cap{flex-direction:column;align-items:flex-start}
}

/* ---------- Notas a mano (Shadows Into Light) ---------- */
.hand{display:flex;align-items:center;gap:6px;font:400 clamp(19px,2vw,25px)/1.1 'Shadows Into Light','Comic Sans MS',cursive;color:var(--fg);transform:rotate(-2deg);white-space:nowrap;pointer-events:none}
.hand svg{width:46px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hand--end{justify-content:flex-end;margin:-14px 6px 10px 0}
.hand--end svg{transform:translateY(12px)}
.hand--form{margin-top:22px}
@media(max-width:900px){.hand{display:none}}
.hand--sv{align-self:flex-end;text-align:right;white-space:normal;margin:0 6px 10px auto;transform:rotate(-3deg)}
.hand--sv>svg{width:50px;height:46px;transform:translateY(30px);margin-right:4px}
.hand--form{white-space:normal;line-height:1.15;transform:rotate(-2deg)}
.hand--form svg{transform:translateY(6px)}

/* ---------- Bento: "Diseñada para convertir" (panel de resultados) y "Rápida y fácil de encontrar" (buscador) ---------- */
@property --kn{syntax:"<integer>";initial-value:0;inherits:false}
.kpi{position:relative;margin-top:auto;display:flex;flex-direction:column;gap:14px;padding:20px 22px 16px;border-radius:16px;background:var(--card2);overflow:hidden}
.kpi__top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--fg2)}
.kpi__top em{font-style:normal;font-size:12px;color:var(--muted);padding:3px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line)}
.kpi__big{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kpi__n{font:200 clamp(46px,5.2vw,64px)/1 var(--f-head);letter-spacing:-.05em;counter-reset:k var(--kn);font-variant-numeric:tabular-nums}
.kpi__n::after{content:"+" counter(k) " %"}
.kpi__d{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--blue2);padding:5px 11px;border-radius:99px;background:rgba(47,107,255,.14)}
.kpi__d svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kpi__bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin-top:4px;border-bottom:1px solid var(--line)}
.kpi__bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:rgba(47,107,255,.24);transform:scaleY(0);transform-origin:50% 100%}
.kpi__bars i:last-child{background:var(--blue);box-shadow:0 0 24px var(--blueglow)}
.kpi__x{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.in .kpi__n{animation:kpiN 8s cubic-bezier(.22,1,.36,1) infinite}
.in .kpi__bars i{animation:kpiBar 8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--i) * .06s)}
@keyframes kpiN{0%,6%{--kn:0}38%,88%{--kn:193}96%,100%{--kn:0}}
@keyframes kpiBar{0%,6%{transform:scaleY(0)}34%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}

.srp{margin-top:auto;display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
.srp__box{display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:16px;background:var(--card2);overflow:hidden}
.srp__bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--fg2)}
.srp__bar svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.srp__q{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--blue)}
.srp__list{display:grid;gap:8px}
.srp__r{display:flex;align-items:center;gap:11px;min-height:54px;padding:10px 13px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.srp__r>i{width:22px;height:22px;border-radius:50%;background:var(--card3);flex:none}
.srp__r div{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.srp__r u,.srp__r s{display:block;height:7px;border-radius:4px;background:var(--card3);text-decoration:none}
.srp__r u{width:72%}.srp__r s{width:46%;opacity:.6}
.srp__me{border-color:rgba(47,107,255,.55);box-shadow:0 0 0 4px rgba(47,107,255,.12);opacity:0;transform:translateY(-12px) scale(.98)}
.srp__me>i{background:var(--blue)}
.srp__me div{gap:2px}
.srp__me b{font:500 13.5px var(--f-head);color:var(--blue2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srp__me small{font-size:12px;color:var(--muted)}
.srp__me em{font:600 12px var(--f-head);font-style:normal;color:#fff;background:var(--blue);padding:3px 10px;border-radius:99px;flex:none}
.srp__m{display:grid;gap:10px;align-content:stretch}
.srp__m>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:8px;padding:12px 16px;border-radius:14px;background:var(--card2)}
.srp__m b{font:200 28px/1 var(--f-head);letter-spacing:-.04em}
.srp__m b small{font-size:15px;letter-spacing:0}
.srp__m span{font-size:13px;color:var(--muted)}
.srp__m i{grid-column:1/-1;position:relative;height:4px;border-radius:4px;background:var(--card3);overflow:hidden}
.srp__m i::after{content:"";position:absolute;inset:0;width:0;border-radius:inherit;background:var(--blue)}
.in .srp__q{animation:srpType 8s steps(24,end) infinite}
.in .srp__me{animation:srpMe 8s cubic-bezier(.22,1,.36,1) infinite}
.in .srp__m i::after{animation:srpFill 8s cubic-bezier(.22,1,.36,1) infinite}
.in .srp__m>div:nth-child(2) i::after{animation-delay:.12s}.in .srp__m>div:nth-child(3) i::after{animation-delay:.24s}
@keyframes srpType{0%,4%{width:0}22%,92%{width:22.5ch}96%,100%{width:0}}
@keyframes srpMe{0%,26%{opacity:0;transform:translateY(-12px) scale(.98)}36%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-12px) scale(.98)}}
@keyframes srpFill{0%,30%{width:0}52%,90%{width:100%}98%,100%{width:0}}
@media(max-width:900px){.srp{grid-template-columns:1fr}.srp__m{grid-template-columns:repeat(3,1fr)}.srp__m>div{grid-template-columns:1fr;row-gap:6px;padding:12px}}
@media(prefers-reduced-motion:reduce){.kpi__n{--kn:193}.kpi__bars i{transform:none}.srp__me{opacity:1;transform:none}.srp__q{width:22.5ch}.srp__m i::after{width:100%}.in .kpi__n,.in .kpi__bars i,.in .srp__q,.in .srp__me,.in .srp__m i::after{animation:none}}

/* ---------- Bento: "Lanzamos y cuidamos": altura fija, así la lista no mueve las tarjetas cuando entra una fila ---------- */
.cms{height:calc(4 * 58px);display:block}
.cms li{height:58px;padding-block:0;border-bottom:1px solid var(--line)}
.cms li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cms li b{white-space:nowrap}

/* ---------- Bento: "Siempre activa" ---------- */
.live{margin-top:auto;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(18px,3vw,30px);padding:20px 22px;border-radius:16px;background:var(--card2)}
.live .clock{width:clamp(124px,12vw,158px);height:auto;margin:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.12))}
.live .clock__f{fill:var(--card);stroke:var(--line2);stroke-width:1.5}
.live #ticks line{stroke:var(--line2);stroke-width:1.2;stroke-linecap:round}
.live #ticks line.big{stroke:var(--muted);stroke-width:2.2}
.live .clock__h{stroke:var(--fg);stroke-width:5;stroke-linecap:round}
.live .clock__m{stroke:var(--fg);stroke-width:3.4;stroke-linecap:round}
.live .clock__s{stroke:var(--blue);stroke-width:1.6;stroke-linecap:round}
.live .clock__c{fill:var(--card);stroke:var(--blue);stroke-width:3}
.live__info{display:flex;flex-direction:column;gap:12px;min-width:0}
.live__time{display:flex;align-items:baseline;gap:8px;font-family:var(--f-head)}
.live__time b{font-size:clamp(38px,4.4vw,56px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.live__time span{font-size:18px;color:var(--blue2);font-variant-numeric:tabular-nums}
.live__st{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 12px;border-radius:99px;background:rgba(52,211,153,.14);color:#1f9d73;font-size:12.5px;font-weight:500}
.live__st i{width:7px;height:7px;border-radius:50%;background:#34d399;animation:pulseG 2s infinite}
.live__up{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.live__bars{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:22px}
.live__bars i{border-radius:3px;background:var(--blue);opacity:.28}
.live__bars i:last-child{opacity:1;box-shadow:0 0 14px var(--blueglow)}
.in .live__bars i{animation:liveBar 6s ease-in-out infinite;animation-delay:calc(var(--i) * .06s)}
@keyframes liveBar{0%,6%{opacity:.18}20%,86%{opacity:.85}96%,100%{opacity:.18}}
.live__x{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
@media(max-width:560px){.live{grid-template-columns:1fr;justify-items:center;text-align:center}.live__info{width:100%;align-items:center}.live__st{align-self:center}}
@media(prefers-reduced-motion:reduce){.in .live__bars i{animation:none;opacity:.6}}

/* cifras de las métricas: suben a la vez que su barra */
@property --m1{syntax:"<integer>";initial-value:0;inherits:false}
@property --m2{syntax:"<integer>";initial-value:0;inherits:false}
@property --m3{syntax:"<integer>";initial-value:0;inherits:false}
.srp__m b{display:inline-block;min-width:3.1ch;font-variant-numeric:tabular-nums}
.srp__m b small{display:inline;min-width:0}
.srp__c{font-style:normal}
.srp__c1{counter-reset:m var(--m1)}.srp__c1::before{content:"0," counter(m)}
.srp__c2{counter-reset:m var(--m2)}.srp__c2::before{content:counter(m)}
.srp__c3{counter-reset:m var(--m3)}.srp__c3::before{content:counter(m)}
.in .srp__c1{animation:srpV1 8s cubic-bezier(.22,1,.36,1) infinite}
.in .srp__c2{animation:srpV2 8s cubic-bezier(.22,1,.36,1) .12s infinite}
.in .srp__c3{animation:srpV3 8s cubic-bezier(.22,1,.36,1) .24s infinite}
@keyframes srpV1{0%,30%{--m1:0}52%,90%{--m1:8}98%,100%{--m1:0}}
@keyframes srpV2{0%,30%{--m2:0}52%,90%{--m2:100}98%,100%{--m2:0}}
@keyframes srpV3{0%,30%{--m3:0}52%,90%{--m3:100}98%,100%{--m3:0}}
@media(prefers-reduced-motion:reduce){.srp__c1{--m1:8}.srp__c2,.srp__c3{--m2:100;--m3:100}.in .srp__c1,.in .srp__c2,.in .srp__c3{animation:none}}

/* ejemplos que enviamos dentro del chat */
.ex{display:flex;gap:7px;margin-top:10px;text-decoration:none}
.ex i{position:relative;flex:1;min-width:0;aspect-ratio:4/3;border-radius:9px;background:linear-gradient(135deg,var(--a),var(--b));overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.28)}
.ex i::before{content:"";position:absolute;left:7px;right:7px;top:7px;height:5px;border-radius:3px;background:rgba(255,255,255,.7)}
.ex i::after{content:"";position:absolute;left:7px;width:46%;top:17px;height:4px;border-radius:3px;background:rgba(255,255,255,.45)}
.ex b{position:absolute;left:7px;bottom:5px;right:4px;font:500 9.5px var(--f-head);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.3)}

/* chat de altura fija: no cambia el tamaño de la tarjeta; lo anterior sube y se desvanece arriba */
.chat{height:236px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
.chat__in{display:flex;flex-direction:column;flex:none;gap:10px;transition:transform .6s var(--ease)}
.chat .msg{display:none}
.chat .msg.mount{display:flex}
.chat .typing{position:static;display:none;align-self:flex-end;opacity:1}
.chat .typing.in{align-self:flex-start}
.chat .typing.show{display:flex}

/* tarjetas que enviamos dentro del chat */
.msg--rich{flex-direction:column;align-items:flex-end;gap:6px}
.rcard{max-width:76%;padding:12px 14px;border-radius:16px;border-bottom-right-radius:6px;background:#0b0b0d;color:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.rcard small{display:block;font:500 11px var(--f-head);opacity:.75}
.rc-mood{display:flex;gap:7px;margin-top:9px}
.rc-mood i{width:54px;height:54px;border-radius:10px;flex:none;position:relative;display:grid;place-items:center;font:700 17px var(--f-head);font-style:normal}
.rc-mood .m1{background:linear-gradient(160deg,#efe6d6,#cdbf9f)}
.rc-mood .m1::after{content:"";position:absolute;right:9px;top:9px;width:11px;height:11px;border-radius:50%;background:#2f6bff}
.rc-mood .m2{background:#2f6bff;color:#fff}
.rc-mood .m3{background:#fff}
.rc-mood .m3 b{width:16px;height:34px;border-radius:5px;background:#d6d9e2}
.rc-pal{display:flex;align-items:center;gap:8px;padding:12px 14px}
.rc-pal i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px rgba(255,255,255,.2)}
.rc-pal small{margin-left:auto;padding-left:16px}
.rc-wire{display:flex;gap:9px;align-items:center;margin-top:9px;padding:9px;border:1.5px dashed rgba(255,255,255,.3);border-radius:10px;min-width:176px}
.rc-wire i{width:42px;height:32px;border-radius:6px;background:rgba(255,255,255,.14);flex:none}
.rc-wire .rc-lines{display:flex;flex-direction:column;gap:5px;flex:1}
.rc-wire u{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.75);width:90%}
.rc-wire u.s{width:62%;opacity:.5}
.rc-wire s{display:block;width:32px;height:9px;border-radius:5px;background:#2f6bff}

/* el móvil baja hasta tocar el borde inferior de su tarjeta */
.bcard .phone-wrap{margin-bottom:calc(-1 * clamp(24px,3vw,38px))}

/* tarjetas del chat: colores y letra, y portada */
.rc-pal{display:block}
.rc-row{display:flex;align-items:center;gap:8px;margin-top:9px}
.rc-pal .rc-row i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px rgba(255,255,255,.22);flex:none}
.rc-pal .rc-row b{margin-left:6px;padding:3px 11px;border-radius:9px;background:var(--c);color:#fff;font:700 15px var(--f-head);line-height:1.2}
.rc-wire.warm i{background:linear-gradient(135deg,#f6ecd9,#e9b36a)}
.rc-wire.warm s{background:#d9805b}

/* vista previa pequeña de "Para tu negocio": web clara, en bloque y sin altura fija */
.biz__vis{min-width:0}
.biz__vis .browser--s{width:100%}
.biz__vis .pg--s{display:block;height:auto;max-height:none;aspect-ratio:4/3.2;background:#fff;color:#0b0b0d}
.biz__vis .site--s{width:100%;height:100%}

/* "Para tu negocio": panel equilibrado, sin huecos grandes */
.biz__grid{align-items:stretch}
.biz__tabs button{padding:12px 20px;font-size:clamp(17px,1.6vw,22px)}
.biz__panel{min-height:0;align-items:center;grid-template-columns:.8fr 1.2fr;padding:clamp(24px,3vw,44px)}
.biz__t h3{font-size:clamp(26px,2.8vw,40px)}
.biz__t p{margin-bottom:18px}
.biz__t ul{margin-bottom:24px}
.biz__vis{align-self:center}
@media(max-width:1000px){.biz__panel{grid-template-columns:1fr}}

/* texto de ayuda de "Para tu negocio": píldora con cursor */
.pick{display:flex;align-items:center;gap:14px;max-width:360px;padding:10px 20px 10px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 34px -22px rgba(0,0,0,.35);font-size:14.5px;line-height:1.35;color:var(--fg2)}
.pick b{font-weight:500;color:var(--fg)}
.pick__i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--blue);box-shadow:0 8px 20px -6px var(--blueglow)}
.pick__i svg{width:17px;height:17px;fill:#fff;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;animation:pickNudge 2.4s var(--ease) infinite}
@keyframes pickNudge{0%,60%,100%{transform:translate(0,0)}30%{transform:translate(-3px,-3px)}}
@media(max-width:900px){.pick{max-width:none}}

/* nota a mano de Servicios: subrayado y flecha que se dibujan en azul */
.hand--sv .hand__t{display:block;font-size:clamp(23px,2.3vw,30px);line-height:1.12}
.hand--sv em{position:relative;font-style:normal;color:var(--blue2);display:inline-block}
.hand .hand__u{position:absolute;left:0;bottom:-7px;width:100%;height:9px;stroke:var(--blue);stroke-width:2.2}
.hand--sv>svg{stroke:var(--blue);stroke-width:2.2}
.hand--sv path{stroke-dasharray:130;stroke-dashoffset:130}
.hand--sv.in path{animation:handDraw 1s .35s cubic-bezier(.6,0,.2,1) forwards}
.hand--sv.in .hand__u path{animation-delay:.9s}
@keyframes handDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hand--sv path{stroke-dashoffset:0;animation:none!important}.pick__i svg{animation:none}}

/* ---------- Botones: perla de cristal ----------
   Píldora convexa con borde de luz, brillo curvo arriba, sombra interior abajo y texto plateado.
   Tres versiones: oscura (principal), azul y clara/ahumada (secundaria). */
.btn{
  --t1:#4b4c54;--t2:#1c1c20;--t3:#0a0a0c;--rim:rgba(255,255,255,.18);--hi:rgba(255,255,255,.42);--low:rgba(0,0,0,.7);--glow:rgba(0,0,0,.6);
  --g1:#ffffff;--g2:#a7aab6;--gloss1:rgba(255,255,255,.3);--gloss2:rgba(255,255,255,.04);--tx:#e9eaf0;
  background:linear-gradient(180deg,var(--t1) 0%,var(--t2) 50%,var(--t3) 100%);
  color:var(--tx);border:0;
  box-shadow:0 0 0 1px var(--rim),inset 0 1.5px 0 var(--hi),inset 0 -12px 20px -8px var(--low),inset 0 0 0 3px rgba(255,255,255,.035),0 16px 26px -16px var(--glow),0 2px 5px rgba(0,0,0,.25);
  transition:transform .35s var(--ease),box-shadow .4s,filter .4s;
}
.btn::before{content:"";position:absolute;left:5.5%;right:5.5%;top:2px;height:50%;border-radius:99px 99px 70% 70%/99px 99px 45% 45%;background:linear-gradient(180deg,var(--gloss1),var(--gloss2) 90%);pointer-events:none;z-index:0}
.btn::after{content:"";position:absolute;left:0;top:0;width:55%;height:100%;border-radius:0;background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.4) 50%,transparent 85%);transform:translateX(-140%) skewX(-18deg);transition:transform .9s var(--ease);z-index:0;pointer-events:none}
.btn:hover::after{top:0;transform:translateX(280%) skewX(-18deg)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.12);color:var(--tx)}
.btn:active{transform:translateY(1px);filter:brightness(.95);box-shadow:0 0 0 1px var(--rim),inset 0 1px 0 var(--hi),inset 0 -6px 12px -6px var(--low),0 6px 12px -10px var(--glow)}
.btn:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
.btn>span{position:relative;z-index:1;color:var(--tx);background:linear-gradient(180deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));letter-spacing:.005em}
.btn svg{stroke:var(--g1)}
/* destello de cuatro puntas, como en la perla de referencia */
.btn:not(.btn--sm)>span::before{content:"";flex:none;width:17px;height:17px;background:linear-gradient(180deg,var(--g1),var(--g2));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c.7 5.3 4.2 8.8 9.5 9.5-5.3.7-8.8 4.2-9.5 9.5-.7-5.3-4.2-8.8-9.5-9.5 5.3-.7 8.8-4.2 9.5-9.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c.7 5.3 4.2 8.8 9.5 9.5-5.3.7-8.8 4.2-9.5 9.5-.7-5.3-4.2-8.8-9.5-9.5 5.3-.7 8.8-4.2 9.5-9.5z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .6s var(--ease)}
.btn:not(.btn--sm):hover>span::before{transform:rotate(90deg) scale(1.12)}

/* principal (oscura) */
.btn--white,.btn--white:hover{color:var(--tx)}
/* azul */
.btn--blue,.btn--blue:hover{--t1:#76a0ff;--t2:#2f6bff;--t3:#1a44bd;--rim:rgba(255,255,255,.38);--hi:rgba(255,255,255,.6);--low:rgba(8,24,110,.75);--glow:rgba(47,107,255,.75);--g1:#ffffff;--g2:#d6e3ff;--gloss1:rgba(255,255,255,.42);--tx:#fff;color:#fff}
/* secundaria: humo oscuro y perla blanca en modo claro */
.btn--dark,.btn--dark:hover{--t1:#3c3d44;--t2:#202024;--t3:#121215;--tx:#e9eaf0;color:var(--tx);box-shadow:0 0 0 1px var(--rim),inset 0 1.5px 0 var(--hi),inset 0 -12px 20px -8px var(--low),inset 0 0 0 3px rgba(255,255,255,.035),0 16px 26px -16px var(--glow),0 2px 5px rgba(0,0,0,.25)}
:root[data-theme=light] .btn--dark,:root[data-theme=light] .btn--dark:hover{--t1:#ffffff;--t2:#f0f2f8;--t3:#d8dce8;--rim:rgba(0,0,0,.1);--hi:rgba(255,255,255,1);--low:rgba(80,90,130,.28);--glow:rgba(30,40,80,.4);--g1:#2d303b;--g2:#07070b;--gloss1:rgba(255,255,255,.95);--gloss2:rgba(255,255,255,.25);--tx:#07070b}
:root[data-theme=light] .btn--dark>span{filter:none}
:root[data-theme=light] .btn--dark svg{stroke:#07070b}
@media(prefers-reduced-motion:reduce){.btn,.btn::after,.btn:not(.btn--sm)>span::before{transition:none}}
.btn--blue,.btn--blue:hover{--t1:#5a8bff;--g2:#ffffff;--gloss1:rgba(255,255,255,.24)}
.btn--blue>span{filter:drop-shadow(0 1px 1px rgba(10,30,120,.6))}

/* nota a mano de Servicios: todo en negro, sin subrayado */
.hand--sv em{color:inherit}
.hand--sv .hand__u{display:none}
.hand--sv>svg{stroke:currentColor;stroke-width:1.8}

/* ---------- Botón perla (port del componente "Pearl Button") ----------
   Estructura que genera pearl.js:  .btn > span(.wrap) > .bt(<p>) > [✧][✦] contenido */
.btn{
  --bg:#080808;--ink:rgba(255,255,255,.72);
  --sh-a:inset 0 .3rem .9rem rgba(255,255,255,.3);--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.7);--sh-c:inset 0 -.4rem .9rem rgba(255,255,255,.5);
  --sh-d:0 1.1rem 1.4rem -.7rem rgba(0,0,0,.45),0 .5rem .7rem -.5rem rgba(0,0,0,.75);
  --ell:rgba(255,255,255,.12);--glossA:rgba(255,255,255,.3);--glossLine:rgba(255,255,255,.8);
  background:var(--bg);background-image:none;border:0;color:var(--ink);filter:none;
  box-shadow:var(--sh-a),var(--sh-b),var(--sh-c),var(--sh-d);
  transition:box-shadow .25s ease,background-color .25s ease;
}
.btn::before,.btn::after{display:none}
.btn:hover{transform:none;filter:none;color:var(--ink);--sh-a:inset 0 .3rem .5rem rgba(255,255,255,.4);--sh-c:inset 0 -.4rem .9rem rgba(255,255,255,.7)}
.btn:active{--sh-a:inset 0 .3rem .5rem rgba(255,255,255,.5);--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.8);--sh-c:inset 0 -.4rem .9rem rgba(255,255,255,.4)}
.btn>span{position:relative;overflow:hidden;border-radius:inherit;z-index:1;color:var(--ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;filter:none;font-weight:500;letter-spacing:0}
.btn>span::before,.btn>span::after{content:"";position:absolute;transition:all .3s ease;pointer-events:none;-webkit-mask:none;mask:none;width:auto;height:auto;flex:none;background-size:auto}
.btn>span::before{left:-15%;right:-15%;bottom:25%;top:-100%;border-radius:50%;background:var(--ell)}
.btn>span::after{left:6%;right:6%;top:12%;bottom:40%;border-radius:18px 18px 0 0;box-shadow:inset 0 8px 6px -8px var(--glossLine);background:linear-gradient(180deg,var(--glossA) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%)}
.btn:not(.btn--sm)>span::before{transform:none;background:var(--ell)}
.btn:hover>span::before{transform:translateY(-5%)}
.btn:not(.btn--sm):hover>span::before{transform:translateY(-5%)}
.btn:hover>span::after{opacity:.4;transform:translateY(5%)}
.bt{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin:0;transform:translateY(2%);transition:all .2s ease;-webkit-mask-image:linear-gradient(to bottom,#fff 40%,transparent);mask-image:linear-gradient(to bottom,#fff 40%,transparent)}
.btn:hover .bt{transform:translateY(-4%)}
.bt .sp{font-style:normal;line-height:1}
.bt .sp+.sp{display:none}
.btn:hover .bt .sp:first-child{display:none}
.btn:hover .bt .sp+.sp{display:inline-block}
.btn--sm .bt .sp{display:none!important}
.btn svg{stroke:currentColor}

/* azul */
.btn--blue,.btn--blue:hover{--bg:#2f6bff;--ink:rgba(255,255,255,.95);--sh-d:0 1.1rem 1.5rem -.7rem rgba(47,107,255,.75),0 .5rem .7rem -.5rem rgba(10,30,120,.7);--ell:rgba(255,255,255,.2);--glossA:rgba(255,255,255,.4)}
/* secundaria: humo oscuro (oscuro) / perla clara (claro) */
.btn--dark,.btn--dark:hover{--bg:#1b1c21;--ink:rgba(255,255,255,.8);color:var(--ink)}
:root[data-theme=light] .btn--dark,:root[data-theme=light] .btn--dark:hover{
  --bg:#f3f4f9;--ink:#23262f;
  --sh-a:inset 0 .3rem .9rem rgba(255,255,255,.95);--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.16);--sh-c:inset 0 -.4rem .9rem rgba(110,120,165,.28);
  --sh-d:0 0 0 1px rgba(0,0,0,.08),0 1rem 1.3rem -.8rem rgba(30,40,80,.45);
  --ell:rgba(255,255,255,.75);--glossA:rgba(255,255,255,.95);--glossLine:rgba(255,255,255,1)}
:root[data-theme=light] .btn--dark svg{stroke:currentColor}
.nav__cta .bt{gap:9px}

/* texto de los botones: sólido y totalmente visible, sin degradado ni difuminado */
.bt{-webkit-mask-image:none;mask-image:none}
.btn{--ink:#ffffff}
.btn--blue,.btn--blue:hover{--ink:#ffffff}
.btn--dark,.btn--dark:hover{--ink:#ffffff}
:root[data-theme=light] .btn--dark,:root[data-theme=light] .btn--dark:hover{--ink:#0b0b0f}
.btn>span,.btn:hover>span{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.btn:not(.btn--dark)>span,.btn--dark:not(:hover)>span{text-shadow:0 1px 1px rgba(0,0,0,.35)}
:root[data-theme=light] .btn--dark>span{text-shadow:none}

/* modo oscuro: botón principal en azul y secundario en blanco */
:root[data-theme=dark] .btn--white,:root[data-theme=dark] .btn--white:hover{
  --bg:#2f6bff;--ink:#ffffff;--sh-d:0 1.1rem 1.5rem -.7rem rgba(47,107,255,.75),0 .5rem .7rem -.5rem rgba(10,30,120,.7);--ell:rgba(255,255,255,.2);--glossA:rgba(255,255,255,.4)}
:root[data-theme=dark] .btn--dark,:root[data-theme=dark] .btn--dark:hover{
  --bg:#f3f4f9;--ink:#0b0b0f;
  --sh-a:inset 0 .3rem .9rem rgba(255,255,255,.95);--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.16);--sh-c:inset 0 -.4rem .9rem rgba(110,120,165,.28);
  --sh-d:0 1rem 1.4rem -.8rem rgba(0,0,0,.7);
  --ell:rgba(255,255,255,.75);--glossA:rgba(255,255,255,.95);--glossLine:rgba(255,255,255,1)}
:root[data-theme=dark] .btn--dark>span{text-shadow:none}

/* botón principal: azul en los dos modos */
.btn--white,.btn--white:hover,:root[data-theme=light] .btn--white,:root[data-theme=light] .btn--white:hover{
  --bg:#2f6bff;--ink:#ffffff;--sh-a:inset 0 .3rem .9rem rgba(255,255,255,.3);--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.7);--sh-c:inset 0 -.4rem .9rem rgba(255,255,255,.5);
  --sh-d:0 1.1rem 1.5rem -.7rem rgba(47,107,255,.75),0 .5rem .7rem -.5rem rgba(10,30,120,.7);--ell:rgba(255,255,255,.2);--glossA:rgba(255,255,255,.4)}
.btn--white:hover,:root[data-theme=light] .btn--white:hover{--sh-a:inset 0 .3rem .5rem rgba(255,255,255,.4);--sh-c:inset 0 -.4rem .9rem rgba(255,255,255,.7)}

/* secundaria en modo oscuro: perla blanca con volumen visible sobre negro */
:root[data-theme=dark] .btn--dark,:root[data-theme=dark] .btn--dark:hover{
  --bg:linear-gradient(180deg,#ffffff 0%,#e9ebf3 52%,#bfc4d6 100%);--ink:#0b0b0f;
  --sh-a:inset 0 .35rem .8rem rgba(255,255,255,1);--sh-b:inset 0 -.12rem .3rem rgba(35,45,90,.4);--sh-c:inset 0 -.55rem 1rem rgba(70,80,135,.42);
  --sh-d:0 0 0 1px rgba(255,255,255,.6),0 0 26px -4px rgba(255,255,255,.3),0 1rem 1.4rem -.8rem rgba(0,0,0,.85);
  --ell:rgba(255,255,255,.8);--glossA:rgba(255,255,255,.9)}
:root[data-theme=dark] .btn--dark:hover{--sh-a:inset 0 .3rem .6rem rgba(255,255,255,1);--sh-d:0 0 0 1px rgba(255,255,255,.8),0 0 34px -2px rgba(255,255,255,.4),0 1rem 1.4rem -.8rem rgba(0,0,0,.85)}
:root[data-theme=dark] .btn--dark,:root[data-theme=dark] .btn--dark:hover{background-color:#e9ebf3;background-image:linear-gradient(180deg,#ffffff 0%,#e9ebf3 52%,#bfc4d6 100%)}

/* azules uniformes: el botón grande (hero, formulario) tenía menos brillo interior que el pequeño y se veía más oscuro */
.btn--white,.btn--blue,.btn--white:hover,.btn--blue:hover{--bg:#3a74ff}
.btn--white:not(.btn--sm),.btn--blue:not(.btn--sm){--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.4);--sh-c:inset 0 -.6rem 1.2rem rgba(255,255,255,.6)}
.btn--white:not(.btn--sm):hover,.btn--blue:not(.btn--sm):hover{--sh-c:inset 0 -.6rem 1.2rem rgba(255,255,255,.75)}
.btn--white.btn--sm,.btn--blue.btn--sm{--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.4)}
.btn--white:not(.btn--sm),.btn--blue:not(.btn--sm),.btn--white:not(.btn--sm):hover,.btn--blue:not(.btn--sm):hover{--bg:#4a80ff}

/* "Para tu negocio": misma nota a mano que Servicios, con la flecha hacia la lista de sectores */
.hand--pk{text-align:left;margin:0 auto 10px 0;transform:rotate(-2deg)}
.hand--sv.hand--pk>svg{order:-1;transform:scaleX(-1) translateY(30px);margin:0 4px 0 0}
@media(min-width:1001px){.hand--pk{margin-left:auto;margin-right:6px}}

/* ---------- "Para tu negocio": sin selección al llegar, presentación animada y pestaña activa tipo perla ---------- */
.biz__panel.idle>.biz__t,.biz__panel.idle>.biz__vis{display:none}
.biz__panel:not(.idle)>.biz__intro{display:none}
.biz__panel>.biz__t,.biz__panel>.biz__vis{animation:bizIn .6s var(--ease)}
@keyframes bizIn{from{opacity:0;transform:translateY(14px)}}
.biz__intro{grid-column:1/-1;position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,48px);align-items:center;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.biz__panel.swap .biz__intro{opacity:0;transform:translateY(12px)}
.biz__itx{position:relative}
.biz__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 14px;border-radius:99px;background:rgba(47,107,255,.12);color:var(--blue2);font:500 12.5px var(--f-head);letter-spacing:.02em}
.biz__badge i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 var(--blueglow);animation:bizPulse 2.2s infinite}
@keyframes bizPulse{70%{box-shadow:0 0 0 8px rgba(47,107,255,0)}100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}}
.biz__itx h3 em{color:var(--blue2)}
.biz__itx ul{margin-bottom:0}
.biz__iv{display:grid;place-items:center;padding:10px}
.bz{--ac:#2f6bff;position:relative;isolation:isolate;width:min(100%,360px);border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(0,0,0,.45);animation:bzFloat 6s ease-in-out infinite}
.bz::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--ac) 38%,transparent),transparent 66%);filter:blur(26px);opacity:.9}
@keyframes bzFloat{50%{transform:translateY(-8px)}}
.bz__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.bz__bar i{width:9px;height:9px;border-radius:50%;background:var(--card3)}
.bz__bar span{margin-left:10px;flex:1;padding:4px 12px;border-radius:99px;background:var(--card2);color:var(--muted);font-size:11.5px;text-align:center}
.bz__body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px 22px 22px}
.bz__eyebrow{color:var(--muted);font-size:12.5px}
.bz__w{font:300 clamp(30px,3.2vw,42px)/1.05 var(--f-head);letter-spacing:-.045em;color:var(--ac);min-height:1.1em;transition:color .5s}
.bz__w span,.bz__btn{display:inline-block;transition:opacity .28s,transform .35s var(--ease),background-color .5s}
.bz__btn{margin-top:10px;padding:10px 20px;border-radius:99px;background:var(--ac);color:#fff;font:500 13.5px var(--f-head);box-shadow:inset 0 .2rem .5rem rgba(255,255,255,.35),inset 0 -.35rem .7rem rgba(255,255,255,.25),0 10px 22px -10px var(--ac)}
.bz.flip .bz__w span,.bz.flip .bz__btn{opacity:0;transform:translateY(8px)}
.bz__t{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:16px}
.bz__t i{aspect-ratio:1.25;border-radius:10px;background:color-mix(in srgb,var(--ac) 16%,var(--card2));transition:background-color .5s}
.bz__t i:nth-child(2){background:color-mix(in srgb,var(--ac) 28%,var(--card2))}
@media(max-width:700px){.biz__intro{grid-template-columns:1fr}}

/* pestaña activa: píldora azul 3D, como los botones */
.biz__tabs button[aria-selected=true]{
  color:#fff;font-weight:500;transform:translateX(4px);
  background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.4),rgba(255,255,255,0) 72%),#4a80ff;
  box-shadow:inset 0 .3rem .9rem rgba(255,255,255,.3),inset 0 -.1rem .3rem rgba(0,0,0,.4),inset 0 -.55rem 1.1rem rgba(255,255,255,.5),0 1.1rem 1.5rem -.7rem rgba(47,107,255,.8),0 .5rem .7rem -.5rem rgba(10,30,120,.7);
  animation:tabPop .5s var(--ease)}
@keyframes tabPop{0%{transform:translateX(0) scale(.96)}55%{transform:translateX(7px) scale(1.02)}100%{transform:translateX(4px) scale(1)}}
.biz__tabs button:not([aria-selected=true]):hover{transform:translateX(3px)}
.biz__tabs button{transition:background-color .4s,color .4s,transform .45s var(--ease),box-shadow .4s}
@media(prefers-reduced-motion:reduce){.biz__tabs button[aria-selected=true]{animation:none}.bz{animation:none}}

/* pestaña activa en neutro (grafito / perla) para que el azul quede solo para los CTA */
.biz__tabs button[aria-selected=true]{
  color:#fff;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 72%),#17181c;
  box-shadow:inset 0 .3rem .9rem rgba(255,255,255,.26),inset 0 -.1rem .3rem rgba(0,0,0,.75),inset 0 -.5rem 1rem rgba(255,255,255,.2),0 1.1rem 1.4rem -.8rem rgba(0,0,0,.55),0 .5rem .7rem -.5rem rgba(0,0,0,.65)}
:root[data-theme=dark] .biz__tabs button[aria-selected=true]{
  color:#0b0b0f;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),linear-gradient(180deg,#f4f5fa 0%,#d9dce8 60%,#bfc4d6 100%);
  box-shadow:inset 0 .3rem .8rem rgba(255,255,255,1),inset 0 -.12rem .3rem rgba(35,45,90,.35),inset 0 -.5rem 1rem rgba(70,80,135,.35),0 0 0 1px rgba(255,255,255,.5),0 0 24px -4px rgba(255,255,255,.28),0 1rem 1.4rem -.8rem rgba(0,0,0,.8)}
.biz__tabs button[aria-selected=true]::after{color:inherit}

/* pestaña activa discreta: solo un borde, sin relleno */
.biz__tabs button[aria-selected=true],
:root[data-theme=dark] .biz__tabs button[aria-selected=true]{
  color:var(--fg);background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg)}

/* botones más compactos en móvil */
@media(max-width:700px){
  .btn:not(.btn--sm)>span{padding:15px 25px;font-size:15px}
  .btn:not(.btn--sm) .bt{gap:8px}
  .btn{--sh-d:0 .7rem 1rem -.6rem rgba(0,0,0,.4),0 .35rem .5rem -.4rem rgba(0,0,0,.6)}
  .btn--white,.btn--blue,.btn--white:hover,.btn--blue:hover{--sh-d:0 .7rem 1rem -.6rem rgba(47,107,255,.7),0 .35rem .5rem -.4rem rgba(10,30,120,.6)}
  .btn svg{width:16px;height:16px}
  .biz__t .btn,.work .btn{align-self:flex-start}
}

/* selector de sector del formulario */
.form select{width:100%;font:inherit;font-weight:400;color:var(--fg);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c909b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;border:1px solid var(--line2);border-radius:14px;padding:14px 44px 14px 16px;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s}
.form select:invalid{color:var(--muted)}
.form select:focus{border-color:var(--blue2);box-shadow:0 0 0 4px rgba(47,107,255,.22)}
.form select option{color:#111;background:#fff}

/* móvil: el fondo de contacto son las letras en movimiento del hero, no el degradado azul */
@media(max-width:800px){
  .cta__box{background:transparent;border-color:var(--line)}
  .cta__glow{display:none}
}

/* móvil: el contacto final es una tarjeta azul con las letras en movimiento dentro */
@media(max-width:800px){
  .cta__box{background:linear-gradient(165deg,#5a8bff 0%,#2f6bff 42%,#1f4fd6 100%);border-color:rgba(255,255,255,.3);box-shadow:0 34px 70px -30px rgba(47,107,255,.85),inset 0 1px 0 rgba(255,255,255,.35)}
  .cta__fx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
  .cta__l,.form{z-index:1}
  .cta__l .eyebrow,.cta__l h2{color:#fff}
  .cta__l h2 em{color:#e3ecff}
  .cta__l .muted{color:rgba(255,255,255,.88)}
  .cta__box .form{background:rgba(255,255,255,.94);box-shadow:0 24px 50px -26px rgba(5,20,90,.6)}
}
@media(max-width:800px){.cta__box .cta__l h2 em{color:#dfe9ff!important}}
@media(max-width:800px){.cta__box .cta__l h2 .serif{color:#dfe9ff!important;-webkit-text-fill-color:#dfe9ff!important}}

/* móvil: azul oscuro arriba que se funde a blanco abajo */
@media(max-width:800px){
  .cta__box{background:linear-gradient(180deg,#0b2a94 0%,#1642c6 30%,#4d7dff 58%,#b9ceff 82%,#ffffff 100%);border-color:rgba(47,107,255,.28);box-shadow:0 34px 70px -34px rgba(20,60,190,.7)}
  .cta__box .form{background:rgba(255,255,255,.96);border:1px solid rgba(20,60,190,.18);box-shadow:0 24px 50px -26px rgba(5,20,90,.65)}
}
.btn--block .bt{white-space:nowrap;justify-content:center;width:100%}
@media(max-width:700px){.btn--block>span{padding-inline:14px;width:100%;justify-content:center}.btn--block .bt .sp{display:none!important}}

/* ---------- CTA final: losa de perla azul, con el mismo relieve que los botones ---------- */
.cta__box{
  background:linear-gradient(180deg,#4a80ff 0%,#2f6bff 52%,#2352e0 100%);
  border:0;border-radius:40px;
  box-shadow:
    inset 0 .55rem 1.5rem rgba(255,255,255,.34),
    inset 0 -.15rem .4rem rgba(0,0,0,.4),
    inset 0 -1.1rem 2.2rem rgba(255,255,255,.3),
    0 2.6rem 3.6rem -1.8rem rgba(47,107,255,.8),
    0 1rem 1.6rem -1rem rgba(10,30,120,.7);
}
.cta__glow{display:none}
/* elipse de brillo arriba y banda de luz curva, como el .wrap de los botones */
.cta__box::before,.cta__box::after{content:"";position:absolute;pointer-events:none;z-index:0}
.cta__box::before{left:-12%;right:-12%;top:-62%;height:98%;border-radius:50%;background:rgba(255,255,255,.13)}
.cta__box::after{left:4%;right:4%;top:2.5%;height:26%;border-radius:36px 36px 0 0;box-shadow:inset 0 14px 12px -14px rgba(255,255,255,.85);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0))}
.cta__l,.form{z-index:1}
.cta__fx{z-index:0}
.cta__box .eyebrow,.cta__box h2{color:#fff}
.cta__box h2 .serif,.cta__box h2 em{color:#e3ecff!important;-webkit-text-fill-color:#e3ecff!important}
.cta__box .eyebrow::before{background:rgba(255,255,255,.7)}
.cta__box .muted{color:rgba(255,255,255,.88)}

/* panel del formulario: perla clara hundida en la losa */
.cta__box .form{
  background:linear-gradient(180deg,#ffffff 0%,#f1f3fa 100%);
  border:0;
  box-shadow:inset 0 .35rem .9rem rgba(255,255,255,1),inset 0 -.15rem .4rem rgba(35,50,110,.14),0 1.8rem 2.6rem -1.4rem rgba(5,20,90,.75),0 0 0 1px rgba(255,255,255,.55);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cta__box .form label{color:#2a2d38}
.cta__box .form input,.cta__box .form textarea{background:#eef0f7;border:1px solid rgba(20,30,80,.1);box-shadow:inset 0 2px 6px rgba(20,30,80,.1);color:#0b0b0f}
.cta__box .form input::placeholder,.cta__box .form textarea::placeholder{color:#7a8094}
.cta__box .form input:focus,.cta__box .form textarea:focus{background:#fff;border-color:#2f6bff;box-shadow:inset 0 1px 3px rgba(20,30,80,.08),0 0 0 4px rgba(47,107,255,.22)}
.cta__box .form__msg{color:#1d4ed8}

@media(max-width:800px){
  .cta__box{background:linear-gradient(180deg,#4a80ff 0%,#2f6bff 52%,#2352e0 100%);border:0;box-shadow:inset 0 .5rem 1.3rem rgba(255,255,255,.34),inset 0 -.15rem .4rem rgba(0,0,0,.4),inset 0 -1rem 2rem rgba(255,255,255,.3),0 2.2rem 3rem -1.6rem rgba(47,107,255,.8),0 .8rem 1.4rem -1rem rgba(10,30,120,.7)}
  .cta__box .form{background:linear-gradient(180deg,#ffffff 0%,#f1f3fa 100%);border:0}
}
@media(max-width:800px){.cta__box::before{top:-48%;height:70%}.cta__box::after{height:18%}}

/* el botón blanco del CTA final es idéntico en modo claro y oscuro */
:root[data-theme=dark] .cta__box .btn--dark,:root[data-theme=dark] .cta__box .btn--dark:hover{
  --bg:#f3f4f9;--ink:#0b0b0f;
  --sh-a:inset 0 .3rem .9rem rgba(255,255,255,.95);--sh-b:inset 0 -.1rem .3rem rgba(0,0,0,.16);--sh-c:inset 0 -.4rem .9rem rgba(110,120,165,.28);
  --sh-d:0 0 0 1px rgba(0,0,0,.08),0 1rem 1.3rem -.8rem rgba(30,40,80,.45);
  --ell:rgba(255,255,255,.75);--glossA:rgba(255,255,255,.95);--glossLine:rgba(255,255,255,1);
  background-color:#f3f4f9;background-image:none}
:root[data-theme=dark] .cta__box .btn--dark:hover{--sh-a:inset 0 .3rem .5rem rgba(255,255,255,.95);--sh-c:inset 0 -.4rem .9rem rgba(110,120,165,.4)}

/* botón de WhatsApp: icono de WhatsApp en lugar del destello */
.btn--wa .bt .sp{display:none!important}
.btn .bt svg.wa{width:19px;height:19px;flex:none;fill:currentColor;stroke:none}
.btn:hover .bt svg.wa{transform:none}

/* webs que no permiten mostrarse dentro de otra página: tarjeta con enlace */
.wk__noembed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:var(--bg);color:#fff}
.wk__poster{width:100%;border:0;font:inherit;cursor:pointer}
.wk__noembed b{font:300 clamp(30px,5vw,56px)/1 var(--f-head);letter-spacing:-.04em}
.wk__noembed span{opacity:.85;font-size:15px;margin-bottom:10px}

/* miniaturas con el logo de cada negocio */
.wk__th--logo{background:var(--lbg);padding:0}
.wk__th--logo::after{display:none}
.wk__th--logo img{position:relative;z-index:1;width:60%;height:60%;object-fit:contain;pointer-events:none;user-select:none}
.wk__th--wide img{width:86%;height:auto;max-height:60%}
.wk__th--logo:not(.on):not(:hover){opacity:.8}
.wk__th--logo:not(.on){box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}
/* logo claro sobre fondo oscuro: en reposo se ve oscuro sobre fondo blanquito, como los demas, y al elegirlo recupera sus colores */
.wk__th--inv{transition:background .35s,opacity .3s,transform .3s}
.wk__th--inv img{transition:filter .35s}
.wk__th--inv:not(.on):not(:hover) img{filter:brightness(0) invert(.3)}
.wk__th--inv.on,.wk__th--inv:hover{background:var(--inv)}
.wk__cap>div:first-child{max-width:620px}
.wk__cap span{display:block;margin-top:6px;line-height:1.5}

/* aviso: la maqueta del sector es solo una muestra */
.biz__note{position:absolute;top:clamp(16px,2vw,24px);right:clamp(20px,2.4vw,30px);z-index:3;padding:0;background:none;border:0;color:var(--muted);opacity:.7;font:400 11.5px var(--f-body);letter-spacing:.02em;pointer-events:none;transition:opacity .35s var(--ease)}
.biz__panel.idle>.biz__note{display:none}
.biz__panel.swap>.biz__note{opacity:0}
@media(max-width:700px){.biz__note{position:static;display:inline-block;margin:0 0 12px auto;align-self:flex-end}}

/* ---------- Equipo arcade sentado sobre la tarjeta del CTA ---------- */
.cta .wrap{position:relative}
.crew{position:absolute;right:clamp(24px,7vw,110px);top:0;z-index:2;display:flex;align-items:flex-start;gap:0;pointer-events:none}
.crew{--u:clamp(42px,3.8vw,56px)}
.crew__m{--w:calc(var(--u)*var(--k,1)*var(--fw)/135);--h:calc(var(--w)*var(--r));display:block;flex:none;width:var(--w);height:var(--h);margin-top:calc(var(--u)*var(--k,1)*var(--leg) - var(--h));background:var(--img) 0 0/calc(var(--w)*6) 100% no-repeat;animation:var(--anim) 2.4s steps(1) infinite;animation-delay:var(--d,0s)}
.crew__m--1{--img:url(assets/crew-1.webp);--fw:135;--r:1.63;--leg:.57;--k:1.057;--anim:crew-wave1}
.crew__m--3{--img:url(assets/crew-3.webp);--fw:130;--r:1.785;--leg:.57;--anim:crew-wave3;--d:-1.6s}
.crew__m--2{--img:url(assets/crew-2.webp);--fw:126;--r:1.889;--leg:.6;--k:.977;--anim:crew-wave2;--d:-.9s}
/* reposo, mano que sube, mano arriba, parpadeo y vuelta; cada hoja tiene sus frames en distinto orden */
@keyframes crew-wave1{0%{background-position-x:calc(var(--w)*-0)}26%{background-position-x:calc(var(--w)*-1)}36%{background-position-x:calc(var(--w)*-3)}46%{background-position-x:calc(var(--w)*-4)}56%{background-position-x:calc(var(--w)*-3)}66%{background-position-x:calc(var(--w)*-1)}76%{background-position-x:calc(var(--w)*-3)}86%{background-position-x:calc(var(--w)*-1)}94%{background-position-x:calc(var(--w)*-0)}}
@keyframes crew-wave2{0%{background-position-x:calc(var(--w)*-0)}24%{background-position-x:calc(var(--w)*-1)}32%{background-position-x:calc(var(--w)*-2)}40%{background-position-x:calc(var(--w)*-3)}48%{background-position-x:calc(var(--w)*-4)}56%{background-position-x:calc(var(--w)*-3)}64%{background-position-x:calc(var(--w)*-2)}72%{background-position-x:calc(var(--w)*-3)}80%{background-position-x:calc(var(--w)*-1)}90%{background-position-x:calc(var(--w)*-0)}}
@keyframes crew-wave3{0%{background-position-x:calc(var(--w)*-0)}22%{background-position-x:calc(var(--w)*-1)}30%{background-position-x:calc(var(--w)*-2)}40%{background-position-x:calc(var(--w)*-3)}50%{background-position-x:calc(var(--w)*-2)}58%{background-position-x:calc(var(--w)*-4)}70%{background-position-x:calc(var(--w)*-2)}78%{background-position-x:calc(var(--w)*-3)}86%{background-position-x:calc(var(--w)*-5)}94%{background-position-x:calc(var(--w)*-0)}}
@media(max-width:800px){.crew{right:20px}.cta__box{padding-top:calc(clamp(30px,6vw,80px) + 14px)}}
@media(prefers-reduced-motion:reduce){.crew__m{animation:none}}
.crew__m--3{margin-left:calc(var(--u)*-.03)}
.crew__m--2{margin-left:calc(var(--u)*.04)}

/* sentados sobre la G del footer; todo en em para que escalen con la palabra */
.foot__word{position:relative}
.crew.crew--foot{right:auto;left:calc(50% - 1.02em);top:calc(20px + .045em);transform:translateX(-50%);--u:max(.07em,20px);letter-spacing:0;line-height:0;-webkit-text-fill-color:initial}
.wk__idle{background:#f1f2f7;color:#6a6e7d}
.wk__idle b{font:italic 400 clamp(38px,12vw,58px)/1 var(--f-serif);letter-spacing:.02em;color:#2b2e3b;animation:wkIdle 2.4s ease-in-out infinite}
@keyframes wkIdle{50%{opacity:.45;transform:translateY(-4px)}}
.wk__tabs.idle{pointer-events:none}
/* movil: los dos botones de cada web siempre en una linea, repartiéndose el ancho */
@media(max-width:760px){
  .wk__row{flex-wrap:nowrap;width:100%;gap:8px}
  .wk__row .btn{flex:1 1 0;min-width:0}
  .wk__row .btn>span{flex:1;display:flex;justify-content:center;padding:15px 4px;font-size:clamp(10px,3.1vw,14px);white-space:nowrap}
  .wk__row .btn .bt{gap:5px}
  .wk__row .btn .bt .sp{font-size:1.1em}
}
/* movil: sin pestañas (se ve solo la landing) y la direccion siempre en una linea */
@media(max-width:760px){
  .wk__bar{display:none}
  .wk__addr{border-radius:14px 14px 0 0;margin-top:6px}
  .wk__url{min-width:0;white-space:nowrap;font-size:clamp(11px,3.4vw,13px);padding:6px 10px}
  .wk__url b{overflow:hidden;text-overflow:ellipsis;min-width:0}
}

/* Enfoque en movil/tablet: mosaico en vez de tarjetas una tras otra (unas a todo el ancho, otras a media, el movil alto) */
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bcard--7,.bcard--5{grid-column:span 1}
  .bento>.bcard:nth-child(1){grid-column:1/-1;order:1}
  .bento>.bcard:nth-child(2){order:2;grid-row:span 2}
  .bento>.bcard:nth-child(3){order:3}
  .bento>.bcard:nth-child(6){order:4}
  .bento>.bcard:nth-child(4){grid-column:1/-1;order:5}
  .bento>.bcard:nth-child(5){grid-column:1/-1;order:6}
  .bcard{min-height:0;padding:20px;gap:18px;border-radius:22px}
  .bcard__t h3{font-size:clamp(18px,4.6vw,24px)}
  .bcard__t p{font-size:14px}
}
@media(max-width:600px){
  .bcard{padding:16px;gap:14px}
  .bcard__t h3{font-size:18px;margin-bottom:6px}
  .bcard__t p{font-size:13px;line-height:1.5}
  .bento>.bcard:nth-child(1) .bcard__t h3,.bento>.bcard:nth-child(4) .bcard__t h3,.bento>.bcard:nth-child(5) .bcard__t h3{font-size:21px}
  .bento>.bcard:nth-child(1) .bcard__t p,.bento>.bcard:nth-child(4) .bcard__t p,.bento>.bcard:nth-child(5) .bcard__t p{font-size:14px}
  .bcard .phone{width:min(124px,30vw);height:440px;border-radius:26px 26px 0 0;border-width:5px}
  .kpi{padding:12px 12px 10px;gap:8px}
  .kpi__top em,.kpi__d{display:none}
  .kpi__top{font-size:11.5px}
  .kpi__n{font-size:34px}
  .kpi__bars{height:52px;gap:3px}
  .kpi__x{font-size:10px}
  .live{padding:12px;gap:10px}
  .live .clock{width:84px}
  .live__time b{font-size:30px}.live__time span{font-size:14px}
  .live__st{font-size:11px;padding:4px 9px}
  .live__x{display:none}
}
@media(max-width:600px){
  .bento>.bcard:nth-child(2) .bcard__t p,.bento>.bcard:nth-child(3) .bcard__t p,.bento>.bcard:nth-child(6) .bcard__t p{display:none}
  .bento>.bcard:nth-child(2),.bento>.bcard:nth-child(3),.bento>.bcard:nth-child(6){gap:12px}
  .kpi__n{font-size:30px;white-space:nowrap}
  .kpi__x{font-size:9.5px;gap:4px;white-space:nowrap}
  .kpi__x span:last-child{text-align:right}
  .live__st{white-space:nowrap}
  .live .clock{width:76px}
}
/* el logo nunca se comprime: lo que sobra se lo quitan los botones, no el logo */
.logo{flex:none}
.logo img{max-width:none;flex:none}
@media(max-width:800px){
  .nav__pill{gap:6px}
  .navbtn{width:44px;height:44px}
  .navbtn .mascot{--d:40px}
}
/* movil: las webs no se incrustan (se abren en su pestaña), asi que no hay nada que deslizar */
.wk__noembed .btn{align-self:center}
/* movil: captura larga de la web que se desliza dentro del dispositivo */
.wk__shot{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:#fff;touch-action:pan-y}
.wk__shot img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}

/* Enfoque: el movil deja de ser una tarjeta alta; las dos pequeñas (conversion y reloj) van juntas y el movil va a ancho completo, con el texto a un lado */
@media(max-width:1000px){
  .bento>.bcard:nth-child(2){grid-row:auto;grid-column:1/-1;order:4;flex-direction:row;align-items:stretch;gap:12px}
  .bento>.bcard:nth-child(2) .bcard__t{flex:1;min-width:0}
  .bento>.bcard:nth-child(2) .phone-wrap{flex:none;align-self:flex-end;margin:0 0 -20px}
  .bento>.bcard:nth-child(3){order:2}
  .bento>.bcard:nth-child(6){order:3}
}
@media(max-width:600px){
  .bento>.bcard:nth-child(2) .bcard__t p{display:block}
  .bcard .phone{width:112px;height:190px}
}

/* ===== Movil / iPhone: animaciones fluidas y sin recortes rotos =====
   - Safari no recorta (overflow:hidden + radio) lo que hay dentro de un elemento con giro 3D o animado: el movil dibujado se salia de su marco.
   - Los desenfoques (filter:blur) en tarjetas grandes se ven a saltos y dejan huecos en blanco en iOS.
   - El :hover se queda pegado tras tocar y levanta las tarjetas. */
@media(max-width:800px){
  .reveal{filter:none!important;transform:translateY(22px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
  .reveal.in{transform:none}
  .msg{filter:none!important}
  .phone{transform:none!important;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);box-shadow:0 18px 40px -18px rgba(47,107,255,.55)}
  .phone-wrap{perspective:none}
  .phone__scr{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
  .bcard,.kpi,.cms,.live,.srp__box,.wk__view,.wk__dev{isolation:isolate}
  .bcard,.chat,.kpi,.cms,.live,.srp{-webkit-backface-visibility:hidden;backface-visibility:hidden}
}
@media(hover:none){
  .bcard:hover{transform:none;border-color:var(--line)}
  .bcard:hover .phone{transform:none}
}

/* Movil: cifras y buscador movidos por JS (ver extras2.js) */
.jsnum .kpi__n{counter-reset:none}
.jsnum .kpi__n::after{content:none}
.jsnum .srp__c1::before,.jsnum .srp__c2::before,.jsnum .srp__c3::before{content:none}
.jsnum .in .srp__c1,.jsnum .in .srp__c2,.jsnum .in .srp__c3{animation:none}
.jsnum .srp__q{width:auto;max-width:100%;min-width:2px;overflow:hidden;text-overflow:clip;animation:none!important}
.jsnum .in .kpi__n{animation:none}
/* el reloj: la fila de barras no se colapsa en el centro, y nada se sale de su tarjeta */
.live__up{width:100%}
.srp,.srp>*,.srp__box,.srp__list,.srp__bar,.srp__r,.srp__m{min-width:0}
.srp__r{max-width:100%}
.srp__me b{min-width:0}
@media(max-width:600px){
  .live__x{display:flex;font-size:10px}
  .phone__n{left:5px;right:5px;top:24px;padding:4px 6px;gap:5px;border-radius:9px;font-size:7.5px}
  .phone__n span{width:13px;height:13px;font-size:7px}
  .phone__n small{font-size:6.5px}
  .srp__bar{padding:9px 14px}
  .srp__r{padding:9px 10px;gap:8px}
  .srp__me b{font-size:12.5px}
}

/* ===== Para tu negocio en movil: los sectores son una fila de pildoras que se desliza y se queda fija arriba, asi se cambia de sector sin subir y bajar ===== */
@media(max-width:1000px){
  .biz__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .biz__tabs{position:sticky;top:calc(env(safe-area-inset-top) + 88px);z-index:6;display:flex;grid-template-columns:none;gap:8px;overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .biz__tabs::-webkit-scrollbar{display:none}
  .biz__tabs button{flex:none;display:block;white-space:nowrap;padding:11px 18px;border-radius:99px;border:1px solid var(--line2);background:var(--card);font-size:15px;scroll-snap-align:center}
  .biz__tabs button::after{display:none}
  .biz__tabs button[aria-selected=true],.biz__tabs button:not([aria-selected=true]):hover{transform:none}
  .biz__panel{padding:20px;gap:16px;border-radius:24px}
  .biz__panel::before{filter:none;width:360px;height:360px;background:radial-gradient(circle,rgba(47,107,255,.28),transparent 68%);opacity:1}
  .biz__t h3{font-size:clamp(24px,7vw,32px)}
  .biz__t p{font-size:15px;margin-bottom:14px}
  .biz__t ul{margin-bottom:16px;gap:10px}
}

/* movil: la presentacion de "Para tu negocio" enseña las webs de cada sector pasando solas */
.biz__iv.auto{padding:0;display:block}
.biz__iv.auto>.bz{display:none}
.biz__iv .biz__vis--auto{width:100%;margin-top:4px}
@media(max-width:800px){.biz__tabs{display:none}.biz__grid{gap:0}}
/* movil: la lista de ventajas va debajo de la animacion */
@media(max-width:800px){
  .biz__intro{display:flex;flex-direction:column;gap:0}
  .biz__itx{display:contents}
  .biz__itx>.biz__badge{order:1;align-self:flex-start}
  .biz__itx>h3{order:2}
  .biz__itx>p{order:3}
  .biz__intro>.biz__iv{order:4;margin:6px 0 20px}
  .biz__itx>ul{order:5;margin:0}
}
/* movil: el marco de la presentacion es claro y de sombra suave, integrado con la tarjeta, sin el halo oscuro que tapaba la lista */
@media(max-width:800px){
  .biz__vis--auto .browser--s{background:#fff;border:1px solid var(--line2);box-shadow:0 14px 28px -20px rgba(20,30,70,.35);border-radius:16px}
  .biz__vis--auto .bbar{background:var(--card2);border-bottom:1px solid var(--line);padding:10px 14px}
  .biz__vis--auto .bbar i{background:var(--line2)}
  .biz__vis--auto .bbar span{color:var(--muted);background:var(--card);border:1px solid var(--line);padding:3px 0;width:62%;text-align:center}
  .biz__intro>.biz__iv{padding:0;margin:6px 0 26px}
}
@media(max-width:800px){
  .biz__intro>.biz__iv{display:block}
  .biz__vis--auto .browser--s{width:100%}
  .biz__vis--auto .bbar span{flex:1;width:auto;min-width:0;margin:0 0 0 6px;padding:3px 10px;font-size:11px}
}
@media(max-width:800px){.biz__intro{align-items:stretch}}
/* movil: en la barra del marco va el tipo de negocio, resaltado, en vez de una direccion */
@media(max-width:800px){
  .biz__vis--auto .bbar span{background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.45);color:var(--blue2);font:600 12.5px var(--f-head);letter-spacing:.01em;box-shadow:0 0 0 3px rgba(47,107,255,.08)}
  .biz__vis--auto .bbar span.pop{animation:bizPop .55s var(--ease)}
}
@keyframes bizPop{0%{opacity:0;transform:translateY(5px) scale(.96)}100%{opacity:1;transform:none}}

/* ===== Opiniones: muro de tarjetas en columnas que suben solas (la del medio baja), con desvanecido arriba y abajo ===== */
.tw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;height:clamp(480px,72vh,660px);overflow:hidden;position:relative}
.tw::before,.tw::after{content:"";position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none}
.tw::before{top:0;background:linear-gradient(to bottom,var(--bg),transparent)}
.tw::after{bottom:0;background:linear-gradient(to top,var(--bg),transparent)}
.tw__col{min-width:0;overflow:hidden}
.tw__track{display:flex;flex-direction:column;gap:20px;padding-bottom:20px;animation:twUp var(--tw-d,46s) linear infinite}
.tw__col--1{--tw-d:44s}.tw__col--2{--tw-d:60s}.tw__col--3{--tw-d:50s}
.tw__col--2 .tw__track{animation-direction:reverse}
@keyframes twUp{to{transform:translateY(-50%)}}
@media(hover:hover){.tw__col:hover .tw__track{animation-play-state:paused}}
.tw__card{margin:0;padding:24px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(20,30,70,.3)}
.tw__card blockquote{margin:0 0 18px;font-size:15.5px;line-height:1.5;letter-spacing:-.01em;color:var(--fg)}
.tw__card figcaption{display:flex;gap:12px;align-items:center}
.tw__card img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--line)}
.tw__card b{display:block;font-weight:500;font-size:14.5px}
.tw__card span{display:block;color:var(--muted);font-size:13px}
@media(max-width:1000px){.tw{grid-template-columns:repeat(2,minmax(0,1fr))}.tw__col--3{display:none}}
/* movil: tres filas horizontales que van pasando de lado (la del medio va en sentido contrario) */
@media(max-width:640px){
  .tw{grid-template-columns:minmax(0,1fr);gap:12px;height:auto}
  .tw::before,.tw::after{display:none}
  .tw__col--3{display:block}
  .tw__col{position:relative}
  .tw__col::before,.tw__col::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
  .tw__col::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
  .tw__col::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
  .tw__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tw__scroll::-webkit-scrollbar{display:none}
  .tw__track{flex-direction:row;width:max-content;gap:12px;padding:2px 12px 14px 0;animation:none}
  .tw__col--1{--tw-d:48s}.tw__col--2{--tw-d:62s}.tw__col--3{--tw-d:54s}
  .tw__card{flex:none;width:250px;padding:18px;border-radius:20px}
  .tw__card blockquote{font-size:13.5px;line-height:1.45;margin-bottom:14px}
  .tw__card img{width:30px;height:30px}
  .tw__card b{font-size:13px}
  .tw__card span{font-size:11.5px}
}
@keyframes twLeft{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tw{height:auto}.tw::before,.tw::after{display:none}.tw__track{animation:none}.tw__card[aria-hidden]{display:none}}

/* ===== Contacto en movil: tarjeta mas compacta y sosegada (sin brillos duplicados, trama suave, formulario a ancho completo) ===== */
@media(max-width:800px){
  .cta .wrap{width:calc(100% - 24px)}
  .cta__box{gap:22px;padding:calc(20px + 14px) 14px 14px;border-radius:26px;background:linear-gradient(180deg,#5a8aff 0%,#3a70ff 45%,#2a58e6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 44px -28px rgba(47,107,255,.7)}
  .cta__box::before{display:none}
  .cta__box::after{display:none}
  .cta__fx{opacity:.28}
  .cta__l{padding:0 8px}
  .cta__l .eyebrow{font-size:12px}
  .cta__l h2{font-size:clamp(30px,9vw,38px);line-height:1.06;margin:10px 0 0}
  .cta__l .muted{margin:12px 0 0;font-size:15px;line-height:1.5;max-width:none}
  .cta__box .form{padding:16px;gap:12px;border-radius:20px}
  .form label{font-size:13px;gap:6px}
  .form input,.form textarea{font-size:16px;padding:12px 14px;border-radius:12px}
  .form textarea{min-height:92px}
}

/* Footer en movil: marca arriba y las tres columnas (navegacion, contacto, redes) en la misma fila, en pequeño */
@media(max-width:800px){
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .foot__brand{grid-column:1/-1}
  .foot__in h4{font-size:11px;letter-spacing:.1em;margin-bottom:12px}
  .foot__in a{font-size:12.5px;line-height:1.35;margin-bottom:9px;overflow-wrap:anywhere}
}
@media(max-width:800px){.foot__in a[href^="tel"]{white-space:nowrap;letter-spacing:-.01em}}
@media(hover:none){.foot__in a:hover{transform:none;color:var(--muted)}}
/* movil: los tres muñecos un poco mas pequeños y mas a la izquierda, para que los tres se apoyen sobre la G */
@media(max-width:800px){.crew.crew--foot{left:calc(50% - 1.04em);top:calc(21px + .045em);--u:max(.063em,18px)}}

/* móvil: el fondo del hero (resplandor azul) se ve más en modo oscuro */
@media(max-width:800px){
  .hero__glow{width:160vw;height:80vw;bottom:-40vw;opacity:.5;filter:blur(100px)}
  :root[data-theme=light] .hero__glow{opacity:.4}
}

/* móvil: el hero se construye de arriba a abajo (hora, título palabra a palabra, subtítulo, botones, maqueta) */
@media(max-width:800px){
  .hero .tag.reveal{transition-delay:0s}
  .hero__title[data-split] .w>span{transition-delay:calc(var(--i)*45ms + .1s)}
  .hero .hero__sub.reveal{transition-delay:.5s}
  .hero .hero__cta.reveal{transition-delay:.65s}
  .hero .stage.reveal{transition-delay:.8s}
}