/* Nova Paleta de Cores Retrô para o Trio Explode Coração */

:root {
    /* Cores principais */
    --retro-bege-claro: #f5e8d0;
    --retro-bege-medio: #e6d2b5;
    --retro-bege-escuro: #d4bc94;
    --retro-marrom-claro: #b39169;
    --retro-marrom-medio: #8c6d4f;
    --retro-marrom-escuro: #5e4a36;
    --retro-accent: #a85832;
    --retro-accent-hover: #c46a3d;
    
    /* Gradientes */
    --gradient-header: linear-gradient(to bottom, rgba(94, 74, 54, 0.8), rgba(94, 74, 54, 0));
    --gradient-section: linear-gradient(to bottom, var(--retro-bege-claro), var(--retro-bege-medio));
    --gradient-card: linear-gradient(135deg, var(--retro-bege-medio), var(--retro-bege-escuro));
    --gradient-button: linear-gradient(to right, var(--retro-marrom-claro), var(--retro-accent));
    --gradient-footer: linear-gradient(to bottom, var(--retro-marrom-medio), var(--retro-marrom-escuro));
    --gradient-background-dark-to-light: linear-gradient(to bottom, var(--retro-marrom-escuro), var(--retro-bege-claro)); /* Novo gradiente principal */
    
    /* Sombras */
    --shadow-soft: 0 4px 6px rgba(94, 74, 54, 0.1);
    --shadow-medium: 0 6px 12px rgba(94, 74, 54, 0.15);
    
    /* Bordas */
    --border-light: 1px solid var(--retro-bege-medio);
    --border-medium: 2px solid var(--retro-marrom-claro);
}

/* Aplicação da paleta ao corpo do site */
body {
    background-color: var(--retro-bege-claro); /* Cor de fundo principal */
    /* background-image: var(--gradient-background-dark-to-light); REMOVED */
    /* background-attachment: fixed; REMOVED */
    /* background-size: cover; REMOVED */
    color: var(--retro-marrom-escuro);
}

/* Header transparente com gradiente sutil */
.site-header {
    background-color: transparent !important;
    background-image: var(--gradient-header) !important;
    border-bottom: none !important;
}

.site-header.scrolled {
    background-color: rgba(94, 74, 54, 0.9) !important;
    box-shadow: var(--shadow-medium);
}

/* Links de navegação */
.main-nav a {
    color: var(--retro-bege-claro) !important;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--retro-accent-hover) !important;
}

/* Seções */
.biografia-section, 
.musicas-section {
    background-color: var(--retro-bege-medio);
    background-image: var(--gradient-section);
}

.fotos-section, 
.contato-section {
    background-color: var(--retro-bege-claro);
}

/* Títulos de seção */
.section-title {
    color: var(--retro-marrom-escuro);
    border-bottom: var(--border-medium);
    position: relative;
}

.section-title:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background-color: var(--retro-accent);
}

/* Cards e elementos */
.foto-card, 
.video-info {
    background-image: var(--gradient-card);
    box-shadow: var(--shadow-soft);
    border-radius: 8px;
    border: var(--border-light);
}

.foto-legenda {
    color: var(--retro-marrom-escuro);
    font-weight: 600;
}

/* Botões e links */
.biografia-link, 
.fotos-link, 
.musicas-link,
.submit-btn {
    background-image: var(--gradient-button);
    color: var(--retro-bege-claro) !important;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-soft);
}

.biografia-link:hover, 
.fotos-link:hover, 
.musicas-link:hover,
.submit-btn:hover {
    background-image: linear-gradient(to right, var(--retro-accent), var(--retro-marrom-claro));
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

/* Formulários */
input, select, textarea {
    background-color: var(--retro-bege-claro);
    border: var(--border-light);
    color: var(--retro-marrom-escuro);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--retro-accent);
    box-shadow: 0 0 0 2px rgba(168, 88, 50, 0.2);
}

/* Rodapé */
footer {
    background-image: var(--gradient-footer);
    color: var(--retro-bege-claro);
}

/* Ícones de redes sociais */
.social-icon {
    background-color: var(--retro-marrom-medio);
    color: var(--retro-bege-claro);
}

.social-icon:hover {
    background-color: var(--retro-accent);
}

/* Efeito de sepia para imagens (opcional, para reforçar o estilo retrô) */
.foto-imagem img, .biografia-img {
    filter: sepia(20%);
    transition: filter 0.3s ease;
}

.foto-imagem img:hover, .biografia-img:hover {
    filter: sepia(0%);
}



/* Estilo para reduzir logo do rodapé */
.footer-logo {
    max-height: 60px; /* Reduzido para harmonizar com header */
    width: auto;
    margin-bottom: 15px; /* Espaço abaixo da logo */
}