/* ==========================================================================
   Marlo Ingeniería — site.css (compartido por todas las páginas)
   Dirección: Arcohouse (cinematográfico, foto protagonista, claro/oscuro),
   Archivo condensado + JetBrains Mono, teal #2C818F, esquinas rectas, cotas + hatching.
   SIN grilla de fondo, SIN píldoras, SIN Inter.
   ========================================================================== */
:root{
  --paper:#F6F5F2; --paper-2:#EFEDE8; --ink:#14161A; --ink-soft:#4A4E55;
  --carbon:#15171A; --carbon-2:#1C1F23; --on-dark:#EAEBE7; --on-dark-soft:#9DA1A6;
  --teal:#2C818F; --teal-deep:#1F626D; --teal-light:#5CADB8;
  --amber:#E0A82E; --amber-ink:#2A2008;
  --line:#D8D5CE; --line-dark:#2A2E33;
  --radius:4px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-o:cubic-bezier(.2,.7,.1,1);
  --nav-h:68px;
  --pad:max(24px,4vw);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{font-family:'Archivo',sans-serif;font-stretch:100%;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal-light);outline-offset:3px}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:'JetBrains Mono',monospace}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--teal);color:#fff;padding:12px 18px;font-weight:700}
.skip:focus{top:12px}

/* ---------- logo: el PNG es blanco. Sobre fondo claro usar .logo--ink ---------- */
.logo--ink{filter:brightness(0)}               /* tinta oscura */

/* ---------- tipografía ---------- */
.display{font-stretch:66%;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
.kicker{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:14px;min-height:18px}
.kicker::after{content:"";flex:0 0 56px;height:1px;background:currentColor;opacity:.5;transform-origin:left}
html.js .kicker::after{transform:scaleX(0);transition:transform .8s var(--ease) .3s}
html.js .kicker.in::after{transform:scaleX(1)}
.sec--dark .kicker,.page-hero .kicker,.hero .kicker{color:var(--teal-light)}
.hero .kicker{color:#9BDCE6;font-weight:600;text-shadow:0 1px 2px rgba(21,23,26,.9),0 0 14px rgba(21,23,26,.7)}
.num{font-family:'JetBrains Mono',monospace;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.prose p{color:var(--ink-soft);margin-bottom:16px;max-width:68ch}
.sec--dark .prose p{color:var(--on-dark-soft)}

/* ---------- firmas gráficas: cota + hatching ---------- */
.cota{position:relative;height:1px;background:var(--line);margin:0 var(--pad)}
.cota::before,.cota::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--line)}
.cota::before{left:0}.cota::after{right:0}
html.js .cota{transform:scaleX(0);transition:transform 1.1s var(--ease)}
html.js .cota.in{transform:scaleX(1)}
.hatch{background-image:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,255,255,.07) 7px 14px)}
.sec--dark.hatch{background-image:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,255,255,.04) 7px 14px)}
.hatch--ink{background-image:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(20,22,26,.08) 7px 14px)}
.hatch-band{height:14px;border-block:1px solid var(--line-dark);background:var(--carbon-2) repeating-linear-gradient(-45deg,transparent 0 7px,rgba(92,173,184,.22) 7px 14px)}

