/* Grupo INFRAXA — Territorio in Motion · hoja de estilos del sitio.
   Cal / basalto / piedra / amarillo de raya central · Host Grotesk + Martian Mono */
:root{
  --cal:oklch(0.968 0.005 85); --cal2:oklch(0.94 0.006 85); --bas:oklch(0.21 0.015 250); --bas2:oklch(0.44 0.012 250); --bas3:oklch(0.66 0.01 250);
  --piedra:oklch(0.912 0.011 140); --linea:oklch(0.21 0.015 250 / .14); --trazo:oklch(0.83 0.165 88); --calA:oklch(0.968 0.005 85 / .7);
  --sans:"Host Grotesk","Helvetica Neue",Arial,sans-serif; --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --cut:cubic-bezier(.7,0,.2,1); --pad:clamp(20px,4.4vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:var(--cal); color:var(--bas); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; height:auto; display:block}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--bas); outline-offset:3px}
h1,h2,h3,h4,p{margin:0; font-weight:450}
h1,h2,h3{text-wrap:balance}
.k{font:400 11px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bas2)}
.mono{font-family:var(--mono)}
.skip{position:fixed; left:12px; top:-80px; z-index:100; background:var(--bas); color:var(--cal); padding:12px 16px; border-radius:8px; font:500 15px var(--sans); text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.line-mask{overflow:hidden; overflow:clip; display:block; padding-bottom:.06em; margin-bottom:-.06em}
.split > *{padding-bottom:.12em; margin-bottom:-.12em}

/* botones */
.btn{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:inline-flex; align-items:center; gap:12px; background:var(--bas); color:var(--cal); font:500 16px var(--sans); padding:16px 26px; border-radius:999px; overflow:hidden; isolation:isolate; will-change:transform}
.btn::before{content:""; position:absolute; inset:0; background:var(--trazo); transform:translateY(101%); transition:transform .45s var(--cut); z-index:-1}
.btn:hover::before{transform:none}
.btn:hover{color:var(--bas)}
.btn .ar{display:inline-block; transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid var(--bas); outline-offset:4px}
.btn.light{background:var(--cal); color:var(--bas)}
.lk{all:unset; cursor:pointer; position:relative; font:500 16px var(--sans); padding-bottom:3px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--cut)}
.lk:hover{background-size:0 1px; background-position:100% 100%}
.lk:focus-visible{outline:2px solid var(--bas); outline-offset:3px}

/* header */
.hd{position:fixed; inset:0 0 auto; z-index:50; height:72px; display:flex; align-items:center; gap:36px; padding:0 var(--pad); padding-top:env(safe-area-inset-top,0px); transition:transform .5s var(--cut), background-color .3s; background:var(--cal); background:color-mix(in oklch, var(--cal) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.hd.hide{transform:translateY(-100%)}
.wm{all:unset; cursor:pointer; font:600 17px var(--sans); letter-spacing:.24em; flex:1; display:flex}
.wm span{display:inline-block}
.wm i{font-style:normal; position:relative; display:inline-block}
.wm i::after{content:""; position:absolute; left:-1px; right:1px; bottom:.08em; height:.3em; background:var(--trazo); z-index:-1; transform-origin:left; transform:scaleX(var(--x,1))}
.wm:focus-visible{outline:2px solid var(--bas); outline-offset:4px}
.nav{display:flex; gap:28px}
.nav :is(button,a){all:unset; cursor:pointer; font:500 15px var(--sans); position:relative; padding:6px 0}
.nav :is(button,a)::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--cut)}
.nav :is(button,a):hover::after,.nav :is(button,a)[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav :is(button,a):focus-visible{outline:2px solid var(--bas); outline-offset:3px}
.hd .btn{padding:11px 20px; font-size:15px}
.menub{all:unset; cursor:pointer; display:none; font:500 15px var(--sans)}
.menub:focus-visible{outline:2px solid var(--bas); outline-offset:3px}
@media (max-width:767px){ .hd{height:60px; gap:12px; background:var(--cal); backdrop-filter:none; -webkit-backdrop-filter:none} .nav,.hd .btn{display:none} .menub{display:inline-block} }

/* menú móvil */
.mnu{position:fixed; inset:0; z-index:60; background:var(--bas); color:var(--cal); display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 14px) 20px calc(env(safe-area-inset-bottom,0px) + 20px); clip-path:inset(0 0 100% 0)}
.mnu[hidden]{display:none}
.mnu .t{display:flex; justify-content:space-between; align-items:center; height:32px}
.mnu .t :is(button,a){all:unset; cursor:pointer; font:500 15px var(--sans)}
.mnu nav{display:grid; margin-top:48px}
.mnu nav :is(button,a){all:unset; cursor:pointer; font:400 44px/1.12 var(--sans); letter-spacing:-.035em; padding:8px 0; border-bottom:1px solid oklch(0.968 0.005 85 / .14); overflow:clip}
.mnu nav :is(button,a) span{display:block}
.mnu .f{margin-top:auto; display:grid; gap:12px; font-size:15px}
.mnu .f .btn{justify-content:center}
.mnu :is(button,a):focus-visible{outline:2px solid var(--trazo); outline-offset:3px}

