/* =============================================
    SKIN: TEMA RELAÇÕES E SOCIEDADE
    Este arquivo SÓ define as cores e imagens.
============================================= */

body.page-relations {
    /* -- 1. Variáveis do Esqueleto (com cores da paleta Relações e Sociedade) -- */
    --theme-body-bg: #0d0d21; /* Um azul bem escuro, quase preto */
    --theme-text-light: #e0e0f0;
    --theme-text-muted: #a0b0c0; /* Um cinza-azulado suave */
    --theme-bg-dark: #0d0d21;

    --theme-primary: #4a7dff;    /* Azul vibrante principal */
    --theme-secondary: #00e6e6;  /* Ciano secundário */
    
    --theme-header-image: url('/img/7.jpg'); /* **COLOQUE A URL DA SUA IMAGEM AQUI** */
    --theme-header-position: right center;
    --theme-header-border: 2px solid;
    --theme-header-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);

    /* Gradiente para o título */
    --theme-title-gradient: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    
    --theme-card-bg: #1a1a3a; /* Azul escuro do card */
    --theme-card-border: rgba(255, 255, 255, 0.1); /* Borda sutil */
    --theme-card-icon-bg: #0d0d21; /* Fundo do ícone (mais escuro) */
    --theme-card-hover-shadow: 0 10px 25px rgba(74, 125, 255, 0.3); /* Sombra azul no hover */
    
    --theme-icon-shadow: 0 0 15px rgba(74, 125, 255, 0.4); /* Brilho azul */
    
    --theme-button-text: var(--theme-primary);
    --theme-button-border: 2px solid var(--theme-primary);
    --theme-button-bg: transparent;
    --theme-button-hover-bg: var(--theme-primary); /* Fundo sólido azul no hover */
    --theme-button-hover-text: #0d0d21; /* Texto escuro no botão azul */
    --theme-button-hover-shadow: 0 0 15px rgba(74, 125, 255, 0.5);
    
    --theme-mobile-arrow-color: var(--theme-primary) !important; /* Seta azul no mobile */
}

/* --- 2. Sobrescritas Específicas do Tema --- */

/* Borda do Header (gradiente azul/ciano) */
.page-relations header.hero-catalog {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
}

/* Título com gradiente e borda */
.page-relations .category-title {
    background: var(--theme-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    border-image-source: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
    border-image-slice: 1 !important;
    border-bottom: var(--theme-header-border) !important;
}

/* Efeito de "partículas" e "névoa" para complementar */
body.page-relations::before {
    content: '';
    position: fixed;
    top: 5%; left: 5%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--theme-primary) 0%, transparent 60%);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    animation: pulse 4s infinite alternate;
}
body.page-relations::after {
    content: '';
    position: fixed;
    bottom: 10%; right: 10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--theme-secondary) 0%, transparent 60%);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    animation: pulse 5s infinite alternate reverse;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.08; }
    100% { transform: scale(1.1); opacity: 0.15; }
}