:root{
  --white:#fff;
  --paper:#f5f5f3;
  --line:#dfdfdb;
  --ink:#23262b;
  --ink-2:#2e3238;
  --ink-line:#434850;
  --muted:#5b6068;
  --muted-on-ink:#aeb3ba;

  --celeste:#4aa8dc;
  --marron:#7b4a2a;
  --negro:#0c0d0f;
  --rojo:#d4332b;
  --verde:#2f9e44;
  --amarillo:#f2c91b;
  --tierra:linear-gradient(90deg,var(--verde) 50%,var(--amarillo) 50%);

  --display:"Archivo",system-ui,"Segoe UI",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,5vw,40px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-stretch:108%;margin:0;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.6vw,4rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--celeste);outline-offset:3px}

html,body{overflow-x:clip}
.wrap{width:min(1120px,100% - var(--gutter)*2);margin-inline:auto}
section{padding:clamp(64px,10vw,120px) 0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* ---------- Cable stripes (signature motif) ---------- */
.stripes{display:flex;flex-direction:column;gap:3px}
.stripes i{display:block;height:4px;border-radius:2px}
.stripes i:nth-child(1){background:var(--celeste)}
.stripes i:nth-child(2){background:var(--marron)}
.stripes i:nth-child(3){background:var(--negro)}
.stripes i:nth-child(4){background:var(--rojo)}
.stripes i:nth-child(5){background:var(--tierra)}
.stripes--mini{width:22px;gap:2px}
.stripes--mini i{height:3px}

/* ---------- Buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:12px;border:2px solid transparent;
  font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .25s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .ico{width:22px;height:22px;flex:none}
.btn--sm{min-height:42px;padding:0 18px;font-size:.95rem;border-radius:10px}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000;transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--line:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.6)}
.btn--ghost{border-color:var(--ink-line);color:#fff;background:transparent}
.btn--ghost:hover{border-color:#fff;transform:translateY(-2px)}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.top.is-stuck{border-color:var(--line)}
.top__in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__name{font:800 1.6rem/1 var(--display);font-stretch:112%;letter-spacing:.04em}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.98rem;color:var(--muted);transition:color .2s,background .2s}
.nav a:hover,.nav a.is-on{color:var(--ink);background:var(--paper)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,104px)}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center}
.eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--tierra);border-radius:2px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:34em}
.hero h1{margin-bottom:22px}
.hero .btns{margin-top:32px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:.95rem;font-weight:500}
.facts li{display:flex;align-items:center;gap:10px}
.facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.facts li:nth-child(1)::before{background:var(--rojo)}
.facts li:nth-child(2)::before{background:var(--celeste)}
.facts li:nth-child(3)::before{background:var(--marron)}
.facts li:nth-child(4)::before{background:var(--verde)}

/* media slots: photo when present, designed fallback when not */
.media{position:relative;overflow:hidden;background:var(--paper);margin:0}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media__empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:16px;
  font:500 .85rem/1.5 var(--body);color:var(--muted);border:2px dashed var(--line);border-radius:inherit}
.media__empty small{display:block;margin-top:4px;font:500 .72rem var(--mono);opacity:.75;overflow-wrap:anywhere}
.media.empty .media__empty{display:flex;flex-direction:column}
.hero__media{aspect-ratio:4/5;border-radius:22px;background:var(--ink);box-shadow:0 30px 60px -30px rgba(35,38,43,.55)}
.hero__media .media__empty{color:#fff;border:0;align-items:flex-end;justify-content:flex-start;text-align:left;
  background:linear-gradient(transparent 55%,rgba(0,0,0,.55));font-size:.8rem}
.hero__media.empty .media__empty{display:none}
.cables{position:absolute;inset:0;width:100%;height:100%}
.cables .c{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s var(--ease) forwards;animation-delay:calc(.25s + var(--i)*.14s)}
.cables .c2{opacity:0;animation:fade .5s ease forwards 1.5s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- Section heads ---------- */
.sec-head{margin-bottom:clamp(32px,5vw,56px);max-width:40rem}
.sec-head h2{margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:1.1rem}

/* ---------- Services ---------- */
.services{background:var(--paper)}
.services__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(20px,3vw,36px)}
.svc{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,36px);position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(35,38,43,.4)}
.svc__wire{display:block;height:8px;width:56px;border-radius:4px;background:var(--wire);margin-bottom:24px;transition:width .5s var(--ease)}
.svc:hover .svc__wire{width:100%}
.svc h3{font-size:1.5rem;margin-bottom:18px}
.svc li{padding:11px 0;border-top:1px solid var(--line);color:var(--muted);font-size:1rem}
.svc li:first-child{border-top:0;padding-top:0}

