/* Efectos de scroll: historia "Del libro al mundo", parallax e imágenes que se expanden (GSAP + ScrollTrigger + Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Historia de la portada que avanza con el scroll */
.scroll-story{position:relative;background:#fff}
.scroll-story-stage{position:relative;height:calc(100vh - var(--header-h,104px));min-height:420px;overflow:hidden;background:#fff}
.scroll-story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;transform-origin:50% 40%}
.scroll-story-caption{position:absolute;left:0;right:0;bottom:7%;text-align:center;opacity:0;pointer-events:none}
.scroll-story-caption span{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#a37b32;
  background:rgba(255,255,255,.85);padding:9px 16px;border-radius:30px;backdrop-filter:blur(6px)}
.scroll-story-slogan{position:absolute;left:0;right:0;bottom:6%;margin:0;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;font-size:clamp(38px,6vw,86px);line-height:1.02;letter-spacing:-.01em;color:#16243a;opacity:0}
.scroll-story-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7b8798}
.scroll-story-hint i{display:block;width:1px;height:34px;background:linear-gradient(#c9a96e,transparent);animation:story-hint 1.6s ease-in-out infinite}
@keyframes story-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (orientation:portrait){.scroll-story-video{object-fit:contain}}

/* Imágenes que se expanden: preparadas por efectos.js */
.fx-on .hero-banner{background:#fff;overflow:hidden}
.fx-on .hero-banner img{will-change:clip-path,transform}
.fx-expand{will-change:clip-path}
.fx-expand img{will-change:transform}

@media (prefers-reduced-motion:reduce){.scroll-story{display:none}}
.fx-on .course-visual{background-size:100% 180%}

/* Celular: la historia se reproduce sola, sin fijar la pantalla */
.fx-touch .scroll-story-stage{height:auto;min-height:0;aspect-ratio:16/9}
.fx-touch .scroll-story-video{object-fit:contain}
.fx-touch .scroll-story-caption,.fx-touch .scroll-story-hint,.fx-touch .scroll-story-slogan{display:none}