/* ==========================================================================
   MÚSICA TRADICIONALISTA - CUSTOM PREMIUM CSS
   ========================================================================== */

/* --- 1. VARIÁVEIS DE CORES PREMIUM --- */
:root {
    --bg-offwhite: #F8F7F2;     /* Fundo elegante papel/palha */
    --verde-mate: #3b5a45;      /* Verde escuro sofisticado */
    --terracota: #8c3b3a;       /* Vermelho rústico/lenço */
    --ouro-velho: #d1c8b4;      /* Amarelo suave */
    --texto-escuro: #2C2C2C;    /* Texto base (não 100% preto para leitura suave) */
    --texto-claro: #666666;

    /* Cores da Bandeira RS (Versão Muted/Premium para detalhes) */
    --rs-verde: #2a4d33;
    --rs-amarelo: #d4af37;
    --rs-vermelho: #9b2226;
}

/* --- 2. TIPOGRAFIA --- */
/* Fonte Ubuntu para todo o corpo do texto (conforme solicitado) */
body, p, a, span, div, .btn, .nav-link, .artista-description {
    font-family: 'Ubuntu', sans-serif !important;
    color: var(--texto-escuro);
}

/* Fonte Serifada apenas para Títulos (Elegância/Acervo) */
h1, h2, h3, h4, h5, h6, .hero-title, .section-title {
    font-family: 'Ubuntu', sans-serif !important;
    color: var(--verde-mate);
    font-weight: 700;
}

/* --- 3. ESTRUTURA GLOBAL --- */
body.bg-offwhite, .bg-offwhite {
    background-color: var(--bg-offwhite) !important;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* O "Fundo RS" modernizado: Linha divisória elegante */
hr.rs-divider, .fundo-rs {
    width: 80px; /* Mais curto e chique */
    height: 3px;
    border: none;
    background: linear-gradient(to right, var(--rs-verde) 33%, var(--rs-amarelo) 33%, var(--rs-amarelo) 66%, var(--rs-vermelho) 66%);
    margin: 1.5rem auto;
    border-radius: 2px;
    opacity: 0.9 !important;
}

/* --- 4. NAVBAR (MENU) --- */
.nav-menu {
    background-color: #ffffff; /* Fundo limpo */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.nav-menu .nav-link {
    color: var(--texto-claro);
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    position: relative;
    transition: color 0.3s ease;
    padding: 0.5rem 1rem;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link.active {
    color: var(--verde-mate);
}

/* Sublinhado animado premium no menu */
.nav-menu .nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--rs-amarelo);
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after {
    transform: scaleX(1);
}

/* --- 5. CARDS E EFEITOS DE HOVER (Unificados) --- */
/* Substitui os antigos card-animado, reflexo-inside, etc */
.card-premium, .album-card, .game-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.05);
}

.card-premium:hover, .album-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}

.game-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(140, 59, 58, 0.15) !important;
}

/* Imagens dentro dos cards (Efeito de zoom suave) */
.album-image-wrapper {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.card-img-top {
    transition: transform 0.6s ease;
}

.card-premium:hover .card-img-top,
.album-card:hover .card-img-top {
    transform: scale(1.05);
}

/* --- 6. ÍCONES SOCIAIS E BOTÕES --- */
/* Cores mais sóbrias para os ícones */
.bi-youtube { color: #d32f2f !important; }
.bi-spotify { color: #2e7d32 !important; }
.bi-facebook { color: #1565c0 !important; }
.bi-instagram { color: #c2185b !important; }
.bi-suit-heart-fill { color: var(--terracota) !important; }

.d-flex-social {
    display: inline-flex;
    gap: 12px;
}

.btn-play {
    transition: all 0.3s ease;
    background-color: var(--terracota);
    border: none;
}

.btn-play:hover {
    background-color: #722f2e;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(140, 59, 58, 0.3);
}

/* --- 7. UTILITÁRIOS --- */
.form-control:focus {
    box-shadow: none;
    border-color: var(--verde-mate);
}

mark {
    font-weight: normal;
    background-color: rgba(212, 175, 55, 0.2); /* Fundo ouro translúcido */
    color: var(--terracota);
    padding: 0 4px;
    border-radius: 2px;
}

iframe {
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

footer li {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Ubuntu', sans-serif;
}