/* Celebrar (ENTREGA-DE-DISENO § Movimiento): al guardar un recuerdo las huellitas cruzan caminando,
   la confirmación entra con un rebote y bajan los banderines, todo en --dur-guardar (400 ms).
   Con «reducir movimiento» tokens.css apaga las animaciones y solo queda la opacidad. */

/* Guardado (02-captura-rapida-3) */
.guardado { align-items: center; justify-content: center; gap: 14px; text-align: center; }
.banderines { position: absolute; left: -20px; top: 0; max-width: none; pointer-events: none; }
.guardado__sello {
  width: 120px; height: 120px;
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  background: var(--color-salvia);
  display: flex; align-items: center; justify-content: center;
}
.guardado__titulo {
  font-family: var(--font-titulos); font-variation-settings: 'opsz' 30; font-weight: 800;
  font-size: 30px; line-height: 1.2; letter-spacing: -0.6px;
}
.guardado__nota { display: inline-block; font-size: 26px; line-height: 1.25; transform: rotate(-3deg); }
.guardado__texto { max-width: 260px; font-size: 15px; line-height: 1.33; color: var(--color-texto-suave); }
.guardado__acciones { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }
.guardado__otro { width: 100%; min-height: 58px; font-size: 18px; font-variation-settings: 'opsz' 18; }
.guardado__album {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  font-size: 15px; font-weight: 700;
}

/* Las huellitas que cruzan: empiezan y terminan invisibles. */
.guardado__huellas {
  position: absolute; left: 0; right: 0; top: 30%;
  display: flex; justify-content: space-between; padding: 0 6px; pointer-events: none;
}
.guardado__huella { opacity: 0; transform: rotate(90deg) translateX(-8px); }
.guardado__huella:nth-child(even) { transform: rotate(90deg) translateX(8px); }

.guardado--celebra .guardado__huella { animation: huella-cruza 160ms ease-out both; }
.guardado--celebra .guardado__huella:nth-child(2) { animation-delay: 48ms; }
.guardado--celebra .guardado__huella:nth-child(3) { animation-delay: 96ms; }
.guardado--celebra .guardado__huella:nth-child(4) { animation-delay: 144ms; }
.guardado--celebra .guardado__huella:nth-child(5) { animation-delay: 192ms; }
.guardado--celebra .guardado__huella:nth-child(6) { animation-delay: 240ms; }
.guardado--celebra .guardado__sello,
.guardado--celebra .guardado__titulo { animation: rebote var(--dur-guardar) cubic-bezier(.3, 1.4, .6, 1) both; }
.guardado--celebra .banderines { animation: banderines-bajan var(--dur-guardar) ease-out both; }
.guardado--celebra .guardado__nota,
.guardado--celebra .guardado__texto,
.guardado--celebra .guardado__acciones { animation: aparece var(--dur-guardar) ease-out both; }

@keyframes huella-cruza { 0% { opacity: 0; } 40% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes rebote { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes banderines-bajan { from { opacity: 0; transform: translateY(-24px); } }
@keyframes aparece { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Solo opacidad: la pantalla entera aparece (la transición de opacidad la deja tokens.css). */
  .guardado[data-entrando] { opacity: 0; }
}