body.modo-mundial {
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

body.modo-mundial #mundialRain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

body.modo-mundial #sidebarOverlay {
    position: fixed;
    z-index: 190;
}

body.modo-mundial #sidebarPanel {
    position: fixed;
    z-index: 200;
}

body.modo-mundial #mundialScrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

body.modo-mundial #mundialScrollProgress .bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #74acdf 0%, #ffffff 50%, #74acdf 100%);
    box-shadow: 0 0 10px rgba(116, 172, 223, 0.45);
    transition: width 0.08s linear;
}

body.modo-mundial .gold-gradient:hover,
body.modo-mundial a.gold-gradient:hover,
body.modo-mundial button.gold-gradient:hover,
body.modo-mundial .gold-gradient:focus-visible,
body.modo-mundial a.gold-gradient:focus-visible,
body.modo-mundial button.gold-gradient:focus-visible {
    animation: mundialGlow 2.2s ease-in-out infinite;
}

@keyframes mundialGlow {
    0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0), 0 0 18px rgba(116, 172, 223, 0.0); }
    50% { box-shadow: 0 0 22px rgba(116, 172, 223, 0.35), 0 0 16px rgba(255, 255, 255, 0.35); }
    100% { box-shadow: 0 0 0 rgba(116, 172, 223, 0.0), 0 0 18px rgba(255, 255, 255, 0.0); }
}

body.modo-mundial .product-card {
    position: relative;
    border: 1px solid rgba(226, 232, 240, 1);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

body.modo-mundial .product-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, #74acdf 0%, #ffffff 50%, #74acdf 100%) border-box;
    box-shadow: 0 14px 30px rgba(116, 172, 223, 0.15);
}

body.modo-mundial .mundial-drop {
    position: absolute;
    top: -12vh;
    will-change: transform;
    pointer-events: none;
    opacity: 0.85;
    filter: drop-shadow(0 10px 14px rgba(116, 172, 223, 0.08));
    animation-name: mundialFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

body.modo-mundial .mundial-drop img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes mundialFall {
    0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    100% { transform: translate3d(0, 112vh, 0) rotate(360deg); }
}