/* ==========================================================================
   3. SEÇÃO HERO (BANNER PRINCIPAL)
   ========================================================================== */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 8%;
    background: linear-gradient(to right, rgba(8, 8, 8, 0.95) 40%, rgba(8, 8, 8, 0.4) 100%), 
                url('/images/hero-bg.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
}

.hero-content { max-width: 100%; width: 100%; }
.hero-content .subtitle {
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 15px;
}
.hero-content h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; margin-bottom: 25px; }
.hero-content .highlight { color: transparent; -webkit-text-stroke: 1.5px var(--text-primary); }
.hero-content p { color: var(--text-secondary); font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; }
.hero-buttons { display: flex; gap: 20px; }
/* Força o container e a imagem da logo a centralizarem no Hero */
.logo-hero.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

.logo-hero img {
    max-width: 350px; /* Define um tamanho fixo premium para a logo no Hero */
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    header { padding: 20px 5%; }
    .hero-content h1 { font-size: 3.2rem; }
}

@media (max-width: 768px) {
    .hero-content h1 { 
        font-size: 2.5rem;
        margin: 0 0 10px 0; 
    }
    .hero-buttons { flex-direction: column; }
    .hero-content p {
        margin-bottom: 20px;
    }
    .logo-hero.text-center.blur-in.animated-in {
        text-align: center;
        margin: 0 0 10px 0;
    }
    .logo-hero img {
        width: 50%;
    }
}