body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #000; /* Fundo principal preto */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

.topo-blog {
    position: fixed; top: 0; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; z-index: 1000; box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}

/* Botão Voltar */
.btn-voltar {
    color: white; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 18px;
    background: none; 
    border: none; 
    cursor: pointer; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Novo Botão Compartilhar Estilizado (Efeito Vidro / Glassmorphism) */
.btn-compartilhar {
    background: rgba(255, 255, 255, 0.15); /* Fundo semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Bordinha leve */
    border-radius: 50%; /* Deixa redondinho */
    width: 45px; 
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px; /* Tamanho do Emoji */
    cursor: pointer;
    backdrop-filter: blur(8px); /* Efeito de vidro desfocado */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
    padding-bottom: 3px; /* Centraliza o emoji perfeitamente */
}

/* Efeito ao clicar ou passar o dedo */
.btn-compartilhar:active, .btn-compartilhar:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.25);
}

/* Scroll Vertical Estilo TikTok */
.scroll-container {
    height: 100vh; width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.scroll-container::-webkit-scrollbar { display: none; } /* Esconde scrollbar nativo */

.destaque-item {
    height: 100vh; width: 100%;
    scroll-snap-align: start;
    display: flex; justify-content: center; align-items: center;
    position: relative; transition: filter 0.3s ease;
    cursor: pointer;
}

/* O efeito escurecido ao rolar é feito via JS, mas o CSS prepara o terreno */
.destaque-item.escurecido { filter: brightness(0.4); }

.conteudo-destaque {
    text-align: center; color: white; padding: 20px;
    background: rgba(0,0,0,0.4); border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 90%; width: 320px;
}

/* Imagem Padrão com Borda Prateada */
.img-destaque {
    width: 250px; height: 300px;
    object-fit: cover;
    border: 1px solid silver;
    border-radius: 10px; margin-bottom: 15px;
}

.conteudo-destaque h2 { margin: 0 0 10px 0; font-size: 22px; text-shadow: 1px 1px 2px #000; }
.conteudo-destaque p { font-size: 14px; line-height: 1.4; text-shadow: 1px 1px 2px #000; }
.leia-mais { display: inline-block; margin-top: 15px; font-weight: bold; background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px;}

/* === AS 20 CORES DE FUNDO EM DEGRADÊ VIBRANTE === */
.grad-1 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); }
.grad-2 { background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); }
.grad-3 { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
.grad-4 { background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); }
.grad-5 { background: linear-gradient(120deg, #ff0844 0%, #ffb199 100%); }
.grad-6 { background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); }
.grad-7 { background: linear-gradient(120deg, #4facfe 0%, #00f2fe 100%); }
.grad-8 { background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%); }
.grad-9 { background: linear-gradient(120deg, #fa709a 0%, #fee140 100%); }
.grad-10 { background: linear-gradient(120deg, #30cfd0 0%, #330867 100%); }
.grad-11 { background: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%); }
.grad-12 { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); }
.grad-13 { background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); }
.grad-14 { background: linear-gradient(to right, #fa709a 0%, #fee140 100%); }
.grad-15 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%); }
.grad-16 { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); }
.grad-17 { background: linear-gradient(to top, #ff0844 0%, #ffb199 100%); }
.grad-18 { background: linear-gradient(to right, #f83600 0%, #f9d423 100%); }
.grad-19 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.grad-20 { background: linear-gradient(135deg, #13547a 0%, #80d0c7 100%); }

/* === TELA DO ARTIGO COMPLETO === */
.modal-artigo {
    position: fixed; top: 100%; left: 0; width: 100%; height: 100%;
    background: #111; z-index: 2000; color: white;
    transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; flex-direction: column;
}
.modal-artigo.ativo { top: 0; }

.modal-header { padding: 15px; background: #000; text-align: right; border-bottom: 1px solid #333; }
.btn-fechar { background: #ff4757; color: white; border: none; padding: 8px 15px; border-radius: 5px; font-weight: bold; cursor: pointer; }

.modal-body {
    flex: 1; padding: 20px; overflow-y: auto; font-size: 18px; line-height: 1.6;
}

/* BARRA DE ROLAGEM VERDE NA ÁREA DO ARTIGO */
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: #000; }
.modal-body::-webkit-scrollbar-thumb { background: #2ed573; border-radius: 5px; }

.modal-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 15px 0; }
.anuncio-meio { margin: 30px 0; text-align: center; background: #222; padding: 10px; border-radius: 10px;}