/* ---------------- HERO / TERRITORIO ---------------- */
.hx-pin{position:relative; height:210vh}
.hx-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.hx-plane{position:absolute; left:50%; top:52%; width:min(1180px,96vw); transform:translate(-24%,-37%) perspective(1100px) rotateX(48deg) rotateZ(-14deg) scale(1.25)}
.gs .hx-plane{transform:none; will-change:transform}
.hx-plane svg{display:block; width:100%; height:auto; overflow:visible}
.hx-copy{position:absolute; left:var(--pad); right:var(--pad); top:calc(72px + 6vh); pointer-events:none; z-index:3}
.hx-copy .k{display:block; margin-bottom:26px}
.hx-h1{font-size:clamp(64px, 9.4vw, 150px); line-height:.9; letter-spacing:-.05em; pointer-events:auto}
.hx-h1 .l{display:block}
.hx-h1 .l2{padding-left:16vw}
.hx-h1 .l3{padding-left:5vw}
.hx-h1 .l3 em{font-style:normal; position:relative}
.hx-foot{position:absolute; left:var(--pad); right:var(--pad); bottom:calc(28px + env(safe-area-inset-bottom,0px)); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; z-index:3}
.hx-foot p{max-width:30em; color:var(--bas2); font-size:18px; line-height:1.5; text-shadow:0 0 10px var(--cal), 0 0 3px var(--cal), 0 0 1px var(--cal)}
.hx-foot .ctas{display:flex; gap:24px; align-items:center}
.hx-cue{font:400 10.5px var(--mono); letter-spacing:.12em; color:var(--bas2); display:flex; align-items:center; gap:10px}
.hx-cue i{display:block; width:1px; height:34px; background:var(--bas); transform-origin:top; animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1); transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
.hx-panel{position:absolute; right:var(--pad); top:calc(72px + 8vh); width:min(420px,34vw); z-index:4; display:grid; gap:22px; visibility:hidden}
.hx-panel .lead{font-size:32px; line-height:1.12; letter-spacing:-.03em}
.hx-panel .lead span{color:var(--bas2)}
.hx-panel .lead b{font:450 1.9em/0 var(--sans); letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--bas); position:relative; top:.08em}
.mun{border-top:1px solid var(--linea); padding-top:14px; display:grid; gap:12px}
.mun .mh{display:flex; justify-content:space-between; align-items:baseline}
.mun h2{font-size:26px; letter-spacing:-.025em}
.mun ol{list-style:none; margin:0; padding:0}
.mun li :is(button,a){all:unset; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:12px; width:100%; padding:7px 0; border-top:1px solid var(--linea); font-size:14.5px; line-height:1.35}
.mun li :is(button,a) span:last-child{font:400 11px var(--mono); color:var(--bas2)}
.mun li :is(button,a):hover span:first-child{text-decoration:underline; text-underline-offset:3px}
.mun li :is(button,a):focus-visible{outline:2px solid var(--bas); outline-offset:2px}
.mun .hint{font-size:13.5px; color:var(--bas2)}
.attr{font:400 9.5px/1.5 var(--mono); color:var(--bas2)}
.hx-attr{position:absolute; left:var(--pad); bottom:10px; z-index:3; visibility:hidden}

/* mapa */
.mapx .mu{fill:transparent; stroke:var(--bas3); stroke-width:.7; vector-effect:non-scaling-stroke}
.mapx .mu.on{stroke:var(--bas); stroke-width:1.1}
.mapx .hz{pointer-events:none}
.mapx .hz.sel{fill:var(--trazo); opacity:1}
.mapx .st{fill:none; stroke:var(--bas); stroke-width:1.3; stroke-dasharray:9 3 2 3; vector-effect:non-scaling-stroke}
.mapx .rd{fill:none; stroke:var(--bas); stroke-opacity:.45; stroke-width:1.1; vector-effect:non-scaling-stroke}
.mapx .rd.c{stroke-opacity:.7; stroke-width:2.2}
.mapx .cx{fill:none; stroke:var(--bas); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1 0}
.mapx .pt{cursor:pointer}
.mapx .pt .r{fill:var(--bas)}
.mapx .pt .h{fill:none; stroke:var(--bas); stroke-opacity:.35; vector-effect:non-scaling-stroke}
.mapx .pt .x{stroke:var(--cal); stroke-width:1.2; vector-effect:non-scaling-stroke}
.mapx .pt text{font-family:var(--sans); font-weight:500; fill:var(--bas); paint-order:stroke; stroke:var(--cal); stroke-linejoin:round}
.mapx .pt.sel .r{fill:var(--bas)}
.mapx .pt.sel .h{stroke:var(--bas); stroke-opacity:1}
.mapx .pt:focus{outline:none}
.mapx .pt:focus-visible .h{stroke-width:3}
.mapx .hq text{font-family:var(--mono); fill:var(--bas2)}

/* ---------------- CAPACIDADES ---------------- */
.cx-pin{position:relative; height:250vh; background:var(--piedra)}
.cx-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; padding:110px var(--pad) 60px; align-items:center}
.cx-head{position:absolute; left:var(--pad); top:96px; display:flex; gap:22px; align-items:baseline}
.cx-ticks{display:flex; gap:6px}
.cx-ticks i{display:block; width:42px; height:3px; background:var(--linea); position:relative; overflow:hidden}
.cx-ticks i b{position:absolute; inset:0; background:var(--bas); transform:scaleX(0); transform-origin:left}
.cx-items{grid-column:1/-1; position:relative; height:100%}
.cx-item{position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; align-items:center}
.cx-item .tx{grid-column:1/5; display:grid; gap:22px; align-content:center}
.cx-item h2{font-size:clamp(44px,5.6vw,88px); line-height:.94; letter-spacing:-.045em}
.cx-item p{color:var(--bas2); font-size:18px; max-width:28em}
.cx-item .n{font:400 11px var(--mono); letter-spacing:.08em; display:flex; gap:18px; align-items:center}
.cx-item .n :is(button,a){all:unset; cursor:pointer; font:500 15px var(--sans); text-transform:none; letter-spacing:0; border-bottom:1px solid currentColor}
.cx-item .dw{grid-column:5/-1; align-self:center}
.dg{display:block; width:100%; height:auto; max-height:62vh}
.dg .s{fill:none; stroke:var(--bas); stroke-width:1.4}
.dg .t{fill:none; stroke:var(--bas); stroke-width:.8}
.dg .d{fill:none; stroke:var(--bas); stroke-width:.9; stroke-dasharray:7 4 2 4}
.dg .f{fill:var(--bas)}
.dg .y{fill:var(--trazo)}
.dg text{font:400 13px var(--mono); fill:var(--bas)}
.dg text.m{fill:var(--bas2); font-size:10.5px}

