@media (prefers-reduced-motion: no-preference) {
  .hero.is-particle-fallback .hero-canvas {
    filter: blur(.18px);
  }

  html {
    scroll-behavior: smooth;
  }

  /* ---------- Entrada al hacer scroll ---------- */
  .motion-ready .motion-reveal,
  .motion-ready .service-list article,
  .motion-ready .price-card {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(34px);
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1), filter .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
  }

  .motion-ready .motion-reveal.is-visible,
  .motion-ready .service-list article.is-visible,
  .motion-ready .price-card.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  /* Los paneles a todo el ancho aparecen sin mover sus bordes. */
  .motion-ready .clients-image.motion-reveal,
  .motion-ready .ticker.motion-reveal,
  .motion-ready footer.motion-reveal {
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* Las tarjetas del proceso solo cambian de opacidad: su transform
     lo maneja el escalonado por scroll. */
  .motion-ready .workflow-cards article {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .12s linear, background-color .35s ease, box-shadow .35s ease;
  }

  .motion-ready .workflow-cards article.is-visible {
    opacity: 1;
  }

  .motion-ready .service-list article:nth-child(2),
  .motion-ready .workflow-cards article:nth-child(2),
  .motion-ready .price-card:nth-child(2) {
    transition-delay: .08s;
  }

  .motion-ready .service-list article:nth-child(3),
  .motion-ready .workflow-cards article:nth-child(3) {
    transition-delay: .16s;
  }

  .motion-ready .service-list article:nth-child(4),
  .motion-ready .workflow-cards article:nth-child(4) {
    transition-delay: .24s;
  }

  /* ---------- Hero ---------- */
  .hero-label,
  .hero-title,
  .hero-side,
  .hero-note,
  .hero-figures {
    animation: hero-enter .85s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hero-title {
    animation-delay: .08s;
  }

  .hero-side {
    animation-delay: .16s;
  }

  .hero-note,
  .hero-figures {
    animation-delay: .26s;
  }

  /* ---------- Enlaces del header: las letras suben y cambian ---------- */
  .text-swap {
    display: inline-flex;
    overflow: hidden;
    vertical-align: top;
  }

  .text-swap__character {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
  }

  .text-swap__character > span {
    display: block;
    height: 1.2em;
    transition: transform .58s cubic-bezier(.16, 1, .3, 1), color .3s ease;
  }

  .text-swap__character > span:last-child {
    color: var(--star-yellow);
  }

  .text-swap:hover .text-swap__character > span,
  .text-swap:focus-visible .text-swap__character > span {
    transform: translateY(-100%);
  }

  /* ---------- Imágenes ---------- */
  .case-media > img,
  .intro-images img,
  .service-feature img {
    transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .7s cubic-bezier(.16, 1, .3, 1);
  }

  @media (hover: hover) {
    .case:hover .case-media:not(.case-media--pieces) > img {
      transform: scale(1.035);
      filter: saturate(1.08);
    }
  }

  /* ---------- Botones ---------- */
  .button,
  .footer-button,
  .price-card a {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  }

  @media (hover: hover) {
    .button:hover,
    .footer-button:hover,
    .price-card a:hover {
      transform: translateY(-2px);
    }
  }

  .service-list article,
  .service-list h3 {
    transition: border-color .35s ease, color .35s ease, opacity .75s cubic-bezier(.16, 1, .3, 1), filter .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
  }

  .intro-status i {
    animation: availability-pulse 1.7s ease-in-out infinite;
  }

  /* ---------- Banda ---------- */
  .ticker > div {
    width: max-content;
    animation: ticker-scroll 26s linear infinite;
    will-change: transform;
  }

  /* ---------- Principios ---------- */
  [data-clients-carousel].is-entering .client-main > p,
  [data-clients-carousel].is-entering .client-person {
    animation: client-enter .52s cubic-bezier(.16, 1, .3, 1) both;
  }

  .site-header nav.is-open {
    animation: mobile-menu-enter .35s cubic-bezier(.16, 1, .3, 1) both;
  }
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes availability-pulse {
  0% { box-shadow: 0 0 0 0 rgba(55, 226, 196, .55); }
  70% { box-shadow: 0 0 0 7px rgba(55, 226, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(55, 226, 196, 0); }
}

/* script.js triplica el contenido de la banda: un tercio es una vuelta. */
@keyframes ticker-scroll {
  to { transform: translateX(-33.333%); }
}

@keyframes client-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mobile-menu-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .site-header nav.is-open {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}