/* ═══════════════════════════════════════════════════════════════════════════
   Páginas · lo que se ve del movimiento en /conocenos, /nx600 y /producto
   (2-oct-2026). La lógica en /js/pagina.js; las piezas compartidas
   (.mov-sube, .mov-escalon, odómetro) en /css/movimiento.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* /conocenos · la franja de «Nosotros» de la portada viaja hasta esta foto
   (Mov.viaje en portada.js). overflow:clip para el parallax: la foto se
   agranda 14 % y no debe asomar fuera de la portada. */
.cn-hero { overflow: clip; }
.cn-hero__fondo { view-transition-name: cn-hero; }
/* «.cn-cifra span» es la etiqueta de abajo de cada cifra (bloque, 13 px,
   gris) y también alcanzaba al número envuelto para el odómetro: lo bajaba
   de renglón, separado de su «+», y lo dejaba chiquito y gris. */
.cn-cifra b > [data-odo] { display: inline; margin: 0; font-size: inherit; color: inherit; letter-spacing: inherit; }

/* /nx600 · el equipo de la pasarela de la portada viaja hasta este video. */
.nx-hero-image-wrap .hero-video { view-transition-name: nx600-equipo; }

/* /producto · cuando la ficha llega (pagina.js pone .pd-entra), la foto se
   asienta y lo demás sube escalonado. El nombre sube por palabra aparte, por
   eso no entra en el escalonado. */
.pd-entra .pd-img-panel { animation: pd-foto .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes pd-foto { from { opacity: 0; scale: .95; } to { opacity: 1; scale: 1; } }
.pd-entra .pd-info > :not(.pd-name) {
  animation: mov-sube .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(120ms + var(--j, 0) * 55ms);
}
.pd-name .mov-wi { --d: 80ms; }
.mov-quieto .pd-entra .pd-img-panel,
.mov-quieto .pd-entra .pd-info > * { animation: none !important; }

/* /blog · los artículos los pinta un embed ajeno (app.trysoro.com) y su HTML
   no se toca (ver blog.js): entran con una animación de CSS cada vez que
   aparecen, también al «Ver más», sin agregarles nada. */
.mov .soro-blog-card { animation: mov-sube .7s cubic-bezier(.16, 1, .3, 1) both; }
.mov-quieto .soro-blog-card { animation: none !important; }