/* ==========================================================================
   ARQUIVO: css/componentes/header-menu.css - V0.4.0 // CEY MUSIC
   PARTE 1 DE 3: ESTÉTICA SQUEOMÓRFICA ULTRA-CLEAN DAS CHAVES DO CONSOLE
   ========================================================================== */

   .console-key {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%) !important;
    border: 1px solid #333333 !important;
    border-radius: 4px !important;
    color: var(--text-muted) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 
                inset 1px 1px 1px rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  
  .console-key:hover {
    background: #2d2d2d !important;
    border-color: #444444 !important;
    color: var(--text-primary) !important;
  }
  
  .console-key:active {
    transform: scale(0.98) !important;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8) !important;
  }
  
  .console-master-header {
    position: sticky !important;
    top: 0 !important;
    background-color: var(--chumbo-base) !important;
    padding: 10px !important;
    border-bottom: 2px solid #2d2d2d !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    z-index: 1000 !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease !important;
  }
  
  .header-grid-layout { 
    width: 100% !important; 
    box-sizing: border-box !important; 
  }
  
  .header-top-row { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    padding-bottom: 8px !important; 
  }

  
  /* ==========================================================================
   ARQUIVO: css/componentes/header-menu.css - V0.4.0 // CEY MUSIC
   PARTE 2 DE 3: ENGENHARIA DA LOGO MODULAR (OSCILADOR) & CHAVES SOCICON
   ========================================================================== */

