:root{
  --void:#060B16;
  --void-rgb:6,11,22;
  --panel:#0F1B33;
  --panel-2:#15224A;
  --paper:#EEF2F9;
  --paper-2:#DFE6F2;
  --circuit:#2F8CFF;
  --circuit-rgb:47,140,255;
  --circuit-deep:#0B3E91;
  --signal:#43E6B5;
  --text-dark:#EAF0FC;
  --text-dark-dim:#8A96B8;
  --text-light:#0B1220;
  --text-light-dim:#4E5872;
  --line-dark:rgba(140,166,220,0.18);
  --line-light:rgba(11,18,32,0.12);
  --display:'Syne', sans-serif;
  --body:'Manrope', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); background:var(--paper); color:var(--text-light); line-height:1.6; font-size:16px; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
p{max-width:65ch; text-align:justify; text-justify:inter-word;}
section[id]{scroll-margin-top:90px;}
img,svg{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--circuit); outline-offset:3px;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--circuit); display:flex; align-items:flex-start; gap:8px;}
.eyebrow::before{content:''; flex:none; width:16px; height:1px; margin-top:9px; background:var(--circuit);}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:.005em; line-height:1.05; text-wrap:balance; color:inherit;}

/* ============ HEADER ============ */
header{position:sticky; top:0; z-index:60; background:rgba(var(--void-rgb),0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark);}
header .wrap{display:flex; align-items:center; justify-content:space-between; min-height:76px; padding-top:12px; padding-bottom:12px; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; min-width:0;}
.brand-mark{width:38px; height:38px; flex:none;}
.brand-word{font-family:var(--display); font-weight:700; font-size:21px; color:var(--text-dark); letter-spacing:.01em; white-space:nowrap;}
.brand-word b{color:var(--circuit); font-weight:700;}
.brand-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dark-dim); display:block; margin-top:1px; white-space:nowrap;}
nav{display:flex; align-items:center; gap:34px;}
nav a.navlink{position:relative; font-size:14px; font-weight:500; color:var(--text-dark-dim); transition:color .15s;}
nav a.navlink::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--circuit); transition:width .25s ease;}
nav a.navlink:hover{color:var(--text-dark);}
nav a.navlink:hover::after{width:100%;}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; font-weight:500; padding:12px 22px; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:transform .15s, opacity .15s, background .15s; white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-solid{background:var(--circuit); color:var(--void); font-weight:600;}
.btn-solid:hover{background:var(--signal);}
.btn-outline{border:1px solid rgba(234,240,252,0.25); color:var(--text-dark);}
.btn-outline:hover{border-color:var(--circuit); color:var(--circuit);}

/* ============ HERO ============ */
.hero{background:var(--void); color:var(--text-dark); position:relative; overflow:hidden; padding:110px 0 100px;}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.65;}
.hero .wrap{position:relative; z-index:2;}
.hero-content{max-width:760px;}
.hero h1{font-size:clamp(40px,6vw,68px); margin-top:20px;}
.hero h1 em{font-style:normal; color:var(--circuit);}
.hero p.lead{font-size:18px; color:var(--text-dark-dim); max-width:540px; margin-top:22px; font-weight:500;}
.hero .cta-row{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap;}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.hero .eyebrow{animation:fadeUp .7s ease-out .1s both;}
.hero h1{animation:fadeUp .8s ease-out .25s both;}
.hero .lead{animation:fadeUp .8s ease-out .4s both;}
.hero .cta-row{animation:fadeUp .8s ease-out .55s both;}
.hero-meta{display:flex; gap:36px; margin-top:64px; flex-wrap:wrap; animation:fadeUp .8s ease-out .7s both;}
.hero-meta div{display:flex; flex-direction:column; gap:6px; border-left:1px solid var(--line-dark); padding-left:16px;}
.hero-meta .k{display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dark-dim); white-space:nowrap;}
.hero-meta .v{display:block; font-family:var(--display); font-size:20px; font-weight:600; color:var(--text-dark); white-space:nowrap;}

