/* Base Reset */
        * { margin:0; padding:0; box-sizing:border-box }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Roboto Condensed', sans-serif;
            background: linear-gradient(to bottom, #000000, #030303);
            color: #f0f0f0; 
            line-height: 1.6;
            overflow-x: hidden;
            padding-top: 75px; 
        }
        a { text-decoration: none; color: inherit; }

        /* Botão Principal Dourado Degradê e Descolado */
        .btn-cta {
            background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%); 
            color: #000;
            padding: 18px 45px;
            border-radius: 8px; 
            font-weight: 700;
            font-size: 19px;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.7); 
            transition: all 0.3s ease;
            display: inline-block;
            text-transform: uppercase;
            border: none;
            position: relative;
            transform: skewX(-5deg); 
            letter-spacing: 1px;
        }
        .btn-cta:hover {
            background: linear-gradient(135deg, #fff04a 0%, #D4AF37 100%);
            transform: translateY(-3px) skewX(-5deg) scale(1.02); 
            box-shadow: 0 5px 35px rgba(255, 240, 0, 0.8);
        }
        
        /* Layout */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .section { padding: 90px 20px; text-align: center; }
        .section h2 { 
            font-family: 'Bebas Neue', sans-serif; 
            font-size: 48px; 
            margin-bottom: 50px; 
            font-weight: normal; 
            letter-spacing: 2px; 
            text-transform: uppercase;
            color: #FFD700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
        }
        .black-section { background: #080808; }

        /* Header Fixo */
        .main-header {
            position: fixed; top: 0; left: 0; right: 0;
            background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(5px);
            padding: 15px 0; box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); z-index: 999;
        }
        .main-header .container { display: flex; justify-content: space-between; align-items: center; }
        .main-header .logo {
            font-family: 'Bebas Neue', sans-serif; font-size: 28px;
            color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
            letter-spacing: 1.5px; transform: skewX(-5deg);
        }
        .main-header .nav { display: flex; align-items: center; gap: 25px; }
        .main-header .nav a { font-size: 16px; color: #ccc; font-weight: 400; transition: 0.3s; text-transform: uppercase; letter-spacing: 0.8px; }
        .main-header .nav a:hover { color: #FFD700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
        
        /* Elementos Especiais no Header */
        @keyframes pulseLoja {
            0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); transform: scale(1) skewX(-5deg); }
            50% { box-shadow: 0 0 30px rgba(255, 240, 0, 0.9); transform: scale(1.07) skewX(-5deg); }
            100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); transform: scale(1) skewX(-5deg); }
        }
        .btn-loja {
            background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%); color: #000;
            padding: 8px 20px; border-radius: 6px; font-weight: 700; text-shadow: none; 
            animation: pulseLoja 3.7s infinite ease-in-out; margin: 0;
            transform: skewX(-5deg); box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        }
        .cupom-tag {
            background: #151515; border: 2px solid #FFD700; color: #FFD700;
            padding: 6px 14px; border-radius: 6px; font-weight: 700; 
            font-size: 14px; box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
            text-transform: none; transform: skewX(-3deg);
        }
        .btn-suporte { background: #00e676; color: #000; padding: 8px 16px; border-radius: 6px; font-weight: 700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); transform: skewX(-5deg); }
        .btn-discord { background: #7289da; color: #fff; padding: 8px 16px; border-radius: 6px; font-weight: 700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.4); transform: skewX(-5deg); }

        /* HERO Section (Ajustado para Sprites) */
        #hero-sprites {
            background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%), url('/layout/images/geral/background-sprites.png') center/cover no-repeat;
            padding: 180px 20px 120px; position: relative;
            min-height: 400px;
        }
        #hero-sprites h1 { font-family: 'Bebas Neue', sans-serif; font-size: 60px; color: #fff; text-shadow: 0 0 20px rgba(255, 255, 255, 0.9); }
        #hero-sprites p { font-family: 'Roboto Condensed', sans-serif; font-size: 24px; color: #eee; }
        
        /* CARD DE PRODUTO INDIVIDUAL (Scripts/Sprites) */
        .scripts { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
        .card {
            background: #1a1a1a; border: 2px solid rgba(255, 215, 0, 0.5); 
            padding: 30px; border-radius: 12px; width: 340px; position: relative;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); transition: all 0.3s ease;
            transform: skewX(-2deg); 
        }
        .card:hover { transform: translateY(-8px) skewX(-2deg) scale(1.02); box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2); }
        .card h3 { font-family: 'Bebas Neue', sans-serif; color: #FFD700; font-size: 30px; letter-spacing: 1.2px; }
        .card li i { margin-right: 10px; font-size: 20px; color: #FFD700; } 

        /* Elemento Visual Exclusivo para Sprites */
        .sprite-preview {
            height: 150px;
            background-size: cover;
            background-position: center;
            border-radius: 6px;
            margin-bottom: 20px;
            border: 2px solid #FFD70055;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
        }

        /* PREÇOS Interativos */
        .price-info { border: 1px dashed #444; padding: 15px 10px; margin-bottom: 20px; background: #000; transition: all 0.3s; }
        .card:hover .price-info { border-color: #FFD700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
        .price-main { font-size: 36px; font-weight: 800; color: #00e676; text-shadow: 0 0 8px #00e676aa; } 
        .cupom-highlight { font-size: 14px; color: #FFD700; font-weight: bold; display: block; margin-top: 5px; }

        /* BOTÕES DE AÇÃO REVISADOS (Duas Camadas) */
        .card-actions {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; padding-top: 10px;
        }

        .btn-compra-final {
            width: 100%; padding: 15px 35px; border-radius: 6px;
            font-weight: 700; font-size: 18px; transform: skewX(5deg);
            background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
            color: #000; box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
            transition: all 0.3s ease;
        }
        .btn-compra-final:hover {
            box-shadow: 0 5px 35px rgba(255, 240, 0, 0.8);
            transform: translateY(-2px) skewX(5deg);
        }
        
        /* Botão para "Ver Imagem" no lugar de "Ver Vídeo" */
        .btn-image-new {
            width: 100%; padding: 10px 35px; border-radius: 6px;
            font-weight: 500; font-size: 16px; transform: skewX(5deg);
            background: #222; color: #00bcd4; border: 1px solid #00bcd4;
            transition: all 0.3s ease;
        }
        .btn-image-new:hover {
            background: #333; color: #00e6ff; border-color: #00e6ff;
            transform: skewX(5deg) scale(1.01);
        }

        /* Cores de Categoria (Sprites) */
        .category-section {
            padding: 100px 20px; border-bottom: 5px solid; 
            margin-bottom: 40px; margin-top: 0;
            background-size: cover !important; background-blend-mode: overlay;
        }
        
        /* TIBIA/OT - Sprites (Reutiliza cores) */
        #tibia { border-top-color: #ff9f00; background: linear-gradient(180deg, #1a1a1aee 0%, #080808dd 100%), url('/layout/images/geral/tibia.png') center/cover no-repeat; }
        #tibia h2 { color: #ff9f00; text-shadow: 0 0 15px #ff9f00aa; }

        /* PXG - Sprites (Reutiliza cores) */
        #pxg { border-top-color: #00bcd4; background: linear-gradient(180deg, #1a1a1aee 0%, #080808dd 100%), url('/layout/images/geral/pxg.png') center/cover no-repeat; }
        #pxg h2 { color: #00bcd4; text-shadow: 0 0 15px #00bcd4aa; }

        /* NARUTIBIA - Sprites (Reutiliza cores) */
        #narutibia { border-top-color: #e91e63; background: linear-gradient(180deg, #1a1a1aee 0%, #080808dd 100%), url('/layout/images/geral/video.png') center/cover no-repeat; }
        #narutibia h2 { color: #e91e63; text-shadow: 0 0 15px #e91e63aa; }

        /* Modal Styles - Mantidos */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; justify-content: center; align-items: center; }
        .modal > div { background: #111; padding: 30px; border-radius: 12px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 0 30px #FFD70055; }
        #promo-flutuante { position: fixed; bottom: 20px; right: 20px; background: #FFD700; color: #000; padding: 15px 20px; border-radius: 14px; font-weight: bold; box-shadow: 0 0 20px #FFD70088; z-index: 9999; font-size: 15px; animation: flutuar 3s infinite alternate; cursor: pointer; }
        @keyframes flutuar { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

        @media (max-width: 768px) {
            .card { width: 95%; transform: none; }
            .card .btn-compra-final, .card .btn-image-new { transform: none; }
            .main-header .container { flex-direction: column; align-items: flex-start; }
            .main-header .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
            .main-header .nav > a, .main-header .nav > div { margin: 0; transform: none; }
            .main-header { padding: 10px 0; }
            body { padding-top: 150px; }
        }