/* ==========================================================================
   MODULE: HERO — Categorias + Slogan (HOME SPEED V2)
   Sprint 3B Realinhamento: Clone 1:1 da Home Oficial.
   
   Auditoria confirmada em live_home_real.html:
   - .cyber-categorias: barra horizontal de links de categoria (d97511c)
   - .e-a1d79c6-c3e3754: h2 slogan "TECNOLOGIA • GAMER • PERFORMANCE" (96fdc4b)
   
   A Home Oficial NÃO possui slider de banners nesta posição.
   ========================================================================== */

/* ==========================================================================
   1. BARRA DE CATEGORIAS (.cyber-categorias)
   ========================================================================== */

.cyber-hero-categorias-section {
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Importado do style.css original: .cyber-categorias */
html body .cyber-categorias {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override: o style.css original oculta .cyber-categorias com display:none —
   no hero module garantimos que ela seja visível */
html body .cyber-hero-categorias-section .cyber-categorias {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 12px 20px !important;
}

html body .cyber-categorias a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    color: #e2e8f0 !important;
    text-decoration: none !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-right: 1px solid rgba(0, 207, 255, 0.15) !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
}

html body .cyber-categorias a:last-child {
    border-right: none !important;
}

html body .cyber-categorias a:hover {
    color: #ff5800 !important;
    text-shadow: 0 0 10px rgba(255, 88, 0, 0.6) !important;
}

/* ==========================================================================
   2. SLOGAN CONTAINER (.cyber-hero-slogan-container / 96fdc4b)
   TESTE: Slogan fora da mesa, tocando nela
   ========================================================================== */

.cyber-hero-slogan-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 15px auto 0 auto !important; /* Puxa a palavra mais 15px para baixo, corrigido para margin-top ao invés 
de bottom negativo */
    z-index: 10 !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.cyber-hero-slogan-container .e-con-inner {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Clone exato do seletor do CSS oficial:
   html body h2[data-interaction-id="a1d79c6"] {...} */
html body .cyber-hero-slogan,
html body h2[data-interaction-id="a1d79c6"],
html body .e-a1d79c6-c3e3754 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 6px !important;
    text-align: center !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
    
    /* Efeito de cores (Fogo -> Verde Neon -> Azul) */
    background: linear-gradient(90deg, #ff3300 0%, #ff8800 35%, #00ff66 70%, #00e5ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    
    /* Destaque Glow no texto clipado */
    filter: drop-shadow(0px 8px 16px rgba(255, 88, 0, 0.4)) drop-shadow(0px 0px 30px rgba(0, 229, 255, 0.2)) !important;
}

/* ==========================================================================
   3. RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 1023px) {
    html body .cyber-categorias {
        padding: 8px 15px !important;
        gap: 0 !important;
    }

    html body .cyber-categorias a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    html body .cyber-hero-slogan,
    html body h2[data-interaction-id="a1d79c6"] {
        font-size: 11px !important;
        letter-spacing: 3px !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 767px) {
    html body .cyber-categorias {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    html body .cyber-categorias::-webkit-scrollbar {
        display: none !important;
    }

    html body .cyber-categorias a {
        flex-shrink: 0 !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    html body .cyber-hero-slogan,
    html body h2[data-interaction-id="a1d79c6"] {
        font-size: 16.5px !important; /* Aumentado em 50% aprox */
        line-height: 1.5 !important;
        letter-spacing: 2px !important;
    }
    
    html body .slogan-line-1,
    html body .slogan-line-2 {
        display: block !important;
    }
    
    html body .slogan-separator.desktop-only {
        display: none !important;
    }
}