/* The approved city becomes the hero's atmosphere; text and navigation stay still. */
.hero:has(.urban-panel){position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;isolation:isolate;padding:0 0 10px}
.hero:has(.urban-panel)>div:first-child{position:relative;z-index:3;max-width:610px;min-height:620px;padding:105px 0 100px}
.hero:has(.urban-panel)>div:first-child a{pointer-events:auto}
.hero:has(.urban-panel) h1{text-shadow:0 3px 30px #0009}
.hero:has(.urban-panel) .lead{max-width:470px}
.hero:has(.urban-panel) .muted{max-width:440px;color:#d4ceca;text-shadow:0 1px 10px #111112}
.urban-panel{display:contents}
.urban-scene{position:absolute;z-index:0;top:-48px;left:27%;right:-40px;height:700px;width:auto;margin:0;background:transparent;border:0;border-radius:0;overflow:hidden;isolation:isolate;--scene-x:0deg;--scene-y:0deg;--pan-x:0px;--pan-y:0px;--light-x:68%;--light-y:36%}
.city-image-layer{position:absolute;inset:-2%;transform:perspective(1400px) rotateX(var(--scene-x)) rotateY(var(--scene-y)) translate3d(var(--pan-x),var(--pan-y),0);transition:transform .65s cubic-bezier(.2,.65,.3,1)}
.city-image-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.urban-scene::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,#111112 0%,#111112e0 9%,#11111272 24%,#11111208 43%,transparent 75%,#111112 100%),linear-gradient(180deg,#111112 0%,#11111212 14%,transparent 48%,#11111280 78%,#111112 100%)}
.city-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#ffba961c 0%,#ff765908 30%,transparent 60%);mix-blend-mode:screen;opacity:0;transition:opacity .45s}
.urban-scene[data-active=true] .city-light{opacity:1}
.urban-scene[data-active=true] .city-image-layer{transition-duration:.22s}
.urban-scene figcaption{position:absolute;z-index:3;left:43%;bottom:75px;right:30px;color:#d4ceca;font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 2px 12px #000}
.urban-scene figcaption:before{content:'';display:block;width:30px;height:1px;background:var(--accent);margin-bottom:11px}
.city-controls{position:relative;z-index:4;justify-self:end;display:flex;justify-content:flex-end;min-height:36px;margin:-46px 0 10px}
.city-effects{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 8px;border:1px solid transparent;font-size:11px;color:var(--muted);background:#11111255}
.city-effects::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#8c8785}
.city-effects[aria-pressed=true]::before{background:var(--accent)}
.city-effects:disabled{opacity:1}
.city-effects[hidden],.city-controls:has(.city-effects[hidden]){display:none}
.urban-panel .hero-map{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:0 30px;width:100%;max-width:none;margin:0;padding:27px 0 12px;background:transparent;border:0;border-top:1px solid #484246;border-radius:0;box-shadow:none}
.urban-panel .hero-map>.eyebrow{flex-basis:100%;margin-bottom:17px;font-size:11px}
.urban-panel .hero-map>a{flex:1 1 245px;grid-template-columns:25px minmax(0,1fr) 15px;padding:19px 0;border-top:1px solid #343034;gap:12px;font-size:16px}
.urban-panel .hero-map>a strong{font-weight:500}
.urban-panel .hero-map>.map-note{flex-basis:100%;margin:10px 0 0;color:var(--muted)}
@media(min-width:1600px){.urban-scene{right:-55px}}
@media(min-width:651px) and (max-width:1000px){.hero:has(.urban-panel)>div:first-child{max-width:570px;min-height:590px;padding-top:95px}.urban-scene{left:15%;height:670px;right:-40px;opacity:.86}.urban-scene::after{background:linear-gradient(90deg,#111112 0%,#111112bc 20%,#11111255 48%,#11111230 75%,#111112 100%),linear-gradient(180deg,#111112 0%,transparent 17%,transparent 42%,#111112 100%)}.urban-scene figcaption{left:auto;bottom:90px;text-align:right}.urban-panel .hero-map>a{flex-basis:260px}}
@media(max-width:650px){.hero:has(.urban-panel){display:flex;flex-direction:column;gap:0;padding:0}.urban-scene{position:relative;order:-1;top:auto;left:auto;right:auto;width:calc(100% + 40px);height:auto;aspect-ratio:1.06;margin:-28px -20px 0;flex:none}.city-image-layer{inset:-1%}.city-image-layer img{object-position:48% 25%}.urban-scene::after{background:linear-gradient(180deg,#111112 0%,transparent 16%,transparent 53%,#11111299 78%,#111112 100%),linear-gradient(90deg,#111112 0%,#11111212 22%,transparent 75%,#111112 100%)}.urban-scene figcaption{left:auto;right:22px;bottom:76px;font-size:8px;letter-spacing:.08em;max-width:190px;text-align:right;line-height:1.6}.urban-scene figcaption:before{margin-left:auto;width:22px}.hero:has(.urban-panel)>div:first-child{min-height:0;padding:0 0 24px;margin-top:-43px;max-width:100%;pointer-events:auto}.hero:has(.urban-panel)>div:first-child .eyebrow{font-size:10px;margin-bottom:16px}.hero:has(.urban-panel) h1{font-size:clamp(3.2rem,14.5vw,5.8rem);margin-bottom:24px}.hero:has(.urban-panel) .muted{font-size:16px}.city-controls{position:relative;right:auto;top:auto;order:1;margin:0 0 18px;min-height:44px}.city-effects{min-height:44px}.urban-panel .hero-map{order:2;padding-top:25px;gap:0}.urban-panel .hero-map>a{flex-basis:100%;padding:19px 0;font-size:16px}.urban-panel .hero-map>.map-note{font-size:13px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.city-image-layer{transform:none!important;transition:none!important}.city-light{display:none}}
body[data-metodo-city-effects=off] .city-image-layer{transition:none}