/* ================================================
   BALONES FLOTANTES NAVBAR — MAQUIVER MUNDIAL 2026
   Archivo independiente — no modifica estilos base
   Subir a: /css/balones-mundial.css
   ================================================ */

/* Contener balones dentro del navbar */
.navbar {
    overflow: visible;
}

/* El nav-container siempre por encima */
.nav-container {
    position: relative;
    z-index: 1;
}

/* Capa de balones: ocupa todo el navbar, no bloquea clics */
.nav-balls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Estilo base de cada balón */
.nav-ball {
    position: absolute;
    line-height: 1;
    user-select: none;
    animation: navBallFloat ease-in-out infinite;
    will-change: transform;
}

/* Posición, tamaño, opacidad y timing distintos para cada balón */
.nav-ball:nth-child(1) { left:  3%; top: 15%; font-size: 20px; opacity: 0.28; animation-duration: 3.8s; animation-delay: 0.0s; }
.nav-ball:nth-child(2) { left: 11%; top: 52%; font-size: 14px; opacity: 0.20; animation-duration: 4.6s; animation-delay: 1.2s; }
.nav-ball:nth-child(3) { left: 22%; top: 18%; font-size: 22px; opacity: 0.25; animation-duration: 3.3s; animation-delay: 0.6s; }
.nav-ball:nth-child(4) { left: 36%; top: 58%; font-size: 12px; opacity: 0.18; animation-duration: 5.1s; animation-delay: 2.1s; }
.nav-ball:nth-child(5) { left: 50%; top: 20%; font-size: 18px; opacity: 0.22; animation-duration: 4.0s; animation-delay: 0.3s; }
.nav-ball:nth-child(6) { left: 63%; top: 55%; font-size: 24px; opacity: 0.26; animation-duration: 3.6s; animation-delay: 1.7s; }
.nav-ball:nth-child(7) { left: 76%; top: 12%; font-size: 16px; opacity: 0.20; animation-duration: 4.4s; animation-delay: 0.9s; }
.nav-ball:nth-child(8) { left: 87%; top: 48%; font-size: 20px; opacity: 0.24; animation-duration: 3.9s; animation-delay: 1.4s; }
.nav-ball:nth-child(9) { left: 95%; top: 22%; font-size: 13px; opacity: 0.18; animation-duration: 5.2s; animation-delay: 0.5s; }

/* Animación: flota arriba-abajo con rotación suave */
@keyframes navBallFloat {
    0%   { transform: translateY(0px)   rotate(0deg);   }
    30%  { transform: translateY(-9px)  rotate(108deg); }
    60%  { transform: translateY(-14px) rotate(216deg); }
    80%  { transform: translateY(-6px)  rotate(288deg); }
    100% { transform: translateY(0px)   rotate(360deg); }
}

/* En móvil se reducen a 5 balones para no saturar */
@media (max-width: 768px) {
    .nav-ball:nth-child(n+6) { display: none; }
    .nav-ball { font-size: 13px !important; opacity: 0.18 !important; }
}