body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
        }

        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }

        .tipo-btn {
            transition: all 0.2s ease;
            color: #4b5563;
        }
        .tipo-btn.active {
            background: #dc2626 !important;
            color: #fff !important;
            box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.55);
        }
        .tipo-btn:not(.active):hover {
            background: #f9fafb;
        }

        html {
            scroll-behavior: smooth;
        }

        #mobileMenu {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-6px);
            transition: opacity .2s ease, transform .2s ease;
        }
        #mobileMenu.open {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        #navHamburger[aria-expanded="true"] .icon-open { display: none; }
        #navHamburger[aria-expanded="true"] .icon-close { display: block; }
        #navHamburger .icon-close { display: none; }

        .cat-btn {
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .cat-btn.active {
            background: #111827;
            color: #fff;
            border-color: #111827;
        }

        .reel-card video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .store-btn {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .store-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -8px rgba(0,0,0,0.35);
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 0.35; }
            50% { opacity: 1; }
        }
        .loading-dot {
            animation: pulse-dot 1.2s ease-in-out infinite;
        }
        .loading-dot:nth-child(2) { animation-delay: 0.2s; }
        .loading-dot:nth-child(3) { animation-delay: 0.4s; }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .semana-track {
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }
        .semana-track > a {
            scroll-snap-align: start;
        }

        .remata-hoy-card {
            box-shadow: 0 0 0 3px #fbbf24, 0 10px 25px -5px rgba(251, 191, 36, 0.35);
        }
        .remata-hoy-card:hover {
            box-shadow: 0 0 0 3px #f59e0b, 0 14px 30px -5px rgba(245, 158, 11, 0.45);
        }

        .sort-btn {
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .sort-btn.active {
            background: #dc2626;
            color: #fff;
            border-color: #dc2626;
        }

        .marquee-wrap {
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        }
        .marquee-track {
            display: flex;
            width: max-content;
            gap: 2.5rem;
            animation: marquee-x 180s linear infinite;
        }
        .marquee-wrap:hover .marquee-track {
            animation-play-state: paused;
        }
        @keyframes marquee-x {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        .fuentes-track {
            display: flex;
            width: max-content;
            align-items: center;
            gap: 4.5rem;
            animation: marquee-x 320s linear infinite;
        }
        .marquee-wrap:hover .fuentes-track {
            animation-play-state: paused;
        }
        .fuente-logo {
            height: 2.75rem;
            width: auto;
            max-width: 9rem;
            object-fit: contain;
            opacity: 0.9;
            filter: grayscale(0.15);
        }
        @media (min-width: 640px) {
            .fuente-logo {
                height: 3.25rem;
                max-width: 11rem;
            }
        }

        .section-rule {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 2rem 0 1.25rem;
        }
        .section-rule::before,
        .section-rule::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #e5e7eb;
        }
        .section-rule span {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #6b7280;
            white-space: nowrap;
        }
    
#navHamburger[aria-expanded="true"] .icon-open { display: none; }
#navHamburger[aria-expanded="true"] .icon-close { display: block; }
#navHamburger .icon-close { display: none; }
#mobileMenu.open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }
.tools-panel { position: sticky; top: 5.5rem; }