/* Movimiento compartido para las páginas del rediseño.
   Solo se oculta contenido cuando el script confirmó que está activo. */
html.scroll-fx .scroll-reveal{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--scroll-delay,0ms);will-change:opacity,transform}
html.scroll-fx .scroll-reveal.scroll-visible{opacity:1;transform:none;will-change:auto}

/* El primer pantallazo entra con más carácter que el resto de bloques. */
html.scroll-fx .pantallazo-guia.scroll-reveal{transform:translate3d(0,34px,0) scale(.965) rotate(.45deg)}
html.scroll-fx .pantallazo-guia.scroll-reveal:nth-of-type(even){transform:translate3d(0,34px,0) scale(.965) rotate(-.45deg)}
html.scroll-fx .pantallazo-guia.scroll-reveal.scroll-visible{transform:none}
.pantallazo-enlace{--card-scale:1;--card-tilt:0deg;
  transform:translate3d(0,var(--scroll-card,0px),0) rotate(var(--card-tilt)) scale(var(--card-scale));
  transition:transform .2s ease-out}
.pantallazo-guia:nth-of-type(odd) .pantallazo-enlace{--card-tilt:.18deg}
.pantallazo-guia:nth-of-type(even) .pantallazo-enlace{--card-tilt:-.18deg}
@media (hover:hover){.pantallazo-enlace:hover{--card-scale:1.012}}

/* Entrada inicial más visible, pero corta: termina antes de que se empiece a leer. */
html.scroll-fx .scroll-hero-item{opacity:1;transform:none;transition:none}
html.scroll-fx .scroll-hero-item.scroll-hero-visible{opacity:1;transform:none}

/* Los títulos editoriales se descubren de abajo hacia arriba. */
html.scroll-fx .scroll-title.scroll-reveal{clip-path:inset(0 0 100% 0);transform:translate3d(0,24px,0)}
html.scroll-fx .scroll-title.scroll-reveal.scroll-visible{clip-path:inset(0);transform:none}

/* Un poco de profundidad en superficies grandes; nunca en texto o controles. */
.imagen.foto.scroll-depth::before{inset:-4%;transform:translate3d(0,var(--scroll-depth,0px),0) scale(1.06);will-change:transform}
.interior-hero.scroll-depth::before,.captura-interior.scroll-depth::after{
  transform:translate3d(0,var(--scroll-depth,0px),0);will-change:transform}

/* En las guías funciona también como indicador de lectura. */
.scroll-progress{position:fixed;z-index:80;left:0;top:0;width:100%;height:3px;pointer-events:none;
  transform:scaleX(var(--scroll-progress,0));transform-origin:left center;background:var(--accent);
  box-shadow:0 0 10px rgba(67,160,94,.22)}

@media (max-width:560px){
  html.scroll-fx .scroll-reveal{transform:translate3d(0,14px,0);transition-duration:.58s}
}

@media (prefers-reduced-motion:reduce){
  html.scroll-fx .scroll-reveal,html.scroll-fx .scroll-reveal.scroll-visible{opacity:1;transform:none;transition:none}
  html.scroll-fx .scroll-hero-item,html.scroll-fx .scroll-hero-item.scroll-hero-visible,
  html.scroll-fx .scroll-title.scroll-reveal,html.scroll-fx .scroll-title.scroll-reveal.scroll-visible{
    opacity:1;transform:none;clip-path:none;transition:none}
  .pantallazo-enlace{transform:none;transition:none}
  .imagen.foto.scroll-depth::before,.interior-hero.scroll-depth::before,.captura-interior.scroll-depth::after{
    transform:none;will-change:auto}
  .scroll-progress{display:none}
}