@import url('../fonts/BlackFox/stylesheet.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
    
    /* Cores principais */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: rgba(0, 123, 255, 0.1);
    --color-primary-hover: rgba(0, 123, 255, 0.2);
    
    /* Cores de fundo */
    --color-bg-primary: #000;
    --color-bg-secondary: #0f0f0f;
    --color-bg-tertiary: #1a1a1a;
    --color-bg-card: #1f1f1f;
    --color-bg-overlay: rgba(0, 0, 0, 0.8);
    --color-bg-subtle: rgba(0, 123, 255, 0.02);
    
    /* Cores de texto */
    --color-text-primary: #fff;
    --color-text-secondary: #ccc;
    --color-text-tertiary: #a3a3a3;
    --color-text-muted: #666;
    --color-text-light: #e0e0e0;
    
    /* Cores de borda */
    --color-border-primary: #1f1f1f;
    --color-border-secondary: #2a2a2a;
    
    /* Cores de status */
    --color-success: #28a745;
    --color-success-bg: rgba(40, 167, 69, 0.1);
    --color-warning: #ffc107;
    --color-error: #dc3545;
    
    /* Cores específicas de plataformas */
    --color-telegram: #369bd6;
    --color-telegram-bg: rgba(0, 136, 204, 0.1);
    --color-whatsapp: #00d76e;
    --color-whatsapp-bg: rgba(37, 211, 102, 0.1);
    --color-blue: #3b82f6;
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-overlay: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    --gradient-grid: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                     linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    
    /* Sombras */
    --shadow-primary: 0 8px 25px rgba(0, 123, 255, 0.3);
    --shadow-secondary: 0 10px 30px rgba(0, 123, 255, 0.2);
    --shadow-tertiary: 0 15px 40px rgba(0, 123, 255, 0.15);
    --shadow-card: 0 5px 20px rgba(0, 123, 255, 0.1);
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-secondary);
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}


.navbar {
    width: 100%;
    height: 80px;
    background-color: var(--color-bg-primary);
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-primary);
    z-index: 10;
}

.navbar .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .container .navbar-logo a {
    color: var(--color-text-primary);
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-logo-img {
    max-width: 40px;
}

.navbar .container .navbar-menu {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.navbar .container .navbar-menu .navbar-menu-item a {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
}

.navbar .container .navbar-menu .navbar-menu-item.button {
    padding: 0.5rem 1rem;
    background-color: var(--color-primary);
    border-radius: 0.5rem;
    font-size: 1rem;
}

.navbar .container .navbar-menu .navbar-menu-item.button a {
    opacity: 1;
    font-weight: 600;
    color: var(--color-text-primary);
}

.navbar .container .navbar-menu .navbar-menu-item a {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
}

.navbar .container .navbar-menu .navbar-menu-item a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.navbar .container .navbar-menu .navbar-menu-item a.active {
    background-color: var(--color-primary);
    color: var(--color-text-primary);
    opacity: 1;
}

/* Mobile Menu */
@media screen and (max-width: 870px) {
    .navbar .container .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-primary);
        border-top: 1px solid var(--color-border-primary);
        flex-direction: column;
        padding: 1rem;
        gap: 0.5rem;
    }
    
    .navbar .container .navbar-menu.active {
        display: flex;
    }
    
    .navbar .container .navbar-menu .navbar-menu-item a {
        display: block;
        padding: 0.75rem 1rem;
        text-align: center;
    }
    
    .navbar-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-text-primary);
        font-size: 1.5rem;
        cursor: pointer;
    }
}

@media screen and (min-width: 870px) {
    .navbar-toggle {
        display: none;
    }
}




.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.section-title .section-title-img {
    max-width: 100px;
}

.section-title h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 1rem;
}

.section-title p {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

/* -------------------------------------------
INÍCIO DA CORREÇÃO PARA O SELO BUG NO MOBILE
-------------------------------------------
*/

@media screen and (max-width: 768px) {
    .stores-section .swiper-slide .bug-seal {
        width: 50px; /* Reduz o tamanho em telas menores */
        height: 50px;
        font-size: 0.7rem; /* Diminui o tamanho da fonte dentro do selo */
        top: 0px;  /* Ajusta a posição */
        right: 0px; /* Ajusta a posição */
    }

    /* Opcional: Ajustar o padding do card da loja para o selo caber */
    .stores-section .store-card {
        padding: 1.5rem 1rem;
    }
}

/* Ajuste para telas bem pequenas (ex: iPhone 5/SE) */
@media screen and (max-width: 380px) {
    .stores-section .swiper-slide .bug-seal {
        width: 40px; /* Reduz ainda mais */
        height: 40px;
        font-size: 0.6rem;
    }
}

/* -------------------------------------------
FIM DA CORREÇÃO
-------------------------------------------
*/