/* Movimiento (fase 5): tokens (-s: salida, 75 % de la entrada), presión y keyframes. */
:root {
  --mv-corta: 120ms; --mv-media: 180ms; --mv-larga: 240ms; --mv-media-s: 135ms; --mv-larga-s: 180ms;
  --mv-curva: cubic-bezier(.23, 1, .32, 1); --mv-cajon: cubic-bezier(.32, .72, 0, 1);
  --mv: var(--mv-media) var(--mv-curva); --mv-presion: .97;
  --mv-c: background-color var(--mv), border-color var(--mv), color var(--mv); --mv-b: border-color var(--mv), background-color var(--mv);
}
.opcion, .tm-pagina { --mv-presion: .985; }
@media (prefers-reduced-motion: no-preference) {
  .boton:active:not(:disabled), .opcion:active:not(:disabled), .icono-boton:active, .tm-pagina:active, [data-anim]:active { transform: scale(var(--mv-presion)); }
  dialog.dialogo[open] { animation: mv-aparece var(--mv-larga) var(--mv-curva); }
}
@keyframes mv-sube { from { opacity: 0; transform: translateY(8px); } }
@keyframes mv-desde-lado { from { opacity: 0; transform: translateX(14px); } }
@keyframes mv-aparece { from { opacity: 0; transform: scale(.97); } }
@keyframes mv-salta { 0% { transform: scale(.8); } 55% { transform: scale(1.1); } }
@keyframes mv-sacudir { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(1px); } }