/* ---------------- PROYECTOS ---------------- */
.px{padding:130px 0 40px; position:relative}
.px-intro{padding:0 var(--pad); display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; margin-bottom:96px}
.px-intro .k{grid-column:1/4; align-self:end; padding-bottom:18px}
.px-intro h2{grid-column:3/-1; font-size:clamp(56px,8.4vw,136px); line-height:.9; letter-spacing:-.05em; transform-origin:left bottom}
.px-intro p{grid-column:7/12; margin-top:36px; color:var(--bas2); font-size:18px}
.pj{position:relative; padding:0 var(--pad); display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px}
.pj .meta{font:400 11px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--bas2)}
.pj h3{font-size:clamp(34px,3.8vw,58px); line-height:1; letter-spacing:-.04em}
.pj .desc{color:var(--bas2); font-size:17px; max-width:32em}
.mask{position:relative; overflow:hidden; background:var(--cal2)}
.mask img{position:absolute; left:0; top:0; width:100%; height:auto; will-change:transform}
.photo-cap{font:400 10px/1.5 var(--mono); color:var(--bas2); margin-top:10px}
.zoom{all:unset; cursor:zoom-in; display:block}
.zoom:focus-visible{outline:2px solid var(--bas); outline-offset:3px}
.mask > .zoom{position:absolute; inset:0}
.mask > .zoom:focus-visible{outline-offset:-4px; outline:3px solid var(--trazo)}
/* cajetín */
.cj{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--bas); font-size:14.5px; line-height:1.35}
.cj > div{padding:10px 12px 11px 0; border-bottom:1px solid var(--linea); display:grid; gap:2px; min-width:0; position:relative}
.cj > div.w{grid-column:1/-1}
.cj dt{font:400 9.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--bas2)}
.cj dd{margin:0; overflow-wrap:anywhere}
.cj dd.c{font:400 11.5px/1.45 var(--mono)}
/* P1 corte */
.pj1 .media{grid-column:2/9; grid-row:1}
.pj1 .mask{aspect-ratio:855/360}
.pj1 .tx{grid-column:8/-1; grid-row:1; align-self:end; position:relative; z-index:2; display:grid; gap:20px; padding:28px 0 0 28px; background:var(--cal); margin-bottom:-60px}
.pj1 .cjw{grid-column:8/12; margin-top:96px}
/* P2 sticky */
.pj2{margin-top:140px; align-items:start}
.pj2 .tx{grid-column:1/5; display:grid; gap:24px; padding-top:10vh; padding-bottom:16vh}
.pj2 .stick{grid-column:6/-1; position:sticky; top:13vh; height:74vh; display:grid; align-content:center}
.pj2 .mask{aspect-ratio:921/518; width:min(100%,760px); transform-origin:50% 50%}
.pj2 .mini{position:absolute; right:-10px; bottom:6vh; width:200px; border:1px solid var(--bas); background:var(--cal); z-index:2}
.pj2 .mini svg{display:block; width:100%; height:auto}
.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.thumbs .zoom img{aspect-ratio:4/3; object-fit:cover; width:100%}
/* P3 panorama */
.pj3{margin-top:96px}
.pj3 h3{grid-column:1/-1; font-size:clamp(48px,6.4vw,104px); position:relative; z-index:3; margin-bottom:22px; padding-left:4vw; max-width:14em}
.pj3 .media{position:relative; z-index:1}
.pj3 .media{grid-column:1/-1; justify-self:center; width:min(100%,1040px)}
.pj3 .mask{height:min(390px,30vw); width:100%}
.pj3 .mask img{width:1150px; max-width:none; height:431px; top:50%; margin-top:-215px}
.pj3 .row{grid-column:2/-1; display:grid; grid-template-columns:repeat(11,1fr); gap:0 24px; margin-top:34px}
.pj3 .row .desc{grid-column:1/5}
.pj3 .row .cj{grid-column:6/12}
/* P4 reporte */
.pj4{margin-top:140px; align-items:center}
.pj4 .rep{grid-column:1/7; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pj4 .rep figure{margin:0}
.pj4 .rep img{width:100%; aspect-ratio:4/3; object-fit:cover}
.pj4 .rep figcaption{font:400 10px var(--mono); color:var(--bas2); margin-top:6px}
.pj4 .tx{grid-column:8/-1; display:grid; gap:22px}
/* tramo entre proyectos */
.route{padding:0 var(--pad); margin:96px 0; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; font:400 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--bas2)}
.route .ln{height:4px; position:relative; background:repeating-linear-gradient(90deg, var(--trazo) 0 26px, transparent 26px 44px); transform-origin:left}
.route .km{grid-column:1/-1; justify-self:center; margin-top:-6px}
.px-more{display:flex; justify-content:center; margin-top:110px}

/* ---------------- ESCALA OPERATIVA ---------------- */
.ex{background:var(--bas); color:var(--cal); padding:130px var(--pad) 0; position:relative; overflow:hidden}
.ex .k{color:var(--calA)}
.ex-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; align-items:start}
.ex-photo{grid-column:1/6; grid-row:1/3}
.ex-photo .mask{aspect-ratio:5/6; width:min(100%,480px); background:oklch(0.27 0.015 250)}
.ex-head{grid-column:7/-1; display:grid; gap:22px}
.ex-head h2{font-size:clamp(48px,6vw,96px); line-height:.92; letter-spacing:-.05em}
.ex-head p{color:var(--calA); max-width:30em}
.ex-spec{grid-column:7/-1; margin-top:64px; display:grid; gap:34px}
.ex-spec .big{display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:end; border-top:1px solid oklch(0.968 0.005 85 / .25); padding-top:18px; overflow:hidden}
.ex-spec .big b{font:450 clamp(140px,15vw,236px)/.78 var(--sans); letter-spacing:-.06em}
.ex-spec .big span{color:var(--calA); max-width:19em; padding-bottom:12px}
.ex-spec .per{display:grid; grid-template-columns:auto auto 1fr; gap:6px 40px; align-items:baseline; padding-left:14%}
.ex-spec .per .k{grid-column:1/-1}
.ex-spec .per p{font-size:18px; color:var(--calA)}
.ex-spec .per b{display:block; font:450 clamp(48px,4.6vw,72px)/1 var(--sans); letter-spacing:-.045em; color:var(--cal); font-variant-numeric:tabular-nums}
.ex-planta{grid-column:7/-1; margin-top:80px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:end}
.ex-planta img{width:280px}
.ex-planta p{color:var(--calA); font-size:15px}
.lane{margin:100px calc(var(--pad) * -1) 0; height:140px; position:relative; border-top:1px solid oklch(0.968 0.005 85 / .2)}
.lane .paint{position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; background:repeating-linear-gradient(90deg, var(--trazo) 0 60px, transparent 60px 100px); transform-origin:left; transform:scaleX(0)}
.lane .rig{position:absolute; top:50%; left:0; transform:translate(-50%,-50%); font:400 10px var(--mono); color:var(--trazo); white-space:nowrap}
.lane .edge{position:absolute; left:0; right:0; bottom:22px; height:1px; background:oklch(0.968 0.005 85 / .5)}

