.elementor-829 .elementor-element.elementor-element-f9ec350{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-829 .elementor-element.elementor-element-f9ec350:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-f9ec350 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0A1F;}.elementor-829 .elementor-element.elementor-element-8f55d5b{--display:flex;}.elementor-829 .elementor-element.elementor-element-8f55d5b:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-8f55d5b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0A1F;}.elementor-829 .elementor-element.elementor-element-59c86f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-829 .elementor-element.elementor-element-59c86f9:not(.elementor-motion-effects-element-type-background), .elementor-829 .elementor-element.elementor-element-59c86f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0A1F;}.elementor-829 .elementor-element.elementor-element-3475d71{--display:flex;}.elementor-829 .elementor-element.elementor-element-5810468{margin:-89px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-829 .elementor-element.elementor-element-f9ec350{--content-width:1600px;}.elementor-829 .elementor-element.elementor-element-8f55d5b{--content-width:73%;}}/* Start custom CSS for html, class: .elementor-element-424ba45 *//* Garante que o Header e o Footer (que você adicionou) fiquem escuros */
header, footer, [class*="footer"] {
    background-color: #0A0A1F !important;
    color: #FFFFFF !important;
}
header a, footer a {
    color: #00FFFF !important; /* Cor Neon para links do menu */
}
/* ================================================= */
/* 1. VARIÁVEIS BASE */
/* ================================================= */
:root {
    --fundo-principal: #0A0A1F; /* Fundo do Header/Footer */
    --card-fundo: #15152A; /* Fundo dos cards escuros */
    --azul-eletrico: #00FFFF; /* Links/Destaque Header */
    --roxo-neon: #FF00FF; /* Links/Destaque Cards */
    --texto-branco: #FFFFFF;
}

/* ================================================= */
/* 2. LAYOUT DE GRADE (GRID) PARA OS CARDS */
/* ================================================= */
.artigos-grid .grid-container {
    display: grid;
    /* Grade de 3 colunas, ajusta para 2 ou 1 em telas menores */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* ================================================= */
/* 3. ESTILO E ANIMAÇÃO DOS CARDS (COMO NA HOME) */
/* ================================================= */
.artigo-card.card {
    /* Faz o card ser o link completo */
    text-decoration: none;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-radius: 12px;
    /* Fundo Escuro do Card sobre o fundo branco da página */
    background-color: var(--card-fundo) !important; 
    border: 2px solid var(--roxo-neon); /* Borda Neon Roxo */
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2); /* Sombra Neon */
    
    color: var(--texto-branco); /* Texto Padrão Branco dentro do card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.artigo-card.card:hover {
    /* Efeito de animação: levanta o card e intensifica o Neon */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3);
}

/* Estilo do Texto dentro do Card */
.artigo-card .card-title {
    color: var(--texto-branco) !important; /* Títulos Brancos no fundo escuro do card */
    font-size: 1.5rem;
    margin-top: 0;
}
.artigo-card .card-description {
    color: rgba(255, 255, 255, 0.7) !important; /* Texto secundário cinza claro */
    flex-grow: 1; /* Garante que todos os cards tenham a mesma altura */
}
.artigo-card .read-more {
    color: var(--roxo-neon) !important; /* Link "Leia Mais" roxo */
    font-weight: bold;
    margin-top: 15px;
}

/* ================================================= */
/* 4. CORREÇÃO FINAL DE CORES (Header/Footer) */
/* ================================================= */
header, footer, [class*="footer"] {
    background-color: var(--fundo-principal) !important;
    color: var(--texto-branco) !important;
}
header a, footer a {
    color: var(--azul-eletrico) !important;
}/* End custom CSS */