.brand-logo-container { display: flex !important; align-items: center !important; gap: 5px !important; max-width: 220px !important; }
.oscillator-housing { width: 37px !important; height: 25px !important; background: var(--chumbo-base) !important; border: 1px solid #2d2d2d !important; border-radius: 4px !important; display: flex !important; align-items: center !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9) !important; flex-shrink: 0 !important; }
.triangle-wave { width: 100% !important; height: 100% !important; }
.center-line { stroke: rgb(174, 171, 171) !important; stroke-width: 1 !important; stroke-dasharray: 2 2 !important; }
.wave-path { fill: none !important; stroke: var(--neon-cyan) !important; stroke-width: 1.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; filter: drop-shadow(0 0 2px var(--neon-cyan)) !important; stroke-dasharray: 100 !important; animation: pulseWave 4s linear infinite !important; }
@keyframes pulseWave { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.logo-text-block { display: flex !important; flex-direction: column !important; justify-content: center !important; }
.logo-row-top { display: flex !important; align-items: baseline !important; gap: 0.1rem !important; line-height: 1 !important; }
.text-cey { font-family: 'Nasalization', sans-serif !important; font-weight: bold !important; font-size: 1.1rem !important; letter-spacing: 0.08rem !important; color: var(--text-primary) !important; }
.text-music { font-family: 'Orbitron', sans-serif !important; font-weight: 300 !important; font-size: 0.75rem !important; letter-spacing: 0.1rem !important; color: var(--text-muted) !important; }
.text-tech { font-family: 'Exo 2', sans-serif !important; font-style: italic !important; font-size: 0.65rem !important; color: var(--neon-cyan) !important; opacity: 0.75 !important; white-space: nowrap !important; display: block !important; }

.social-led-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; background: #1c1c1c !important; border: 1px solid #2d2d2d !important; border-radius: 4px !important; text-decoration: none !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.02) !important; transition: all 0.2s ease !important; cursor: pointer !important; }
.social-led-button .socicon { font-size: 16px !important; color: var(--neon-cyan) !important; filter: drop-shadow(0 0 2px var(--neon-cyan)) !important; transition: all 0.2s ease !important; }
.social-led-button:hover { background: #252525 !important; border-color: var(--neon-cyan) !important; transform: translateY(-1px) !important; box-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important; }
.social-led-button:hover .socicon { color: #ffffff !important; filter: drop-shadow(0 0 4px var(--neon-cyan)) !important; }
.social-led-button:active { transform: translateY(1px) !important; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8) !important; }



/* ==========================================================================
   ARQUIVO: css/componentes/header-menu.css - V0.4.0 // CEY MUSIC
   PARTE 3 DE 3: MATRIZ RESPONSIVA (CELULAR/DESKTOP) & LEDs ATIVOS
   ========================================================================= */

/* 📱 FASE 1: MOBILE */
@media screen and (max-width: 767px) {
  .console-master-header { padding: 8px !important; }
  .header-grid-layout { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .header-top-row { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding-bottom: 4px !important; }
  .console-buttons-deck { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; width: 100% !important; }
  .console-buttons-deck .console-key { padding: 0.75rem 0.5rem !important; font-size: 0.72rem !important; line-height: 1.2 !important; text-align: center !important; }
  .social-racks { display: flex !important; gap: 6px !important; }
  .social-led-button { width: 28px !important; height: 28px !important; }
  .social-led-button .socicon { font-size: 14px !important; }
}

/* 📟 FASE 2: TABLETS */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .console-master-header { padding: 12px 20px !important; width: 100% !important; box-sizing: border-box !important; }
  .header-grid-layout { display: grid !important; grid-template-columns: repeat(8, 1fr) !important; grid-template-rows: auto auto !important; row-gap: 14px !important; column-gap: 8px !important; width: 100% !important; box-sizing: border-box !important; }
  .header-top-row { grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; }
  .console-buttons-deck { display: contents !important; }
  .console-buttons-deck .console-key:nth-of-type(1) { grid-column: 1 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(2) { grid-column: 2 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(3) { grid-column: 3 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(4) { grid-column: 4 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(5) { grid-column: 5 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(6) { grid-column: 6 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(7) { grid-column: 7 !important; grid-row: 2 !important; }
  .console-buttons-deck .console-key:nth-of-type(8) { grid-column: 8 !important; grid-row: 2 !important; }
  .console-key { width: 100% !important; padding: 0.625rem 0 !important; font-size: 0.8rem !important; text-align: center !important; }
  .social-racks { display: flex !important; gap: 12px !important; }
}

/* 💻 FASE 3: DESKTOP */
@media screen and (min-width: 1024px) {
  .console-master-header { padding: 12px 20px !important; }
  .header-grid-layout { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; align-items: center !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; }
  .header-top-row, .console-buttons-deck { display: contents !important; }
  .brand-logo-container { grid-column: 1 / span 2 !important; grid-row: 1 !important; justify-self: start !important; display: flex !important; max-width: 100% !important; }
  .console-buttons-deck .console-key:nth-of-type(1) { grid-column: 3 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(2) { grid-column: 4 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(3) { grid-column: 5 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(4) { grid-column: 6 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(5) { grid-column: 7 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(6) { grid-column: 8 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(7) { grid-column: 9 !important; grid-row: 1 !important; }
  .console-buttons-deck .console-key:nth-of-type(8) { grid-column: 10 !important; grid-row: 1 !important; }
  .console-key { width: 100% !important; padding: 10px 0 !important; font-size: 0.8rem !important; }
  .social-racks { grid-column: 11 / span 2 !important; grid-row: 1 !important; display: flex !important; justify-content: flex-end !important; gap: 12px !important; width: 100% !important; }
}

/* 🟢 ACENDIMENTO DOS LEDS ATIVOS VIA ATRIBUTO ROTEADOR SPA */
.console-key span { display: none !important; }
.console-key.active { background: #151515 !important; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.8) !important; border-color: #555555 !important; transform: scale(0.99) !important; }
.console-buttons-deck a[href*="index.html"].active { color: #ffffff !important; border-color: #e0e0e0 !important; }
.console-buttons-deck a[href*="musica.html"].active { color: var(--neon-cyan) !important; border-color: var(--neon-cyan) !important; filter: drop-shadow(0 0 1px var(--neon-cyan)) !important; }
.console-buttons-deck a[href*="tecnologia.html"].active { color: #ffaa00 !important; border-color: #ffaa00 !important; filter: drop-shadow(0 0 1px #ffaa00) !important; }
.console-buttons-deck a[href*="curriculo.html"].active { color: var(--orange) !important; border-color: var(--orange) !important; filter: drop-shadow(0 0 1px var(--orange)) !important; }
.console-buttons-deck a[href*="produtos.html"].active { color: #00ff66 !important; border-color: #00ff66 !important; filter: drop-shadow(0 0 1px #00ff66) !important; }
.console-buttons-deck a[href*="servicos.html"].active { color: #ffcc00 !important; border-color: #ffcc00 !important; filter: drop-shadow(0 0 1px #ffcc00) !important; }
.console-buttons-deck a[href*="artigos.html"].active { color: #ff00ff !important; border-color: #ff00ff !important; filter: drop-shadow(0 0 1px #ff00ff) !important; }
.console-buttons-deck a[href*="contato.html"].active { color: #ff3333 !important; border-color: #ff3333 !important; filter: drop-shadow(0 0 1px #ff3333) !important; }