:root{
  --bg:#0F1720; --panel:#16212C; --panel2:#1C2A37;
  --ink:#EAF1F6; --mute:#7C92A3; --line:rgba(234,241,246,.1);
  --blue:#3D6BFF; --term:#39D98A;
}
:root:not([data-theme="light"]){color-scheme:dark;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);position:relative;overflow-x:hidden;}

/* tech background: grid + circuit lines + drifting glow */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg);}
.bg-grid{position:absolute;inset:-10%;
  background-image:linear-gradient(rgba(61,107,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(61,107,255,.08) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 30%,transparent 100%);
  animation:gridMove 40s linear infinite;}
@keyframes gridMove{from{transform:translate(0,0);}to{transform:translate(46px,46px);}}
.bg-glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(130px);opacity:.22;}
.bg-glow.g1{background:var(--blue);top:-220px;right:-160px;}
.bg-glow.g2{background:var(--term);opacity:.1;bottom:10%;left:-220px;}
.bg-lines{position:absolute;inset:0;opacity:.5;}
.bg-lines path{stroke:rgba(61,107,255,.35);stroke-width:1;fill:none;stroke-dasharray:6 420;animation:lineRun 9s linear infinite;}
.bg-lines path:nth-child(2){animation-delay:-3s;stroke:rgba(57,217,138,.3);}
.bg-lines path:nth-child(3){animation-delay:-6s;}
@keyframes lineRun{to{stroke-dashoffset:-800;}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal-1{transition-delay:.05s;} .reveal-2{transition-delay:.12s;} .reveal-3{transition-delay:.19s;} .reveal-4{transition-delay:.26s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;} .bg-grid,.bg-lines path{animation:none;}}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px;}
section{padding:92px 0;}
svg{display:block;}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(15,23,32,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;}
.logo{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;}
.logo .sq{width:9px;height:9px;background:var(--blue);border-radius:2px;}
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--mute);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{padding:9px 18px;background:var(--blue);color:#fff;border-radius:8px;font-size:13.5px;font-weight:600;}
.nav-mobile{display:none;}
@media(max-width:760px){.nav-links{display:none;}.nav-cta{display:none;}.nav-mobile{display:block;padding:9px 16px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;font-size:13px;}}

/* hero */
.hero{padding:76px 0 60px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px;}}
.hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.08;font-weight:600;margin-bottom:20px;}
.hero h1 b{color:var(--blue);font-weight:600;}
.hero p{color:var(--mute);font-size:16.5px;max-width:460px;margin-bottom:30px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:9px;font-weight:600;font-size:14.5px;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-outline{border:1px solid var(--line);color:var(--ink);}
.btn svg{width:16px;height:16px;}

.term{background:#0A0F15;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);}
.term-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);}
.term-bar span{width:9px;height:9px;border-radius:50%;background:#2A3744;}
.term-body{padding:20px;font-size:13.5px;line-height:1.8;min-height:132px;}
.term-line{color:var(--mute);}
.term-line b{color:var(--ink);font-weight:500;}
.term-out{color:var(--term);}
.cursor{display:inline-block;width:7px;height:14px;background:var(--term);margin-left:2px;animation:blink 1s steps(1) infinite;vertical-align:-2px;}
@keyframes blink{50%{opacity:0;}}

/* section head */
.s-head{max-width:560px;margin-bottom:44px;}
.s-head span{color:var(--blue);font-size:13.5px;font-weight:600;}
.s-head h2{font-size:clamp(24px,3vw,32px);margin-top:8px;}
.s-head p{color:var(--mute);margin-top:10px;font-size:15px;}

/* servicios */
.serv-grid{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:18px;}
@media(max-width:760px){.serv-grid{grid-template-columns:1fr;}}
.serv-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;}
.serv-card.feat{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;}
.serv-num{font-family:'JetBrains Mono',monospace;color:var(--blue);font-size:12.5px;margin-bottom:14px;}
.serv-card h3{font-size:18px;margin-bottom:8px;}
.serv-card p{color:var(--mute);font-size:14px;}
.serv-card.feat h3{font-size:22px;}
.serv-card.feat .ic{width:40px;height:40px;border-radius:10px;background:rgba(61,107,255,.15);display:flex;align-items:center;justify-content:center;margin-top:20px;}
.serv-card.feat .ic svg{width:20px;height:20px;color:var(--blue);}

/* sobre */
.sobre{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;}
@media(max-width:820px){.sobre{grid-template-columns:1fr;gap:30px;}}
.sobre p{color:var(--mute);font-size:15.5px;margin-bottom:14px;}
.sobre strong{color:var(--ink);}
.claim{font-family:'Space Grotesk',sans-serif;font-size:21px;color:var(--ink);border-left:3px solid var(--blue);padding-left:18px;margin-top:10px;}

