/* 1. Fundo e Texto Geral */
body {
    background-color: var(--cinza-claro);
    color: var(--texto-corpo);
}

/* 2. Cabeçalho Superior (Barra de Anúncios ou Menu) */
#cabecalho {
    background-color: var(--chumbo-profundo);
    border-bottom: 4px solid var(--amarelo-destaque);
}

/* 3. Botões de Compra (Onde o Amarelo brilha) */
/* O amarelo deve ser usado apenas nos botões de ação para guiar o olhar */
.botao-comprar, .finalizar-compra {
    background-color: var(--amarelo-destaque) !important;
    color: var(--chumbo-profundo) !important; /* Texto escuro no fundo claro para leitura */
    font-weight: 800 !important;
    text-transform: uppercase;
    border: none;
    transition: background 0.3s ease;
}

.botao-comprar:hover {
    background-color: var(--amarelo-hover) !important;
    box-shadow: 0 4px 15px rgba(251, 192, 45, 0.4);
}

/* 4. Rodapé (Autoridade e Seriedade) */
#rodape {
    background-color: var(--chumbo-profundo);
    color: var(--branco-puro);
}

#rodape a {
    color: var(--amarelo-destaque);
}

/* 5. Selos e Badges (Ex: "Oferta" ou "Novo") */
.badge-promocao {
    background-color: var(--chumbo-profundo);
    color: var(--amarelo-destaque);
    border: 1px solid var(--amarelo-destaque);
}