/* O container tem seu próprio fundo e aparecerá sobre a imagem borrada */
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    position: relative; /* Para z-index funcionar e conter elementos posicionados */
    z-index: 1; /* Garante que o conteúdo apareça acima do fundo borrado */
    background-color: var(--cor-texto-claro); /* Fundo "quase branco" para o conteúdo */
    text-align: center;
    min-height: 100vh; /* Para garantir que o container cubra toda a altura da tela */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Sombra sutil para dar profundidade */
}


/* =================================================== */
/* 3. HEADER E TÍTULOS (APLICAÇÃO DO NOVO CONTRASTE E IMAGEM) */
/* =================================================== */

/* O Título Principal no Header (Marcelo K) */
header {
    /* NOVIDADE: IMAGEM DE FUNDO NO HEADER */
    background-color: var(--cor-fundo-header);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1.0)),
        url('music/res/guitarra.jpg'); /* **ATUALIZE ESTE CAMINHO** com sua imagem! */
    background-size: cover;
    background-position: center center;
    color: var(--cor-texto-claro); /* Texto Branco */
    padding: 40px 0 20px 0; /* Aumenta o padding para a imagem ter espaço */
    margin: -20px -20px 0 -20px; /* Expande para as bordas do container */
    border-bottom: 5px solid var(--cor-roxo-principal); /* Borda inferior roxa para finalizar o header */
}

header h1 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 3.5em; /* Deixei um pouco maior para o impacto com a imagem */
    color: var(--cor-texto-claro); /* Branco para contraste com fundo preto */
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra no texto para melhorar a leitura */
}

header p {
    font-family: 'Roboto Slab', serif;
    font-style: italic;
    color: var(--cor-verde-principal); /* Verde Neon para destacar a tag-line */
    margin-top: 0;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra para legibilidade */
}

/* Títulos de Seções (H2) */
h2 {
    /* Aplicando o contraste de cor: Fundo Preto, Texto Branco */
    background-color: var(--cor-texto-principal); /* Preto Profundo */
    color: var(--cor-texto-claro); /* Branco Puro */
    
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.8em;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 15px; /* Adiciona padding para o bloco preto */
    display: block; /* Usa a largura total do container para o bloco de cor */
    border-radius: 5px;
    
    /* A linha divisória da seção será a borda superior do H2 */
    border-top: none; 
    border-bottom: 3px solid var(--cor-roxo-principal); /* Roxo Elétrico na base do bloco do título */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade ao bloco do título */
}

/* ------------------------------------------- */
/* BLOCO DE TEXTO (HEADER) */
/* ------------------------------------------- */
/* Estilos para o Cabeçalho de Lançamento */
.lancamento-header-reset {
    /* 1. OBRIGATÓRIO: Define a imagem e o caminho */
    background-image: url('../res/guitarra.jpg');
    
    /* 2. GARANTE O TAMANHO: Faz a imagem cobrir toda a área do header */
    background-size: cover;
    
    /* 3. GARANTE O POSICIONAMENTO: Centraliza a imagem no header, com gradiente */
    background-color: var();
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.7)), 
        url('../res/guitarra.jpg');
    
    /* 4. DEFINE A ALTURA: O header precisa de uma altura definida para que a imagem seja vista */
    min-height: 150px; /* Ajuste essa altura conforme o necessário (ex: 250px, 300px, etc.) */
    
    /* 5. ESTILO DO TEXTO: Centraliza o texto e define a cor */
    text-align: center;
    color: white; /* Geralmente é melhor usar branco ou uma cor clara sobre uma imagem de fundo */
    padding-top: 50px; /* Adiciona algum padding interno no topo */
    padding-bottom: 30px; 
}

/* Opcional: Estilos para o texto dentro do Header */
.lancamento-header-reset h1 {
    font-size: 3.5em;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Ajuda o texto a se destacar */
}

/* Remove o estilo antigo de h2 que está conflitando */
section {
    padding: 20px 0;
    border-top: none; /* A borda agora está no H2 para separar visualmente */
}