/* ---------- botones (rectos) ---------- */
.btn{--sweep:var(--teal-deep);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 26px;border-radius:var(--radius);font-weight:700;font-size:15px;border:1px solid transparent;transition:transform .2s var(--ease),color .35s var(--ease-o),border-color .35s;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;text-align:center}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-o);pointer-events:none}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:scale(.98)}
.btn-teal{background:var(--teal);color:#fff}
.btn-ghost{--sweep:var(--ink);border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--paper)}
.btn-ghost-dark{--sweep:var(--on-dark);border-color:rgba(234,235,231,.4);color:var(--on-dark)}
.btn-ghost-dark:hover,.btn-ghost-dark:focus-visible{border-color:var(--on-dark);color:var(--carbon)}
.btn-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--teal);border-bottom:1px solid currentColor;padding-block:6px}
.sec--dark .btn-link{color:var(--teal-light)}
.btn-link:hover{gap:16px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- header / nav compartida ---------- */
.site-nav{position:sticky;top:0;z-index:50;color:var(--on-dark)}
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(21,23,26,.88);border-bottom:1px solid var(--line-dark);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top;transition:transform .5s var(--ease-o),background .5s var(--ease-o)}
.site-nav.is-scrolled::before{transform:scaleY(.88);background:rgba(21,23,26,.985)}
.nav-in{max-width:1440px;margin:0 auto;padding:0 var(--pad);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;transform:translateY(0);transition:transform .5s var(--ease-o)}
.site-nav.is-scrolled .nav-in{transform:translateY(-4px)}
.nav-logo{display:flex;align-items:center;min-height:44px;min-width:44px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--on-dark-soft)}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--teal-light);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--on-dark)}
.nav-links a:not(.btn):hover::after,.nav-links a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav-links a.is-active{color:var(--on-dark)}
.nav-links .nav-cta{margin-left:10px;min-height:44px;padding:10px 20px;font-size:14px;color:#fff}
.nav-toggle{display:none;width:48px;height:48px;background:transparent;border:1px solid var(--line-dark);border-radius:var(--radius);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--on-dark);transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero de portada ---------- */
.hero{position:relative;min-height:calc(94svh - var(--nav-h));display:flex;flex-direction:column;justify-content:flex-end;color:var(--on-dark);isolation:isolate;overflow:hidden;background:var(--carbon)}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover}
html.js .hero-bg img,html.js .page-hero .ph-bg img{animation:kenburns 2.5s var(--ease-o) both}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
/* velo que se abre sobre la foto */
html.js .hero::after,html.js .page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--carbon);transform-origin:top;pointer-events:none;animation:veilOpen 1.3s cubic-bezier(.7,0,.2,1) .15s both}
@keyframes veilOpen{from{transform:scaleY(1)}to{transform:scaleY(0)}}
/* parallax (lo activa site.js) */
html.px-on .hero .hero-bg,html.px-on .page-hero .ph-bg{top:-20%;will-change:transform}
.hero-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,23,26,.5) 0%,rgba(21,23,26,.2) 38%,rgba(21,23,26,.9) 100%)}
.hero-in{padding-top:96px}
.hero h1{font-size:clamp(34px,8vw,132px);margin-top:22px;max-width:100%;overflow-wrap:anywhere}
.hero h1 .ln{display:block;overflow:hidden}
html.js .hero h1 .ln span{display:block;transform:translateY(110%);animation:lineUp 1s var(--ease) both}
@keyframes lineUp{to{transform:none}}
.hero .sub{margin-top:24px;font-size:clamp(16px,2vw,20px);max-width:54ch;opacity:.94}
html.js .hero .boot,html.js .page-hero .boot{opacity:0;animation:fadeUp .9s var(--ease-o) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-strip{margin-top:64px;border-top:1px solid rgba(234,235,231,.25);background:rgba(21,23,26,.55);backdrop-filter:blur(6px)}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}

/* ---------- datos / cifras grandes ---------- */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border:1px solid var(--line)}
.dato{padding:30px 28px 32px;border-left:1px solid var(--line);position:relative}
.dato:first-child{border-left:none}
.dato .num{display:block;font-size:clamp(40px,5vw,72px);color:var(--ink)}
.dato .num small{font-size:.4em;letter-spacing:.04em;margin-left:6px;color:var(--teal)}
.dato .lbl{display:block;margin-top:14px;font-size:14px;color:var(--ink-soft)}
.dato .tag{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.sec--dark .datos,.sec--dark .dato{border-color:var(--line-dark)}
.sec--dark .dato .num{color:var(--on-dark)}
.sec--dark .dato .lbl{color:var(--on-dark-soft)}
.sec--dark .dato .tag,.sec--dark .dato .num small{color:var(--teal-light)}
.stat{padding:26px 24px 32px;border-left:1px solid rgba(234,235,231,.18)}
.stat:first-child{border-left:none;padding-left:0}
.stat .num{display:block;font-size:clamp(30px,3.8vw,52px)}
.stat .num small{font-size:.42em;color:var(--teal-light);margin-left:4px}
.stat .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--teal-light);text-transform:uppercase;display:block;margin-bottom:10px}
.stat .lbl{display:block;margin-top:10px;font-size:13.5px;color:var(--on-dark-soft)}

