/* Solo la ilustración del hero: imagen de referencia y movimiento de luz. */
.hero:has(.reference-art){position:relative;isolation:isolate}
.hero:has(.reference-art) .hero-copy,.hero:has(.reference-art) .hero-bottom{position:relative;z-index:2}
.reference-art{position:relative;background:none;mask-image:none;overflow:visible;isolation:isolate}
.reference-art:before{content:none}
.reference-art .reference-scene{position:absolute;inset:-15px -55px -20px -100px;z-index:0;pointer-events:none}
.reference-art .journey-svg{display:block;width:100%;height:100%;overflow:visible}
.reference-art .reference-image{animation:none}
.reference-art.journey-paused *{animation-play-state:paused!important}
@media(max-width:950px){.reference-art .reference-scene{inset:0 -25px 0 -55px}}
@media(max-width:680px){.reference-art .reference-scene{inset:-5px -18px 0 -30px}.reference-art .journey-svg{overflow:hidden}.reference-art .reference-spark:nth-of-type(2n){display:none}}
/* Cuando el hero pasa a una columna (hasta 850 px), el camino queda de fondo. */
@media(max-width:850px){
  .hero:has(.reference-art) .hero-grid{min-height:0}
  .hero .reference-art{position:absolute;inset:78px 0 0;width:100%;max-width:none;height:auto;margin:0;z-index:0;pointer-events:none}
  .hero .reference-art .reference-scene{inset:0;opacity:.48;mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.3) 35%,black)}
  .hero .reference-art .journey-svg{position:absolute;width:760px;max-width:none;height:100%;right:-185px;top:-12px;overflow:visible}
  .hero:has(.reference-art) .hero-bottom{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){.reference-art *{animation:none!important}.reference-art .reference-spark,.reference-art .reference-pulse{display:none}}