/* =================================================== */
/* 4. APRESENTAÇÃO E TEXTO */
/* =================================================== */
#apresentacao p {
    line-height: 1.6;
    text-align: left;
}

/* =================================================== */
/* 5. FOTOS */
/* =================================================== */
.fotos-grid {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.fotos-grid img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
    border: 3px solid var(--cor-roxo-principal); /* Moldura Roxo Elétrico */
    transition: transform 0.3s ease;
}

.fotos-grid img:hover {
    transform: scale(1.05);
}

/* =================================================== */
/* 6. ÚLTIMO LANÇAMENTO (BOTÃO EM DESTAQUE) */
/* =================================================== */
#ultimo-lancamento .capa {
    max-width: 200px;
    height: auto;
    border: 4px solid var(--cor-verde-principal); /* Borda de destaque Verde Neon */
    border-radius: 10px;
    margin-bottom: 15px;
}

.ultimo-lancamento-detalhes {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 20px;
}

#ultimo-lancamento .ouca-agora {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--cor-verde-principal); /* Verde Neon - O Botão principal de Ação */
    color: var(--cor-texto-principal); /* Texto Preto (alto contraste) */
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    font-size: 1.1em;
    margin-top: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 204, 102, 0.4); /* Sombra verde para o botão */
}

#ultimo-lancamento .ouca-agora:hover {
    background-color: var(--cor-hover-verde);
    transform: scale(1.05);
}

/* =================================================== */
/* 7. LINKS (ROXO e VERDE) */
/* =================================================== */
.links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.links-grid a {
    display: block;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para todos os links */
}

/* Links de MÚSICA - ROXO */
.links-musica a {
    background-color: var(--cor-roxo-principal); /* Roxo Elétrico */
    color: var(--cor-texto-claro); /* Branco */
}

.links-musica a:hover {
    background-color: var(--cor-hover-roxo); 
}
    
/* Links de REDES SOCIAIS - VERDE */
.links-sociais a {
    background-color: var(--cor-verde-principal); /* Verde Neon */
    color: var(--cor-texto-principal); /* Preto (alto contraste) */
}

.links-sociais a:hover {
    background-color: var(--cor-hover-verde);
}

/* =================================================== */
/* 8. NÚMEROS (STATS) */
/* =================================================== */
#numeros {
    background-color: rgba(127, 0, 255, 0.1); /* Fundo sutil com transparência do Roxo */
    padding: 30px 20px;
    border-radius: 10px;
    margin-top: 30px;
    box-shadow: inset 0 0 10px rgba(127, 0, 255, 0.3); /* Sombra interna para o bloco */
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.stat-item {
    background-color: var(--cor-texto-principal); /* Fundo Preto para os números */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--cor-roxo-principal); /* Borda Roxo para destaque */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para os itens de estatística */
}

.stat-item .numero {
    font-size: 1.8em;
    color: var(--cor-verde-principal); /* Verde Neon para os números */
    font-weight: bold;
}

.stat-item .descricao {
    font-size: 0.9em;
    color: var(--cor-texto-claro); /* Branco */
}
    
/* =================================================== */
/* 9. RODAPÉ */
/* =================================================== */
footer {
    margin-top: 30px;
    padding: 15px 0;
    font-size: 0.8em;
    color: var(--cor-roxo-principal); /* Dando destaque no Roxo Elétrico */
    border-top: 1px solid rgba(127, 0, 255, 0.3); /* Linha roxa sutil no topo do rodapé */
}

/* =================================================== */
/* 10. MEDIA QUERIES (Adaptação para telas menores) */
/* =================================================== */
@media (max-width: 480px) {
    header h1 {
        font-size: 2.5em; /* Ajuste para não ficar tão grande */
    }
    
    header {
        margin: -20px -20px 0 -20px; /* Garante que o fundo preto cubra tudo */
    }

    h2 {
        font-size: 1.6em;
    }

    .links-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .fotos-grid img {
        max-width: 100px;
    }
}