/* --- ESTILO GERAL DO CORPO E FONTE --- */
.retro-site {
    background-color: #f0f0f0; /* Fundo cinza claro ou um padrão em mosaico (tiled background) */
    font-family: 'Verdana', 'Arial', sans-serif; /* Fonte segura e clássica */
    color: #333;
    line-height: 1.6;
    margin: 20px;
}

/* Títulos com um toque de cores fortes */
h1, h2 {
    color: #000080; /* Azul Marinho Forte */
    text-shadow: 1px 1px #ff00ff; /* Sombra Neon (Magenta) */
    border-bottom: 2px dashed #ff00ff; /* Linha tracejada */
    padding-bottom: 5px;
}

/* --- ESTILO DO BANNER --- */
header h1 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 5px;
}

header p {
    text-align: center;
    color: #555;
    font-style: italic;
    font-size: 0.9em;
}

/* --- ESTILO DAS ABAS (NAVEGAÇÃO) --- */
.abas-retro {
    margin: 15px 0;
    padding: 0;
    text-align: center; /* Centraliza as abas */
    border-bottom: 3px solid #000080; /* Linha base do menu */
}

.aba {
    display: inline-block;
    padding: 8px 15px;
    margin-right: -1px; /* Para que as bordas se toquem */
    background-color: #c0c0ff; /* Fundo azul claro */
    border: 2px solid #000080; /* Borda 3D */
    border-bottom: none; /* Remove a borda de baixo para parecer uma aba */
    text-decoration: none;
    color: #000080;
    font-weight: bold;
    transition: background-color 0.1s;
}

.aba:hover {
    background-color: #9999ff; /* Cor mais escura ao passar o mouse */
    cursor: pointer;
}

.aba.nostalgia {
    display: inline-block;
    padding: 8px 15px;
    margin-right: -1px; /* Para que as bordas se toquem */
    background-color: #fc53e0; /* Fundo azul claro */
    border: 2px solid #000080; /* Borda 3D */
    border-bottom: none; /* Remove a borda de baixo para parecer uma aba */
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.1s;
}

.aba.nostalgia:hover {
    background: #bf15a3; /* Cor mais escura ao passar o mouse */
    cursor: pointer;
}

.aba.ativa { /* Para destacar a página atual */
    background-color: #fff;
    border-top: 3px solid #ff00ff; /* Borda superior chamativa */
    border-bottom: 3px solid #fff; /* "Corta" a linha base */
}

/* --- ESTILO DA CAIXA DE CONTEÚDO PRINCIPAL --- */
.conteudo-caixa {
    background-color: #fff; /* Fundo branco para o conteúdo */
    border: 3px solid #000080; /* Borda forte ao redor do conteúdo */
    padding: 20px;
    box-shadow: 5px 5px 0px #ff00ff; /* Sombra "mal feita" para o efeito 3D/glitch */
}

.bloco-info {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 15px;
    background-color: #f9f9f9;
}

/* --- ESTILO DO RODAPÉ --- */
.rodape-retro {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #666;
}

/* # é usado para selecionar um ID (único na página) */
#texto-destaque {
    font-size: 2.5em; /* Aumenta o texto para 1.5 vezes o tamanho padrão */
    font-weight: bold; /* Opcional: Coloca o texto em negrito */
    padding: 10px;
    display: block; /* Garante que o ID ocupe uma linha inteira */
    margin: 15px 0;
}

/* --- ESTILO DAS SUB-ABAS (Menu Interno) --- */
.sub-abas {
    text-align: left; 
    margin: 15px 0 25px 0;
    padding: 10px;
    background-color: #e0eaff; /* Fundo diferente para distinguir */
    border: 1px dashed #000080; /* Borda tracejada Old Web */
}

.sub-aba {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #ffffff;
    border: 1px solid #000080;
    text-decoration: none;
    color: #000080;
    font-size: 0.9em; /* Menor que as abas principais */
    font-weight: normal;
    transition: background-color 0.1s;
}

.sub-aba:hover {
    background-color: #ff00ff; /* Cor Neon no Hover! */
    color: white;
    cursor: pointer;
}

/* Estilo para garantir espaço para as seções */
main section {
    padding-top: 20px; /* Adiciona um espaço no topo ao "pular" para o ID */
}

/* --- ESTILO DA GRADE DE ÁLBUNS DO BANDCAMP --- */
.bandcamp-grid {
    display: grid; 
    /* Cria colunas de 300px, e o número de colunas se ajusta automaticamente. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; /* Espaçamento entre os álbuns */
    margin-top: 25px;
}

.album-item {
    padding: 10px;
    background-color: #ffffff; /* Fundo branco ou claro para cada player */
    border: 1px solid #000080;
    box-shadow: 2px 2px 0px #ff00ff; /* Mantém a estética retrô */
    /* Garante que o iframe e seu conteúdo se ajustem bem */
    overflow: hidden; 
}

/* --- ESTILO DA GRADE DAS ARTES --- */
.art-grid {
    display: grid; 
    /* Cria colunas de 300px, e o número de colunas se ajusta automaticamente. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 5px; /* Espaçamento entre os álbuns */
    margin-top: 5px;
}

.art-item {
    padding: 10px;
        background-color: #ffffff; /* Fundo branco ou claro para cada player */
    border: 1px solid #000080;
    box-shadow: 2px 2px 0px #ff00ff; /* Mantém a estética retrô */
    /* Garante que o iframe e seu conteúdo se ajustem bem */
    overflow: hidden; 
}

/* . é usado para selecionar uma Classe (pode ser repetida) */
.texto-grande {
    font-size: 1.3em; /* Aumenta o texto para 1.3 vezes o tamanho padrão */
    color: #000080; /* Cor azul forte */
    padding: 2px 5px;
    font-weight: 900; /* Extra-negrito */
}

/* --- ESTILO ESPECÍFICO PARA A PÁGINA DE ENTRADA (SPLASH) --- */

/* Aplica o fundo e centraliza o conteúdo da página */
.splash-page {
    /* Cor de Fundo Agradável (ex: Ciano Retrô) */
    background-color: #00ffff; 
    /* Garante que a página ocupe toda a altura */
    height: 100vh; 
    margin: 0;
    display: flex; /* Flexbox para centralizar */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center;
    font-family: 'Courier New', monospace; /* Fonte com estilo de terminal/retrô */
}

/* Container que segura a imagem e o texto */
.splash-container {
    max-width: 90%;
    padding: 30px;
    background-color: #ffffff;
    border: 5px solid #ff00ff; /* Borda Neon */
    box-shadow: 10px 10px 0px #000080; /* Sombra forte e azul */
}

/* Imagem de Boas-Vindas */
.splash-container img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border: 3px solid #000080;
}

/* Texto de Boas-Vindas */
.welcome-text {
    font-size: 2.2em;
    color: #000080;
    text-shadow: 2px 2px #ff00ff;
}

/* Estilo do Botão/Link de Entrada */
.enter-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ffff00; /* Amarelo Vibrante */
    color: #000080;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #000080;
    box-shadow: 3px 3px 0px #000080;
    transition: all 0.2s;
}

.enter-button:hover {
    background-color: #ff00ff; /* Rosa Neon no hover */
    color: white;
    cursor: pointer;
}

.grid-container {
  display: grid; /* Transforma a div em um contêiner grid */
  grid-template-columns: 1fr 1fr; /* Cria 3 colunas de tamanhos iguais */
  gap: 15px; /* Adiciona um espaçamento entre os itens */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #000080;
  box-shadow: 2px 2px 0px #ff00ff;
  padding: 10px;
  text-align: center;
}