/* ============ TICKER ============ */
.ticker{background:var(--circuit); overflow:hidden; white-space:nowrap;}
.ticker-track{display:inline-flex; gap:32px; padding:12px 0; animation:tickerMove 24s linear infinite;}
.ticker-track span{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--void); letter-spacing:.03em;}
.ticker-track span.dot{color:rgba(var(--void-rgb),0.45);}
@keyframes tickerMove{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ============ TRACE SPINE ============ */
.trace-node{position:relative;}
.trace-node::before{content:''; position:absolute; left:calc(50% - 1px); top:-1px; width:2px; height:34px; background:linear-gradient(var(--circuit),transparent); z-index:5;}
.trace-node::after{content:''; position:absolute; left:calc(50% - 5px); top:-6px; width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--circuit); z-index:6;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:none;}
.grid-servicios .servicio:nth-child(1){transition-delay:.05s;}
.grid-servicios .servicio:nth-child(2){transition-delay:.11s;}
.grid-servicios .servicio:nth-child(3){transition-delay:.17s;}
.grid-servicios .servicio:nth-child(4){transition-delay:.23s;}
.grid-servicios .servicio:nth-child(5){transition-delay:.29s;}
.grid-servicios .servicio:nth-child(6){transition-delay:.35s;}
@media (prefers-reduced-motion: reduce){
  .hero .eyebrow, .hero h1, .hero .lead, .hero .cta-row, .hero-meta{animation:none; opacity:1; transform:none;}
  .ticker-track{animation:none;}
  .reveal{transition:none; opacity:1; transform:none;}
}

section{padding:100px 0; position:relative;}
.section-head{max-width:620px; margin-bottom:52px;}
.section-head h2{font-size:clamp(30px,4.2vw,44px); margin-top:14px;}
.section-head p.sub{margin-top:16px; font-size:16px; color:var(--text-light-dim); font-weight:500;}

/* ============ NOSOTROS ============ */
.nosotros{background:var(--paper);}
.nosotros-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start;}
.nosotros-copy p{font-size:16.5px; line-height:1.8; color:var(--text-light-dim); font-weight:500;}
.nosotros-copy p + p{margin-top:20px;}
.context-card{border:1px solid var(--line-light); padding:28px; background:#fff; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));}
.context-card .eyebrow{margin-bottom:16px;}
.context-row{padding:16px 0; border-top:1px solid var(--line-light); display:flex; flex-direction:column; gap:6px;}
.context-row:first-of-type{border-top:none;}
.context-problem{font-family:var(--body); font-weight:600; font-size:15px; color:var(--text-light);}
.context-fix{font-family:var(--mono); font-size:12.5px; color:var(--circuit-deep);}
.context-fix::before{content:'→ '; color:var(--circuit);}
.stack{margin-top:40px;}
.stack-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light-dim);}
.stack-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.stack-tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:13px; font-weight:500; color:var(--text-light); background:#fff; border:1px solid var(--line-light); padding:9px 14px 9px 11px; transition:transform .25s var(--ease-out), border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; cursor:default;}
.stack-tag::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--circuit); transition:background .25s ease;}
.stack-tag:hover{transform:translateY(-4px); border-color:var(--circuit); background:var(--circuit); color:#fff; box-shadow:0 12px 22px rgba(var(--circuit-rgb),0.28);}
.stack-tag:hover::before{background:var(--signal);}

/* ============ SERVICIOS ============ */
.servicios{background:var(--void); color:var(--text-dark);}
.grid-servicios{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
.servicio{position:relative; background:var(--panel); padding:36px 28px; overflow:hidden; transition:transform .35s var(--ease-out), box-shadow .35s ease, background .35s ease;}
.servicio::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(var(--circuit-rgb),0.16), transparent 70%); opacity:0; transition:opacity .35s ease; pointer-events:none;}
.servicio:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.4); background:var(--panel-2); z-index:2;}
.servicio:hover::after{opacity:1;}
.servicio:hover h3{color:var(--circuit);}
.servicio:hover .pin{border-color:var(--circuit); color:var(--circuit);}
.pin{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; color:var(--text-dark-dim); border:1px solid var(--line-dark); padding:5px 9px; display:inline-block; transition:color .3s ease, border-color .3s ease;}
.servicio h3{font-size:22px; margin-top:16px; font-weight:600; font-family:var(--display); transition:color .3s ease;}
.servicio p{font-size:14.5px; color:var(--text-dark-dim); margin-top:11px; font-weight:500;}