/* ---------------- TRAYECTORIA ---------------- */
.tr-pin{position:relative; height:270vh}
.tr-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.tr-head{position:absolute; left:var(--pad); top:110px; z-index:2; display:grid; gap:14px; max-width:520px}
.tr-head h2{font-size:clamp(48px,5.6vw,92px); line-height:.92; letter-spacing:-.05em}
.tr-track{position:absolute; left:0; top:0; height:100%; display:block; will-change:transform}
.tr-road{position:absolute; left:0; right:0; top:58%; height:44px; border-top:1px solid var(--bas); border-bottom:1px solid var(--bas)}
.tr-road::after{content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; background:repeating-linear-gradient(90deg, var(--trazo) 0 34px, transparent 34px 60px)}
.tr-yr{position:absolute; top:calc(58% + 54px); font:400 11px var(--mono); color:var(--bas2); transform:translateX(-50%)}
.tr-tick{position:absolute; top:calc(58% - 10px); width:1px; height:64px; background:var(--bas)}
.tr-ev{position:absolute; width:300px; display:grid; gap:8px}
.tr-ev.up{bottom:calc(42% + 64px)}
.tr-ev.dn{top:calc(58% + 92px)}
.tr-ev b{font:450 13px var(--mono); letter-spacing:.04em}
.tr-ev p{font-size:20px; line-height:1.25; letter-spacing:-.015em}
.tr-ev span{font-size:14px; color:var(--bas2)}
.tr-bars{position:absolute; bottom:calc(42% + 64px); display:flex; gap:6px; align-items:flex-end}
.tr-bar{all:unset; cursor:pointer; display:grid; gap:4px; justify-items:center; width:54px}
.tr-bar i{display:block; width:100%; background:var(--bas); transform-origin:bottom}
.tr-bar small{font:400 10px var(--mono); color:var(--bas2)}
.tr-bar:hover i{background:var(--trazo)}
.tr-bar:focus-visible{outline:2px solid var(--bas); outline-offset:3px}
.tr-end{position:absolute; width:520px}
.tr-end p{font-size:34px; line-height:1.15; letter-spacing:-.03em}

/* ---------------- CONTACTO ---------------- */
.kx{padding:140px var(--pad) 110px; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px}
.kx h2{grid-column:1/-1; font-size:clamp(56px,9vw,150px); line-height:.9; letter-spacing:-.055em; margin-bottom:90px}
.kx h2 .l2{padding-left:12vw}
.kx .data{grid-column:1/5; display:grid; gap:16px; align-content:start}
.kx .data div{border-top:1px solid var(--linea); padding-top:10px}
.pend{font:400 10.5px var(--mono); letter-spacing:.05em; border:1px dashed currentColor; padding:1px 6px; white-space:nowrap; display:inline-block; font-style:normal; opacity:.85}
.form{grid-column:6/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px 24px}
.form label{display:grid; gap:4px; font-size:13px; color:var(--bas2); position:relative}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 20px var(--sans); color:var(--bas); background:transparent; border:0; border-bottom:1px solid var(--linea); padding:8px 0 10px; border-radius:0; width:100%}
.form textarea{min-height:100px; resize:vertical}
.form label::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--bas); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--cut)}
.form label:focus-within::after{transform:scaleX(1)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none}
.form .row{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.form .msg{font:400 11px var(--mono); color:var(--bas2)}
.portal{margin:0 var(--pad); border-top:1px solid var(--bas); padding:34px 0 46px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.portal p{font-size:22px; letter-spacing:-.015em}
.portal p span{color:var(--bas2)}
.foot{background:var(--bas); color:var(--calA); padding:56px var(--pad) calc(48px + env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:repeat(12,1fr); gap:28px 24px; font-size:14px}
.foot .wm{grid-column:1/5; color:var(--cal)}
.foot > div{grid-column:span 2; display:grid; gap:6px; align-content:start}
.foot .k{color:oklch(0.968 0.005 85 / .5)}
.foot .attr{grid-column:1/-1; color:oklch(0.968 0.005 85 / .5); border-top:1px solid oklch(0.968 0.005 85 / .14); padding-top:18px}
.foot :is(button,a){all:unset; cursor:pointer}
.foot :is(button,a):hover{color:var(--cal)}

/* ---------------- OBRAS ---------------- */
.ob-head{padding:150px var(--pad) 40px; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; align-items:end}
.crumb{grid-column:1/-1; font:400 11px var(--mono); color:var(--bas2); display:flex; gap:8px; margin-bottom:26px}
.crumb :is(button,a){all:unset; cursor:pointer; border-bottom:1px solid var(--linea)}
.crumb :is(button,a):hover{border-color:var(--bas)}
.crumb :is(button,a):focus-visible{outline:2px solid var(--bas); outline-offset:2px}
.ob-head h1{grid-column:1/8; font-size:clamp(64px,9vw,150px); line-height:.88; letter-spacing:-.055em}
.ob-map{grid-column:9/-1; grid-row:2/4; border:1px solid var(--bas); background:var(--cal)}
.ob-map svg{display:block; width:100%; height:auto}
.ob-lede{grid-column:1/7; color:var(--bas2); font-size:18px; margin-top:28px}
.chips{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; margin-top:40px; align-items:center}
.chip{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font:500 14px var(--sans); border:1px solid var(--linea); padding:9px 15px 9px 11px; border-radius:999px; transition:background-color .25s, color .25s, border-color .25s}
.chip svg{width:22px; height:16px}
.chip[aria-pressed="true"]{background:var(--bas); color:var(--cal); border-color:var(--bas)}
.chip:hover{border-color:var(--bas)}
.chip:focus-visible{outline:2px solid var(--bas); outline-offset:2px}
.chips .cnt{margin-left:auto; font:400 11px var(--mono); color:var(--bas2)}
.mosaic{padding:40px var(--pad) 140px; display:grid; grid-template-columns:repeat(12,1fr); gap:72px 24px; align-items:start}
.card{all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:12px; align-content:start; position:relative}
.card .mask{width:100%}
.card .mask img{transition:transform .9s var(--ease)}
.card h2{font-size:22px; line-height:1.2; letter-spacing:-.015em}
.card h2 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--cut)}
.card:hover h2 span{background-size:100% 1px}
.card .meta{font:400 10.5px/1.6 var(--mono); color:var(--bas2); letter-spacing:.04em}
.card:focus-visible{outline:2px solid var(--bas); outline-offset:6px}
.card.t-lamina{grid-column:span 7}
.card.t-ficha{grid-column:span 5}
.card.t-reporte{grid-column:span 4}
.card.off{margin-top:120px}
.card.off2{margin-top:44px}
.card.t-lamina h2{font-size:30px; letter-spacing:-.025em}
.card.t-reporte h2{font-size:19px}
.cursor{position:fixed; left:0; top:0; z-index:40; pointer-events:none; background:var(--bas); color:var(--cal); font:500 13px var(--sans); padding:10px 16px; border-radius:999px; opacity:0; transform:translate(-50%,-50%) scale(.6)}

/* ---------------- FICHA ---------------- */
.fi-head{padding:140px var(--pad) 0; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px}
.fi-head .lt{grid-column:1/-1; display:flex; gap:10px; align-items:center; font:400 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--bas2); margin-bottom:22px}
.fi-head .lt svg{width:28px; height:20px}
.fi-head h1{grid-column:1/11; font-size:clamp(44px,5.8vw,92px); line-height:.95; letter-spacing:-.045em}
.fi-hero{padding:64px var(--pad) 0; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; align-items:start}
.fi-hero .media{grid-column:1/9}
.fi-hero .side{grid-column:9/-1; display:grid; gap:28px}
.fi-hero .desc{font-size:19px; line-height:1.5; color:var(--bas2)}
.fi-loc{border:1px solid var(--bas); background:var(--cal)}
.fi-loc svg{display:block; width:100%; height:auto}
.fi-rep{padding:130px var(--pad) 0}
.fi-rep .rh{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--bas); padding-top:14px; margin-bottom:26px}
.fi-rep h2{font-size:32px; letter-spacing:-.025em}
.fi-rep .g{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap}
.fi-rep figure{margin:0}
.fi-rep figure img{height:280px; width:auto}
.fi-rep figcaption{font:400 10px var(--mono); color:var(--bas2); margin-top:8px}
.fi-next{margin-top:160px; display:block; width:100%; text-align:left; border-top:1px solid var(--bas); padding:30px var(--pad) 120px; cursor:pointer; background:none; border-left:0; border-right:0; border-bottom:0; display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; align-items:end}
.fi-next .k{grid-column:1/-1; margin-bottom:20px}
.fi-next b{grid-column:1/9; font:450 clamp(40px,5.4vw,86px)/.95 var(--sans); letter-spacing:-.045em}
.fi-next .mask{grid-column:10/-1; display:block}
.fi-next:hover b{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px}
.fi-next:focus-visible{outline:2px solid var(--bas); outline-offset:-6px}

