@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700;800;900&display=swap');

/* ====================================================================
   1. Variáveis & Reset Global
   ==================================================================== */
* {
    font-family: 'Noto Sans Black', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Cores */
    --color-primary: #0d40ff;
    --color-primary-dark: #0033CC;
    --color-secondary: #57ffab;
    --color-secondary-dark: #0deb81;
    --color-dark: #171f6d;
    --color-text-light: #f3f3f3;
    --color-text-dark: #3c3c3b;
    --color-text-highlight: #00008B;
    
    /* Sombras & Efeitos */
    --shadow-default: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 10px 30px rgba(0, 255, 136, 0.3);
    --shadow-3d: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --glow-neon: 0 0 15px rgba(0, 255, 136, 0.5);
    
    /* Transições */
    --transition-base: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====================================================================
   2. NAVBAR PRINCIPAL
   ==================================================================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;  /* REMOVIDO O PADDING AQUI */

    /* Glassmorphism */
    background: rgba(17, 7, 105, 0.7);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.1);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    transition: all 0.3s ease;
}

nav.scrolled {
    box-shadow: var(--shadow-default);
}

/* ====================================================================
   3. LINKS DE NAVEGAÇÃO DESKTOP
   ==================================================================== */
.nav-link {
    transition: var(--transition-base);
    position: relative;
    display: inline-block;
    color: var(--color-text-light);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    padding: 0.5rem 0;  /* REDUZIDO O PADDING VERTICAL */
    font-weight: 600;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: var(--transition-base);
    border-radius: 10px;
}

.nav-link:hover {
    color: var(--color-secondary);
    text-shadow: 0 0 5px var(--color-secondary);
}

.nav-link:hover::before {
    width: 100%;
}

/* ====================================================================
   4. MENU MOBILE MELHORADO
   ==================================================================== */

/* Container do menu mobile com mesmo estilo da navbar */
#mobileMenu {
    /* Glassmorphism igual à navbar */
    background: rgba(17, 7, 105, 0.95);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.1);
    
    /* Borda e sombra elegante */
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        inset 0 0 0.5px rgba(255, 255, 255, 0.15),
        -8px 0 32px rgba(0, 0, 0, 0.3);
}

/* Links do menu mobile com animação de entrada */
.nav-link-mobile {
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--color-text-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Quando o menu está aberto */
#mobileMenu.translate-x-0 .nav-link-mobile {
    transform: translateX(0);
    opacity: 1;
}

/* Delay escalonado para efeito cascata elegante */
#mobileMenu.translate-x-0 .nav-link-mobile:nth-child(1) { 
    transition-delay: 0.1s; 
}
#mobileMenu.translate-x-0 .nav-link-mobile:nth-child(2) { 
    transition-delay: 0.15s; 
}
#mobileMenu.translate-x-0 .nav-link-mobile:nth-child(3) { 
    transition-delay: 0.2s; 
}
#mobileMenu.translate-x-0 .nav-link-mobile:nth-child(4) { 
    transition-delay: 0.25s; 
}
#mobileMenu.translate-x-0 .nav-link-mobile:nth-child(5) { 
    transition-delay: 0.3s; 
}
#mobileMenu.translate-x-0 .nav-link-mobile:nth-child(6) { 
    transition-delay: 0.35s; 
}

/* Hover nos links mobile com efeito deslizante */
.nav-link-mobile:hover {
    background: rgba(87, 255, 171, 0.15) !important;
    transform: translateX(8px);
    border-left: 3px solid var(--color-secondary);
    color: var(--color-secondary);
}

/* Ícone do botão hambúrguer com rotação suave */
#mobileMenuBtn i {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#mobileMenuBtn.open i {
    transform: rotate(180deg);
}

/* Overlay de fundo escuro quando menu está aberto */
#menuOverlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}