/* Un único lienzo acompaña el scroll entre el hero y el plano. */
#particle-story { position: relative; isolation: isolate; }
#particle-story>#plans { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#particle-story .hero { position: relative; min-height: calc(100svh - 111px); height: auto; padding-top: 30px; }
#particle-story .hero-top { position: relative; z-index: 2; }
#particle-story .hero-grid { display: grid; position: relative; z-index: auto; padding: 40px 0 50px; flex: 1; }
#particle-story .hero-copy { position: relative; z-index: 2; padding: 0 0 100px; max-width: 660px; }
#particle-story .hero-art { position: relative; background: #000; }
#particle-story .hero h1 { font-size: clamp(58px,5.86vw,90px); }
.hero-wave { position: absolute; left: 0; right: 0; top: 30%; height: 65%; pointer-events: none; }
#particle-story .hero-art .hero-bottom { position: absolute; bottom: 28px; left: 7%; right: 5%; min-height: 100px; z-index: 2; }
#particle-story .essence { position: relative; }
#particle-story .essence-heading,#particle-story .essence-copy { position: relative; z-index: 2; }
#particle-story .plan-stage { width: 80vw; height: calc(min(72vw, 620px) + 64px); max-height: none; margin-bottom: 30px; }
#particle-story .mesh-settings { top: 0; right: 0; z-index: 3; }
@media(max-width:900px){
 #particle-story .hero-copy { max-width: 590px; }
 #particle-story .hero h1 { font-size: clamp(34px,5.86vw,72px); }
 #particle-story .hero-copy { padding-bottom: 35px; }
}
@media(max-width:620px){
 #particle-story .hero { height: auto; min-height: calc(100svh - 82px); }
 #particle-story .hero-grid { padding: 40px 0 30px; }
 #particle-story .hero-copy { padding-bottom: 0; }
 #particle-story .hero h1 { font-size: clamp(40px,12.7vw,64px); }
 #particle-story .hero-wave { top: 40%; height: 55%; }
 #particle-story .hero-art .hero-bottom { bottom: 18px; min-height: 75px; }
 #particle-story .plan-stage { margin-bottom: 32px; }
}