/* ---------- secciones claro / oscuro ---------- */
section,.sec{padding:clamp(72px,9vw,128px) 0}
.sec--light{background:var(--paper);color:var(--ink)}
.sec--paper2{background:var(--paper-2);color:var(--ink)}
.sec--dark{background:var(--carbon);color:var(--on-dark)}
.sec--tight{padding-block:clamp(48px,6vw,80px)}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,5vw,60px);max-width:760px}
.sec-head h2{font-size:clamp(34px,4.8vw,64px)}
.sec-head p{color:var(--ink-soft);font-size:17px}
.sec--dark .sec-head p{color:var(--on-dark-soft)}
.sec-head--row{max-width:none;flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
.sec-head--row > div{display:flex;flex-direction:column;gap:18px;max-width:760px}

/* ---------- page-hero (cabecera de página interior) ---------- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);background:var(--carbon);padding:clamp(80px,12vw,168px) 0 clamp(40px,5vw,64px);min-height:min(56svh,520px);display:flex;align-items:flex-end}
.page-hero .ph-bg{position:absolute;inset:0;z-index:-2}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,23,26,.55) 0%,rgba(21,23,26,.72) 55%,rgba(21,23,26,.95) 100%)}
.page-hero h1{font-size:clamp(34px,7vw,112px);margin-top:20px;max-width:100%;overflow-wrap:anywhere}
html.js .page-hero h1:not(.h1-split){opacity:0;animation:h1show 0s linear 1.2s both}
@keyframes h1show{to{opacity:1}}
.page-hero h1.h1-split{opacity:1}
.page-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em 0 .12em;margin:-.05em 0 -.12em}
.page-hero h1 .w > span{display:inline-block;transform:translateY(110%);animation:lineUp 1s var(--ease-o) both}
.page-hero .lead{margin-top:20px;max-width:58ch;font-size:clamp(16px,1.8vw,19px);color:var(--on-dark);opacity:.92}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
.breadcrumb li{list-style:none;display:flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"/";opacity:.5}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;color:var(--on-dark-soft)}
.breadcrumb a:hover{color:var(--teal-light)}
.breadcrumb [aria-current]{color:var(--on-dark)}

/* ---------- servicios ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.serv{background:var(--paper);padding:36px 30px 42px;position:relative;transition:background .25s}
.serv::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.serv:hover{background:var(--paper-2)}
.serv:hover::before{transform:scaleX(1)}
.serv .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);letter-spacing:.15em}
.serv h3{font-size:21px;font-weight:700;margin:14px 0 10px;font-stretch:82%;text-transform:uppercase;letter-spacing:.02em}
.serv p{font-size:15px;color:var(--ink-soft)}

/* ---------- grilla de tarjetas de obra ---------- */
.obras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.obra-card{position:relative;display:block;overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--radius);aspect-ratio:4/3;background:var(--carbon-2)}
.sec--light .obra-card,.sec--paper2 .obra-card{border-color:var(--line)}
.obra-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .7s var(--ease-o)}
.obra-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-o);z-index:3;pointer-events:none}
.obra-card:hover::after,.obra-card:focus-visible::after{transform:scaleX(1)}
.obra-card:hover img{transform:scale(1.06)}
.obra-card .tag{position:absolute;left:0;bottom:0;right:0;padding:54px 20px 18px;background:linear-gradient(180deg,transparent,rgba(21,23,26,.94));display:flex;justify-content:space-between;align-items:flex-end;gap:12px;color:var(--on-dark)}
.obra-card .tag b{font-stretch:75%;text-transform:uppercase;font-size:18px;letter-spacing:.03em;line-height:1.1}
.obra-card .tag span{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--on-dark-soft);letter-spacing:.12em;text-transform:uppercase;text-align:right}
.obra-card .idx{position:absolute;left:14px;top:12px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--on-dark);background:rgba(21,23,26,.7);padding:4px 8px;border:1px solid rgba(234,235,231,.2)}
.obra-card .go{position:absolute;right:14px;top:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(234,235,231,.35);background:rgba(21,23,26,.6);color:var(--on-dark);font-family:'JetBrains Mono',monospace;transition:background .25s,border-color .25s,transform .5s var(--ease-o)}
.obra-card:hover .go,.obra-card:focus-visible .go{background:var(--teal);border-color:var(--teal);transform:translateX(5px)}

