@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Inter.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/SpaceGrotesk.woff2) format('woff2')}
:root{
  --bg:#070b14; --bg2:#0c1322; --panel:#101a2e; --line:rgba(148,178,255,.14);
  --txt:#e8eefc; --mut:#93a3c4; --acc:#3b82f6; --acc2:#22d3ee; --warm:#f59e0b;
  --grad:linear-gradient(120deg,#3b82f6 0%,#22d3ee 55%,#a7f3d0 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,.logo{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* NAV */
nav{position:fixed;inset:0 0 auto 0;z-index:50;backdrop-filter:blur(14px);background:rgba(7,11,20,.62);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}
.logo i{width:30px;height:30px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#06101f;font-style:normal;font-size:14px;font-weight:800}
.menu{display:flex;gap:30px;font-size:14px;color:var(--mut)}
.menu a:hover{color:var(--txt)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:.25s}
.btn.pri{background:var(--grad);color:#05101f;box-shadow:0 10px 40px -10px rgba(34,211,238,.6)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(34,211,238,.8)}
.btn.sec{border:1px solid var(--line);color:var(--txt)}
.btn.sec:hover{border-color:var(--acc2)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 500px at 78% 30%,rgba(59,130,246,.22),transparent 60%),
  radial-gradient(700px 400px at 10% 90%,rgba(34,211,238,.12),transparent 60%);}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%);opacity:.55}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc2);background:rgba(34,211,238,.06)}
.tag b{width:7px;height:7px;border-radius:50%;background:var(--acc2);box-shadow:0 0 12px var(--acc2);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.3}}
.hero h1{font-size:clamp(40px,6vw,76px);line-height:1.02;margin:22px 0 22px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:var(--mut);max-width:540px}
.cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.chips span{font-size:12px;color:var(--mut);padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line)}

