/* Reveal global: únicamente opacity. El !important neutraliza los transforms
   inline (scale/translate) que todavía intenta aplicar el runtime de Webflow. */
html.w-mod-js .scroll-into-view,
html.w-mod-js .hero-photo-reveal,
html.w-mod-js h1,
html.w-mod-js h2,
html.w-mod-js [class*="grow-"] {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 0.65s ease !important;
}

html.w-mod-js .scroll-into-view.is-visible,
html.w-mod-js .hero-photo-reveal.is-visible,
html.w-mod-js h1.is-visible,
html.w-mod-js h2.is-visible,
html.w-mod-js [class*="grow-"].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* En mobile, el letter-spacing de -4px del h1 (pensado para el tamaño de
   escritorio) se siente demasiado cerrado con el font-size más pequeño;
   se reduce a -2px solo en este breakpoint. */
@media screen and (max-width: 479px) {
  .h1.scroll-into-view.is-visible {
    letter-spacing: -0.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.w-mod-js .scroll-into-view,
  html.w-mod-js .hero-photo-reveal,
  html.w-mod-js h1,
  html.w-mod-js h2,
  html.w-mod-js [class*="grow-"] {
    opacity: 1 !important;
    transition: none !important;
  }
}