:root {
    --bg-dark: #0a0a0a;       /* Fundo bem escuro */
    --bg-card: #141414;       /* Cinza para cartões */
    --accent-gold: #d4a373;   /* Dourado da logo */
    --accent-gold-hover: #b88a5b;
    --text-light: #ffffff;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    padding-top: 100px; /* Espaçamento para a logo maior */
}

.text-gold { color: var(--accent-gold); }
.bg-card { background-color: var(--bg-card); }

.badge-custom {
    background-color: rgba(212, 163, 115, 0.1);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.btn-gold {
    background-color: var(--accent-gold);
    color: #000;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: var(--accent-gold-hover);
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 163, 115, 0.2);
}

.navbar {
    background-color: rgba(10, 10, 10, 0.98);
    border-bottom: 1px solid #1f1f1f;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.hero-section {
    background: linear-gradient(to right, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.7) 100%), 
                url('https://images.unsplash.com/photo-1643702788271-e48ad9c5cd1c?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center;
    background-size: cover;
}

.product-item {
    border: 1px solid #1f1f1f;
    border-left: 4px solid #1f1f1f;
    transition: all 0.3s ease;
}

.product-item:hover {
    background-color: #1a1a1a;
    border-left: 4px solid var(--accent-gold); /* Acende o dourado */
    transform: translateX(5px); /* Efeito de deslizar */
}

.icon-box {
    width: 80px;
    height: 80px;
    border: 1px solid #2a2a2a;
}

.diff-borders {
    border-color: #1f1f1f !important;
}

@media (max-width: 991px) {
    .diff-borders {
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #1f1f1f;
        border-bottom: 1px solid #1f1f1f;
    }
}

.dark-map {
    filter: invert(90%) hue-rotate(180deg) contrast(90%) sepia(20%);
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.dark-map:hover {
    filter: invert(100%) hue-rotate(180deg) contrast(100%) sepia(0%);
    opacity: 1;
}