/* METROPOLI BCN — animated background field (mockup layer, additive to site.css) */
.cy-host{position:relative;overflow:hidden;isolation:isolate}
.cy-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cy-host>.wrap{position:relative;z-index:1}
.cy-host::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
/* hero: deeper ground, static network hidden, copy column shaded for legibility */
.hero.cy-host{background:radial-gradient(120% 90% at 78% 40%,#10294a 0%,var(--navy) 55%,var(--navy-deep) 100%)}
.hero.cy-host .hero-field{display:none}
.hero.cy-host::after{background:linear-gradient(90deg,rgba(11,27,51,.82) 0%,rgba(11,27,51,.55) 38%,rgba(11,27,51,0) 62%)}
/* the production drop-shadows would re-raster the whole SVG on every daylight step; the glow is drawn on the canvas instead */
.hero.cy-host .hero-mark svg{filter:none}
/* portada triptych: one quiet field per division */
.tri.cy-host{overflow:hidden}
.tri.cy-host>*:not(canvas){position:relative;z-index:1}
.tri.cy-host::after{background:linear-gradient(180deg,rgba(11,27,51,.35) 0%,rgba(11,27,51,.7) 100%)}
@media (max-width:980px){
  .hero.cy-host::after{background:linear-gradient(180deg,rgba(11,27,51,.15) 0%,rgba(11,27,51,.75) 55%,rgba(11,27,51,.9) 100%)}
}
/* story mode: the zoom on the office is seen through the logo's circle */
.cy-lens{position:relative}
.cy-lens-ring{position:absolute;box-sizing:border-box;border:6px solid #fff;border-radius:50%;pointer-events:none;opacity:0}