/* Igual que WEBAPP/src/styles/scroll-reveal.css — vista previa del panel */
.scroll-reveal {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-self: stretch;
  --sr-duration: 3s;
}

.scroll-reveal:not(.scroll-reveal--visible) {
  opacity: 0;
}

.scroll-reveal--lines-spring:not(.scroll-reveal--visible),
.scroll-reveal--lines-spring.scroll-reveal--visible {
  opacity: 1;
}

.scroll-reveal.scroll-reveal--visible {
  opacity: 1;
}

.scroll-reveal--fade:not(.scroll-reveal--visible) {
  opacity: 0;
  transition: none;
}
.scroll-reveal--fade.scroll-reveal--visible {
  transition: opacity calc(var(--sr-duration, 3s) * 0.2167) ease;
}

.scroll-reveal--slide-up:not(.scroll-reveal--visible) {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: none;
}
.scroll-reveal--slide-up.scroll-reveal--visible {
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.1833) ease,
    transform calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--slide-down:not(.scroll-reveal--visible) {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  transition: none;
}
.scroll-reveal--slide-down.scroll-reveal--visible {
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.1833) ease,
    transform calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--slide-left:not(.scroll-reveal--visible) {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  transition: none;
}
.scroll-reveal--slide-left.scroll-reveal--visible {
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.1833) ease,
    transform calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--slide-right:not(.scroll-reveal--visible) {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
  transition: none;
}
.scroll-reveal--slide-right.scroll-reveal--visible {
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.1833) ease,
    transform calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--zoom-in:not(.scroll-reveal--visible) {
  opacity: 0;
  transform: scale(0.94);
  transition: none;
}
.scroll-reveal--zoom-in.scroll-reveal--visible {
  transform: scale(1);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.1833) ease,
    transform calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--blur-in:not(.scroll-reveal--visible) {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 8px, 0);
  transition: none;
}
.scroll-reveal--blur-in.scroll-reveal--visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    filter calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.2) ease;
}

.scroll-reveal-word {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: baseline;
}

.scroll-reveal-char {
  display: inline-block;
  opacity: 0;
}

.scroll-reveal--letters-wave:not(.scroll-reveal--visible) .scroll-reveal-char--wave,
.scroll-reveal--letters-rise:not(.scroll-reveal--visible) .scroll-reveal-char--rise {
  opacity: 0;
  transform: translate3d(0, 0.42em, 0);
  transition: none;
}

.scroll-reveal--letters-wave.scroll-reveal--visible .scroll-reveal-char--wave {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.15) cubic-bezier(0.22, 1, 0.36, 1),
    transform calc(var(--sr-duration, 3s) * 0.15) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--ci, 0) * var(--sr-duration, 3s) * 0.009333);
}

.scroll-reveal--letters-rise.scroll-reveal--visible .scroll-reveal-char--rise {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.34, 1.56, 0.64, 1),
    transform calc(var(--sr-duration, 3s) * 0.1833) cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--ci, 0) * var(--sr-duration, 3s) * 0.010667);
}

.scroll-reveal-line--spring {
  display: block;
}

li.scroll-reveal-line--spring {
  display: list-item;
}

.scroll-reveal--lines-spring:not(.scroll-reveal--visible) .scroll-reveal-line--spring {
  opacity: 0;
  transform: translate3d(0, 1.35em, 0) scale(0.982);
  filter: blur(1.5px);
  transition: none;
}

.scroll-reveal--lines-spring.scroll-reveal--visible .scroll-reveal-line--spring {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.16) cubic-bezier(0.22, 1, 0.36, 1),
    transform calc(var(--sr-duration, 3s) * 0.26) cubic-bezier(0.28, 1.65, 0.42, 1),
    filter calc(var(--sr-duration, 3s) * 0.1833) ease;
  transition-delay: calc(var(--li, 0) * var(--sr-duration, 3s) * 0.026667);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.scroll-reveal--visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .scroll-reveal-img,
  .scroll-reveal-img.scroll-reveal-img--visible > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .scroll-reveal-char,
  .scroll-reveal--letters-wave.scroll-reveal--visible .scroll-reveal-char--wave,
  .scroll-reveal--letters-rise.scroll-reveal--visible .scroll-reveal-char--rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-reveal--lines-spring .scroll-reveal-line--spring {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

.about-preview .scroll-reveal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.about-preview .pp-layout-col .scroll-reveal {
  max-width: 100%;
}

/* Imágenes — alineado con WEBAPP/src/styles/image-scroll-reveal.css */
.scroll-reveal-img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-self: stretch;
  --sr-duration: 3s;
}

