/* ImpulsArte 2.1.2 — movimiento autónomo y contraste sobre imagen móvil */
.sticky-scene .cinematic-video {
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  opacity:0; transition:opacity .48s ease;
  pointer-events:none;
}
.sticky-scene .cinematic-video.is-playing { opacity:1; }
.sticky-scene #sceneCanvas { z-index:0; }
.sticky-scene .cinematic-video { z-index:1; }
.sticky-scene .scroll-shading { z-index:2; }
.sticky-scene .scroll-stories { z-index:3; }
.sticky-scene .scene-bottom { z-index:4; }
/* Readability without blocking the complete cinematic background. */
.scroll-shading {
  background: linear-gradient(90deg, rgba(3,9,31,.94) 0%, rgba(3,9,31,.81) 27%,
    rgba(5,10,31,.28) 63%, rgba(5,10,31,.08) 100%),
    linear-gradient(0deg, rgba(2,6,22,.71), transparent 22%, transparent 80%, rgba(2,6,22,.46));
}
.scroll-story h1,.scroll-story h2 { text-shadow:0 3px 27px rgba(2,6,20,.45); }
.scroll-story h1 em,.scroll-story h2 em { color:#c3d9ff; }
.scroll-story .lead { color:#f1f5ff; text-shadow:0 2px 15px rgba(2,6,20,.48); }
.story-chip-row span { background:rgba(8,15,40,.55); border-color:rgba(215,228,255,.32); }
.cinema-motion-toggle {
  border:1px solid rgba(223,234,255,.31); border-radius:100px;
  min-height:40px; padding:9px 13px; color:#f4f7ff;
  font-family:inherit; font-weight:600; font-size:.75rem; line-height:1.1; cursor:pointer;
  background:rgba(9,17,43,.65); backdrop-filter:blur(10px);
  white-space:nowrap;
}
.cinema-motion-toggle:hover {background:rgba(25,38,77,.87);}
.cinema-motion-toggle:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.cinema-motion-toggle[hidden] {display:none!important;}
@media(max-width:980px) {
 .scroll-story { width:min(620px,70vw); }
 .scroll-shading {background:linear-gradient(90deg,rgba(3,9,31,.9) 0%,rgba(3,9,31,.5) 64%,rgba(3,9,31,.12));}
}
@media(max-width:700px) {
 .sticky-scene .cinematic-video {object-position:center 54%;}
 .scroll-shading {
   background:linear-gradient(180deg, rgba(1,6,27,.88) 0%, rgba(1,6,27,.62) 34%,
       rgba(1,6,27,.14) 67%, rgba(1,6,27,.7) 100%);
 }
 .scroll-story {
    top:clamp(104px,14svh,130px); width:auto; left:0; right:0;
    padding:19px 18px 18px; border-radius:22px;
    border:1px solid rgba(192,212,255,.17);
    background:linear-gradient(130deg,rgba(4,11,32,.91),rgba(5,13,39,.80) 75%,rgba(9,22,53,.72));
    box-shadow:0 15px 36px rgba(0,5,18,.22);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    max-height:calc(100svh - 198px); overflow:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(214,224,255,.3) transparent;
 }
 .scroll-story h1,.scroll-story h2 {
    font-size:clamp(2.18rem,9.6vw,3rem); line-height:1.04;
    letter-spacing:-.058em; max-width:520px; margin-bottom:12px;
 }
 .scroll-story .lead {font-size:.9rem;line-height:1.52;margin-bottom:16px; max-width:470px;}
 .scroll-story .eyebrow {font-size:.65rem;letter-spacing:.14em;margin-bottom:12px;}
 .story-chip-row {flex-wrap:nowrap;gap:7px; overflow-x:auto; padding-bottom:5px; margin-bottom:15px; scrollbar-width:none;}
 .story-chip-row::-webkit-scrollbar {display:none;}
 .story-chip-row span {flex:0 0 auto;font-size:.72rem;padding:7px 10px;min-height:30px;}
 .story-actions {display:flex;flex-wrap:wrap;gap:8px;}
 .story-action {font-size:.81rem;min-height:42px;padding:10px 13px;}
 .scene-bottom {bottom:19px;gap:10px;align-items:center;}
 .scroll-hint {font-size:.58rem;letter-spacing:.1em;}
 .progress-widget {gap:8px;}
 .progress-track {width:35px;}
 .cinema-motion-toggle {position:absolute;right:0;bottom:42px;min-height:36px;padding:8px 10px;font-size:.68rem;}
}
@media(max-width:380px) {
 .scroll-story {padding:16px 14px; max-height:calc(100svh - 185px);}
 .scroll-story h1,.scroll-story h2 {font-size:clamp(2rem,9.3vw,2.35rem);}
 .scroll-story .lead {font-size:.83rem;line-height:1.48;}
 .scroll-hint {font-size:.52rem;}
 .cinema-motion-toggle {font-size:.6rem;padding:7px 8px;}
 .progress-widget {display:none;}
}
@media(prefers-reduced-motion:reduce) {
 .sticky-scene .cinematic-video {opacity:0!important;}
 .cinema-motion-toggle {display:none!important;}
}