/* ---------- split (foto + texto) ---------- */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--rev .split-media{order:2}
.split-media{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:340px;align-self:stretch}
.sec--dark .split-media{border-color:var(--line-dark)}
.split-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.split-media::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:12px;background:var(--teal);z-index:3}
.split h2{font-size:clamp(32px,4vw,56px);margin:18px 0 22px}
.checks{list-style:none;margin:6px 0 0;display:grid;border-top:1px solid var(--line)}
.checks li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.checks li::before{content:"+";font-family:'JetBrains Mono',monospace;color:var(--teal);font-weight:700}
.sec--dark .checks,.sec--dark .checks li{border-color:var(--line-dark)}

/* ---------- tarjetas de tipología (teaser) ---------- */
.tipo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tipo-card{display:block;border:1px solid var(--line-dark);border-radius:var(--radius);padding:30px 30px 32px;background:var(--carbon-2);position:relative;transition:border-color .25s,transform .3s var(--ease)}
.tipo-card:hover{border-color:var(--teal-light);transform:translateY(-4px)}
.tipo-card .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;color:var(--teal-light);text-transform:uppercase}
.tipo-card .num{display:block;font-size:clamp(54px,6vw,88px);margin:18px 0 6px}
.tipo-card .num small{font-size:.32em;color:var(--on-dark-soft);margin-left:6px}
.tipo-card h3{font-stretch:75%;text-transform:uppercase;font-size:24px;font-weight:800}
.tipo-card p{margin-top:8px;color:var(--on-dark-soft);font-size:14.5px}

/* ---------- explorador de tipologías (tipologias.html) ---------- */
.explorer{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start}
.tipo-list{display:flex;flex-direction:column;gap:12px}
.tipo{border:1px solid var(--line-dark);border-radius:var(--radius);padding:20px 22px;cursor:pointer;min-height:44px;transition:border-color .25s,background .25s,transform .25s var(--ease);background:transparent;text-align:left;color:inherit}
.tipo:hover{border-color:var(--on-dark-soft);transform:translateX(4px)}
.tipo.sel{border-color:var(--teal-light);background:rgba(44,129,143,.12);transform:translateX(6px)}
.tipo{position:relative;overflow:hidden}
.tipo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-light);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-o)}
.tipo[aria-pressed="true"]::before{transform:scaleY(1)}
.tipo b{display:block;font-stretch:75%;text-transform:uppercase;font-size:19px;font-weight:800}
.tipo span{font-size:13.5px;color:var(--on-dark-soft)}
.tipo-panel{border:1px solid var(--line-dark);border-radius:var(--radius);padding:38px 40px;background:var(--carbon-2)}
.tipo-panel .head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.tipo-panel .head b{font-size:clamp(26px,3vw,38px);font-stretch:66%;text-transform:uppercase;font-weight:800}
.tipo-panel .head.swap b,.tipo-panel .head.swap span{animation:swapIn .45s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tipo-panel .head span{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--teal-light)}
.bar-row{margin-bottom:26px}
.bar-row .lbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.bar-row .lbl .mono{color:var(--on-dark-soft);font-variant-numeric:tabular-nums}
.bar-track{height:14px;border:1px solid var(--line-dark);border-radius:2px;overflow:hidden;background:rgba(255,255,255,.03)}
.bar-fill{height:100%;width:100%;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease-o)}
.bar-seco .bar-fill{background:var(--teal)}
.bar-trad .bar-fill{background:#3A3F45 repeating-linear-gradient(-45deg,transparent 0 6px,rgba(255,255,255,.09) 6px 12px)}
.tipo-panel .save{margin-top:6px;font-size:14px;color:var(--on-dark-soft)}
.tipo-panel .save b{color:var(--teal-light)}
.tipo-panel .btn{margin-top:26px}

/* ---------- empresa / firmas ---------- */
.firmas{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.firma{position:relative;padding-top:16px}
.firma::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--teal)}
.firma b{display:block;font-stretch:80%;text-transform:uppercase;font-size:18px}
.firma span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.sec--dark .firma span{color:var(--teal-light)}