.scroll-reveal-img > * {
  max-width: 100%;
  box-sizing: border-box;
}

.scroll-reveal-img:not(.scroll-reveal-img--visible) > * {
  transition: none;
}

.scroll-reveal-img.scroll-reveal-img--visible > * {
  will-change: auto;
}

.scroll-reveal-img--fade-zoom:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: scale(0.86);
}
.scroll-reveal-img--fade-zoom.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.22) ease,
    transform calc(var(--sr-duration, 3s) * 0.22) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--slide-up:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}
.scroll-reveal-img--slide-up.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.2) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--slide-down:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: translate3d(0, -36px, 0);
}
.scroll-reveal-img--slide-down.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.2) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--slide-left:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: translate3d(48px, 0, 0);
}
.scroll-reveal-img--slide-left.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.2) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--slide-right:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: translate3d(-48px, 0, 0);
}
.scroll-reveal-img--slide-right.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.2) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--rotate-in:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: rotate(-11deg) scale(0.9);
}
.scroll-reveal-img--rotate-in.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: rotate(0) scale(1);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.26) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--flip-3d {
  perspective: 1100px;
}
.scroll-reveal-img--flip-3d:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: rotateY(-86deg);
  transform-style: preserve-3d;
}
.scroll-reveal-img--flip-3d.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: rotateY(0);
  transform-style: preserve-3d;
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.18) ease,
    transform calc(var(--sr-duration, 3s) * 0.3) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--skew-in:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: skewX(9deg) scale(0.94);
}
.scroll-reveal-img--skew-in.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: skewX(0) scale(1);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.24) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--sticker:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: rotate(-14deg) scale(0.82) translate3d(0, 28px, 0);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}
.scroll-reveal-img--sticker.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: rotate(-2.5deg) scale(1) translate3d(0, 0, 0);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.22) ease,
    transform calc(var(--sr-duration, 3s) * 0.32) cubic-bezier(0.28, 1.55, 0.42, 1),
    filter calc(var(--sr-duration, 3s) * 0.25) ease;
}

.scroll-reveal-img--unfold:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 50% 0%;
}
.scroll-reveal-img--unfold.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: 50% 0%;
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.15) ease,
    transform calc(var(--sr-duration, 3s) * 0.28) cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal-img--blur-in:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 12px, 0) scale(0.96);
}
.scroll-reveal-img--blur-in.scroll-reveal-img--visible > * {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    filter calc(var(--sr-duration, 3s) * 0.22) ease,
    transform calc(var(--sr-duration, 3s) * 0.22) ease;
}

.scroll-reveal-img--bounce-pop:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: scale(0.52);
}
.scroll-reveal-img--bounce-pop.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.18) ease,
    transform calc(var(--sr-duration, 3s) * 0.38) cubic-bezier(0.34, 1.65, 0.45, 1);
}

.scroll-reveal-img--tilt-3d {
  perspective: 1200px;
}
.scroll-reveal-img--tilt-3d:not(.scroll-reveal-img--visible) > * {
  opacity: 0;
  transform: rotateX(32deg) translate3d(0, 22%, -90px);
  transform-style: preserve-3d;
}
.scroll-reveal-img--tilt-3d.scroll-reveal-img--visible > * {
  opacity: 1;
  transform: rotateX(0) translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition:
    opacity calc(var(--sr-duration, 3s) * 0.2) ease,
    transform calc(var(--sr-duration, 3s) * 0.3) cubic-bezier(0.22, 1, 0.36, 1);
}

.about-preview .scroll-reveal-img {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.about-preview .pp-layout-col .scroll-reveal-img {
  max-width: 100%;
}