/* Importação das Novas Fontes (Modernas e Legíveis) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Open+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

:root {
    --pink: #e60050; /* Um tom de rosa/vermelho mais moderno e digital */
    --blue: #00e5ff;
    --dark-neutral: #0a0b10;
    --text-dark: #1a1c23;
    --text-gray: #4a4d5a;
    --white: #ffffff;
    --border-color: #d1d5e0;
}

/* ====================================================
   GERAL & RESET
==================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Open Sans', sans-serif; 
    /* Novo background com degradê suave e moderno */
    background: linear-gradient(135deg, #f4f6f9 0%, #e4e8f0 100%);
    background-attachment: fixed;
    color: var(--text-dark);
    font-size: 16px; /* Fonte base maior, estilo portal VGC */
    line-height: 1.6;
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }

/* ====================================================
   GESTÃO DE ADS (Ocultos para o Usuário, Prontos no Código)
==================================================== */
.future-ad { 
    display: none !important; /* Esconde visualmente */
}

/* ====================================================
   NAVBAR COMPACTA & CENTRALIZADA
==================================================== */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
    position: fixed; top: 0; width: 100%; z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.nav-container {
    max-width: 1400px; margin: 0 auto; 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 20px; height: 60px; /* Um pouco mais de respiro */
}
.logo { 
    font-family: 'Righteous', sans-serif; font-size: 24px; color: var(--pink); 
    text-transform: uppercase; letter-spacing: 1px; text-decoration: none;
}
.nav-links { 
    display: flex; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a { 
    text-decoration: none; color: var(--text-dark); 
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--pink); }
.nav-terminal-btn { color: var(--pink) !important; border-bottom: 2px solid var(--pink); padding-bottom: 4px; }
.btn-login { font-family: 'Montserrat', sans-serif; text-decoration: none; color: var(--text-gray); font-size: 12px; font-weight: bold; }

/* ====================================================
   BARRA DE REDES SOCIAIS
==================================================== */
.social-bar {
    background: var(--dark-neutral);
    color: var(--white);
    height: 36px;
    margin-top: 60px; 
    display: flex; align-items: center; justify-content: center;
    border-bottom: 2px solid var(--pink);
}
.social-bar-container {
    max-width: 1400px; width: 100%; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 1px;
}
.social-links { display: flex; gap: 20px; }
.social-links a { 
    color: rgba(255, 255, 255, 0.7); text-decoration: none; 
    display: flex; align-items: center; gap: 5px; transition: 0.2s;
}
.social-links a:hover { color: var(--blue); }

/* ====================================================
   ESTRUTURA DE GRID (Ajustado para ADS ocultos)
==================================================== */
.portal-wrapper {
    max-width: 1440px; margin: 30px auto;
    display: grid;
    /* Grid dinâmico: Sem os anúncios laterais, usa 1fr (feed) e 320px (sidebar) */
    grid-template-columns: 1fr 320px; 
    gap: 30px; padding: 0 20px;
}

