/* ing.cmae · fx-hero.css — «Canal virtual» detrás del hero (js/fx-hero.js).
   El lienzo se suma por luz (screen); sin JS o si falla, nada cambia. */
#fx-hero{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.4) 36%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.4) 36%,#000 62%)}
.fx-hero-on #fx-hero{opacity:.9}
.fx-hero-on .hero canvas.topo{display:none}
.hero-blueprint{transition:opacity 1.2s ease}
.fx-hero-on .hero-blueprint{opacity:.22}
@media (max-width:767px){#fx-hero{bottom:auto;height:72vh;height:min(100%,72svh);-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 28%,rgba(0,0,0,.4) 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 28%,rgba(0,0,0,.4) 70%,transparent 100%)}.fx-hero-on #fx-hero{opacity:.75}}
@media (prefers-reduced-motion:reduce){#fx-hero,.hero-blueprint{transition:none}}