/*
============================================================
CSS GERAL (DARK MODE + SPOTLIGHT INTELIGENTE)
============================================================
*/

/* --- 1. DEFINIÇÃO DAS CORES GLOBAIS --- */
:root {
    --fundo-claro: #FFFDF9;
    --texto-claro: #000000;
    --hover-claro: #FD82FF;
    --ativo-claro: #FD82FF;
}

html.dark-mode {
    --fundo-escuro: #000000;
    --texto-escuro: #FFFDF9;
    --hover-escuro: #90007B;
    --ativo-escuro: #90007B;
}

/* --- 2. APLICAÇÃO GERAL DAS CORES --- */
body, body .elementor-section {
    background-color: var(--fundo-claro);
}

h1, h2, h3, p, span, div, .elementor-widget-container a, .elementor-item {
    color: var(--texto-claro);
}

.elementor-nav-menu--main .elementor-item:hover { color: var(--hover-claro) !important; }
.elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--ativo-claro) !important; }

/* --- 3. REGRAS PARA O MODO ESCURO --- */
html.dark-mode, 
html.dark-mode .elementor-section,
html.dark-mode .elementor-container,
html.dark-mode .e-con,
html.dark-mode .e-con-inner,
html.dark-mode .elementor-page,
html.dark-mode .elementor-location-header {
    background-color: var(--fundo-escuro) !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode p, html.dark-mode span, html.dark-mode div,
html.dark-mode .elementor-widget-container a, html.dark-mode .elementor-item {
    color: var(--texto-escuro) !important;
}

html.dark-mode .elementor-nav-menu--main .elementor-item:hover { color: var(--hover-escuro) !important; }
html.dark-mode .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--ativo-escuro) !important; }


/* --- 4. ESTILOS DO BOTÃO E MENU MOBILE --- */
#botao-dark-mode .elementor-button, #botao-dark-mode {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#botao-dark-mode .elementor-button-text { color: var(--texto-claro) !important; }
html.dark-mode #botao-dark-mode .elementor-button-text { color: var(--texto-escuro) !important; }
html.dark-mode .elementor-nav-menu--dropdown { background-color: var(--fundo-escuro) !important; }
html.dark-mode .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { background-color: transparent !important; }

/*
============================================================
FUNDOS E SPOTLIGHT ESPECÍFICOS POR PÁGINA
============================================================
*/

/* --- ESTILO BASE DA LANTERNA --- */
.spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 650px;
    height: 650px;
    border-radius: 100%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    display: none;
    background: radial-gradient(circle, var(--spotlight-color, rgba(255,255,255,0.2)) 0%, rgba(255,255,255,0) 70%);
}


/* --- DEFINIÇÃO DAS CORES POR PÁGINA E TEMA --- */

/* PÁGINA HOME (ID 152) */
body.page-id-152 {
    background-color: #FEB9FF !important;
    --spotlight-color: rgba(255, 253, 249, 0.45); /* #FFFDF9 */
}
html.dark-mode body.page-id-152 {
    background-color: var(--fundo-escuro) !important;
    --spotlight-color: rgba(144, 0, 123, 0.45); /* #90007B */
}

/* PÁGINA SOBRE (ID 198) - CORES CORRIGIDAS */
body.page-id-198 {
    --spotlight-color: rgba(253, 130, 255, 0.45); /* #FD82FF - CORRIGIDO */
}
html.dark-mode body.page-id-198 {
    --spotlight-color: rgba(144, 0, 123, 0.45); /* #90007B - CORRIGIDO */
}

/* PÁGINA PARTICIPANTES (ID 1314) e ARTISTAS (ID 782) */
body.page-id-1314,
body.page-id-782 {
    background-color: #DBC8FF !important;
    --spotlight-color: rgba(255, 253, 249, 0.45); /* CORRIGIDO para #FFFDF9 (branco) */
}
html.dark-mode body.page-id-1314,
html.dark-mode body.page-id-782 {
    background-color: var(--fundo-escuro) !important;
    --spotlight-color: rgba(93, 29, 161, 0.45); /* #5D1DA1 */
}