/* ============ PROYECTOS ============ */
.proyectos{background:var(--paper-2);}
.caso{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; padding:48px 0; border-top:1px solid var(--line-light);}
.caso:last-of-type{border-bottom:1px solid var(--line-light);}
.caso h3{font-size:30px; margin-top:12px; max-width:420px; color:var(--text-light);}
.caso .body-copy{font-size:15px; color:var(--text-light-dim); margin-top:2px; font-weight:500; text-align:left;}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px;}
.tag{display:inline-block; font-family:var(--mono); font-size:12px; color:var(--circuit-deep); border:1px solid rgba(11,62,145,0.35); padding:6px 11px; transition:transform .2s ease, background .2s ease, color .2s ease;}
.tag:hover{transform:translateY(-2px); background:var(--circuit-deep); color:#fff;}
.result{margin-top:22px; font-size:14.5px; font-weight:600; color:var(--text-light);}
.result strong{color:var(--circuit-deep); font-family:var(--mono); font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.04em; display:block; margin-bottom:4px;}

/* ============ CONTACTO ============ */
.contacto{background:linear-gradient(135deg, var(--circuit-deep), var(--circuit) 130%); color:#fff; text-align:center; overflow:hidden;}
.contacto h2{font-size:clamp(32px,5vw,50px); color:#fff;}
.contacto .eyebrow{color:var(--signal); justify-content:center;}
.contacto .eyebrow::before{background:var(--signal);}
.contacto p.lead2{margin-top:16px; font-size:16px; max-width:480px; margin-left:auto; margin-right:auto; color:rgba(255,255,255,0.85); font-weight:500;}
.contact-row{display:flex; justify-content:center; gap:16px; margin-top:38px; flex-wrap:wrap;}
.btn-white{background:#fff; color:var(--circuit-deep); font-weight:600;}
.btn-white:hover{background:var(--void); color:#fff;}
.btn-whiteline{border:1px solid rgba(255,255,255,0.45); color:#fff;}
.btn-whiteline:hover{border-color:#fff; background:rgba(255,255,255,0.1);}

footer{background:var(--void); color:var(--text-dark-dim); padding:36px 0; font-size:13px; border-top:1px solid var(--line-dark);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;}
footer .fbrand{display:flex; align-items:center; gap:10px; font-family:var(--mono); color:var(--text-dark-dim);}

/* ============ FAB ============ */
.fab{position:fixed; right:24px; bottom:24px; width:58px; height:58px; border-radius:50%; background:var(--circuit); display:flex; align-items:center; justify-content:center; z-index:70; box-shadow:0 10px 26px rgba(var(--circuit-rgb),0.45); transition:transform .2s ease;}
.fab:hover{transform:scale(1.08); background:var(--signal);}
.fab::before{content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--circuit); animation:pulseRing 2.2s ease-out infinite;}
@keyframes pulseRing{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.7); opacity:0;}}
.fab svg{width:25px; height:25px; position:relative; z-index:1;}
@media (prefers-reduced-motion: reduce){ .fab::before{animation:none;} }

@media (max-width:900px){
  .nosotros-grid{grid-template-columns:1fr;}
  .grid-servicios{grid-template-columns:repeat(2,1fr);}
  .caso{grid-template-columns:1fr; gap:22px;}
  nav{gap:18px;}
  nav a.navlink{display:none;}
  .hero-meta{gap:28px;}
}
@media (max-width:560px){
  .grid-servicios{grid-template-columns:1fr;}
  section{padding:72px 0;}
  .hero{padding:96px 0 80px;}
  .hero-meta{gap:24px 32px; margin-top:48px;}
  .contact-row .btn{white-space:normal; text-align:center;}
}
@media (max-width:480px){
  .wrap{padding:0 20px;}
  header .wrap{gap:10px;}
  .brand{gap:8px;}
  .brand-mark{width:32px; height:32px;}
  .brand-word{font-size:16px;}
  .brand-tag{display:none;}
  .btn{padding:10px 16px; font-size:12px;}
  .hero-meta div{padding-left:12px;}
}
@media (max-width:380px){
  .brand-suffix{display:none;}
  header .btn{padding:9px 13px; font-size:11px;}
}