/* Layout: obra en losa — the hero is a rebar slab seen in perspective; orange conduits carry current
   from the service panel (right) to the headline (left). One dark, single-theme world on purpose. */
:root{
  --slab:#0b0f17;      /* night slab, blue-biased black */
  --slab-2:#131b28;    /* raised surfaces */
  --steel:#2a3446;     /* panel edges */
  --rebar:#71819c;     /* grid + muted lines */
  --paper:#eef1f6;     /* text */
  --muted:#97a3b8;
  --conduit:#ff7417;   /* corrugated conduit orange, lifted from brand #d17800 */
  --brand:#d17800;
  --volt:#4d8dff;      /* brand blue #005df6 lifted for dark ground */
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--slab);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--conduit);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- utility strip ---------- */
.strip{background:#070a10;border-bottom:1px solid var(--steel);font-family:var(--mono);font-size:12px;color:var(--muted)}
.strip .wrap{display:flex;align-items:center;gap:20px;padding-block:7px;flex-wrap:wrap}
.strip .scope{display:flex;align-items:center;gap:8px;color:var(--paper)}
.strip canvas{width:96px;height:18px;display:block}
.strip .sep{width:1px;height:14px;background:var(--steel)}
.strip .push{margin-left:auto;display:flex;gap:20px;align-items:center}
.strip b{color:var(--conduit);font-weight:500}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in oklab,var(--slab) 72%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid color-mix(in oklab,var(--steel) 70%,transparent);transition:background .3s}
.nav .wrap{display:flex;align-items:center;gap:28px;height:78px;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.nav.compact .wrap{height:58px}
.logo{display:flex;align-items:center;position:relative;flex:none}
.logo img{height:46px;width:auto;display:block;transition:height .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 0 transparent)}
.nav.compact .logo img{height:34px}
.logo::after{content:"";position:absolute;left:0;top:50%;width:46px;height:46px;translate:0 -50%;border-radius:12px;box-shadow:0 0 0 0 color-mix(in oklab,var(--conduit) 70%,transparent);animation:ring 3.2s 1.6s infinite;pointer-events:none}
.nav.compact .logo::after{width:34px;height:34px;border-radius:9px}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--conduit) 55%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
.links{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.links a{position:relative;display:block;padding:10px 14px;text-decoration:none;font-weight:500;font-size:15px;color:var(--muted);transition:color .2s}
.links a:hover,.links a[aria-current]{color:var(--paper)}
.links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent 0 30%,#ffd2a8 45%,var(--conduit) 55%,transparent 70%) 0 0/300% 100%,color-mix(in oklab,var(--conduit) 35%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.links a:hover::after,.links a[aria-current]::after{transform:scaleX(1);animation:run 1.1s linear infinite}
@keyframes run{from{background-position:100% 0,0 0}to{background-position:-50% 0,0 0}}
.cta{--a:0deg;position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;color:#1a0d02;background:var(--conduit);border:0;cursor:pointer;isolation:isolate;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;box-shadow:0 0 0 1px color-mix(in oklab,var(--conduit) 40%,#000),0 8px 30px -8px color-mix(in oklab,var(--conduit) 70%,transparent);white-space:nowrap;font-family:var(--body)}
.cta::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:conic-gradient(from var(--a),transparent 0 70%,#fff3e6 80%,var(--conduit) 86%,transparent 92%);animation:spin 2.6s linear infinite}
.cta::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--conduit)}
.cta:hover{box-shadow:0 0 0 1px color-mix(in oklab,var(--conduit) 40%,#000),0 10px 44px -6px var(--conduit)}
.cta svg{width:16px;height:16px}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.ghost{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid var(--steel);text-decoration:none;font-weight:500;color:var(--paper);transition:border-color .2s,background .2s}
.ghost:hover{border-color:var(--rebar);background:var(--slab-2)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--steel);color:var(--paper);border-radius:10px;padding:8px 12px;font:500 14px var(--body)}
.cable{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,color-mix(in oklab,var(--conduit) 30%,transparent),var(--conduit));}
.cable::after{content:"";position:absolute;right:-3px;top:50%;width:8px;height:8px;border-radius:50%;translate:0 -50%;background:#fff1e0;box-shadow:0 0 12px 4px var(--conduit);transform:scaleX(calc(1/max(var(--p,0),.001)))}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--steel)}
.hero canvas.field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--slab) 0%,color-mix(in oklab,var(--slab) 80%,transparent) 34%,transparent 62%),linear-gradient(180deg,var(--slab) 0%,transparent 26%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center;padding-block:72px 84px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#33d17a;box-shadow:0 0 10px #33d17a;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}
.copy{position:relative;z-index:2;min-width:0;container-type:inline-size}
h1{font-family:var(--display);font-weight:900;font-size:clamp(40px,14cqi,112px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase;margin:18px 0 0;text-wrap:balance}
h1 .tube{display:block;color:#ffe9d6;text-shadow:0 0 6px rgba(255,190,130,.9),0 0 22px var(--conduit),0 0 60px color-mix(in oklab,var(--conduit) 60%,transparent);animation:startup 1.5s 1.15s steps(1,end) both}
h1 .tube.surge{animation:surge .7s ease-out}
@keyframes startup{0%{opacity:.28;text-shadow:none}8%{opacity:1}11%{opacity:.3}18%{opacity:.9}20%{opacity:.35}31%{opacity:1}34%{opacity:.6}40%,100%{opacity:1}}
@keyframes surge{0%{filter:brightness(1)}15%{filter:brightness(1.9)}100%{filter:brightness(1)}}
.lede{max-width:52ch;color:var(--muted);font-size:18px;margin:26px 0 0}
.lede strong{color:var(--paper);font-weight:500}
.phases{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 0;padding:0;list-style:none}
.phases li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--steel);border-radius:10px;background:color-mix(in oklab,var(--slab-2) 80%,transparent);font-size:14px;font-weight:500}
.phases .ph{font-family:var(--mono);font-size:11px;color:var(--slab);background:var(--rebar);border-radius:5px;padding:2px 6px;animation:phase 3s infinite;animation-delay:calc(var(--i) * 1s)}
@keyframes phase{0%,100%{background:var(--rebar);box-shadow:none}18%{background:var(--conduit);box-shadow:0 0 14px var(--conduit)}40%{background:var(--rebar);box-shadow:none}}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* right column: photo + panel */
.rig{position:relative;display:grid;gap:0}
.photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;max-width:100%;border:1px solid var(--steel);box-shadow:0 30px 80px -30px #000;transform:perspective(1200px) rotateY(calc(var(--rx,0)*1deg)) rotateX(calc(var(--ry,0)*1deg));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.75) contrast(1.08) brightness(.82)}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,10,16,.85)),linear-gradient(115deg,transparent 30%,rgba(255,170,90,.22) 48%,transparent 56%) 0 0/250% 100%;animation:sheen 6s 2.2s infinite;mix-blend-mode:normal}
@keyframes sheen{0%{background-position:0 0,140% 0}40%,100%{background-position:0 0,-60% 0}}
.photo figcaption{position:absolute;left:18px;bottom:16px;right:18px;z-index:1;font-family:var(--mono);font-size:12px;color:#c9d2e0;display:flex;justify-content:space-between;gap:12px}
.photo figcaption b{color:var(--conduit);font-weight:500}

.panel{position:relative;margin:-64px 0 0 -40px;width:calc(100% + 16px);max-width:470px;border-radius:16px;padding:16px 16px 14px;background:linear-gradient(180deg,#1a2231,#121925);border:1px solid #33405a;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px -20px #000}
.panel header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 2px 12px}
.panel header span:last-child{color:var(--paper)}
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px;border-radius:10px;background:repeating-linear-gradient(90deg,#0c111a 0 6px,#0e141e 6px 7px);border:1px solid #0a0e15}
.brk{all:unset;cursor:pointer;display:grid;justify-items:center;gap:6px;padding:10px 4px 8px;border-radius:8px;background:linear-gradient(180deg,#e9edf3,#c6cdd8);color:#1b2333;box-shadow:0 2px 0 #8a95a8,0 6px 14px -6px #000;transition:transform .15s}
.brk:active{transform:translateY(1px)}
.brk:focus-visible{outline:2px solid var(--conduit);outline-offset:3px}
.brk .q{font-family:var(--mono);font-size:10px;font-weight:500;opacity:.7}
.brk .slot{position:relative;width:22px;height:40px;border-radius:5px;background:#2b3343;box-shadow:inset 0 2px 4px #000}
.brk .lever{position:absolute;left:3px;right:3px;height:18px;border-radius:3px;top:19px;background:linear-gradient(180deg,#5c6577,#3c4454);transition:top .22s cubic-bezier(.3,1.6,.5,1),background .2s}
.brk[aria-checked="true"] .lever{top:3px;background:linear-gradient(180deg,#ff9a50,var(--conduit))}
.brk .led{width:6px;height:6px;border-radius:50%;background:#58606d;transition:background .2s,box-shadow .2s}
.brk[aria-checked="true"] .led{background:#3ee07f;box-shadow:0 0 8px #3ee07f}
.brk .n{font-size:11px;font-weight:600;line-height:1.15;text-align:center;min-height:2.3em;display:grid;place-items:center}
.readout{margin-top:12px;padding:12px 14px;border-radius:10px;background:#070b11;border:1px solid #1f2838;min-height:96px}
.readout .k{font-family:var(--mono);font-size:11px;color:var(--conduit);letter-spacing:.08em;text-transform:uppercase}
.readout h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.01em;margin:2px 0 4px;text-transform:uppercase}
.readout p{margin:0;font-size:14px;color:var(--muted)}
.readout .swap{animation:swapIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes swapIn{from{opacity:.2;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* ---------- home sections ---------- */
section.blk{padding-block:96px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--conduit);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:2px;background:var(--conduit);box-shadow:0 0 8px var(--conduit)}
h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,6vw,76px);line-height:.9;margin:14px 0 0;letter-spacing:-.005em;text-wrap:balance}
h2 em{font-style:normal;color:var(--conduit)}
.intro{max-width:56ch;color:var(--muted);font-size:17px;margin:18px 0 0}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:48px}

/* conduit divider: a run of corrugated pipe that energizes when it enters view */
.run{position:relative;height:14px;margin:0;border-radius:7px;background:repeating-linear-gradient(90deg,#7a3a0c 0 3px,#b8581a 3px 9px);opacity:.55;overflow:hidden}
.run::after{content:"";position:absolute;top:0;bottom:0;width:22%;left:-25%;background:linear-gradient(90deg,transparent,#fff1e0 50%,transparent);filter:blur(2px);mix-blend-mode:screen}
.run.on{opacity:1;box-shadow:0 0 22px -4px var(--conduit)}
.run.on::after{animation:flow 2.4s .2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes flow{to{left:105%}}

/* services: one circuit per row */
.circuits{list-style:none;margin:0;padding:0;border-top:1px solid var(--steel)}
.circ{display:grid;grid-template-columns:90px minmax(0,1.1fr) minmax(0,1.3fr) 48px;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--steel);position:relative;transition:background .3s}
.circ::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--conduit);box-shadow:0 0 10px var(--conduit);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.circ:hover::before{transform:scaleX(1)}
.circ:hover{background:linear-gradient(90deg,color-mix(in oklab,var(--conduit) 7%,transparent),transparent 70%)}
.circ .q{font-family:var(--mono);font-size:13px;color:var(--rebar);display:flex;align-items:center;gap:10px}
.circ .q i{width:8px;height:8px;border-radius:50%;background:#4a5262;transition:background .3s,box-shadow .3s}
.circ:hover .q i,.circ.lit .q i{background:#3ee07f;box-shadow:0 0 8px #3ee07f}
.circ h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.4vw,44px);line-height:.95;margin:0;letter-spacing:.005em;transition:color .3s}
.circ:hover h3{color:#ffe9d6;text-shadow:0 0 18px color-mix(in oklab,var(--conduit) 60%,transparent)}
.circ p{margin:0;color:var(--muted)}
.circ .arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--steel);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.circ:hover .arr{background:var(--conduit);border-color:var(--conduit);color:#1a0d02;transform:rotate(-45deg)}

/* value props */
.props{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.prop{position:relative;padding:28px 26px 30px;border-radius:16px;background:linear-gradient(180deg,var(--slab-2),var(--slab));border:1px solid var(--steel);overflow:hidden;min-width:0}
.prop::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),color-mix(in oklab,var(--conduit) 30%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.prop:hover::after{opacity:1}
.prop .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#0a0e15;border:1px solid var(--steel);color:var(--conduit)}
.prop .ico svg{width:24px;height:24px}
.prop h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:28px;margin:20px 0 8px;letter-spacing:.01em}
.prop p{margin:0;color:var(--muted)}
.prop .tag{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--paper);border:1px solid var(--steel);border-radius:999px;padding:4px 10px}

/* empresa */
.empresa{background:linear-gradient(180deg,var(--slab),#0e1520 40%,var(--slab));border-block:1px solid var(--steel)}
.emp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.since{font-family:var(--display);font-weight:900;font-size:clamp(110px,17vw,220px);line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:2px color-mix(in oklab,var(--conduit) 80%,transparent);background:linear-gradient(0deg,var(--conduit) 0 var(--fill,0%),transparent var(--fill,0%)) text;-webkit-background-clip:text;background-clip:text;transition:--fill 1.8s cubic-bezier(.2,.8,.2,1)}
@property --fill{syntax:"<percentage>";inherits:false;initial-value:0%}
.since.on{--fill:100%}
.since-l{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.emp .body p{color:var(--muted);margin:0 0 16px;max-width:62ch}
.emp .body p:first-child{color:var(--paper);font-size:20px;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.chips li{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--steel);background:#0a0e15;color:var(--paper)}
.ute{display:flex;align-items:center;gap:18px;margin-top:30px;padding:16px;border-radius:14px;border:1px solid var(--steel);background:var(--slab-2)}
.ute img{height:56px;width:auto;background:#fff;border-radius:8px;padding:4px 8px;flex:none}
.ute p{margin:0;font-size:14px;color:var(--muted)}
.ute b{color:var(--paper);display:block;font-size:15px;margin-bottom:2px}

/* obras */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:12px}
.gal button{all:unset;cursor:zoom-in;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--steel);background:#0a0e15}
.gal button:focus-visible{outline:2px solid var(--conduit);outline-offset:3px}
.gal button.w2{grid-column:span 2}.gal button.h2{grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.85) brightness(.75) contrast(1.1);transform:scale(1.02);transition:filter .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.gal button:hover img,.gal button:focus-visible img{filter:none;transform:scale(1.07)}
.gal button::before{content:"";position:absolute;left:0;right:0;height:2px;top:-4px;z-index:1;background:var(--conduit);box-shadow:0 0 14px 2px var(--conduit);opacity:0}
.gal button:hover::before{animation:scan 1s cubic-bezier(.5,0,.5,1)}
@keyframes scan{0%{top:-4px;opacity:1}100%{top:100%;opacity:.2}}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(180deg,transparent,rgba(5,8,12,.9));font-size:14px;font-weight:500;display:flex;justify-content:space-between;gap:8px;align-items:end}
.gal .cap span{font-family:var(--mono);font-size:11px;color:var(--conduit);font-weight:400;flex:none}
.lb{position:fixed;inset:0;z-index:50;background:rgba(5,8,12,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));backdrop-filter:blur(6px)}
.lb figure{margin:0;max-width:min(1000px,100%);display:grid;gap:12px}
.lb img{width:100%;max-height:78vh;object-fit:contain;border-radius:12px;animation:swapIn .4s cubic-bezier(.2,.8,.2,1)}
.lb figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:14px}
.lb button{background:var(--slab-2);border:1px solid var(--steel);color:var(--paper);border-radius:999px;padding:8px 14px;font:500 14px var(--body);cursor:pointer}

/* clientes & marcas */
.marq{overflow:hidden;border-block:1px solid var(--steel);padding-block:22px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq + .marq{border-top:0}
.track{display:flex;gap:56px;width:max-content;animation:slide var(--dur,40s) linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq.rev .track{animation-direction:reverse}
.track span{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,40px);text-transform:uppercase;color:#4a566c;white-space:nowrap;transition:color .25s,text-shadow .25s;letter-spacing:.01em}
.track span:hover{color:var(--paper);text-shadow:0 0 18px color-mix(in oklab,var(--volt) 70%,transparent)}
.marq.rev .track span:hover{text-shadow:0 0 18px color-mix(in oklab,var(--conduit) 70%,transparent)}
@keyframes slide{to{transform:translateX(-50%)}}
.mlabel{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}

/* política */
.quote{max-width:980px}
.quote blockquote{margin:18px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1.08;text-wrap:balance;text-transform:none}
.quote blockquote .hl{color:#ffe9d6;text-shadow:0 0 16px color-mix(in oklab,var(--conduit) 55%,transparent)}

/* contacto */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch}
.callcard{position:relative;border-radius:20px;padding:34px;background:radial-gradient(500px 300px at 0% 0%,color-mix(in oklab,var(--conduit) 26%,transparent),transparent 70%),var(--slab-2);border:1px solid var(--steel);display:grid;gap:22px;align-content:start;overflow:hidden}
.callcard .num{font-family:var(--display);font-weight:900;font-size:clamp(54px,7vw,92px);line-height:.85;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.callcard .row{display:flex;flex-wrap:wrap;gap:10px}
.callcard dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0;font-size:15px}
.callcard dt{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding-top:2px}
.callcard dd{margin:0}
form.f{border-radius:20px;padding:30px;border:1px solid var(--steel);background:#0a0e15;display:grid;gap:14px;align-content:start}
.f label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.f input,.f select,.f textarea{font:15px var(--body);color:var(--paper);background:var(--slab-2);border:1px solid var(--steel);border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s;width:100%}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--conduit);box-shadow:0 0 0 3px color-mix(in oklab,var(--conduit) 25%,transparent)}
.f .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.f .msg{font-size:14px;color:#3ee07f;min-height:1.4em;margin:0}

/* footer */
footer.foot{border-top:1px solid var(--steel);background:#070a10;padding-block:64px 28px;position:relative;overflow:hidden}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.fgrid h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:500}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fgrid a{text-decoration:none;color:var(--paper);opacity:.85}
.fgrid a:hover{opacity:1;color:var(--conduit)}
.fgrid p{margin:0;color:var(--muted);font-size:15px}
.flogo{height:44px;width:auto;margin-bottom:16px}
.credit{margin-top:56px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:22px 24px;border-radius:16px;border:1px solid var(--steel);background:linear-gradient(90deg,color-mix(in oklab,var(--volt) 14%,transparent),transparent 60%)}
.credit .zv{font-family:var(--display);font-weight:800;font-size:18px;text-transform:lowercase;letter-spacing:.01em;text-decoration:none;color:var(--paper)}
.credit .zv:hover{color:var(--volt)}
.credit p{margin:0;color:var(--muted);font-size:14px}
.credit p b{color:var(--paper);font-weight:600}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;font-family:var(--mono);font-size:12px;color:#5d6880}
.bigword{position:absolute;left:50%;bottom:-0.18em;translate:-50% 0;font-family:var(--display);font-weight:900;font-size:clamp(80px,19vw,300px);line-height:1;color:transparent;-webkit-text-stroke:1px #1b2433;white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.foot .wrap{position:relative;z-index:1}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:56px;padding-block:48px 64px}
  .panel{margin:-48px 0 0 0;width:100%;max-width:none}
  section.blk{padding-block:72px}
  .head,.emp,.contact{grid-template-columns:minmax(0,1fr);gap:28px}
  .props{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .circ{grid-template-columns:56px minmax(0,1fr) 44px;gap:8px 18px}
  .circ p{grid-column:2}
  .circ .arr{grid-row:1;grid-column:3}
}
@media (max-width:760px){
  .links,.nav .cta{display:none}
  .menu-btn{display:inline-flex}
  .nav.open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--slab);border-bottom:1px solid var(--steel);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .strip .hide-s{display:none}
  .lede{font-size:16px}
  .rail{gap:6px;padding:8px}
  .gal{grid-auto-rows:150px;gap:8px}
  .gal button.w2{grid-column:span 2}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .f .two{grid-template-columns:minmax(0,1fr)}
  .credit{grid-template-columns:minmax(0,1fr);gap:8px}
  .callcard,form.f{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ===================== site additions ===================== */
html,body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--conduit);color:#1a0d02;padding:10px 14px;border-radius:8px;font-weight:600}
.skip:focus{left:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* inner page hero */
.hero.page .wrap{grid-template-columns:minmax(0,1fr);padding-block:72px 64px}
.hero.page h1{font-size:clamp(48px,9vw,120px);margin-top:14px}
.hero.page .lede{max-width:60ch}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--conduit)}

/* prose */
.prose p{color:var(--muted);margin:0 0 16px;max-width:66ch}
.prose p.lead{color:var(--paper);font-size:20px;line-height:1.45}
.prose ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px;max-width:66ch}
.prose li{position:relative;padding-left:26px;color:var(--paper)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--conduit);box-shadow:0 0 6px var(--conduit)}
.prose h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:26px;letter-spacing:.01em;margin:30px 0 10px;color:var(--paper)}
.prose h3:first-child{margin-top:0}

/* servicios page: sticky panel + sections */
.svc-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.svc-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);border-radius:16px;padding:14px;background:linear-gradient(180deg,#1a2231,#121925);border:1px solid #33405a}
.svc-nav p{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2px 4px 12px}
.svc-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.svc-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;background:#0a0e15;border:1px solid #1f2838;font-weight:500;font-size:15px;transition:border-color .25s,background .25s}
.svc-nav a .q{font-family:var(--mono);font-size:11px;color:var(--rebar);width:22px}
.svc-nav a .led{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#4a5262;transition:background .25s,box-shadow .25s}
.svc-nav a.on{border-color:color-mix(in oklab,var(--conduit) 60%,transparent);background:color-mix(in oklab,var(--conduit) 10%,#0a0e15)}
.svc-nav a.on .led{background:#3ee07f;box-shadow:0 0 8px #3ee07f}
.svc{padding-block:8px 64px;scroll-margin-top:100px}
.svc + .svc{border-top:1px solid var(--steel);padding-top:64px}
.svc .num{font-family:var(--mono);font-size:13px;color:var(--conduit)}
.svc h2{margin-bottom:24px}
.svc .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.svc .card{border:1px solid var(--steel);border-radius:16px;padding:24px;background:var(--slab-2)}
.svc figure{margin:24px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--steel);aspect-ratio:16/7}
.svc figure img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.9)}

/* obras page */
.feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:64px}
.feature .ph{border-radius:18px;overflow:hidden;border:1px solid var(--steel);aspect-ratio:4/3}
.feature .ph img{width:100%;height:100%;object-fit:cover;display:block}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters button{font:500 14px var(--body);color:var(--muted);background:#0a0e15;border:1px solid var(--steel);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .2s}
.filters button:hover{color:var(--paper);border-color:var(--rebar)}
.filters button[aria-pressed="true"]{color:#1a0d02;background:var(--conduit);border-color:var(--conduit);box-shadow:0 0 18px -4px var(--conduit)}
.gal.all{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:260px}
.gal button.out{display:none}

/* logo walls */
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.logos li{list-style:none;background:#f4f6f9;border-radius:14px;aspect-ratio:5/3;display:grid;place-items:center;padding:16px;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.logos li img{max-height:64px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.75;transition:filter .3s,opacity .3s}
.logos li:hover{transform:translateY(-4px);box-shadow:0 14px 30px -14px var(--conduit)}
.logos li:hover img{filter:none;opacity:1}
.logos ul,ul.logos{margin:0;padding:0}

/* forms */
.f .hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.f input[type=file]{padding:10px;background:var(--slab-2);cursor:pointer}
.f input[type=file]::file-selector-button{font:500 14px var(--body);background:var(--steel);color:var(--paper);border:0;border-radius:8px;padding:8px 12px;margin-right:12px;cursor:pointer}
.f .hint{font-size:12px;color:var(--rebar)}
.f .msg.err{color:#ff9a50}
.f button[disabled]{opacity:.6;cursor:progress}
.f .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.f .consent input{width:auto;margin-top:3px}
.info-list{display:grid;gap:14px;margin:0}
.info-list div{display:grid;gap:2px}
.info-list dt{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.info-list dd{margin:0;font-size:16px}
.info-list a{color:var(--paper)}
.map{margin-top:40px;border-radius:18px;overflow:hidden;border:1px solid var(--steel);aspect-ratio:21/8;background:var(--slab-2)}
.map iframe{width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.6)}

/* whatsapp */
.wa{position:fixed;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 18px));z-index:40;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;background:#1fa855;border-radius:999px;padding:12px;box-shadow:0 12px 30px -8px rgba(0,0,0,.6),0 0 0 0 rgba(37,211,102,.5);animation:waPing 3.2s 3s infinite;transition:transform .25s cubic-bezier(.2,.8,.2,1),padding .25s}
.wa svg{width:30px;height:30px;flex:none}
.wa span{max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:15px;transition:max-width .35s cubic-bezier(.2,.8,.2,1)}
.wa:hover,.wa:focus-visible{transform:translateY(-2px);padding-right:18px}
.wa:hover span,.wa:focus-visible span{max-width:220px}
@keyframes waPing{0%{box-shadow:0 12px 30px -8px rgba(0,0,0,.6),0 0 0 0 rgba(37,211,102,.55)}60%,100%{box-shadow:0 12px 30px -8px rgba(0,0,0,.6),0 0 0 18px rgba(37,211,102,0)}}

/* 404 */
.e404{min-height:56vh;display:grid;align-content:center}
.e404 .code{font-family:var(--display);font-weight:900;font-size:clamp(120px,24vw,260px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--conduit);animation:startup 2s .3s steps(1,end) both}

@media (max-width:980px){
  .svc-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .svc-nav{position:static}
  .svc-nav ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc .cols,.feature{grid-template-columns:minmax(0,1fr)}
  .gal.all{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .map{aspect-ratio:4/3}
}
@media (max-width:760px){
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal.all{grid-auto-rows:150px}
  .hero.page .wrap{padding-block:48px}
}
.gal.all{grid-auto-flow:dense}
.callcard dl.info-list{grid-template-columns:minmax(0,1fr)}
.callcard h2{font-size:clamp(34px,4.4vw,54px)}
/* crédito de la agencia: pequeño, al final */
p.credit{display:block;margin:14px 0 0;padding:14px 0 0;border:0;border-top:1px solid #151c28;border-radius:0;background:none;font-family:var(--mono);font-size:11px;line-height:1.5;color:#5d6880}
p.credit a{color:#8592a8;text-decoration:none}
p.credit a:hover{color:var(--volt)}