@font-face{font-family:Geist;src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0100-024F}

:root{
  --bg:#030507;--p1:#080b0f;--p2:#0d1217;--ln:rgba(255,255,255,.09);--ln2:rgba(255,255,255,.16);
  --tx:#eef1f4;--mut:#9aa4ad;--g:#36bb91;--b:#05b9fd;--cy:#5fe6ff;--aq:#93e4f7;
  --grad:linear-gradient(120deg,#36bb91,#05b9fd);
  --fs:Geist,system-ui,sans-serif;--fm:"Geist Mono",ui-monospace,monospace;--fr:"Instrument Serif",Georgia,serif;
  --w:1200px;--gut:clamp(16px,4vw,32px);--r:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--tx);font:400 17px/1.55 var(--fs);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
em{font-family:var(--fr);font-style:italic;font-weight:400;letter-spacing:-.01em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#000;padding:8px 12px;border-radius:8px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px}

/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(3,5,7,.62);border-bottom:1px solid var(--ln)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1440px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em}
.brand img{width:30px;height:30px}.brand small{color:var(--mut);font-weight:500}
.nav nav{display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);font-size:15px;color:#c9d1d8}
.nav nav a:hover{color:#fff}
.nav__cta{padding:9px 15px;border-radius:999px;background:var(--grad);color:#03141c!important;font-weight:650}

/* comunes */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#aeb8c1}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g)}
h1,h2,h3{letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(34px,5.4vw,64px);font-weight:700}
.lead{color:var(--mut);font-size:clamp(16px,1.5vw,18.5px);max-width:56ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:650;font-size:15.5px;transition:transform .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.btn--main{background:var(--grad);color:#03141c;box-shadow:0 10px 40px -12px rgba(5,185,253,.7)}
.btn--main:hover{transform:translateY(-2px);box-shadow:0 16px 50px -12px rgba(5,185,253,.9)}
.btn--ghost{border:1px solid var(--ln2);background:rgba(255,255,255,.04)}
.btn--ghost:hover{border-color:var(--cy)}
.btn--link{padding:0 6px;color:var(--aq)}.btn--link:hover{color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sec{padding:clamp(80px,10vw,130px) 0}
.head{margin-bottom:clamp(36px,5vw,56px);display:grid;gap:16px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- la oficina ---------- */
.office{position:relative;height:calc(100svh - 64px);min-height:640px;max-height:980px;overflow:hidden;background:radial-gradient(70% 70% at 65% 55%,rgba(5,185,253,.12),transparent 70%),radial-gradient(50% 50% at 90% 90%,rgba(54,187,145,.08),transparent 70%)}
.office__copy{position:absolute;z-index:6;left:max(var(--gut),calc((100vw - 1440px)/2 + var(--gut)));top:clamp(28px,6vh,72px);width:min(500px,34vw);display:grid;gap:20px;pointer-events:none}
.office__copy>*{pointer-events:auto}
.office h1{font-size:clamp(42px,4.6vw,72px);font-weight:750}
.office h1 em{display:inline-block}
.office__stage{position:absolute;inset:0;overflow:hidden}
.office__stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.4s}
.office__stage.ready canvas{opacity:1}
.stage__fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--mut);font:500 13px var(--fm);transition:opacity .8s;padding-left:30vw}
.stage__fallback img{width:80px;height:80px;border-radius:50%;box-shadow:0 0 0 1px var(--ln2),0 0 60px rgba(5,185,253,.45);animation:pulse 2.4s ease-in-out infinite}
.ready .stage__fallback{opacity:0;pointer-events:none}
.no3d .stage__fallback span{display:none}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 0 1px var(--ln2),0 0 90px rgba(5,185,253,.7)}}

.room{position:absolute;left:0;top:0;z-index:3;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:7px 12px 7px 10px;border-radius:12px;background:rgba(6,10,14,.72);border:1px solid var(--ln2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;opacity:0;transition:opacity .6s,border-color .2s,background .2s,transform .05s;white-space:nowrap;text-align:left}
.ready .room{opacity:1}
.room i{grid-row:span 2;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.room b{font-size:13.5px;font-weight:650;line-height:1.2}
.room small{font:500 10.5px var(--fm);letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.room:hover,.room.hover,.room.on{border-color:rgba(95,230,255,.7);background:rgba(5,30,42,.85)}
.focus .room:not(.on){opacity:.35}
.no3d .room{position:static;opacity:1;transform:none!important;margin:4px}
.no3d{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:24px 24px 24px 38vw}

.bubble{--bx:60%;--by:40%;position:absolute;z-index:5;left:clamp(150px,var(--bx),calc(100% - 150px));top:var(--by);transform:translate(-50%,calc(-100% - 14px));width:max-content;max-width:min(320px,80%);padding:13px 16px;border-radius:18px;background:rgba(6,14,20,.9);border:1px solid rgba(95,230,255,.45);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(5,185,253,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:15px;line-height:1.45}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid rgba(95,230,255,.45);border-bottom:1px solid rgba(95,230,255,.45);transform:translateX(-50%) rotate(45deg)}
.bubble.think p::after{content:"";display:inline-block;width:1.2em;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.bubble__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.bubble__links:empty{display:none}
.bubble__links a{font-size:13px;font-weight:600;padding:6px 10px;border-radius:999px;background:rgba(95,230,255,.12);border:1px solid rgba(95,230,255,.3);color:var(--aq)}
.bubble__links a:hover{background:rgba(95,230,255,.22);color:#fff}
.no3d .bubble{position:relative;left:auto;top:auto;transform:none}

.dept{position:absolute;z-index:7;right:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);width:min(380px,calc(100% - 24px));max-height:calc(100% - 40px);overflow:auto;padding:24px;border-radius:22px;background:rgba(8,12,16,.92);border:1px solid var(--ln2);box-shadow:0 30px 90px rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;gap:12px;animation:din .35s cubic-bezier(.2,.7,.2,1)}
@keyframes din{from{opacity:0;transform:translate(16px,-50%)}}
.dept__x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--ln2);background:transparent;cursor:pointer;color:var(--mut)}
.dept__x:hover{color:#fff;border-color:var(--cy)}
.dept__k{font:500 11.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--cy)}
.dept h2{font-size:28px;padding-right:30px}
.dept p{color:var(--mut);font-size:15px}
.dept ul{list-style:none;display:grid;gap:8px;margin:4px 0 6px}
.dept li{position:relative;padding-left:22px;font-size:14.5px;color:#d3dae0}
.dept li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--grad)}
.dept__a{display:flex;flex-wrap:wrap;gap:10px}

.dock{position:absolute;z-index:6;left:max(var(--gut),calc((100vw - 1440px)/2 + var(--gut)));bottom:clamp(20px,4vh,40px);width:min(500px,34vw);display:grid;gap:10px}
.dock__chips{display:flex;flex-wrap:wrap;gap:8px}
.dock__chips button{font-size:13.5px;padding:8px 13px;border-radius:999px;border:1px solid var(--ln2);background:rgba(6,10,14,.75);backdrop-filter:blur(8px);cursor:pointer}
.dock__chips button:hover{border-color:var(--cy);color:#fff}
.dock__form{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px;border-radius:999px;background:rgba(8,12,16,.92);border:1px solid rgba(95,230,255,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(5,185,253,.12)}
.dock__form img{width:34px;height:34px;border-radius:50%;flex:none}
.dock__form input{flex:1;min-width:0;height:42px;border:0;background:transparent;font-size:16px;outline:none}
.dock__form button{width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:#03141c;font-weight:800;font-size:18px;cursor:pointer;flex:none}
.dock__form button:disabled{opacity:.5;cursor:wait}
.dock__fine{font-size:11.5px;color:#7b858e}.dock__fine a{text-decoration:underline}
.stage__pause{position:absolute;right:14px;bottom:14px;z-index:4;font:500 12px var(--fm);padding:7px 11px;border-radius:999px;border:1px solid var(--ln2);background:rgba(3,5,7,.6);color:var(--mut);cursor:pointer}
.stage__pause:hover{color:#fff}
.no3d .stage__pause{display:none}

/* servicios */
.svc__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plan{position:relative;display:grid;gap:14px;align-content:start;padding:26px 24px;border-radius:24px;background:linear-gradient(180deg,#0c1218,#070a0d);border:1px solid var(--ln2)}
.plan::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;background:var(--c);box-shadow:0 0 18px var(--c)}
.plan--star{border-color:rgba(5,185,253,.5);box-shadow:0 30px 80px -40px rgba(5,185,253,.6)}
.plan__k{font:500 11.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.plan h3{font-size:24px}
.plan__p{color:var(--mut);font-size:14.5px}.plan__p b{color:#fff;font-size:30px;letter-spacing:-.03em;margin-right:2px}
.plan ul{list-style:none;display:grid;gap:9px;margin:2px 0 8px}
.plan li{position:relative;padding-left:22px;font-size:14.5px;color:#cfd7dd}
.plan li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;border:2px solid var(--c)}
.plan .btn{width:100%;white-space:normal;text-align:center}
.svc__note{margin-top:28px;color:var(--mut);font-size:15px;text-align:center}.svc__note a{color:var(--aq)}.svc__note a:hover{color:#fff}

/* proyectos */
.work__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:var(--p1);border:1px solid var(--ln2);transition:border-color .25s,transform .35s}
a.card:hover{border-color:rgba(95,230,255,.5);transform:translateY(-4px)}
.card__img{aspect-ratio:16/9;overflow:hidden;background:#0a0f14}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
a.card:hover .card__img img{transform:scale(1.04)}
.card__img--reel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;background:radial-gradient(80% 90% at 50% 100%,rgba(5,185,253,.25),#06090c)}
.card__img--reel img{border-radius:12px;object-fit:cover;height:100%}
.card__img--bot{display:flex;align-items:center;gap:18px;padding:22px;background:radial-gradient(70% 90% at 20% 50%,rgba(5,185,253,.22),#06090c)}
.card__img--bot>img{width:80px;height:80px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--ln2),0 0 40px rgba(5,185,253,.5)}
.mini-chat{display:grid;gap:8px;font-size:13.5px}
.mini-chat p{padding:8px 12px;border-radius:12px;background:var(--p2);border:1px solid var(--ln);max-width:240px}
.mini-chat .me{background:rgba(5,185,253,.12);border-color:rgba(5,185,253,.3)}
.card__b{padding:22px 24px 26px;display:grid;gap:8px;align-content:start}
.card__b small{font:500 11.5px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--g)}
.card__b h3{font-size:23px}.card__b h3 span{color:var(--cy);font-size:.8em}
.card__b p{color:var(--mut);font-size:15px}

/* hazlo tú */
.diy__g{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(40px,7vw,100px);align-items:center}
.phone{position:relative;justify-self:center;width:min(300px,100%);aspect-ratio:9/16;border-radius:40px;padding:10px;background:linear-gradient(160deg,#1a2129,#07090c);box-shadow:0 0 0 1px var(--ln2),0 40px 120px -30px rgba(5,185,253,.55)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:31px;background:#000}
.phone__snd{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:600 13px var(--fs);padding:9px 14px;border-radius:999px;border:1px solid var(--ln2);background:rgba(0,0,0,.6);backdrop-filter:blur(8px);cursor:pointer}
.phone__snd svg{width:16px;height:16px;fill:currentColor}
.diy__copy{display:grid;gap:22px;justify-items:start}

/* cierre */
.final{padding-top:30px}
.final__in{display:grid;gap:30px;justify-items:center;text-align:center;padding:clamp(48px,8vw,90px) var(--gut);border-radius:34px;background:radial-gradient(70% 90% at 50% 0%,rgba(5,185,253,.18),transparent 70%),var(--p1);border:1px solid var(--ln2)}
.final h2{font-size:clamp(38px,6vw,76px)}
.final .actions{justify-content:center}
.foot{border-top:1px solid var(--ln);margin-top:clamp(60px,8vw,100px);padding:28px 0 40px;font-size:13.5px;color:var(--mut)}
.foot__in{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}.foot a:hover{color:#fff}

/* cookies */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;max-width:560px;margin:0 auto;padding:18px;border-radius:16px;background:#0b0e12;border:1px solid var(--ln2);box-shadow:0 30px 80px rgba(0,0,0,.7);font-size:14px;color:#cfd5da}
.ck p{margin-bottom:12px}.ck a{text-decoration:underline}
.ck__b{display:flex;gap:10px}
.ck__b button{flex:1;font:700 14px var(--fs);padding:12px;border-radius:10px;border:1px solid var(--ln2);background:transparent;cursor:pointer}
.ck__b .y{background:var(--grad);color:#03141c;border:0}

/* responsive */
@media (max-width:1180px){.svc__g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-aspect-ratio:5/4),(max-width:900px){
  .office{height:auto;max-height:none;min-height:0;overflow:visible}
  .office__copy{position:relative;left:auto;top:auto;width:auto;padding:28px var(--gut) 14px}
  .office__stage{position:relative;inset:auto;height:min(88svh,780px);min-height:600px}
  .stage__fallback{padding-left:0}
  .no3d{padding:24px}
  .dock{left:12px;right:12px;bottom:12px;width:auto}
  .dock__fine{display:none}
  .stage__pause{top:12px;bottom:auto;right:12px}
  .dept{top:auto;bottom:12px;right:12px;left:12px;width:auto;transform:none;max-height:62%;animation:dup .35s cubic-bezier(.2,.7,.2,1)}
  @keyframes dup{from{opacity:0;transform:translateY(20px)}}
  .focus .dock{visibility:hidden}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav nav a:not(.nav__cta){display:none}
  .nav__cta{font-size:14px}
  .office h1{font-size:clamp(36px,10.5vw,50px)}
  .office__copy{gap:12px;padding-top:20px}
  .office__copy .lead,.office__copy .actions{display:none}
  .actions .btn{flex:1 1 auto}
  .svc__g,.work__g{grid-template-columns:1fr}
  .diy__g{grid-template-columns:1fr}.diy__copy{order:-1}
  .room{padding:5px 9px 5px 8px;column-gap:6px}.room b{font-size:12px}.room small{font-size:9px}
  .bubble{left:50%;top:52px;transform:translateX(-50%);width:calc(100% - 24px);max-width:none}
  .room small{display:none}.room i{grid-row:auto}
  .bubble::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .stage__fallback img,.dept{animation:none}
}