/* ---------- CTA final ---------- */
.cta-final h2{font-size:clamp(40px,7vw,104px);max-width:15ch;margin:20px 0 24px}
.cta-final p{color:var(--on-dark-soft);max-width:56ch;font-size:17px}

/* ---------- avisos: valores de referencia ---------- */
.ref-note{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--radius);font-size:13.5px;color:var(--ink-soft);background:var(--paper-2)}
.ref-note::before{content:"REF";flex:none;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;background:var(--amber);color:var(--amber-ink);padding:3px 7px}
.ref-note b{color:var(--ink)}
.sec--dark .ref-note{background:rgba(224,168,46,.07);border-color:var(--line-dark);border-left-color:var(--amber);color:var(--on-dark-soft)}
.sec--dark .ref-note b{color:var(--on-dark)}
/* etiqueta: <span class="badge badge--ref">Valor de referencia</span> */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--amber);border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;vertical-align:middle;color:var(--amber-ink);background:var(--amber) repeating-linear-gradient(-45deg,transparent 0 5px,rgba(42,32,8,.16) 5px 10px);white-space:nowrap}
.badge--pending{background-color:#F0C97A}
.badge::before{content:"";width:6px;height:6px;background:var(--amber-ink)}
/* bloque de dato faltante (sin uso en el sitio publicado) */
.tbc{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px;border:1px dashed var(--amber);border-radius:var(--radius);font-size:14px}

/* ---------- formularios (inputs rectos, 16px+) ---------- */
.form{display:grid;gap:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.field{display:flex;flex-direction:column;gap:10px}
.f-label{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.sec--dark .f-label{color:var(--on-dark-soft)}
.f-input,.f-select,.f-textarea{width:100%;min-height:48px;padding:13px 16px;border:1px solid #BDB9B0;border-radius:var(--radius);background:#fff;color:var(--ink);font:inherit;font-size:16px;transition:border-color .2s}
.f-textarea{min-height:140px;resize:vertical}
.f-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.f-input:focus,.f-select:focus,.f-textarea:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)}
.sec--dark .f-input,.sec--dark .f-select,.sec--dark .f-textarea{background-color:var(--carbon-2);border-color:#3A3F45;color:var(--on-dark)}
.sec--dark .f-select{background-image:linear-gradient(45deg,transparent 50%,var(--on-dark) 50%),linear-gradient(135deg,var(--on-dark) 50%,transparent 50%)}
.f-hint{font-size:13px;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid #BDB9B0;background:transparent;border-radius:var(--radius);padding:12px 18px;min-height:44px;font-size:14.5px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);color:var(--ink)}
.chip:hover{border-color:var(--ink);transform:translateY(-2px)}
.chip.sel{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sec--dark .chip{color:var(--on-dark);border-color:#3A3F45}
.sec--dark .chip.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.wa-preview{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:28px}
.wa-preview .ph{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.wa-preview .dot{width:7px;height:7px;background:var(--teal);display:inline-block}
.wa-msg{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;font-size:14.5px;white-space:pre-line;color:var(--ink);min-height:150px}
.wa-msg.flash{animation:flash .5s ease}
@keyframes flash{30%{background:#E7F0F1;border-color:var(--teal-light)}}
.wa-preview .btn{width:100%;margin-top:20px}

/* ---------- footer compartido ---------- */
.site-footer{background:var(--carbon);color:var(--on-dark);padding:clamp(56px,7vw,96px) 0 40px;border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:48px;margin-bottom:56px}
.foot-grid h4{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:16px;font-weight:500}
.foot-grid nav a,.foot-grid a.fl{display:flex;align-items:center;min-height:44px;color:var(--on-dark-soft);font-size:14.5px;transition:color .2s,transform .2s var(--ease)}
.foot-grid nav a:hover,.foot-grid a.fl:hover{color:var(--on-dark);transform:translateX(4px)}
.foot-logo img{height:44px;width:auto;margin-bottom:18px}
.foot-grid p{color:var(--on-dark-soft);font-size:14.5px;max-width:36ch}
.foot-data{display:grid;gap:8px}
.foot-data .row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:14.5px;color:var(--on-dark-soft);min-height:32px}
.foot-data .row > b{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;min-width:92px;color:var(--on-dark-soft)}
.foot-data a{color:var(--on-dark);display:inline-flex;align-items:center;min-height:44px}
.foot-data a:hover{color:var(--teal-light)}
.foot-base{border-top:1px solid var(--line-dark);padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--on-dark-soft);text-transform:uppercase}
.foot-base a{display:inline-flex;align-items:center;min-height:44px}
.foot-base a:hover{color:var(--teal-light)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:max(16px,2vw);bottom:max(16px,2vw);z-index:60;min-height:48px;background:var(--teal);color:#fff;border-radius:var(--radius);padding:12px 20px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.2)}
html.js .wa-float{opacity:0;transform:translateY(90px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .2s}
html.js .wa-float.show{opacity:1;transform:none}
.wa-float:hover{background:var(--teal-deep)}

/* ---------- reveal (solo con JS) ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-o),transform .85s var(--ease-o)}
html.js .rv.in{opacity:1;transform:none}
html.js .wipe{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
html.js .wipe.in{clip-path:inset(0)}
html.js .split-media.wipe img,html.js .gal figure.wipe img{transform:scale(1.14);transition:transform 1.5s var(--ease-o)}
html.js .split-media.wipe.in img,html.js .gal figure.wipe.in img{transform:none}
html.js .hatch-band{transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease-o)}
html.js .hatch-band.in{transform:none}
/* transicion entre paginas: la entrada es una animacion CSS que siempre termina (sin JS no hay nada oculto) */
html.js body{animation:pageIn .5s var(--ease-o) backwards}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.is-leaving body{opacity:0;transition:opacity .28s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv,html.js .hero .boot{opacity:1;transform:none}
  html.js .hero h1 .ln span{transform:none}
  html.js .cota,html.js .kicker::after{transform:none}
  html.js .wipe,html.js .hatch-band{clip-path:none;transform:none}
  html.js .split-media.wipe img,html.js .gal figure.wipe img{transform:none}
  html.js .hero::after,html.js .page-hero::after{display:none}
  html.js .page-hero h1:not(.h1-split){opacity:1}
  html.js .page-hero .boot{opacity:1;transform:none}
  .page-hero h1 .w > span{transform:none}
  html.is-leaving body{opacity:1}
  html.js .wa-float{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--pad) 24px;background:var(--carbon,#15171A);border-bottom:1px solid var(--line-dark);display:none}
  .nav-links.open{display:flex}
  .site-nav.is-scrolled .nav-links{margin-top:-4px}
  .nav-links a{padding:0;border-bottom:1px solid var(--line-dark);font-size:17px;min-height:52px}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .nav-cta{margin:18px 0 0;justify-content:center;border-bottom:none;padding:10px 20px}
}
@media (max-width:960px){
  .serv-grid,.obras-grid,.tipo-cards{grid-template-columns:repeat(2,1fr)}
  .explorer,.split,.form-grid{grid-template-columns:1fr}
  .split--rev .split-media{order:0}
  .split-media{min-height:280px}
  .tipo-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .tipo{min-width:210px}
  .tipo:hover,.tipo.sel{transform:translateY(-3px)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .serv-grid,.obras-grid,.tipo-cards{grid-template-columns:1fr}
  .hero-strip .wrap{grid-template-columns:1fr}
  .stat{border-left:none;padding-left:0;border-top:1px solid rgba(234,235,231,.18)}
  .stat:first-child{border-top:none}
  .dato{border-left:none;border-top:1px solid var(--line)}
  .dato:first-child{border-top:none}
  .tipo-panel{padding:26px 22px}
  .foot-grid{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
}