/* Reference composition: a calm glass frame around the urban model. */
:root{--rail:88px;--edge:26px;--glass-top:rgba(25,42,52,.66);--glass-bottom:rgba(29,43,49,.51)}
header.presentation-header{inset:22px 32px auto;width:auto;height:74px;border-radius:18px;padding:9px 22px;justify-content:space-between;background:linear-gradient(100deg,#15364b88,#33587335);gap:20px}
.brand{gap:20px}.brand b{width:55px;height:55px;font-size:17px}.brand-wordmark{border-left:1px solid #ffffff80;padding-left:22px;display:flex;flex-direction:column;gap:4px}.brand-wordmark strong{font-size:25px;font-weight:500;letter-spacing:.1px}.brand-kicker{font-size:10px;letter-spacing:4px;margin:0!important;font-weight:400;color:#f0f8ff}.header-right{border:0;padding:0;min-width:0}.location{text-align:right;font-size:14px;letter-spacing:4px;text-transform:uppercase}.location small{display:none}.location:after{content:'CIUDAD CONECTADA';display:block;font-size:10px;letter-spacing:2.7px;margin-top:7px;font-weight:400}
#info{display:none}.tools{top:118px;right:26px;border-radius:19px;padding:7px}.tools button{height:40px;width:31px}.tools button+button{border-top:1px solid #ffffff10}
.spatial-menu{position:fixed;left:var(--edge);top:119px;bottom:28px;width:var(--rail);padding:10px 8px!important;border-radius:21px!important;z-index:4;pointer-events:auto;overflow-y:auto;scrollbar-width:none;background:linear-gradient(145deg,#163444a6,#223239a8)}
.spatial-heading,.spatial-footer,.spatial-sub,.spatial-units{display:none!important}.spatial-grid{display:flex;flex-direction:column;justify-content:space-between;gap:3px;padding:0;height:100%;min-height:510px}
.spatial-service,.spatial-service:first-child{border:0;box-shadow:none!important;background:none;padding:0 3px 8px;border-radius:11px;min-height:57px;flex:1;justify-content:center;width:100%;color:white}
.spatial-service:first-child:after{display:none}.spatial-service:before{content:'';position:absolute;left:4px;top:10px;bottom:12px;width:2px;background:#ff7900;opacity:0;border-radius:2px}.spatial-service.selected:before{opacity:1}.spatial-service:hover,.spatial-service:focus-visible{background:#ffffff13}.spatial-service.selected{background:#ffffff08}
.service-model{height:clamp(35px,5.5vh,57px);max-height:57px;width:66px;flex:none}.spatial-name{font-size:11px;line-height:1.2;font-weight:400;margin-top:0;letter-spacing:0}.service-icons-canvas{z-index:5}
.layer-switch{left:calc(var(--edge) + var(--rail) + 24px);bottom:26px;top:auto;border-radius:13px;padding:4px;max-width:none}.layer-switch button{min-height:34px;padding:7px 12px;font-size:10px}.layer-switch #waterMode{display:none}.layer-switch button svg{width:14px;height:14px}.navigation-mode{bottom:26px;right:26px;padding:4px}.navigation-mode button{padding:8px;font-size:0}
.card,body[data-section=platform] .card{left:calc(var(--edge) + var(--rail) + 24px);top:126px;bottom:86px;width:340px;max-height:none;overflow:auto;scrollbar-width:none;inset-inline-end:auto;pointer-events:none}
body[data-section=platform] .card{display:none}.card .glass{border-radius:18px}.city-panel .scene-card{padding:22px}.city-panel .scene-card h1{font-size:28px}.city-panel .navigation-card{padding:15px 20px}.city-panel .views button{min-height:48px}.city-panel .card-foot{display:none}
body[data-section=water] .card{top:auto;bottom:92px;width:385px;overflow:visible}.water-panel{display:block}.water-summary{padding:20px 22px 0!important;backdrop-filter:blur(26px) saturate(105%)}.water-eyebrow{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.3px;color:#f7fbff}.mini-drop{color:#57d7ff;font-size:24px;text-shadow:0 1px 4px #09bfff}.water-eyebrow button{margin-left:auto;border:0;background:none;color:#fff;letter-spacing:2px;cursor:pointer;padding:0 0 0 15px;font-size:16px}
.water-summary h2{font-size:29px!important;font-weight:400!important;letter-spacing:-.65px!important;margin:13px 0 18px!important;white-space:nowrap}.water-metrics{display:grid;grid-template-columns:1fr 165px;align-items:center;gap:12px;margin-bottom:19px}.reading{font-size:53px;font-weight:400;letter-spacing:-2px;line-height:1}.reading>span{font-size:21px;letter-spacing:0;color:#e4eced}.water-metrics p{font-size:10px;color:#fff;margin:8px 0 0;max-width:none}.water-metrics p span{margin-left:6px;font-size:14px}.pressure-chart svg{display:block;width:100%;height:74px;overflow:visible}.pressure-chart text{fill:#f7fbff;font-size:10px}.pressure-chart>span{display:block;font-size:8px;text-align:right;color:#dbe7ec;margin-top:-2px}
.inspect-action{display:flex;gap:9px;align-items:center;width:100%;border:0;border-top:1px solid #ffffff30;background:none;padding:14px 0 16px;color:#fff;font:500 12px Plex,sans-serif;cursor:pointer;text-align:left}.inspect-action:hover{color:#7addff}.inspect-action span{font-size:17px;font-weight:400}.water-options{border-top:1px solid #ffffff25;padding:9px 0 14px;display:flex;gap:9px}.water-options[hidden]{display:none}.water-options button,#returnNetwork{padding:7px 9px;border:1px solid #ffffff35;border-radius:7px;background:#ffffff0d;color:white;font:11px Plex,sans-serif;cursor:pointer}#returnNetwork{display:none;margin-bottom:15px}.water-inspection #returnNetwork{display:block}.water-inspection #waterDetail{display:none}
.water-panel .network-key{position:fixed;right:26px;bottom:83px;width:254px;border-radius:17px!important;padding:15px 16px 12px!important}.network-key>div{display:flex;justify-content:space-between;gap:16px;font-size:10px}.network-key>div>span{display:flex;align-items:center;gap:8px}.blue-line{width:26px;height:3px;background:#00c4ff;box-shadow:0 0 7px #00bfff;border-radius:5px}.orange-dot{height:10px;width:10px;background:#ff8b1c;border-radius:50%}.network-key p{font-size:9px!important;margin:11px 0 0!important;color:#d5dfe2!important;max-width:none!important}.network-key p span{float:right;font-size:12px}
.water-hotspot{background:linear-gradient(130deg,#25353cb8,#25353c91)!important;border-color:#ffffff4a;border-radius:15px;padding:12px 15px;gap:10px;z-index:3;white-space:nowrap;box-shadow:0 7px 28px #06172533,inset 0 1px 0 #ffffff25}.fault-dot{width:10px;height:10px;align-self:flex-start;margin-top:4px;flex-shrink:0;background:#ff920a;box-shadow:0 0 9px #ff79004a}.hotspot-copy{display:flex;flex-direction:column;gap:5px}.hotspot-copy strong{color:#ff9c33;font-weight:500;letter-spacing:.25px;font-size:11px}.hotspot-copy small{font-size:10px;color:#fff}.hotspot-copy>span{display:flex;align-items:center;gap:13px;font-size:10px}.water-hotspot b{color:#fff!important;font-size:18px!important;font-weight:400!important;margin:0!important}.water-hotspot em{font-size:11px;font-style:normal}.water-hotspot .hotspot-arrow{align-self:flex-end;font-size:21px;color:white;opacity:1}.water-leader{stroke:#ffca8b;opacity:.9}.water-inspection .water-hotspot{display:none!important}.water-inspection .water-leader{display:none!important}
.journey,body[data-section=platform] .journey{left:50%;bottom:30px;transform:translateX(-50%);max-width:280px}.section-changing .card{transform:translateY(20px)}
footer{bottom:6px;left:calc(var(--edge) + var(--rail) + 24px)}
@media(min-width:1500px){:root{--rail:99px;--edge:30px}header.presentation-header{height:78px}.spatial-menu{bottom:30px}.service-model{height:58px}.spatial-name{font-size:13px}.water-summary h2{font-size:32px!important}body[data-section=water] .card{width:420px;bottom:100px}.water-metrics{grid-template-columns:1fr 185px}.water-hotspot{padding:15px 18px}.hotspot-copy strong{font-size:13px}.hotspot-copy small{font-size:12px}.water-panel .network-key{bottom:85px}}
@media(max-width:1100px){:root{--rail:73px;--edge:18px}header.presentation-header{inset:18px 22px auto;height:68px;padding:8px 16px}.brand b{width:49px;height:49px;font-size:15px}.brand-wordmark strong{font-size:21px}.brand-kicker{font-size:8px;letter-spacing:3px}.location{font-size:12px;letter-spacing:2px}.location:after{font-size:8px;letter-spacing:2px}.spatial-menu{top:106px;padding:7px 5px!important}.service-model{width:60px;height:43px}.spatial-name{font-size:10px}.water-summary h2{font-size:25px!important}.water-summary{padding:16px 18px 0!important}body[data-section=water] .card{width:335px;bottom:84px}.water-metrics{grid-template-columns:1fr 145px;gap:8px;margin-bottom:14px}.reading{font-size:48px}.water-panel .network-key{width:224px;right:22px;bottom:81px}.tools{top:106px;right:22px}.tools button{height:35px}.card{top:106px;width:310px}}
@media(max-width:700px){:root{--rail:58px;--edge:10px}header.presentation-header{inset:10px 10px auto;height:58px;border-radius:13px;padding:8px;gap:6px}.brand{gap:9px}.brand b{width:40px;height:40px;font-size:12px}.brand-wordmark{padding-left:10px;gap:5px}.brand-wordmark strong{font-size:15px}.brand-kicker{font-size:6px;letter-spacing:1.4px}.location{font-size:8px;letter-spacing:1.2px}.location:after{font-size:5px;letter-spacing:.8px}.spatial-menu{top:80px;bottom:17px;border-radius:15px!important}.spatial-grid{min-height:410px;gap:0}.service-model{width:48px;height:37px}.spatial-name{font-size:8px}.tools{top:80px;right:10px;padding:3px}.tools button{width:26px;height:32px}.layer-switch{left:80px;bottom:17px;transform:none}.layer-switch button{padding:6px 9px;font-size:8px}.navigation-mode{right:10px;top:auto;bottom:17px;flex-direction:row}.navigation-mode button{padding:6px}.card,body[data-section=water] .card{left:80px;width:calc(100vw - 98px);bottom:72px;top:auto;max-height:calc(100dvh - 160px);overflow:auto}.water-summary h2{font-size:23px!important}.water-metrics{grid-template-columns:1fr 125px}.water-summary{padding:14px 15px 0!important}.reading{font-size:42px}.water-panel .network-key{display:none}.water-hotspot{padding:8px 10px}.hotspot-copy strong{font-size:9px}.hotspot-copy small{font-size:8px}.hotspot-copy>span{font-size:9px}.water-hotspot b{font-size:14px!important}.water-eyebrow{font-size:8px}.pressure-chart>span{font-size:7px}.water-metrics p{font-size:8px}.journey{max-width:220px;bottom:76px}.card .scene-card h1{font-size:26px}footer{left:80px;font-size:6px}.card .platform-hero h1{font-size:28px}}

.pressure-chart text{stroke:none}.pressure-chart svg{stroke:none}.service-model{filter:drop-shadow(0 3px 3px #071d2644)}
/* Optical glass: transmitted scene detail stays visible behind the panels. */
:root,.water-xray{--glass-top:rgba(20,33,43,.30);--glass-bottom:rgba(19,32,42,.16)}
.glass,.water-hotspot,header.presentation-header,.spatial-menu,.layer-switch,.tools,.navigation-mode{background:linear-gradient(130deg,rgba(22,37,48,.30),rgba(25,40,48,.17))!important;backdrop-filter:blur(14px) saturate(115%) brightness(.76);-webkit-backdrop-filter:blur(14px) saturate(115%) brightness(.76);border-color:#ffffff38;box-shadow:0 12px 34px -18px #0008,inset 0 1px 0 #ffffff32}
header.presentation-header{backdrop-filter:blur(16px) saturate(110%);-webkit-backdrop-filter:blur(16px) saturate(110%);background:linear-gradient(110deg,#17426047,#2e587c14)!important}
.water-summary,.water-hotspot{color:#fff;text-shadow:0 1px 5px #061a2460}.spatial-menu{background:linear-gradient(120deg,#142b3f55,#21374729)!important}.water-summary{backdrop-filter:blur(14px) saturate(115%) brightness(.76)!important;-webkit-backdrop-filter:blur(14px) saturate(115%) brightness(.76)!important}
.service-model{background-image:url('./assets/icons3d/reference-icons-atlas.png');background-size:200% 400%;background-repeat:no-repeat;width:52px;height:52px;max-height:none;filter:drop-shadow(0 3px 3px #05172266);transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.service-model .icon-fallback{display:none!important}.spatial-service:hover .service-model{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 5px 4px #05172266) brightness(1.12)}
[data-icon3d=water]{background-position:0 0}[data-icon3d=mobility]{background-position:100% 0}[data-icon3d=environment]{background-position:0 33.3333%}[data-icon3d=carbon]{background-position:100% 33.3333%}[data-icon3d=energy]{background-position:0 66.6667%}[data-icon3d=waste]{background-position:100% 66.6667%}[data-icon3d=noise]{background-position:0 100%}[data-icon3d=climate]{background-position:100% 100%}
.mini-drop{display:inline-block;width:22px;height:27px;background:url('./assets/icons3d/reference-icons-atlas.png') 0 0/200% 400% no-repeat;font-size:0}
@media(max-height:750px){.service-model{width:43px;height:43px}}
@media(max-width:700px){.service-model{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.service-model{transition:none}.spatial-service:hover .service-model{transform:none}}
.water-xray .layer-switch{left:calc(var(--edge) + var(--rail) + 24px);bottom:26px;top:auto;transform:none;border-radius:13px;padding:4px}.water-xray .layer-switch button{min-height:34px;padding:7px 12px;font-size:10px}
@media(max-width:700px){.water-xray .layer-switch{left:80px;bottom:17px}.water-xray .layer-switch button{padding:6px 9px;font-size:8px}}

/* Optical refinement: compact navigation and a darker, quieter brand surface. */
:root,.water-xray{--rail:72px}
header.presentation-header{height:70px;padding:9px 18px;background:linear-gradient(110deg,rgba(17,35,49,.67),rgba(24,46,62,.52))!important;backdrop-filter:blur(18px) saturate(104%);-webkit-backdrop-filter:blur(18px) saturate(104%);border-color:#ffffff24;box-shadow:0 8px 24px -16px #06152180,inset 0 1px 0 #ffffff19}
.brand{gap:16px}.brand b{width:49px;height:49px;font-size:15px}.brand-wordmark{padding-left:18px;gap:5px}.brand-wordmark strong{font-size:22px;font-weight:500;letter-spacing:-.2px;line-height:1.15}
.brand-kicker{display:flex!important;justify-content:space-between;font-size:8px;letter-spacing:0;line-height:1;color:#e4edf2}.brand-kicker>span{display:block}
.location{font-size:12px;letter-spacing:3px}.location:after{font-size:8px;letter-spacing:2px;margin-top:6px;color:#d8e5ee}
.spatial-menu{top:111px;padding:9px 5px!important;border-radius:18px!important;border-color:#ffffff29;box-shadow:0 9px 25px -17px #051a2980,inset 0 1px 0 #ffffff18}
.spatial-service,.spatial-service:first-child{padding:0 1px 6px;border-radius:9px}.spatial-service:before{left:1px;width:2px;top:12px;bottom:14px}.spatial-name{font-size:10px}
/* Discard faint alpha residue at display time; retain original approved artwork. */
.service-model{width:44px;height:44px;filter:url('#icon-alpha-clean') drop-shadow(0 2px 1.5px #06172240);transition:transform .25s ease}
.spatial-service:hover .service-model{transform:translateY(-1px) scale(1.035);filter:url('#icon-alpha-clean') drop-shadow(0 3px 2px #0617224d)}
.mini-drop{filter:url('#icon-alpha-clean')}
@media(min-width:1500px){:root,.water-xray{--rail:78px}.service-model{width:46px;height:46px}.spatial-name{font-size:11px}}
@media(max-height:750px){.service-model{width:38px;height:38px}}
@media(max-width:1100px){:root,.water-xray{--rail:66px}header.presentation-header{height:66px}.brand-wordmark strong{font-size:20px}.brand-kicker{font-size:7px}.spatial-menu{top:101px}.spatial-name{font-size:9px}.service-model{width:40px;height:40px}}
@media(max-width:700px){:root,.water-xray{--rail:54px}header.presentation-header{height:58px;padding:8px}.brand{gap:9px}.brand b{width:40px;height:40px;font-size:12px}.brand-wordmark{padding-left:10px;gap:5px}.brand-wordmark strong{font-size:14px;letter-spacing:-.1px}.brand-kicker{font-size:5px}.location{font-size:8px;letter-spacing:1.2px}.location:after{font-size:5px;letter-spacing:.8px}.spatial-menu{top:80px}.service-model{width:34px;height:34px}.spatial-name{font-size:8px}}
@media(prefers-reduced-motion:reduce){.service-model{transition:none}.spatial-service:hover .service-model{transform:none}}

/* Unobstructed architecture review; the toolbar restores the panels. */
body.panels-hidden aside.card{opacity:0!important;pointer-events:none!important;visibility:hidden!important}