@font-face{font-family:Archivo;src:url(/assets/fonts/archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-display:swap}
/* Concepto: el rack ordenado. Negro arriba y abajo como el gabinete, blanco y niebla en medio; el cian marca lo que funciona. */
:root{
 --negro:#000;--carbon:#111416;--grafito:#24292C;--acero:#5F686E;--plata:#C9CFD1;--niebla:#EEF0EF;--blanco:#fff;
 --cian:#0ED9D3;--cianp:#087A77;--cianh:#066663;
 --f-d:Archivo,"Helvetica Neue",Arial,sans-serif;--f-m:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
 --w:1160px;--g:clamp(16px,4vw,32px);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanco);color:var(--grafito);font:400 17px/1.6 var(--f-d)}
a{color:var(--cianp)}a:hover{color:var(--cianh)}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
h1,h2,h3{color:var(--negro);text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(34px,5.4vw,60px);line-height:1.03;letter-spacing:-.025em}
h2{font-weight:800;font-size:clamp(27px,3.4vw,40px);line-height:1.08;letter-spacing:-.02em}
h3{font-weight:700;font-size:20px;line-height:1.25}
p{margin:0;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--g)}
.mono{font-family:var(--f-m);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.eyebrow{display:block;color:var(--cianp);margin-bottom:14px}
.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.5;max-width:62ch}
.ic{width:26px;height:26px;flex:none}
/* barra de accesos */
.util{background:var(--carbon);color:#9AA4A9;font:500 11.5px/1 var(--f-m);letter-spacing:.06em;border-bottom:1px solid #1E2427}
.util .wrap{display:flex;align-items:center;justify-content:flex-end;gap:14px;height:34px}
.util span{text-transform:uppercase;color:#6B747A}
.util nav{display:flex;gap:6px}
.util a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:5px 10px}
.util a:hover{border-color:var(--cian);color:var(--cian)}
@media (max-width:640px){.util span{display:none}}
/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:3px;font:700 16px/1 var(--f-d);text-decoration:none;border:1.5px solid var(--cian);background:var(--cian);color:var(--negro);cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:#3CE6E0;color:var(--negro)}
.btn.ghost{background:transparent;color:var(--blanco);border-color:#5A6368}
.btn.ghost:hover{border-color:var(--cian);color:var(--cian)}
.btn.dk{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.btn.dk:hover{background:var(--grafito)}
.btn .ic{width:18px;height:18px}
/* cabecera */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--negro);border-bottom:1px solid #1E2427}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:flex;line-height:0}.brand svg{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:#C7CED1;text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover{color:var(--cian)}
.nav .btn{min-height:40px;padding:0 16px;font-size:14px;color:var(--negro)}
.menu-t{display:none;background:none;border:1px solid #3A4347;color:#fff;border-radius:3px;height:40px;padding:0 12px;font:600 14px var(--f-d);cursor:pointer}
@media (max-width:860px){
 .menu-t{display:block}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--negro);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--g) 20px;border-bottom:1px solid #1E2427}
 .nav.open{display:flex}.nav a{padding:13px 0;border-bottom:1px solid #1E2427}.nav .btn{margin-top:14px;justify-content:center}}
/* héroe */
.hero{background:var(--negro);color:#C7CED1;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(48px,7vw,96px) clamp(52px,7vw,92px);position:relative;z-index:1}
.hero h1{color:var(--blanco)}
.hero .eyebrow{color:var(--cian)}
.hero .lead{margin-top:22px;color:#C7CED1}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.marco{position:absolute;height:auto;pointer-events:none;z-index:0}
.rack{width:100%;height:auto;display:block;max-width:100%}
.rk-l{font:500 9px var(--f-m);letter-spacing:.12em;fill:#7D878C}
.rk-n{font:500 7px var(--f-m);fill:#6B747A}
.rk-t{font:500 11px var(--f-m);letter-spacing:.1em;fill:#E8ECEE}
.rk-s{font:500 9.5px var(--f-m);letter-spacing:.08em;fill:#0ED9D3}
.led{fill:#0ED9D3;animation:blink 2.2s steps(2,end) infinite}
.led2{fill:#7CE08A}.led.off{fill:#2A3236;animation:none}
@keyframes blink{50%{fill:#0A6F6C}}
@media (prefers-reduced-motion:reduce){.led{animation:none}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
/* banner data center */
.dcban{background:var(--cian);color:var(--negro);border-top:1px solid #000}
.dcban .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(44px,6vw,80px)}
.dcban .mono{display:block;margin-bottom:14px;color:var(--negro)}
.dcban h2{font-size:clamp(30px,4vw,48px);line-height:1.04}
.dcban p{margin-top:16px;font-size:18px;max-width:46ch}
.dcl{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.dcl li{padding:9px 0;border-top:1px solid rgba(0,0,0,.28);font-weight:600;font-size:16px}
.dcban .btn.line{background:transparent;border-color:var(--negro);color:var(--negro)}
.dcban .btn.line:hover{background:var(--negro);color:var(--cian)}
.dcplan{width:100%;height:auto;display:block;background:#7EEBE7}
.dc-t{font:500 10px var(--f-m);letter-spacing:.12em;fill:#000}
@media (max-width:900px){.dcban .wrap{grid-template-columns:1fr}}
@media (max-width:480px){.dcl{grid-template-columns:1fr}}
/* banner de la tienda */
.tban{background:var(--carbon);color:#C7CED1;padding-block:clamp(48px,7vw,88px)}
.tban h2{color:#fff;max-width:22ch}
.tban .eyebrow{color:var(--cian)}
.tb-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(26px,4vw,40px)}
.tb-g{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tb-c{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:#191E21;border:1px solid #2C3337;border-radius:3px;overflow:hidden}
.tb-f{background:#0B0E10;display:flex;align-items:center;justify-content:center;padding:20px;border-right:1px solid #2C3337}
.tb-ilus{width:100%;max-width:170px;height:auto}
.tb-t{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tb-k{color:#7D878C;font-size:11px}
.tb-t h3{color:#fff;font-size:22px}
.tb-s{color:var(--cian);font-size:12px}
.tb-t p{font-size:15.5px;line-height:1.5;color:#AEB6BA}
.tb-t .btn{margin-top:6px;min-height:44px}
.tb-t .btn .ic{width:16px;height:16px}
@media (max-width:980px){.tb-g{grid-template-columns:1fr}}
@media (max-width:520px){.tb-c{grid-template-columns:1fr}.tb-f{border-right:0;border-bottom:1px solid #2C3337}.tb-ilus{max-width:120px}}
/* secciones */
.s{padding-block:clamp(56px,8vw,104px)}
.s.alt{background:var(--niebla)}
.s-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;align-items:end;margin-bottom:clamp(30px,4vw,48px)}
.s-head .lead{color:var(--acero)}
@media (max-width:800px){.s-head{grid-template-columns:1fr}}
/* lista de proyectos: como la tabla de un patch panel */
.plist{border-top:1.5px solid var(--negro)}
.prow{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.9fr) 32px;gap:20px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--plata);text-decoration:none;color:inherit;transition:background .15s}
.prow:hover{background:var(--niebla)}
.prow .pn{font-family:var(--f-m);font-size:12px;color:var(--acero);letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.prow .pn .ic{color:var(--negro)}
.prow h3{font-size:21px}
.prow p{color:var(--acero);font-size:16px;line-height:1.45}
.prow .tag{color:var(--cianp);font-size:11px}
.prow .go{color:var(--negro);justify-self:end;width:22px;height:22px;transition:transform .15s}
.prow:hover .go{transform:translateX(4px);color:var(--cianp)}
@media (max-width:860px){.prow{grid-template-columns:44px minmax(0,1fr) 22px;gap:6px 14px;padding:20px 0}
 .prow .pn{grid-row:span 3;align-self:start}.prow h3,.prow p,.prow .tag{grid-column:2}.prow .go{grid-column:3;grid-row:1}}
/* pasos */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{padding:22px 22px 4px 0;border-top:3px solid var(--negro);position:relative}
.steps li:first-child{border-top-color:var(--cian)}
.steps .k{display:block;font:500 12px var(--f-m);letter-spacing:.12em;color:var(--cianp);margin-bottom:12px}
.steps h3{font-size:18px;margin-bottom:8px}
.steps p{font-size:15.5px;color:var(--acero);line-height:1.5}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:0 24px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
/* equipos */
.eq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.eqc{display:flex;flex-direction:column;gap:12px;padding:26px 24px;background:var(--blanco);border:1px solid var(--plata);border-radius:3px;text-decoration:none;color:inherit;transition:border-color .15s}
.eqc:hover{border-color:var(--negro)}
.eqc .ic{width:30px;height:30px;color:var(--negro)}
.eqc h3{font-size:19px}
.eqc p{font-size:15.5px;color:var(--acero);line-height:1.5}
.eqc .more{margin-top:auto;padding-top:6px;color:var(--cianp);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.eqc .more .ic{width:16px;height:16px;color:currentColor}
.eqnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:28px;padding:22px 24px;background:var(--negro);color:#C7CED1;border-radius:3px}
.eqnote p{max-width:60ch}
@media (max-width:980px){.eq{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.eq{grid-template-columns:1fr}}
/* para quién y respaldo */
.two{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,80px)}
.who{display:grid;gap:0;margin-top:26px}
.who div{padding:18px 0;border-top:1px solid var(--plata);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px}
.who b{color:var(--negro);font-size:17px}
.who span{color:var(--acero);font-size:16px;line-height:1.5}
.back{background:var(--negro);color:#C7CED1;padding:clamp(26px,4vw,40px);border-radius:3px;position:relative;overflow:hidden}
.back h3{color:#fff;font-size:24px;margin:6px 0 14px}
.back .rif{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;color:var(--cian)}
.back .marco{width:200px;right:-80px;bottom:-120px}.back>*{position:relative;z-index:1}.back>.marco{position:absolute;z-index:0}
@media (max-width:860px){.two{grid-template-columns:1fr}.who div{grid-template-columns:1fr;gap:4px}}
/* contacto */
.cgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,72px);align-items:start}
.cside p{color:var(--acero);margin-top:16px;max-width:42ch}
.cside .mail{display:flex;align-items:center;gap:10px;margin-top:26px;font-weight:700;color:var(--negro);word-break:break-all}
.cside .mail .ic,.cside .mail svg{color:var(--cianp);width:22px;height:22px;flex:none}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}.wa:hover{color:#fff;background:#1EBE5A}.wa svg{width:30px;height:30px}
.f{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;background:var(--blanco);padding:clamp(20px,3vw,32px);border:1px solid var(--plata);border-radius:3px}
.f .full{grid-column:1/-1}
.f label{display:block;font:500 11.5px var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--grafito);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;font:400 16px var(--f-d);color:var(--negro);background:var(--blanco);border:1px solid #A9B2B6;border-radius:3px;padding:12px 13px;min-height:48px}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--cian);outline-offset:0;border-color:var(--negro)}
.f .chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--acero)}
.f .chk input{width:20px;height:20px;min-height:0;margin-top:1px;flex:none;accent-color:var(--cianp)}
.f .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.f .ok{font-size:15px;color:var(--cianp);font-weight:600}
@media (max-width:560px){.ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ctas .btn{justify-content:center;text-align:center;padding:8px 10px;font-size:14.5px;line-height:1.2;min-height:52px}.ctas .btn:only-child{grid-column:1/-1}}
.hp{position:absolute;left:-5000px}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}
@media (max-width:560px){.f{grid-template-columns:1fr}}
/* páginas internas */
.phero{background:var(--negro);color:#C7CED1;position:relative;overflow:hidden}
.phero .wrap{padding-block:clamp(40px,6vw,76px);position:relative;z-index:1}
.phero h1{color:#fff;font-size:clamp(32px,4.6vw,52px);margin-top:18px}
.phero .lead{margin-top:16px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;color:#7D878C}.crumb a{color:#AEB6BA;text-decoration:none}.crumb a:hover{color:var(--cian)}
.phero .ic.big{width:44px;height:44px;color:var(--cian);margin-top:22px}
.phero .marco{width:min(36vw,400px);right:-90px;top:50%;transform:translateY(-38%)}@media (max-width:700px){.phero .marco{width:220px;right:-110px;top:auto;bottom:-120px;transform:none}}
.detail{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,72px)}
.incl{list-style:none;margin:20px 0 0;padding:0;border-top:1.5px solid var(--negro)}
.incl li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--plata);font-size:17px}
.incl .ic{width:22px;height:22px;color:var(--cianp);margin-top:2px}
.box{padding:24px;background:var(--niebla);border-radius:3px}
.box + .box{margin-top:18px}
.box h3{font-size:18px;margin:8px 0 10px}
.box ul{margin:0;padding-left:20px;color:var(--grafito)}.box li{margin:4px 0}
.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.others a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--plata);border-radius:3px;text-decoration:none;color:var(--negro);font-weight:600;font-size:15px}
.others a:hover{border-color:var(--negro)}
.others .ic{width:18px;height:18px}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.legal{max-width:760px}.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:8px}.legal h3{margin:30px 0 8px;font-size:19px}
.legal p,.legal li{font-size:16px;color:var(--grafito)}.legal p+p{margin-top:10px}.legal .upd{color:var(--acero);margin-bottom:10px}
/* pie */
.foot{background:var(--negro);color:#9AA4A9;padding-block:56px 34px;font-size:15px}
.foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.foot h4{margin:0 0 12px;font:500 11.5px var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.foot a{display:block;color:#AEB6BA;text-decoration:none;padding:3px 0}.foot a:hover{color:var(--cian)}
.foot .brand svg{height:30px}
.foot .legalline{grid-column:1/-1;border-top:1px solid #1E2427;padding-top:22px;margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px;color:#7D878C}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .fb{grid-column:1/-1}}
@media (max-width:480px){.foot .wrap{grid-template-columns:1fr}}