/* ====================================================
   FEED CENTRAL & CARDS EM 3 COLUNAS
==================================================== */
.main-feed { 
    border-right: 1px solid var(--border-color); padding-right: 30px;
}
.feed-section { margin-bottom: 50px; }
.section-title { 
    font-size: 20px; font-weight: 800;
    border-bottom: 3px solid var(--text-dark); padding-bottom: 8px;
    margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;
}
.text-gold { border-bottom-color: #ff7700 !important; }
.text-blue { border-bottom-color: var(--blue) !important; }

/* Grid de 3 colunas para as notícias */
.news-grid-container {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
}

/* CARDS COM IMAGEM À ESQUERDA */
.main-news-card { 
    background: var(--white); border-radius: 8px; overflow: hidden; 
    border: 1px solid transparent; /* Borda invisível para manter o tamanho no hover */
    display: flex; flex-direction: row; height: 130px; 
    transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.main-news-card:hover { 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    border-color: var(--pink); 
    transform: translateY(-4px); /* Efeito de elevação premium */
}
.news-img { 
    width: 110px; /* Imagem travada à esquerda */
    height: 100%; background-size: cover; background-position: center; flex-shrink: 0;
}
.news-body { 
    padding: 12px 15px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; overflow: hidden;
}
.tag { 
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; 
    display: inline-block; color: white; width: fit-content; text-transform: uppercase;
}
.leak { background: var(--pink); } 
.gold { background: #ff7700; color: #fff !important; } 
.blue { background: var(--blue); color: #000 !important; }
.lore { background: #0077ff; }

.news-body h3 { 
    font-size: 15px; font-weight: 800; line-height: 1.3; 
    color: var(--text-dark); margin: 6px 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-body p { 
    display: none; /* Resumo ocultado nos cards de 3 colunas para manter o layout limpo */
}
.card-meta { 
    font-family: 'Montserrat', sans-serif; font-size: 10px; color: #888; text-transform: uppercase; font-weight: 700;
}

/* ====================================================
   SIDEBAR
==================================================== */
.sidebar { display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget { 
    background: var(--white); padding: 20px; border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.widget-title { 
    font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; margin-bottom: 15px; 
    color: var(--text-dark); border-bottom: 2px solid var(--border-color); padding-bottom: 8px;
    letter-spacing: 1px;
}
.top-list { list-style: none; }
.top-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; font-size: 14px; font-weight: 600;}
.rank { font-family: 'Righteous', sans-serif; font-size: 20px; color: var(--pink); }
.top-list a { color: var(--text-dark); text-decoration: none; line-height: 1.4; transition: 0.2s;}
.top-list a:hover { color: var(--pink); }

/* ====================================================
   PÁGINA INTERNA DE NOTÍCIA (`noticia.html`)
==================================================== */
.article-container { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.article-header { margin-bottom: 25px; }
.article-title { font-size: 36px; font-weight: 800; line-height: 1.2; margin: 15px 0; letter-spacing: -0.5px;}
.article-meta { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: #777; margin-bottom: 20px; text-transform: uppercase; }
.article-banner { width: 100%; height: 450px; background-size: cover; background-position: center; border-radius: 8px; margin-bottom: 30px; }
.article-content { font-size: 18px; /* FONTE ESTILO VGC PARA LEITURA */ line-height: 1.8; color: #222; }
.article-content p { margin-bottom: 20px; }

/* ====================================================
   INTERFACE DO TERMINAL DE IA (`terminal.html`)
==================================================== */
.terminal-body { background-color: #08090d; color: #e2e4eb; display: flex; height: 100vh; overflow: hidden; font-family: 'Open Sans', sans-serif;}
.sidebar-terminal { width: 280px; background: #0c0d12; border-right: 1px solid #1f2231; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }
.sidebar-header h1 { font-family: 'Righteous', sans-serif; color: var(--pink); font-size: 26px; }
.sidebar-header p { font-size: 11px; color: var(--blue); letter-spacing: 1px; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 20px;}
.sidebar-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.sidebar-menu a { color: #a0a5b5; text-decoration: none; padding: 12px; border-radius: 6px; font-size: 13px; font-weight: 700; transition: 0.2s; font-family: 'Montserrat', sans-serif;}
.sidebar-menu a:hover, .sidebar-menu a.active { background: #151722; color: var(--blue); }
.sidebar-footer { font-size: 11px; color: #555864; font-family: 'Montserrat', sans-serif; }
.main-terminal { flex: 1; display: flex; flex-direction: column; position: relative; background: radial-gradient(circle at center, #141622 0%, #08090d 100%); overflow: hidden; }
.main-terminal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
.terminal-header { height: 60px; border-bottom: 1px solid #1f2231; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(12, 13, 18, 0.8); backdrop-filter: blur(5px); }
.status-indicator { display: flex; align-items: center; gap: 8px; font-size: 11px; font-family: 'Montserrat', sans-serif; font-weight: 700; }
.status-dot { width: 10px; height: 10px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 10px var(--blue); }
.chat-history { flex: 1; padding: 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.message { display: flex; flex-direction: column; max-width: 80%; }
.message.user { align-self: flex-end; }
.message.bot { align-self: flex-start; }
.msg-meta { font-size: 10px; color: #555864; font-family: 'Montserrat', sans-serif; font-weight: 700; margin-bottom: 6px; }
.message.user .msg-meta { align-self: flex-end; }
.msg-content { padding: 15px 20px; border-radius: 8px; font-size: 14px; line-height: 1.6; }
.message.user .msg-content { background: var(--pink); color: #fff; border-bottom-right-radius: 2px; }
.message.bot .msg-content { background: #151722; color: #e2e4eb; border-bottom-left-radius: 2px; border: 1px solid #1f2231; }
.input-area { padding: 25px; border-top: 1px solid #1f2231; background: #0c0d12; }
.input-wrapper { display: flex; background: #151722; border: 1px solid #1f2231; border-radius: 8px; overflow: hidden; }
.input-wrapper input { flex: 1; background: transparent; border: none; padding: 18px; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; outline: none; }
.input-wrapper button { background: var(--pink); border: none; color: white; font-family: 'Montserrat', sans-serif; font-weight: 800; padding: 0 30px; cursor: pointer; transition: 0.2s; }
.input-wrapper button:hover { background: #b3003e; }

/* ====================================================
   RESPONSIVIDADE (Tablets e Mobile)
==================================================== */
@media (max-width: 1024px) {
    .portal-wrapper { grid-template-columns: 1fr; }
    .sidebar { display: none; } /* Oculta sidebar em telas menores para priorizar conteúdo */
    .news-grid-container { grid-template-columns: repeat(2, 1fr); } /* 2 colunas para tablets */
}
@media (max-width: 768px) {
    .news-grid-container { grid-template-columns: 1fr; } /* 1 coluna para celular */
    .nav-links { display: none; } 
    .main-feed { padding-right: 0; border-right: none; }
    .main-news-card { height: 110px; }
    .news-img { width: 100px; } /* Ajusta imagem da esquerda para mobile */
    .article-title { font-size: 28px; }
    .article-banner { height: 250px; }
}