/* Movimiento editorial: acompaña la lectura, no compite con ella. */
:root {
  --mov-ease: cubic-bezier(.2, 0, 0, 1);
  --mov-in: cubic-bezier(.16, 1, .3, 1);
  --mov-q: 160ms;
  --mov-s: 420ms;
  --mov-l: 620ms;
}

@keyframes mov-aparece {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  body.srvposter .hero-txt > *,
  body.nosotros .n-hero__txt > * { animation: mov-aparece 420ms var(--mov-in) both; }
  body.srvposter .hero-txt > :nth-child(2),
  body.nosotros .n-hero__txt > :nth-child(2) { animation-delay: 50ms; }
  body.srvposter .hero-txt > :nth-child(3),
  body.nosotros .n-hero__txt > :nth-child(3) { animation-delay: 100ms; }
  body.nosotros .n-hero__txt > :nth-child(4) { animation-delay: 150ms; }

  body.srvposter .srv-hero__visual,
  body.nosotros .n-hero__visual { animation: mov-aparece 520ms var(--mov-in) both; }

  html.mov-ok body.srvposter .paso-card:not(.visto),
  html.mov-ok body.srvposter .srv-card:not(.visto),
  html.mov-ok body.nosotros .n-pilar:not(.visto),
  html.mov-ok body.nosotros .pieza:not(.visto),
  html.mov-ok body.nosotros .ejes:not(.visto) {
    opacity: 0;
    translate: 0 10px;
  }

  html.mov-ok body.srvposter .paso-card,
  html.mov-ok body.srvposter .srv-card,
  html.mov-ok body.nosotros .n-pilar,
  html.mov-ok body.nosotros .pieza,
  html.mov-ok body.nosotros .ejes {
    transition: opacity var(--mov-s) var(--mov-in) calc(var(--i, 0) * 60ms),
                translate var(--mov-s) var(--mov-in) calc(var(--i, 0) * 60ms),
                border-color 180ms ease;
  }

  html.mov-ok body.srvposter .srv-card:not(.visto) .srv-img svg,
  html.mov-ok body.nosotros .pieza:not(.visto) .pieza__grafica { opacity: .35; }
  html.mov-ok body.srvposter .srv-card .srv-img svg,
  html.mov-ok body.nosotros .pieza .pieza__grafica {
    opacity: 1;
    transition: opacity 520ms var(--mov-in) calc(var(--i, 0) * 60ms);
  }

  body.srvposter .srv-card:hover,
  body.srvposter .paso-card:hover,
  body.nosotros .pieza:hover { transform: none; }
  body.srvposter .srv-card:hover .srv-img svg { scale: 1.01; }

  body.srvposter .faq details[open] > p { animation: mov-aparece 260ms var(--mov-in) both; }
  body.srvposter .btn,
  body.nosotros .ver-todo {
    transition: color var(--mov-q) ease, background-color var(--mov-q) ease,
                border-color var(--mov-q) ease;
  }
  body.srvposter .btn:hover,
  body.srvposter .btn:active,
  body.nosotros .ver-todo:hover { transform: none; }
}

@media (hover: none), (pointer: coarse) {
  body.srvposter .srv-card,
  body.srvposter .paso-card,
  body.nosotros .pieza { transform: none !important; }
}

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