/* =====================================================================
   ANIMACIONES — movimientos que se repiten en varias secciones
   ===================================================================== */

/* Huinchas de texto o fotos que se desplazan hacia la izquierda sin fin.
   El contenido se duplica con JS (js/huinchas.js) para que el loop no tenga saltos. */
@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Brillo que recorre los precios cobre (.precio-brillo) */
@keyframes brillo {
  0%        { background-position: -200% 0; }
  60%, 100% { background-position: 200% 0; }
}

/* Elemento que flota suave arriba y abajo */
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* Vapor de la taza (sección Trae tu tazón) */
@keyframes vapor {
  0%   { opacity: 0; transform: translateY(8px) scaleX(1); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-34px) scaleX(1.4); }
}

/* Entrada del hero */
@keyframes subir {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* Zoom lento de fotos (efecto "Ken Burns") */
@keyframes zoom-lento {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14) translate(-2%, -2%); }
}

/* Pop up: fondo y tarjeta */
@keyframes aparecer-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes entrar-tarjeta {
  0%   { opacity: 0; transform: translateY(40px) scale(.94) rotate(-1.5deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.01) rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}

/* Botón flotante: entrada con rebote y "saludo" del ícono */
@keyframes entrar-boton {
  0%   { opacity: 0; transform: translateY(30px); }
  70%  { transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes saludar {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-14deg); }
  97% { transform: rotate(12deg); }
}