/* ---------- About ---------- */
.about{background:var(--ink);color:#fff}
.about .sec-head p{color:var(--muted-on-ink)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:start}
.pillars{display:grid;gap:0}
.pillars li{padding:26px 0;border-top:1px solid var(--ink-line)}
.pillars li:last-child{border-bottom:1px solid var(--ink-line)}
.pillars h3{margin-bottom:8px;font-size:1.3rem}
.pillars p{color:var(--muted-on-ink)}
.aea{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:20px;padding:clamp(22px,3vw,34px)}
.aea__title{font-size:1.1rem;margin-bottom:22px}
.code{display:grid;gap:12px}
.code li{display:grid;grid-template-columns:72px 1fr auto;grid-template-areas:"w b c" "w e c";column-gap:18px;align-items:center}
.code__wire{grid-area:w;height:12px;border-radius:6px;background:var(--w);transform-origin:left;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.code__wire--pe{background:repeating-linear-gradient(90deg,var(--verde) 0 12px,var(--amarillo) 12px 24px)}
.code b{grid-area:b;font-weight:600;line-height:1.2}
.code em{grid-area:e;font-style:normal;color:var(--muted-on-ink);font-size:.92rem;line-height:1.2}
.code code{grid-area:c;font:500 .95rem var(--mono);color:var(--muted-on-ink);border:1px solid var(--ink-line);border-radius:6px;padding:4px 9px}
.aea__img{margin-top:26px;aspect-ratio:3/2;border-radius:12px;background:var(--ink)}
.aea__img .media__empty{border-color:var(--ink-line);color:var(--muted-on-ink)}
.aea__img:not(.empty){display:block}
.aea__img.empty{aspect-ratio:auto;height:96px}

/* ---------- Works ---------- */
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.work{margin:0}
.work .media{aspect-ratio:4/3;border-radius:14px}
.work--ba{grid-column:span 2;grid-row:span 1}
.work--ba .media{aspect-ratio:auto;height:100%;min-height:0}
.work--ba{display:flex;flex-direction:column}
.work--ba .ba{flex:1;aspect-ratio:8/3;min-height:240px}
.work__cap{padding:12px 2px 0;font-weight:600;font-size:.98rem}
.work .media img{transition:transform .8s var(--ease)}
.work:hover .media img{transform:scale(1.04)}
.ba .ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__tag{position:absolute;top:14px;padding:5px 10px;border-radius:6px;background:rgba(12,13,15,.75);color:#fff;font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;z-index:2}
.ba__tag--l{left:14px}.ba__tag--r{right:14px}
.ba__bar{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);z-index:2}
.ba__bar::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.ba.empty .ba__tag,.ba.empty .ba__bar,.ba.empty .ba__range{display:none}

/* ---------- Contact ---------- */
.contact{background:var(--ink);color:#fff;border-top:1px solid var(--ink-line)}
.contact__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:center}
.contact h2{margin-bottom:20px;font-size:clamp(2.2rem,5vw,3.6rem)}
.contact .lead{color:var(--muted-on-ink);margin-bottom:32px}
.info{margin:0;display:grid;gap:0;border-top:1px solid var(--ink-line)}
.info>div{padding:22px 0;border-bottom:1px solid var(--ink-line)}
.info dt{font:500 .75rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-ink);margin-bottom:8px}
.info dd{margin:0;font-size:1.25rem;font-weight:500}
.info a{text-decoration:none;border-bottom:2px solid var(--ink-line);transition:border-color .2s}
.info a:hover{border-color:#fff}
.zones{display:flex;flex-wrap:wrap;gap:8px}
.zones li{font-size:.92rem;font-weight:500;padding:6px 14px;border:1px solid var(--ink-line);border-radius:99px}

/* ---------- Footer ---------- */
.foot{background:var(--negro);color:var(--muted-on-ink);padding:36px 0 44px;font-size:.88rem}
.foot .wrap{display:flex;gap:20px;align-items:flex-start}
.foot .stripes{width:34px;flex:none;margin-top:4px}
.foot strong{color:#fff}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 20px;border-radius:99px;background:#1fa855;color:#fff;font-weight:600;text-decoration:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:transform .3s var(--ease),opacity .3s,background .2s;
  opacity:0;transform:translateY(16px);pointer-events:none}
.wa-float.is-on{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:#188c47}
.wa-float .ico{width:22px;height:22px}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero__grid,.about__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .hero__media{aspect-ratio:4/3;order:-1}
  .services__grid{grid-template-columns:minmax(0,1fr)}
  .works__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work--ba{grid-column:1/-1}
  .burger{display:block;margin-left:auto}
  .top__cta{display:none}
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px var(--gutter) 16px;background:#fff;
    border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;font-size:1.05rem;border-radius:0;border-top:1px solid var(--line);background:none}
  .nav a:first-child{border-top:0}
}
@media (max-width:560px){
  .works__grid{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%;justify-content:center}
  .code li{grid-template-columns:52px 1fr auto}
  .wa-float span{display:none}
  .wa-float{padding:0;width:56px;height:56px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .cables .c{stroke-dashoffset:0}
  .cables .c2{opacity:1}
}