/* =======================================================
   HOME.CSS - Opção 3: Efeito Glass (Desfoque)
   ======================================================= */

/* Hero Section (Container Principal) */
#hero {
    height: 100vh;
    position: relative; /* Necessário para o elemento filho absoluto se posicionar */
    overflow: hidden;   /* Garante que as bordas desfocadas não vazem */
    
    /* Centralização do conteúdo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* A CAMADA MÁGICA (O Fundo Desfocado) */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Fica ATRÁS do texto */

    /* A imagem de fundo PADRÃO (Desktop) */
    background: 
        linear-gradient(rgba(0,0,0,0.4), #121214),
        url('../assets/img/hero-bg.jpg');
    
    background-size: cover;
    background-position: center;

    /* O DESFOQUE */
    filter: blur(1px); 
    
    /* TRUQUE: Aumenta um pouco a imagem para esconder as bordas brancas que o blur cria */
    transform: scale(1.1); 
}

/* O Conteúdo (Texto e Botão) */
.hero-content {
    z-index: 1; /* Garante que fica NA FRENTE do fundo desfocado */
    padding: 0 20px;
}

.hero-content h1 {
    font-family: var(--font-title);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--text-primary);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombra mais suave */
}

.hero-content h1 span {
    color: var(--gold);
}

.hero-content p {
    font-size: 1.2rem;
    color: #e1e1e6;
    max-width: 600px;
    margin: 0 auto 40px;
    font-weight: 500;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* =======================================================
   RESPONSIVIDADE (MOBILE)
   ======================================================= */

@media (max-width: 768px) {
    /* Ajusta o tamanho da fonte do Título */
    .hero-content h1 {
        font-size: 2.2rem;
    }

    /* Ajusta o tamanho do texto de apoio */
    .hero-content p {
        font-size: 1rem;
        padding: 15px;
    }

    /* --- A MÁGICA DA TROCA DE IMAGEM AQUI --- */
    #hero::before {
        /* Foca no topo da imagem vertical */
        background-position: center top; 
        
        /* Troca APENAS a imagem, mantendo o degradê escuro */
        background-image: 
            linear-gradient(rgba(0,0,0,0.4), #121214),
            url('../assets/img/hero-bg2.jpg');
    }
}