/* dibujo técnico animado */
.plano{position:relative;aspect-ratio:1/1;max-width:560px;justify-self:end;width:100%}
.plano svg{width:100%;height:100%}
.trazo{fill:none;stroke:url(#g1);stroke-width:2;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:dibuja 3.2s ease forwards}
.trazo.f{stroke:rgba(148,178,255,.35);stroke-width:1;stroke-dasharray:4 6;animation:none}
.d2{animation-delay:.6s}.d3{animation-delay:1.2s}.d4{animation-delay:1.8s}
@keyframes dibuja{to{stroke-dashoffset:0}}
.nodo{fill:#0c1322;stroke:var(--acc2);stroke-width:2;opacity:0;animation:aparece .5s ease forwards 2.6s}
@keyframes aparece{to{opacity:1}}
.dato{fill:var(--acc2);animation:viaja 2.6s linear infinite}
@keyframes viaja{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.ficha{position:absolute;background:rgba(16,26,46,.82);border:1px solid var(--line);backdrop-filter:blur(10px);border-radius:14px;padding:12px 16px;font-size:12px;color:var(--mut);box-shadow:0 20px 50px -20px #000;animation:flota 6s ease-in-out infinite}
.ficha strong{display:block;font:600 15px "Space Grotesk";color:var(--txt)}
.ficha.a{top:8%;left:-4%}.ficha.b{bottom:12%;right:-2%;animation-delay:-3s}
.ficha .ok{color:#34d399}
@keyframes flota{50%{transform:translateY(-10px)}}

/* SECCIONES */
section{padding:110px 0;position:relative}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2);margin-bottom:14px}
h2{font-size:clamp(30px,4vw,48px);line-height:1.1;max-width:760px}
.sub{color:var(--mut);max-width:620px;margin-top:16px;font-size:17px}

.servicios{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:56px}
.card{grid-column:span 2;position:relative;padding:30px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--line);overflow:hidden;transition:.35s}
.card.big{grid-column:span 3}
.card:before{content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.35s}
.card:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(59,130,246,.09),rgba(34,211,238,.02))}
.card:hover:before{opacity:1}
.ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(59,130,246,.12);margin-bottom:22px}
.ico svg{width:24px;height:24px;stroke:var(--acc2);fill:none;stroke-width:1.8}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--mut);font-size:15px}
.card ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.card li{font-size:12px;padding:4px 10px;border-radius:6px;background:rgba(34,211,238,.07);color:#a5f3fc}
.card .num{position:absolute;right:24px;top:20px;font:700 56px "Space Grotesk";color:rgba(148,178,255,.07)}

/* banda */
.banda{border-block:1px solid var(--line);background:var(--bg2);padding:46px 0}
.banda .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.banda strong{display:block;font:700 40px "Space Grotesk";background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.banda span{color:var(--mut);font-size:14px}

/* sectores */
.sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.sector{position:relative;height:300px;border-radius:20px;overflow:hidden;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;transition:.4s}
.sector:hover{transform:scale(1.02)}
.sector h3{font-size:22px}.sector p{color:var(--mut);font-size:14px;margin-top:6px}
.s1{background:radial-gradient(circle at 70% 20%,rgba(245,158,11,.35),transparent 55%),linear-gradient(160deg,#1a1410,#0c1322)}
.s2{background:radial-gradient(circle at 70% 20%,rgba(52,211,153,.35),transparent 55%),linear-gradient(160deg,#0d1a16,#0c1322)}
.s3{background:radial-gradient(circle at 70% 20%,rgba(59,130,246,.40),transparent 55%),linear-gradient(160deg,#0e1526,#0c1322)}
.s4{background:radial-gradient(circle at 70% 20%,rgba(34,211,238,.38),transparent 55%),linear-gradient(160deg,#0b1a20,#0c1322)}
.sector svg{position:absolute;top:24px;left:26px;width:42px;height:42px;stroke:#fff;fill:none;stroke-width:1.5;opacity:.9}

/* proceso */
.proceso{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;position:relative}
.proceso:before{content:"";position:absolute;top:27px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent)}
.paso{text-align:center;padding:0 18px;position:relative}
.paso b{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--acc2);font:600 18px "Space Grotesk";box-shadow:0 0 30px rgba(34,211,238,.35)}
.paso h3{font-size:19px;margin-bottom:8px}.paso p{color:var(--mut);font-size:14px}

/* casos */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.caso{border-radius:20px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.caso .img{height:170px;background:linear-gradient(135deg,#13213d,#0b1a2a);position:relative;display:grid;place-items:center;color:var(--mut);font-size:13px}
.caso .img:after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px}
.caso .txt{padding:22px}.caso small{color:var(--acc2);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.caso h3{font-size:19px;margin:8px 0}.caso p{color:var(--mut);font-size:14px}

/* contacto */
.contacto{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:start}
.cbox{border-radius:24px;padding:40px;background:linear-gradient(160deg,rgba(59,130,246,.16),rgba(34,211,238,.05));border:1px solid var(--line)}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,select,textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(7,11,20,.6);color:var(--txt);font:inherit}
textarea{grid-column:1/-1;min-height:120px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc2)}
form .full{grid-column:1/-1}
.datos{margin-top:30px;display:grid;gap:14px;color:var(--mut)}
.datos a{color:var(--txt)}

footer{border-top:1px solid var(--line);padding:50px 0 30px;color:var(--mut);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer nav{position:static;background:none;border:0;backdrop-filter:none;display:flex;gap:20px}

.rev{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}

@media(max-width:900px){
  .menu{display:none}
  .hero .wrap,.contacto{grid-template-columns:1fr}
  .plano{justify-self:center;max-width:420px}
  .servicios{grid-template-columns:1fr}.card,.card.big{grid-column:auto}
  .sectores,.casos{grid-template-columns:1fr 1fr}
  .proceso{grid-template-columns:1fr 1fr;gap:40px}.proceso:before{display:none}
  .banda .wrap{grid-template-columns:1fr 1fr}
  form{grid-template-columns:1fr}
}
@media(max-width:560px){.sectores,.casos{grid-template-columns:1fr}.ficha.a{left:0}.ficha.b{right:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.trazo{stroke-dashoffset:0}.nodo{opacity:1}.rev{opacity:1;transform:none}}

/* páginas interiores */
.phero{position:relative;padding:170px 0 80px;overflow:hidden;border-bottom:1px solid var(--line)}
.phero:before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 80% 0%,rgba(59,130,246,.22),transparent 60%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(36px,5vw,60px);line-height:1.05;margin:16px 0 18px;max-width:880px}
.phero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.migas{font-size:13px;color:var(--mut)}.migas a:hover{color:var(--txt)}
.bloque{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:80px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px}
.bloque:last-child{border-bottom:0}
.bloque .n{font:700 64px "Space Grotesk";background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.bloque h2{margin:14px 0 14px}
.lista{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.item{padding:22px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.item h3{font-size:17px;margin-bottom:6px}.item p{color:var(--mut);font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pills span{font-size:12px;padding:5px 11px;border-radius:6px;background:rgba(34,211,238,.07);color:#a5f3fc}
.prosa{max-width:820px;padding:70px 0 100px}
.prosa h2{font-size:24px;margin:38px 0 12px}
.prosa p,.prosa li{color:#c4cee3;margin-bottom:12px}
.prosa ul{padding-left:22px}
.prosa a{color:var(--acc2);text-decoration:underline}
.prosa table{width:100%;border-collapse:collapse;margin:10px 0 20px;font-size:14px}
.prosa td,.prosa th{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
.valores{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.aviso{margin-top:14px;font-size:13px;color:var(--mut)}
.form-estado{grid-column:1/-1;font-size:14px;min-height:20px}
.hp{position:absolute;left:-9999px}
.menu a.act{color:var(--txt)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--txt);border-radius:10px;width:42px;height:42px;font-size:20px;cursor:pointer}
@media(max-width:900px){
  .bloque{grid-template-columns:1fr;gap:26px}.lista,.valores{grid-template-columns:1fr}
  .burger{display:block}
  nav .btn.pri{display:none}
  .menu.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:rgba(7,11,20,.97);border-bottom:1px solid var(--line)}
  .menu.open a{padding:16px 24px;border-top:1px solid var(--line)}
}
footer nav{flex-wrap:wrap}