/* lightbox */
.lb{position:fixed; inset:0; z-index:70; background:oklch(0.15 0.012 250 / .96); color:var(--cal); display:grid; grid-template-rows:auto 1fr auto}
.lb[hidden]{display:none}
.lb .lt,.lb .lf{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px var(--pad); font:400 11px var(--mono)}
.lb button{all:unset; cursor:pointer; font:500 14px var(--sans); padding:6px 4px}
.lb button:focus-visible{outline:2px solid var(--trazo); outline-offset:3px}
.lb .li{display:grid; place-items:center; padding:8px var(--pad); min-height:0}
.lb .li img{max-height:100%; height:auto; width:auto}

/* transiciones de página (View Transitions + respaldo) */
::view-transition-old(root){animation:.55s var(--cut) both vt-out}
::view-transition-new(root){animation:.8s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0; transform:translateY(-3%) scale(.985)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)}}
::view-transition-group(obra-foto){animation-duration:.75s; animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(obra-foto),::view-transition-new(obra-foto){animation:none; mix-blend-mode:normal}
.wipe{position:fixed; inset:0; z-index:80; background:var(--bas); pointer-events:none; transform:translateY(calc(100% + 10px))}
.wipe::after{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:repeating-linear-gradient(90deg, var(--trazo) 0 40px, transparent 40px 70px)}

/* ---------------- MÓVIL: composición y movimiento propios ---------------- */
@media (max-width:767px){
  body{font-size:16px}
  .hx-pin{height:auto}
  .hx-stage{position:relative; height:auto; overflow:visible; padding:96px 20px 0; display:flex; flex-direction:column}
  .hx-plane,.gs .hx-plane{transform:none; will-change:auto}
  .hx-copy{order:1} .hx-plane{order:2} .hx-foot{order:3} .hx-panel{order:4} .hx-attr{order:5}
  .hx-copy{position:relative; left:auto; right:auto; top:auto; pointer-events:auto}
  .hx-copy .k{margin-bottom:18px}
  .hx-h1{font-size:clamp(46px,14vw,62px)}
  .hx-h1 .l2{padding-left:10vw}
  .hx-h1 .l3{padding-left:3vw}
  .hx-plane{position:relative; left:auto; top:auto; width:auto; transform:none; margin:30px -20px 0; border-top:1px solid var(--bas); border-bottom:1px solid var(--bas)}
  .hx-foot{position:relative; left:auto; right:auto; bottom:auto; flex-direction:column; align-items:flex-start; margin-top:26px}
  .hx-foot p{font-size:16px}
  .hx-cue{display:none}
  .hx-panel{position:relative; right:auto; top:auto; width:auto; visibility:visible; margin-top:26px}
  .hx-panel .lead{font-size:24px}
  .facts b{font-size:34px}
  .hx-attr{position:relative; left:auto; bottom:auto; visibility:visible; margin-top:10px}
  .mcar{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:18px -20px 0; padding:0 20px 6px; scrollbar-width:none}
  .mcar::-webkit-scrollbar{display:none}
  .mcar :is(button,a){all:unset; box-sizing:border-box; cursor:pointer; flex:0 0 72%; scroll-snap-align:center; border:1px solid var(--linea); padding:12px 14px; display:grid; gap:2px; transition:border-color .25s, background-color .25s}
  .mcar :is(button,a) b{font:450 20px var(--sans); letter-spacing:-.02em}
  .mcar :is(button,a) span{font:400 10.5px var(--mono); color:var(--bas2)}
  .mcar :is(button,a):is([aria-pressed="true"],[aria-current="true"]){border-color:var(--bas); background:var(--cal2); box-shadow:inset 0 -3px 0 var(--trazo)}
  .cx-pin{height:auto; padding:72px 0 52px}
  .cx-stage{position:relative; height:auto; display:block; padding:0}
  .cx-head{position:relative; left:auto; top:auto; padding:0 20px; margin-bottom:26px}
  .cx-ticks{display:none}
  .cx-items{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:0 20px 10px; scrollbar-width:none; height:auto}
  .cx-items::-webkit-scrollbar{display:none}
  .cx-item{position:relative; inset:auto; flex:0 0 86%; scroll-snap-align:center; display:flex; flex-direction:column; gap:18px; border-top:1px solid var(--bas); padding:18px 0 0; opacity:1 !important; visibility:visible !important}
  .cx-item .dw{order:-1}
  .cx-item h2{font-size:36px}
  .cx-item p{font-size:15.5px}
  .cx-dots{display:flex; gap:6px; padding:16px 20px 0}
  .cx-dots i{width:24px; height:3px; background:var(--linea)}
  .cx-dots i.on{background:var(--bas)}
  .px{padding-top:72px}
  .px-intro{display:block; padding:0 20px; margin-bottom:44px}
  .px-intro h2{font-size:48px; margin-top:12px}
  .px-intro p{margin-top:18px; font-size:16px}
  .pj{display:block; padding:0 20px}
  .pj1 .tx{padding:20px 0 0; margin:0; display:grid; gap:14px}
  .pj1 .cjw{margin-top:22px}
  .pj2{margin-top:64px}
  .pj2 .tx{padding:20px 0 0}
  .pj2 .stick{position:relative; top:auto; height:auto; margin-top:0}
  .pj2 .mini{position:relative; right:auto; bottom:auto; width:160px; margin-top:-40px; margin-left:auto}
  .pj3{margin-top:64px}
  .pj3 h3{font-size:44px; margin-bottom:14px; padding-left:0}
  .pj3 .mask{height:220px}
  .pj3 .row{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:20px}
  .pj3 .row .desc,.pj3 .row .cj{grid-column:auto}
  .pj4{margin-top:64px}
  .pj4 .tx{margin-top:22px}
  .pj h3{font-size:32px}
  .route{margin:56px 0; padding:0 20px; grid-template-columns:1fr; gap:10px; text-align:center}
  .route .ln{height:4px}
  .px-more{margin-top:64px}
  .ex{padding:76px 20px 0}
  .ex-grid{display:block}
  .ex-head{margin-top:30px}
  .ex-spec{margin-top:44px} .ex-spec .big b{font-size:120px} .ex-spec .per{padding-left:0; grid-template-columns:auto auto; gap:6px 28px}
  .ex-planta{grid-template-columns:1fr; margin-top:44px}
  .ex-planta img{width:100%}
  .lane{margin:56px -20px 0; height:90px}
  .tr-pin{height:auto; padding:76px 20px 32px}
  .tr-stage{position:relative; height:auto; overflow:visible}
  .tr-head{position:relative; left:auto; top:auto; margin-bottom:40px}
  .tr-track{position:relative; height:auto; transform:none !important; display:grid; gap:28px; padding-left:28px; border-left:0; width:auto !important}
  .tr-road{left:6px; right:auto; top:0; bottom:0; width:10px; height:auto; border:0; border-left:1px solid var(--bas); border-right:1px solid var(--bas)}
  .tr-road::after{left:50%; right:auto; top:0; bottom:0; width:2px; height:auto; margin:0 0 0 -1px; background:repeating-linear-gradient(180deg, var(--trazo) 0 20px, transparent 20px 36px)}
  .tr-yr,.tr-tick{display:none}
  .tr-ev,.tr-bars,.tr-end,.tr-ev.up,.tr-ev.dn{position:relative; left:auto !important; top:auto !important; bottom:auto; width:auto}
  .tr-bars{flex-wrap:wrap}
  .tr-bar{width:46px}
  .tr-end p{font-size:24px}
  .kx{display:block; padding:80px 20px 60px}
  .kx h2{font-size:52px; margin-bottom:44px}
  .kx h2 .l2{padding-left:8vw}
  .kx .form{grid-template-columns:minmax(0,1fr); margin-top:36px}
  .portal{margin:0 20px}
  .foot{grid-template-columns:1fr 1fr; padding:44px 20px calc(96px + env(safe-area-inset-bottom,0px))}
  .foot .wm{grid-column:1/-1}
  .foot > div{grid-column:span 1}
  .ob-head{display:block; padding:100px 20px 20px}
  .ob-head h1{font-size:56px}
  .ob-map{margin-top:24px}
  .chips{flex-wrap:nowrap; overflow-x:auto; margin:24px -20px 0; padding:0 20px 4px; scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .chips .cnt{flex:0 0 auto; margin-left:8px}
  .mosaic{display:grid; grid-template-columns:1fr; gap:48px; padding:30px 20px 100px}
  .card.off,.card.off2{margin-top:0}
  .card.t-reporte{width:82%}
  .card.t-reporte:nth-of-type(even){justify-self:end}
  .cursor{display:none}
  .fi-head{display:block; padding:96px 20px 0}
  .fi-head h1{font-size:38px}
  .fi-hero{display:block; padding:26px 0 0}
  .fi-hero .media{padding:0}
  .fi-hero .side{padding:22px 20px 0}
  .fi-rep{padding:70px 20px 0}
  .fi-rep .g{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -20px; padding:0 20px 8px; scrollbar-width:none}
  .fi-rep .g::-webkit-scrollbar{display:none}
  .fi-rep figure{scroll-snap-align:start; flex:0 0 auto}
  .fi-rep figure img{height:220px}
  .fi-next{margin-top:90px; display:block; padding:24px 20px 110px}
  .fi-next b{font-size:36px; display:block}
  .fi-next .mask{margin-top:22px}
  .mdock{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:45; display:grid; grid-template-columns:1fr 1.4fr; gap:8px; transition:transform .45s var(--cut)}
  .mdock.hide{transform:translateY(calc(100% + 24px))}
  .mdock :is(button,a){all:unset; box-sizing:border-box; cursor:pointer; text-align:center; padding:14px 10px; border-radius:999px; font:500 15px var(--sans); background:var(--cal); border:1px solid var(--bas)}
  .mdock :is(button,a).p{background:var(--bas); color:var(--cal)}
  .mdock :is(button,a):focus-visible{outline:2px solid var(--bas); outline-offset:2px}
}
@media (min-width:768px){ .mcar,.cx-dots,.mdock{display:none} }
@media (prefers-reduced-motion: reduce) and (min-width:768px){
  .hx-stage{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:24px 48px; padding:120px var(--pad) 40px; perspective:none}
  .hx-copy,.hx-plane,.hx-foot,.hx-panel,.hx-attr{position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; transform:none !important; width:auto; visibility:visible}
  .hx-copy{grid-column:1/-1; grid-row:1} .hx-plane{grid-column:1; grid-row:2} .hx-panel{grid-column:2; grid-row:2} .hx-foot{grid-column:1/-1; grid-row:3} .hx-attr{grid-column:1/-1; grid-row:4}
  .cx-stage{display:block; padding:110px var(--pad) 60px} .cx-head{position:relative; left:auto; top:auto; margin-bottom:40px} .cx-items{height:auto; display:grid; gap:80px}
  .cx-item{position:relative; inset:auto}
  .tr-pin{padding:110px var(--pad) 40px} .tr-head{position:relative; left:auto; top:auto; margin-bottom:40px}
  .tr-track{position:relative; height:auto; display:grid; gap:28px; padding-left:28px; width:auto !important}
  .tr-road{left:6px; right:auto; top:0; bottom:0; width:10px; height:auto; border:0; border-left:1px solid var(--bas); border-right:1px solid var(--bas)}
  .tr-road::after{left:50%; right:auto; top:0; bottom:0; width:2px; height:auto; margin:0 0 0 -1px; background:repeating-linear-gradient(180deg, var(--trazo) 0 20px, transparent 20px 36px)}
  .tr-yr,.tr-tick{display:none}
  .tr-ev,.tr-bars,.tr-end,.tr-ev.up,.tr-ev.dn{position:relative; left:auto !important; top:auto !important; bottom:auto; width:auto}
}
@media (min-width:768px){
 :is(.static,html:not(.js)) .hx-stage{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:24px 48px; padding:120px var(--pad) 40px; perspective:none} :is(.static,html:not(.js)) .hx-copy,:is(.static,html:not(.js)) .hx-plane,:is(.static,html:not(.js)) .hx-foot,:is(.static,html:not(.js)) .hx-panel,:is(.static,html:not(.js)) .hx-attr{position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; transform:none !important; width:auto; visibility:visible} :is(.static,html:not(.js)) .hx-copy{grid-column:1/-1; grid-row:1} :is(.static,html:not(.js)) .hx-plane{grid-column:1; grid-row:2} :is(.static,html:not(.js)) .hx-panel{grid-column:2; grid-row:2} :is(.static,html:not(.js)) .hx-foot{grid-column:1/-1; grid-row:3} :is(.static,html:not(.js)) .hx-attr{grid-column:1/-1; grid-row:4} :is(.static,html:not(.js)) .cx-stage{display:block; padding:110px var(--pad) 60px} :is(.static,html:not(.js)) .cx-head{position:relative; left:auto; top:auto; margin-bottom:40px} :is(.static,html:not(.js)) .cx-items{height:auto; display:grid; gap:80px} :is(.static,html:not(.js)) .cx-item{position:relative; inset:auto} :is(.static,html:not(.js)) .tr-pin{padding:110px var(--pad) 40px} :is(.static,html:not(.js)) .tr-head{position:relative; left:auto; top:auto; margin-bottom:40px} :is(.static,html:not(.js)) .tr-track{position:relative; height:auto; display:grid; gap:28px; padding-left:28px; width:auto !important} :is(.static,html:not(.js)) .tr-road{left:6px; right:auto; top:0; bottom:0; width:10px; height:auto; border:0; border-left:1px solid var(--bas); border-right:1px solid var(--bas)} :is(.static,html:not(.js)) .tr-road::after{left:50%; right:auto; top:0; bottom:0; width:2px; height:auto; margin:0 0 0 -1px; background:repeating-linear-gradient(180deg, var(--trazo) 0 20px, transparent 20px 36px)} :is(.static,html:not(.js)) .tr-yr,:is(.static,html:not(.js)) .tr-tick{display:none} :is(.static,html:not(.js)) .tr-ev,:is(.static,html:not(.js)) .tr-bars,:is(.static,html:not(.js)) .tr-end,:is(.static,html:not(.js)) .tr-ev.up,:is(.static,html:not(.js)) .tr-ev.dn{position:relative; left:auto !important; top:auto !important; bottom:auto; width:auto}
}
:is(.static,html:not(.js)) .hx-pin,:is(.static,html:not(.js)) .cx-pin,:is(.static,html:not(.js)) .tr-pin{height:auto}
:is(.static,html:not(.js)) .hx-stage,:is(.static,html:not(.js)) .cx-stage,:is(.static,html:not(.js)) .tr-stage{position:relative; height:auto; overflow:visible}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .hx-pin,.cx-pin,.tr-pin{height:auto}
  .hx-stage,.cx-stage,.tr-stage{position:relative; height:auto; overflow:visible}
}

/* ---------- sitio multipágina: enlaces con estilo de botón ---------- */
a.btn,a.lk,a.wm,a.card,a.chip,a.zoom,a.tr-bar{text-decoration:none}
.fi-next{color:inherit; text-decoration:none}
picture{display:contents}
/* ---------- vista transitoria entre documentos ---------- */
@view-transition{navigation:auto}
.fi-mask img{view-transition-name:obra-foto}
@media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} }
/* ---------- pendientes de validación ---------- */
.val{display:flex; gap:10px; align-items:flex-start; border:1px dashed var(--bas2); padding:12px 14px; font-size:14px; color:var(--bas2); line-height:1.45}
.val b{font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--bas); white-space:nowrap; padding-top:2px}
.val ul{margin:0; padding-left:16px}
.cj dd .pend{margin-left:6px}
/* ---------- formulario ---------- */
.form .req{color:var(--bas)}
.form .hint{font-size:12.5px; color:var(--bas2)}
.form .err{font-size:13px; color:oklch(0.5 0.17 28); min-height:0}
.form [aria-invalid="true"]{border-bottom-color:oklch(0.5 0.17 28)}
.form .chk{grid-column:1/-1; display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:14px; color:var(--bas2)}
.form .chk input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--bas)}
.form .chk::after{display:none}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.notice{grid-column:1/-1; border-left:3px solid var(--trazo); background:var(--cal2); padding:12px 14px; font-size:14.5px; line-height:1.5}
.notice[data-tipo="error"]{border-left-color:oklch(0.5 0.17 28)}
.notice[data-tipo="ok"]{border-left-color:oklch(0.55 0.12 150)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
/* ---------- 404 ---------- */
.nf{padding:160px var(--pad) 140px; display:grid; gap:28px; max-width:900px}
.nf h1{font-size:clamp(56px,8vw,120px); line-height:.92; letter-spacing:-.05em}

[hidden]{display:none !important}
/* ---------- antes de la primera animación: evita el destello de elementos que van a entrar ---------- */
.preanim :is(#hd .wm,.hx-copy,.hx-foot,#plane,.ob-map,.ob-lede,.chips,.fi-hero .desc,.fi-loc){visibility:hidden}
.notice:focus{outline:none}
.hd .wm{min-height:44px; align-items:center}
.menub{min-height:44px; min-width:44px; text-align:right}
.form .chk .pend{white-space:normal; display:inline-block; margin-top:6px}
.form .err:empty{display:none}
.kx .data a{color:inherit; text-decoration:none; border-bottom:1px solid var(--linea)}
.kx .data a:hover{border-color:var(--bas)}
@media (max-width:767px){ .hx-foot .ctas{flex-direction:column; align-items:flex-start; gap:18px} }
/* ---------- foco visible en enlaces con estilos reiniciados ---------- */
.cx-item .n a:focus-visible,.mcar a:focus-visible,.kx .data a:focus-visible,.mun li a:focus-visible{outline:2px solid var(--bas); outline-offset:3px}
.foot a:focus-visible{outline:2px solid var(--trazo); outline-offset:3px}

/* ================= Actualización de contenido: presencia sin cifras ================= */
/* Panel del héroe: el énfasis tipográfico pasa de las cifras a los estados, subrayados con la raya amarilla */
.hx-panel .lead-t{font-size:30px; line-height:1.14}
.hx-panel .lead-t b{font:inherit; font-weight:500; letter-spacing:inherit; position:static; top:auto; line-height:inherit; background:linear-gradient(transparent 64%, var(--trazo) 64% 92%, transparent 92%); padding:0 .04em}
.mapx .pt.vacio{opacity:.32}
.mapx .pt.vacio .lbl{opacity:.6}

/* Recorrido de obra: carretera horizontal con mojoneras de año y tarjetas de obra */
.tr-pin{height:330vh}
.tr-obras,.tr-grupo{list-style:none; margin:0; padding:0}
.tr-km{position:absolute; top:calc(58% + 6px); z-index:3; transform:translateX(-50%); background:var(--cal); border:1px solid var(--bas); padding:6px 11px 5px; font:500 13px var(--mono); letter-spacing:.06em; white-space:nowrap}
.tr-km::after{content:""; position:absolute; left:50%; top:100%; width:1px; height:14px; background:var(--bas)}
.tr-prog{position:absolute; left:0; top:calc(58% + 20.5px); height:3px; background:var(--bas); transform-origin:0 50%; transform:scaleX(0); z-index:1; pointer-events:none}
.tr-ob{position:absolute; width:248px; z-index:2}
.tr-ob.up{bottom:calc(42% + 30px)}
.tr-ob.dn{top:calc(58% + 74px)}
.tr-ob::before{content:""; position:absolute; left:16px; width:1px; height:30px; background:var(--bas)}
.tr-ob.up::before{top:100%}
.tr-ob.dn::before{bottom:100%}
.tr-ob a{all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:6px}
.tr-ob .th{display:block; height:96px; max-width:240px; overflow:hidden; background:var(--cal2)}
.tr-ob .th img{height:96px; width:auto; max-width:none; transition:transform .7s var(--ease)}
.tr-ob a:hover .th img{transform:scale(1.04)}
.tr-ob b{font:450 12px var(--mono); letter-spacing:.06em; margin-top:4px}
.tr-ob .nm{font-size:16.5px; line-height:1.24; letter-spacing:-.01em; text-wrap:balance}
.tr-ob a:hover .nm{text-decoration:underline; text-underline-offset:3px}
.tr-ob .mt{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--bas2)}
.tr-ob .mt svg{width:22px; height:16px; flex:none}
.tr-ob a:focus-visible{outline:2px solid var(--bas); outline-offset:4px}
.tr-end{top:24%; display:grid; gap:16px; width:440px}
.tr-end p{font-size:30px}

/* Filosofía de trabajo (misión institucional, antes al final de la línea de tiempo) */
.mi{padding:170px var(--pad) 30px; display:grid; gap:24px; max-width:1240px}
.mi h2{font-size:clamp(34px,4.3vw,66px); line-height:1.02; letter-spacing:-.04em; text-wrap:balance}

/* Recorrido en columna: móvil, movimiento reducido y versión estática */
@media (max-width:767px){
  .tr-pin{height:auto}
  .tr-obras{display:grid; gap:30px}
  .tr-anio{display:grid; gap:16px}
  .tr-km{position:relative; left:auto !important; top:auto; transform:none; justify-self:start}
  .tr-km::after{display:none}
  .tr-grupo{display:grid; gap:18px}
  .tr-ob,.tr-ob.up,.tr-ob.dn{position:relative; left:auto !important; top:auto; bottom:auto; width:auto}
  .tr-ob::before{display:none}
  .tr-ob a{grid-template-columns:118px minmax(0,1fr); column-gap:14px; row-gap:4px; align-items:start}
  .tr-ob .th{grid-row:1/4; height:88px; width:118px}
  .tr-ob .th img{height:88px}
  .tr-ob b{margin-top:0}
  .tr-ob .nm{font-size:16px}
  .tr-prog{display:none}
  .tr-end{position:relative; left:auto !important; top:auto; width:auto}
  .tr-end p{font-size:22px}
  .mi{padding:90px 20px 10px}
}
@media (prefers-reduced-motion: reduce) and (min-width:768px){
  .tr-obras{display:grid; gap:40px}
  .tr-anio{display:grid; gap:18px}
  .tr-km{position:relative; left:auto !important; top:auto; transform:none; justify-self:start}
  .tr-km::after,.tr-ob::before,.tr-prog{display:none}
  .tr-grupo{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:28px}
  .tr-ob,.tr-ob.up,.tr-ob.dn{position:relative; left:auto !important; top:auto; bottom:auto; width:auto}
  .tr-end{position:relative; left:auto !important; top:auto}
}
@media (min-width:768px){
  :is(.static,html:not(.js)) .tr-obras{display:grid; gap:40px}
  :is(.static,html:not(.js)) .tr-anio{display:grid; gap:18px}
  :is(.static,html:not(.js)) .tr-km{position:relative; left:auto !important; top:auto; transform:none; justify-self:start}
  :is(.static,html:not(.js)) .tr-km::after,:is(.static,html:not(.js)) .tr-ob::before{display:none}
  :is(.static,html:not(.js)) .tr-prog{display:none}
  :is(.static,html:not(.js)) .tr-grupo{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:28px}
  :is(.static,html:not(.js)) .tr-ob{position:relative; left:auto !important; top:auto; bottom:auto; width:auto}
  :is(.static,html:not(.js)) .tr-end{position:relative; left:auto !important; top:auto}
}
.tr-ob .th{width:max-content; justify-self:start}
@media (max-width:767px){ .tr-ob .th{width:118px} }
@media (max-width:767px){ .hx-panel .lead-t{font-size:24px} }
/* recorrido en móvil: tarjetas compactas para no alargar la página */
@media (max-width:767px){
  .tr-obras{gap:22px}
  .tr-anio{gap:10px}
  .tr-grupo{gap:12px}
  .tr-ob a{grid-template-columns:92px minmax(0,1fr); column-gap:12px; row-gap:2px}
  .tr-ob .th{height:68px; width:92px}
  .tr-ob .th img{height:68px}
  .tr-ob b{font-size:11px}
  .tr-ob .nm{font-size:15px; line-height:1.22}
  .tr-ob .mt{font-size:12px}
  .tr-ob .mt svg{width:18px; height:13px}
}
@media (max-width:767px){ .tr-ob .th img{width:100%; height:100%; object-fit:cover} }