/* 🏷️ Badges flotantes — se mueven por toda la imagen */
/* Cada badge explora un área de ~300px de diámetro sobre la foto */

@keyframes float-1 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  6%   { transform: translate(-40px, -60px) rotate(-4deg); opacity: 1; }
  18%  { transform: translate(60px, -100px) rotate(6deg); opacity: 0.9; }
  30%  { transform: translate(-70px, -40px) rotate(-5deg); opacity: 0.75; }
  42%  { transform: translate(50px, 30px) rotate(4deg); opacity: 0.65; }
  54%  { transform: translate(-80px, 80px) rotate(-6deg); opacity: 0.55; }
  66%  { transform: translate(70px, 60px) rotate(3deg); opacity: 0.45; }
  78%  { transform: translate(-30px, 90px) rotate(-3deg); opacity: 0.35; }
  90%  { transform: translate(20px, 40px) rotate(2deg); opacity: 0.2; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-2 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  7%   { transform: translate(70px, -50px) rotate(5deg); opacity: 1; }
  20%  { transform: translate(-30px, -90px) rotate(-4deg); opacity: 0.85; }
  33%  { transform: translate(80px, -30px) rotate(6deg); opacity: 0.7; }
  46%  { transform: translate(-60px, 50px) rotate(-5deg); opacity: 0.6; }
  58%  { transform: translate(40px, 90px) rotate(4deg); opacity: 0.5; }
  70%  { transform: translate(-80px, 40px) rotate(-3deg); opacity: 0.4; }
  82%  { transform: translate(50px, -10px) rotate(2deg); opacity: 0.3; }
  92%  { transform: translate(-20px, 10px) rotate(-1deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-3 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  6%   { transform: translate(-60px, 40px) rotate(-3deg); opacity: 1; }
  19%  { transform: translate(40px, 90px) rotate(5deg); opacity: 0.85; }
  32%  { transform: translate(-80px, 20px) rotate(-6deg); opacity: 0.7; }
  45%  { transform: translate(70px, -50px) rotate(4deg); opacity: 0.6; }
  58%  { transform: translate(-50px, -90px) rotate(-4deg); opacity: 0.5; }
  70%  { transform: translate(30px, 50px) rotate(3deg); opacity: 0.4; }
  82%  { transform: translate(-40px, -20px) rotate(-2deg); opacity: 0.3; }
  92%  { transform: translate(10px, -10px) rotate(1deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-4 {
  0%   { transform: translate(0px, 0px) scale(0.85) rotate(0deg); opacity: 0; }
  7%   { transform: translate(-50px, -70px) scale(0.95) rotate(-5deg); opacity: 1; }
  20%  { transform: translate(60px, -20px) scale(1.05) rotate(4deg); opacity: 0.85; }
  33%  { transform: translate(-70px, 60px) scale(0.95) rotate(-5deg); opacity: 0.7; }
  46%  { transform: translate(50px, -80px) scale(0.9) rotate(5deg); opacity: 0.6; }
  58%  { transform: translate(-60px, -40px) scale(0.85) rotate(-4deg); opacity: 0.5; }
  70%  { transform: translate(80px, 20px) scale(0.9) rotate(3deg); opacity: 0.4; }
  82%  { transform: translate(-30px, 50px) scale(0.88) rotate(-2deg); opacity: 0.25; }
  92%  { transform: translate(15px, -15px) scale(0.85) rotate(1deg); opacity: 0.12; }
  100% { transform: translate(0px, 0px) scale(0.85) rotate(0deg); opacity: 0; }
}

@keyframes float-5 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  5%   { transform: translate(60px, 50px) rotate(4deg); opacity: 1; }
  18%  { transform: translate(-70px, 90px) rotate(-6deg); opacity: 0.85; }
  31%  { transform: translate(80px, -40px) rotate(5deg); opacity: 0.7; }
  44%  { transform: translate(-50px, -80px) rotate(-4deg); opacity: 0.6; }
  57%  { transform: translate(40px, 60px) rotate(3deg); opacity: 0.5; }
  70%  { transform: translate(-80px, -20px) rotate(-5deg); opacity: 0.4; }
  82%  { transform: translate(60px, -60px) rotate(3deg); opacity: 0.3; }
  92%  { transform: translate(-15px, 20px) rotate(-1deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-6 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  6%   { transform: translate(-80px, -30px) rotate(-5deg); opacity: 1; }
  19%  { transform: translate(30px, -90px) rotate(4deg); opacity: 0.85; }
  32%  { transform: translate(-40px, 70px) rotate(-4deg); opacity: 0.7; }
  45%  { transform: translate(90px, 10px) rotate(6deg); opacity: 0.6; }
  58%  { transform: translate(-70px, -60px) rotate(-5deg); opacity: 0.5; }
  70%  { transform: translate(50px, 80px) rotate(4deg); opacity: 0.4; }
  82%  { transform: translate(-20px, -40px) rotate(-2deg); opacity: 0.3; }
  92%  { transform: translate(25px, 5px) rotate(1deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-7 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  7%   { transform: translate(50px, -80px) rotate(3deg); opacity: 1; }
  20%  { transform: translate(-80px, -10px) rotate(-5deg); opacity: 0.85; }
  33%  { transform: translate(40px, 80px) rotate(4deg); opacity: 0.7; }
  46%  { transform: translate(-60px, -70px) rotate(-5deg); opacity: 0.6; }
  58%  { transform: translate(80px, -30px) rotate(3deg); opacity: 0.5; }
  70%  { transform: translate(-30px, 60px) rotate(-3deg); opacity: 0.4; }
  82%  { transform: translate(60px, 40px) rotate(2deg); opacity: 0.3; }
  92%  { transform: translate(-10px, -20px) rotate(-1deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-8 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  6%   { transform: translate(-60px, 80px) rotate(-4deg); opacity: 1; }
  19%  { transform: translate(80px, 30px) rotate(5deg); opacity: 0.85; }
  32%  { transform: translate(-40px, -90px) rotate(-5deg); opacity: 0.7; }
  45%  { transform: translate(70px, -10px) rotate(4deg); opacity: 0.6; }
  58%  { transform: translate(-80px, 60px) rotate(-4deg); opacity: 0.5; }
  70%  { transform: translate(30px, -70px) rotate(3deg); opacity: 0.4; }
  82%  { transform: translate(-50px, 20px) rotate(-2deg); opacity: 0.3; }
  92%  { transform: translate(20px, 30px) rotate(2deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

@keyframes float-9 {
  0%   { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
  7%   { transform: translate(30px, -40px) rotate(3deg); opacity: 1; }
  20%  { transform: translate(-90px, -60px) rotate(-6deg); opacity: 0.85; }
  33%  { transform: translate(50px, 70px) rotate(5deg); opacity: 0.7; }
  46%  { transform: translate(-60px, -30px) rotate(-4deg); opacity: 0.6; }
  58%  { transform: translate(40px, -90px) rotate(4deg); opacity: 0.5; }
  70%  { transform: translate(-70px, 50px) rotate(-5deg); opacity: 0.4; }
  82%  { transform: translate(80px, -10px) rotate(3deg); opacity: 0.3; }
  92%  { transform: translate(-25px, 15px) rotate(-2deg); opacity: 0.15; }
  100% { transform: translate(0px, 0px) rotate(0deg); opacity: 0; }
}

/* Clases — ciclos largos para movimiento suave */
.animate-float-1 { animation: float-1 20s ease-in-out infinite; pointer-events: none; }
.animate-float-2 { animation: float-2 24s ease-in-out infinite; pointer-events: none; }
.animate-float-3 { animation: float-3 22s ease-in-out infinite; pointer-events: none; }
.animate-float-4 { animation: float-4 26s ease-in-out infinite; pointer-events: none; }
.animate-float-5 { animation: float-5 18s ease-in-out infinite; pointer-events: none; }
.animate-float-6 { animation: float-6 28s ease-in-out infinite; pointer-events: none; }
.animate-float-7 { animation: float-7 20s ease-in-out infinite; pointer-events: none; }
.animate-float-8 { animation: float-8 25s ease-in-out infinite; pointer-events: none; }
.animate-float-9 { animation: float-9 23s ease-in-out infinite; pointer-events: none; }