:root { --radio-morph: 28px; --radio-morph-fila: 12px; --fondo-morph: Canvas; --filo-morph: transparent; }
::view-transition-group(morph) {
  animation-duration: 0.45s;
  animation-timing-function: var(--curva-cajon, cubic-bezier(0.32, 0.72, 0, 1));
  border-radius: var(--radio-morph);
  overflow: clip;
  background: var(--fondo-morph);
  box-shadow: 0 0 0 1px var(--filo-morph);
}
@supports (animation-timing-function: linear(0, 1)) {
  ::view-transition-group(morph) {
    animation-timing-function: linear(0, 0.0128, 0.0463, 0.0943, 0.1519, 0.2151, 0.2809, 0.347, 0.4118, 0.474, 0.5327,
      0.5875, 0.638, 0.6842, 0.726, 0.7635, 0.797, 0.8267, 0.8529, 0.8758, 0.8957, 0.913, 0.9279, 0.9406, 0.9515, 0.9607,
      0.9685, 0.975, 0.9804, 0.9849, 0.9885, 0.9915, 0.9939, 0.9959, 0.9974, 0.9986, 0.9995, 1.0002, 1.0007, 1.0011, 1);
  }
}
::view-transition-old(morph), ::view-transition-new(morph) { height: 100%; object-fit: none; object-position: 0 0; }
::view-transition-old(morph) { animation: 0.12s var(--curva-salida, ease-out) both kit-morph-sale; }
::view-transition-new(morph) { animation: 0.28s var(--curva-salida, ease-out) 0.06s both kit-morph-entra; }
::view-transition-group(morph-fila) {
  animation-duration: 0.45s;
  animation-timing-function: var(--curva-cajon, cubic-bezier(0.32, 0.72, 0, 1));
  border-radius: var(--radio-morph-fila);
  overflow: clip;
}
::view-transition-old(morph-fila), ::view-transition-new(morph-fila) { height: 100%; object-fit: cover; object-position: 0 50%; }
::view-transition-old(morph-fila) { animation: 0.2s var(--curva-salida, ease-out) both kit-morph-sale; }
::view-transition-new(morph-fila) { animation: 0.3s var(--curva-salida, ease-out) 0.08s both kit-morph-aparece; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
:root.morfando-morph-fila::view-transition-old(root), :root.morfando-morph-fila::view-transition-new(root) { animation: none; }
@keyframes kit-morph-sale { to { opacity: 0; } }
@keyframes kit-morph-entra { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes kit-morph-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
