/* Extraído de index.html (bloque de estilo #3) */
        @keyframes splash-pulse {
            0% {
                transform: scale(0.8);
                opacity: 0.8;
            }

            100% {
                transform: scale(1.4);
                opacity: 0;
            }
        }

        @keyframes splash-progress {
            0% {
                transform: translateX(-100%);
                width: 30%;
            }

            50% {
                width: 60%;
            }

            100% {
                transform: translateX(350%);
                width: 30%;
            }
        }

        #startup-indicator.fade-out {
            opacity: 0;
            pointer-events: none;
            backdrop-filter: blur(20px);
        }

        #startup-indicator.fade-out .splash-content {
            transform: scale(1.1);
            filter: blur(10px);
        }

        /* ===== MUNDIAL 2026 LOADER EFFECTS ===== */
        #startup-indicator.mundial-active {
            background: radial-gradient(circle at center, #022c22 0%, #011c16 60%, #000c0a 100%) !important;
        }

        #startup-indicator.mundial-active #splash-pulse-ring {
            border: 2px solid rgba(34, 197, 94, 0.4);
            box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
        }

        #startup-indicator.mundial-active #splash-status-text {
            color: #fbbf24 !important; /* Golden status text */
            text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
        }

        /* Tilted orbit path */
        .splash-orbit-path {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 70px;
            margin-top: -35px;
            margin-left: -125px;
            border: 1.5px dashed rgba(251, 191, 36, 0.25); /* Golden dashed orbit */
            border-radius: 50%;
            transform: rotateX(72deg) rotateY(-12deg);
            pointer-events: none;
            z-index: 1;
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.05);
        }

        /* 3D Orbiting container and ball */
        .splash-orbit-container {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 70px;
            margin-top: -35px;
            margin-left: -125px;
            pointer-events: none;
            transform: rotateX(72deg) rotateY(-12deg);
            transform-style: preserve-3d;
            z-index: 3;
        }

        .orbiting-ball {
            position: absolute;
            width: 24px;
            height: 24px;
            line-height: 24px;
            font-size: 20px;
            text-align: center;
            top: 50%;
            left: 50%;
            margin-top: -12px;
            margin-left: -12px;
            animation: orbitBall 5s linear infinite;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(34, 197, 94, 0.6);
        }

        @keyframes orbitBall {
            from {
                transform: rotate(0deg) translate(125px) rotate(0deg) rotateX(-72deg) rotateY(12deg);
            }
            to {
                transform: rotate(360deg) translate(125px) rotate(-360deg) rotateX(-72deg) rotateY(12deg);
            }
        }

        /* Progress track adjustments for the rolling ball */
        #startup-indicator.mundial-active .splash-content div[style*="width:180px"] {
            overflow: visible !important;
            position: relative;
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Tricolor/golden-green progress bar */
        #startup-indicator.mundial-active .splash-content div[style*="width:40%"] {
            background: linear-gradient(90deg, #22c55e, #eab308, #ef4444) !important; /* Tricolor gradient */
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
        }

        .splash-rolling-ball {
            position: absolute;
            top: -10px;
            width: 16px;
            height: 16px;
            font-size: 13px;
            line-height: 16px;
            text-align: center;
            pointer-events: none;
            animation: rollBall 2.5s infinite ease-in-out;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
        }

        @keyframes rollBall {
            0% {
                left: -8px;
                transform: rotate(0deg);
            }
            50% {
                left: calc(100% - 8px);
                transform: rotate(360deg);
            }
            100% {
                left: -8px;
                transform: rotate(720deg);
            }
        }