/* Fondo web liviano: SVG locales + transformaciones de compositor. Sin vídeo, canvas ni scripts. */
/* Las páginas interiores optan por este tema sin alterar los formularios o la navegación. */
body.site-motion-page { background: transparent; position: relative; isolation: isolate; }
body.site-motion-page .page-motion-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body.site-motion-page .page-motion-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,248,240,.34), rgba(255,248,240,.14) 42%, rgba(255,248,240,.42)),
    linear-gradient(90deg, rgba(255,248,240,.28), rgba(255,248,240,.08) 50%, rgba(255,248,240,.3));
}
body.site-motion-page > main, body.site-motion-page > footer,
body.site-motion-page > header:not(.nav) { position: relative; z-index: 1; }
body.site-motion-page .seo-page, body.site-motion-page .legal-page { background: transparent; }
/* La cabecera editorial mantiene su luz original dejando ver las ondas. */
body.site-motion-page .seo-hero {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,248,240,.48));
}
/* Texto legal sobre una veladura clara y continua, independiente de la posición de la onda. */
body.site-motion-page .legal-container {
  background: rgba(255,248,240,.84); padding-block: 36px 70px;
}
.page-motion-bg { background: #fff8f0; }
.page-motion-art { position: absolute; inset: 0; overflow: hidden; }
/* La misma estructura continua del hero, más lenta y tenue para no competir con el contenido. */
.page-flow-track {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  display: flex; animation: pageWaveCycle 32s linear infinite;
}
.page-flow-tile {
  flex: 0 0 50%;
  background: url('/assets/motion/page-flow.svg') center / 100% 100% no-repeat;
}
.hero { background: #291910; }
.hero-graphic {
  position: absolute; inset: -3%; z-index: 0; overflow: hidden; pointer-events: none;
  background: url('/assets/motion/hero-flow.svg') center / cover no-repeat;
}
/* Dos piezas idénticas: al terminar -50%, el siguiente fotograma coincide con el primero.
   Avance lineal permanente, sin alternar, pausa, fade ni transición al reiniciar. */
.hero-flow-track {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  display: flex; animation: heroWaveCycle 20s linear infinite;
}
.hero-flow-tile {
  flex: 0 0 50%;
  background: url('/assets/motion/hero-wave-tile.svg') center / 100% 100% no-repeat;
}
@keyframes heroWaveCycle { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes pageWaveCycle { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* Las tres bandas ondulan en móvil y escritorio; la base permanece estable para legibilidad. */
@media (max-width: 680px) {
  .hero-graphic { inset: 0; background-position: 51% center; }
  /* Periodo más ancho: en móvil ambas ondas mantienen curvas suaves. */
  .hero-flow-track, .page-flow-track { width: 300%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-flow-track, .hero-flow-track { animation: none !important; transform: none !important; }
}