--
/* 1. Posicionamento do Container */
#minha-imagem-flutuante {
    position: fixed !important;
    top: 50px !important;       /* Ajuste a distância do topo */
    right: 20px !important;     /* Ajuste a distância da direita */
    z-index: 999999 !important;
    line-height: 0 !important;
}

/* 2. Tamanho e Estilo da Imagem (Mantendo Grande) */
#minha-imagem-flutuante img {
    /* Ajuste o tamanho aqui (mude os 3 valores) */
    width: auto !important;
    max-width: 600px !important;
    min-width: 150px !important;
    height: auto !important;

    /* A NOVA ANIMAÇÃO - Mais lenta para ficar mais suave (5s) */
    animation: smoothFloat 5s ease-in-out infinite;
    
    /* Garante que não haja bordas ou sombras */
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* === A NOVA ANIMAÇÃO CORRIGIDA === */
/* Começa no zero, sobe, volta pro zero, desce, e volta pro zero.
Isso cria um ciclo contínuo sem 'pulos'. */
@keyframes smoothFloat {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-10px); /* Sobe um pouco */
    }
    50% {
        transform: translateY(0px);    /* Volta para o meio */
    }
    75% {
        transform: translateY(10px);  /* Desce um pouco */
    }
    100% {
        transform: translateY(0px);   /* Volta exatamente para o início */
    }
}
/* MOBILE */
@media (max-width: 768px) {
    #minha-imagem-flutuante {
        right: 0 !important;
        left: 0 !important;
        top: 20px !important;
        display: flex;
        justify-content: center;
    }

    #minha-imagem-flutuante img {
        width: 90vw !important;   /* ocupa 90% da largura da tela */
        max-width: 90vw !important;
        min-width: unset !important;
    }
}


----

/* Container */
.floating-balloons{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* Balão realista */
.balloon{
  position:absolute;
  width:120px;
  height:150px;
  border-radius:50% 50% 45% 45%;
  
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.35) 8%,
      rgba(255,255,255,0) 18%),
      
    radial-gradient(circle at 40% 35%,
      #ff6b6b 0%,
      #ff3b3b 45%,
      #c40000 100%);

  box-shadow:
    inset -10px -18px 30px rgba(0,0,0,.25),
    inset 8px 10px 18px rgba(255,255,255,.15),
    0 15px 30px rgba(255,0,0,.12);

  opacity:.18;
  filter:blur(.3px);

  animation:float 18s ease-in-out infinite;
}

/* Nó do balão */
.balloon::before{
  content:"";
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  
  width:16px;
  height:18px;
  
  background:#b30000;
  clip-path:polygon(50% 100%, 0 0, 100% 0);
}

/* Corda */
.balloon::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  
  width:1.5px;
  height:120px;
  
  background:rgba(255,255,255,.25);

  transform:translateX(-50%);
}

/* Posições */
.balloon1{
  left:8%;
  bottom:-180px;
  animation-delay:0s;
}

.balloon2{
  left:55%;
  width:90px;
  height:120px;
  bottom:-220px;
  opacity:.14;
  animation-delay:6s;
}

.balloon3{
  right:6%;
  width:140px;
  height:170px;
  bottom:-250px;
  opacity:.12;
  animation-delay:12s;
}

/* Movimento */
@keyframes float{
  0%{
    transform:translateY(0) translateX(0) rotate(-2deg);
  }

  25%{
    transform:translateY(-250px) translateX(12px) rotate(2deg);
  }

  50%{
    transform:translateY(-500px) translateX(-10px) rotate(-1deg);
  }

  75%{
    transform:translateY(-750px) translateX(15px) rotate(2deg);
  }

  100%{
    transform:translateY(-1100px) translateX(-8px) rotate(-2deg);
  }
}

---