/* ===== L.S.D · Personajes flotantes (burbujas tipo Messenger) ===== */
/* Capa dentro del inicio (.hero): las burbujas no salen de esa zona */
.hero{position:relative}
#burbujas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.bub{--c:#8b5cf6;position:absolute;left:0;top:0;width:76px;height:76px;border-radius:50%;border:0;padding:0;
 pointer-events:auto;cursor:pointer;touch-action:none;
 background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(20,18,45,.92) 70%);
 box-shadow:0 0 0 2px var(--c),0 0 18px var(--c),inset 0 0 14px rgba(255,255,255,.15);
 animation:brillo 3s ease-in-out infinite}
.bub .flip,.bub .cuerpo{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.bub.izq .flip{transform:scaleX(-1)}
.bub img{width:78%;height:78%;object-fit:contain;pointer-events:none;animation:caminar .7s ease-in-out infinite}
.bub.salto .cuerpo{animation:salto .4s}
.bub.quieta img{animation:none}
@keyframes caminar{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-4px)}}
@keyframes salto{40%{transform:scale(1.25)}}
@keyframes brillo{50%{box-shadow:0 0 0 2px var(--c),0 0 32px var(--c),0 0 52px var(--c),inset 0 0 14px rgba(255,255,255,.15)}}
.tip{--c:#8b5cf6;position:absolute;left:0;top:0;max-width:240px;background:#15132b;border:1px solid var(--c);
 border-radius:14px;padding:10px 14px;font-size:.9rem;color:var(--tx);box-shadow:0 0 18px var(--c);
 opacity:0;pointer-events:none;transition:opacity .2s}
.tip.on{opacity:1}
.tip b{display:block;color:var(--c);margin-bottom:2px}
@media(max-width:600px){.bub{width:58px;height:58px}}