/* proyecto */
.proj-grid{display:flex;flex-direction:column;gap:20px;}
.proj{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:36px;}
@media(max-width:760px){.proj{grid-template-columns:1fr;padding:28px;}}
.proj-img{width:100%;border-radius:10px;object-fit:cover;max-height:220px;margin-bottom:14px;border:1px solid var(--line);}
.proj-tag{font-size:12.5px;color:var(--term);font-family:'JetBrains Mono',monospace;margin-bottom:10px;}
.proj h3{font-size:22px;margin-bottom:12px;}
.proj p{color:var(--mute);font-size:14.5px;margin-bottom:18px;}
.proj-list{display:flex;flex-direction:column;gap:10px;}
.proj-list li{list-style:none;display:flex;gap:10px;font-size:14px;color:var(--ink);}
.proj-list svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;margin-top:2px;}
.proj-stat{background:var(--panel2);border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.proj-stat b{font-family:'Space Grotesk',sans-serif;font-size:30px;color:var(--blue);}
.proj-stat span{color:var(--mute);font-size:13px;}

/* contacto */
.contact{background:linear-gradient(160deg,var(--panel),var(--bg));border:1px solid var(--line);border-radius:18px;padding:52px 40px;text-align:center;}
.contact h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px;}
.contact p{color:var(--mute);margin-bottom:26px;}
.wa-btn{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#06210F;font-weight:700;padding:15px 30px;border-radius:10px;font-size:15.5px;}
.wa-btn svg{width:20px;height:20px;}
.contact-meta{display:flex;justify-content:center;gap:26px;margin-top:26px;flex-wrap:wrap;font-size:13.5px;color:var(--mute);}
.contact-meta a:hover{color:var(--ink);}

footer{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--mute);font-size:12.5px;}

/* ================= v2: 3D + dinamismo ================= */
section{padding:84px 0;}
@media(max-width:760px){section{padding:60px 0;}}

/* entrada 3D de cartas */
.card3d{opacity:0;transform:perspective(900px) translateY(46px) rotateX(16deg) scale(.95);transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.card3d.in{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
/* una vez asentada, el tilt responde rápido */
.card3d.settled{transition:transform .15s ease-out,border-color .3s,box-shadow .3s;}
.card3d.tilt:hover{border-color:rgba(61,107,255,.5);box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 0 1px rgba(61,107,255,.2);}
.card3d{position:relative;overflow:hidden;}
.card3d::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(61,107,255,.18),transparent 60%);}
.card3d.tilt:hover::after{opacity:1;}

/* terminal: líneas que se escriben una por una */
.term-line,.term-out{opacity:0;animation:lineIn .5s ease forwards;}
.term-body > :nth-child(1){animation-delay:.9s;} .term-body > :nth-child(2){animation-delay:1.7s;}
.term-body > :nth-child(3){animation-delay:2.5s;} .term-body > :nth-child(4){animation-delay:3.4s;}
@keyframes lineIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
.term{animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{translate:0 0;}50%{translate:0 -10px;}}

/* cubo wireframe 3D */
.cube-wrap{position:absolute;right:-30px;top:-46px;width:92px;height:92px;perspective:500px;pointer-events:none;z-index:2;}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:spin 16s linear infinite;}
.cube i{position:absolute;inset:0;border:1.5px solid rgba(61,107,255,.7);background:rgba(61,107,255,.06);box-shadow:inset 0 0 18px rgba(61,107,255,.2);}
.cube i:nth-child(1){transform:translateZ(46px);} .cube i:nth-child(2){transform:rotateY(180deg) translateZ(46px);}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(46px);} .cube i:nth-child(4){transform:rotateY(-90deg) translateZ(46px);}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(46px);} .cube i:nth-child(6){transform:rotateX(-90deg) translateZ(46px);}
@keyframes spin{from{transform:rotateX(-24deg) rotateY(0);}to{transform:rotateX(-24deg) rotateY(360deg);}}
.hero-grid > .term{position:relative;}
@media(max-width:860px){.cube-wrap{right:6px;top:-60px;width:70px;height:70px;}.cube i{transform-origin:center;}}

/* cinta de tecnologías */
.stack{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.stack-track{display:flex;gap:14px;width:max-content;animation:marquee 28s linear infinite;}
.stack:hover .stack-track{animation-play-state:paused;}
.chip{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--mute);border:1px solid var(--line);
  background:rgba(22,33,44,.7);padding:9px 18px;border-radius:99px;white-space:nowrap;}
.chip b{color:var(--blue);font-weight:500;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* cómo trabajamos */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.steps{grid-template-columns:1fr;}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 22px;}
.step-n{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;line-height:1;margin-bottom:14px;
  background:linear-gradient(160deg,var(--blue),rgba(61,107,255,.15));-webkit-background-clip:text;background-clip:text;color:transparent;}
.step h3{font-size:16.5px;margin-bottom:8px;}
.step p{color:var(--mute);font-size:13.5px;}

@media (prefers-reduced-motion:reduce){
  .card3d{opacity:1;transform:none;transition:none;}
  .term,.cube,.stack-track{animation:none;}
  .term-line,.term-out{opacity:1;animation:none;}
}
.term.in{transition:transform .15s ease-out,opacity .7s;}

/* clientes: carrusel de logos */
.clients-sec{padding:70px 0;}
.logos{overflow:hidden;margin-top:6px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.logos-track{display:flex;width:max-content;animation:marquee var(--dur,30s) linear infinite;}
.logos:hover .logos-track{animation-play-state:paused;}
.logos-half{display:flex;gap:18px;padding-right:18px;}
.logo-card{flex-shrink:0;width:170px;height:84px;background:#F4FCFB;border-radius:14px;display:flex;align-items:center;justify-content:center;
  padding:14px 20px;opacity:.88;filter:grayscale(.55);transition:filter .3s,opacity .3s,transform .3s;text-decoration:none;}
.logo-card img{max-width:100%;max-height:100%;object-fit:contain;}
.logo-card span{color:#243C4C;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;text-align:center;line-height:1.2;}
.logo-card:hover{filter:none;opacity:1;transform:translateY(-4px) scale(1.04);}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none;}.logos{overflow-x:auto;}}