/* =========================================
   VARIAVEIS E FONTES BÁSICAS
   ========================================= */
body { 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 { 
    font-family: 'Montserrat', sans-serif; 
}

/* =========================================
   NAVBAR CUSTOMIZATION
   ========================================= */
.transition-navbar { 
    transition: all 0.4s ease; 
    padding: 1.2rem 0; 
}

/* Fundo Cinza Escuro (Grafite) ao dar Scroll */
.transition-navbar.bg-dark-scroll {
    padding: 0.5rem 0;
    background-color: rgba(50, 54, 57, 0.98) !important; /* Cinza chumbo elegante */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.nav-link { 
    position: relative; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* Sombra para não se perder em fundos brancos do vídeo */
}

/* Remove a sombra do texto quando a barra ficar cinza no scroll para não ficar "sujo" */
.bg-dark-scroll .nav-link {
    text-shadow: none;
}

.nav-link::after {
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 2px;
    bottom: 0; 
    left: 50%; 
    background-color: #0d6efd;
    transition: all 0.3s ease; 
    transform: translateX(-50%);
}

.nav-link:hover::after { 
    width: 80%; 
}

.btn-nav-zap { 
    transition: transform 0.3s ease; 
}

.btn-nav-zap:hover { 
    transform: scale(1.05); 
}

/* Efeito Glassmorphism para a logo pequena da Navbar */
.nav-logo-glass {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* Fumaça branca para as letras pretas não sumirem no menu escuro */
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.9));
    transition: all 0.3s ease;
}

/* =========================================
   HERO SECTION & VÍDEO BACKGROUND
   ========================================= */
.hero-section {
    position: relative; 
    height: 100vh; 
    width: 100%;
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.hero-video {
    position: absolute; 
    top: 50%; 
    left: 50%;
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: -2; 
    object-fit: cover; 
}

/* Deixei o overlay um pouco mais transparente (0.7) para o vídeo aparecer mais */
.hero-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: linear-gradient(135deg, rgba(9, 30, 62, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: -1;
}

.hero-content { 
    z-index: 1; 
}

/* Efeito Glassmorphism para a Logo grande do Hero (Substitui o quadrado branco feio) */
/* Logo grande do Hero (Vídeo) - 100% Transparente */
.hero-logo-wrapper {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    /* Fumaça branca mais forte para destacar no vídeo */
    filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.9));
}

.hero-logo {
    max-width: 350px; 
    width: 100%;
    height: auto;
}

/* =========================================
   BOTÕES GERAIS
   ========================================= */
.custom-btn { 
    border-radius: 50px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: all 0.3s ease; 
}

.custom-btn:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.4); 
}

/* =========================================
   RESPONSIVIDADE (MOBILE)
   ========================================= */
@media (max-width: 991px) {
    .transition-navbar {
        padding: 0.5rem 0;
        background-color: rgba(9, 30, 62, 0.98) !important;
    }
    
    .navbar-collapse {
        background-color: rgba(9, 30, 62, 0.98);
        padding: 1rem;
        border-radius: 10px;
        margin-top: 10px;
        text-align: center;
    }

    .btn-nav-zap {
        margin-top: 15px;
        width: 100%;
    }

    .hero-section h1 {
        font-size: 2.2rem;
    }

    .hero-logo {
        max-width: 250px;
    }

    .custom-btn {
        display: block;
        margin: 10px auto;
        width: 100%;
    }
}