/*
Theme Name: Portal Teen
Theme URI: https://juliocamara.dev/portal-teen/
Author: Julio Camara
Author URI: https://juliocamara.dev/
Description: Tema customizado para o portal de notícias teen, desenvolvido sem page builders.
Version: 1.3
*/

/* --- Reset Básico e Fontes --- */
/* --- Reset Básico e Fontes --- */
body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    margin: 0;
    background: linear-gradient(135deg, #ff2e63, #8A2BE2, #00BFFF);
    background-attachment: fixed;
    background-size: cover;
    color: #333;
}

/* --- Estrutura e Container --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================================
   HEADER AJUSTADO
   ========================================================================= */
.site-header-final {
    background: linear-gradient(120deg, #d629b4, #ff5b8d, #ffc900);
    padding: 5px 0; /* Adicionado um padding vertical mínimo */
    border-bottom: 3px solid #1c1c1c;
}

.header-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    margin: -25px 0; /* ADICIONADO: Margem negativa para compensar a altura */
}

/* Área do Logo (tamanho reduzido) */
.logo-area .logo-link {
    display: inline-block;
    text-decoration: none;
}

.logo-area .logo-link img {
    height: 130px; /* Reduzido de 145px para um tamanho mais compacto */
    width: auto;
    display: block;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease-in-out;
}

.logo-area .logo-link:hover img {
    transform: scale(1.05);
}

.main-header-menu-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Levemente reduzido */
}

/* Ícones sociais (tamanho reduzido) */
.social-icons-group {
    display: flex;
    gap: 12px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 6px 12px; /* Reduzido */
    border-radius: 50px;
}

.social-icons-group a {
    font-size: 18px; /* Reduzido de 22px */
    color: #fff;
    transition: transform 0.2s ease;
}

.social-icons-group a:hover {
    transform: scale(1.2);
}

/* Botão "AO VIVO" (padding reduzido) */
.live-button-area .live-button {
    background-color: #fff;
    color: #333;
    padding: 8px 20px; /* Reduzido de 10px 25px */
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #FF0000; /* Borda um pouco mais fina */
}

/* Espaçamento da navegação e busca reduzido */
.header-main-nav {
    margin-top: 10px;    /* Reduzido de 15px */
    margin-bottom: 10px; /* Reduzido de 15px */
}

/* Menu principal (tamanho dos botões reduzido) */
.main-nav-pills ul {
    display: flex;
    gap: 15px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav-pills .menu-item a {
    display: block;
    padding: 8px 25px; /* Padding vertical reduzido de 12px */
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px; /* Adicionado para garantir consistência */
    transition: transform 0.2s ease;
    border: 2px solid transparent;
}

.main-nav-pills .menu-item a:hover {
    transform: scale(1.05);
}

/* Cores do menu (mantidas) */
.main-nav-pills .menu-item:nth-child(1) a { background-color: #ff8c00; color: white; }
.main-nav-pills .menu-item:nth-child(2) a { background-color: #8A2BE2; color: white; }
.main-nav-pills .menu-item:nth-child(3) a { background-color: #00BFFF; color: white; }
.main-nav-pills .menu-item:nth-child(4) a { background-color: #e83e8c; color: white; }
.main-nav-pills .menu-item:nth-child(5) a { background-color: #32CD32; color: white; }

/* Área de busca (tamanho reduzido) */
.header-search-area .search-form {
    display: flex;
    position: relative;
}

.header-search-area .search-field {
    width: 100%;
    padding: 12px 55px 12px 25px; /* Padding reduzido, especialmente o vertical */
    border-radius: 50px;
    border: 2px solid #00aaff; /* Borda mais fina */
    font-size: 15px; /* Reduzido de 18px */
    background-color: #f0f8ff;
    color: #333;
}

.header-search-area .search-field::placeholder {
    color: #888;
}

/* Botão de busca (tamanho reduzido para corresponder ao campo) */
.header-search-area .search-submit {
    position: absolute;
    right: 5px; /* Ajustado */
    top: 50%;
    transform: translateY(-50%);
    background-color: #00aaff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 42px;  /* Reduzido de 50px */
    height: 42px; /* Reduzido de 50px */
    font-size: 16px; /* Reduzido de 20px */
    cursor: pointer;
    text-indent: -9999px;
}

.header-search-area .search-submit::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f002";
    text-indent: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =========================================================================
   SEÇÕES DA HOME - ESTILO MODERNO FINAL
   ========================================================================= */

/* =========================================================================
   TÍTULOS DAS SEÇÕES (COM ÍCONES FONT AWESOME)
   ========================================================================= */

/* Base para os títulos de seção */
.latest-news h3,
.video-news h3 {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 25px 12px 20px; /* Mais espaço à direita para o ícone */
    border-radius: 50px;
    margin-bottom: 25px;
    margin-top: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative; /* Necessário para o posicionamento do ícone */
}

/* Adiciona o ícone antes do texto */
.latest-news h3::before,
.video-news h3::before {
    font-family: "Font Awesome 6 Free"; /* Chama a fonte dos ícones */
    font-weight: 900; /* Usa o estilo de ícone sólido */
    margin-right: 12px; /* Espaço entre o ícone e o texto */
    font-size: 16px;
}

/* Ícone específico para "Últimas Notícias" (ícone de jornal) */
.latest-news h3 {
    background: linear-gradient(45deg, #2c3e50, #4ca1af); /* Gradiente azul escuro */
}
.latest-news h3::before {
    content: "\f1ea"; /* Código Unicode do ícone 'newspaper' */
}

/* Ícone específico para "Vídeos em Destaque" (ícone de vídeo) */
.video-news h3 {
    background: linear-gradient(45deg, #d629b4, #9C27B0); /* Gradiente roxo/pink */
}
.video-news h3::before {
    content: "\f03d"; /* Código Unicode do ícone 'video' */
}

/* Estilo do título da enquete (mantemos simples) */
.home-poll-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    margin-top: 40px;
    color: #333;
}

/* --- Estilo Moderno para TODOS os Cards --- */
.featured-story, .news-item, .video-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    background-color: #333; /* Fundo de fallback */
    padding: 0;
    margin-bottom: 20px;
}
/* --- ESTILO PARA O TÍTULO DO POST EM DESTAQUE --- */

.featured-story .card-content h4 {
    font-size: 36px;    /* Tamanho grande para o título de destaque */
    line-height: 1.2;   /* Espaçamento entre as linhas do título */
    margin: 10px 0 0 0; /* Remove margens extras */
    color: #fff;         /* Cor do texto branca */
}

/* Garante que o link dentro do título também seja branco e sem sublinhado */
.featured-story .card-content h4 a {
    color: #fff;
    text-decoration: none;
}
.featured-story {
    min-height: 300px;
    margin-top: 30px;
}
.news-item, .video-item {
    min-height: 280px; /* <<<< ALTURA DOS CARDS MENORES DIMINUÍDA */
}
.news-item {
    position: relative;
    overflow: hidden;
}

.card-link-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* mais baixo que os textos */
    display: block;
}

.card-content {
    position: relative;
    z-index: 2; /* garante que o título fique acima do link */
}


.image-placeholder-large, .image-placeholder-small, .video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
    border-radius: 0;
    background-color: #ccc;
}
.image-placeholder-large img, .image-placeholder-small img, .video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.featured-story:hover img, .news-item:hover img, .video-item:hover img {
    transform: scale(1.1);
}
.featured-story::after, .news-item::after, .video-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%);
    z-index: 2;
    border-radius: 20px;
    transition: background 0.3s ease;
}
.card-content {
    position: relative;
    z-index: 3; /* Fica na frente da imagem e do gradiente */
    color: #fff;
    padding: 20px;
    width: 100%;
    margin-top: auto; /* Empurra o texto para a base do card */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Sombra para legibilidade */
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}
.featured-story .card-content {
    padding: 30px;
}
.card-content h2, .card-content h4 {
    margin: 10px 0 0 0;
    color: #fff;
}
.featured-story .card-content h2 {
    font-size: 36px;
}
.card-content h4 {
    font-size: 20px;
    line-height: 1.3;
}
.video-placeholder::after {
    content: '▶';
    font-size: 50px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 15px rgba(0,0,0,0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    transition: transform 0.3s ease;
}
.video-item:hover .video-placeholder::after {
    transform: translate(-50%, -50%) scale(1.2);
}
.news-grid, .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* =========================================================================
   ESTILO FINAL E CORRIGIDO PARA TAGS DE CATEGORIA
   ========================================================================= */

/* 1. Regra Base Forte para o formato de "Botão"
   Este seletor corresponde exatamente à sua estrutura HTML. */
.card-content .category a,
.featured-story .category a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    color: white !important; /* Garante o texto branco */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: none;
    margin-right: 5px; /* Adiciona espaço se houver mais de uma categoria */
    margin-bottom: 5px;
}

.card-content .category a:hover,
.featured-story .category a:hover {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 2. Cores Específicas por Categoria
   Este método usa a classe que o WordPress adiciona ao post inteiro 
   (ex: <article class="... category-musica ...">) */
a.cat-cultura { background: linear-gradient(45deg, #ff9800, #ffb74d); }
a.cat-destaques { background: linear-gradient(45deg, #4CAF50, #81C784); }
a.cat-games   { background: linear-gradient(45deg, #2196F3, #64B5F6); }
a.cat-moda    { background: linear-gradient(45deg, #E91E63, #F06292); }
a.cat-musica { background: linear-gradient(45deg, #9C27B0, #BA68C8); }
a.cat-videos  { background: linear-gradient(45deg, #f44336, #E57373); }
a.cat-internet  { background: linear-gradient(45deg, #310bdd, #E57373); }
a.cat-financas  { background: linear-gradient(45deg, #36f475, #E57373); }
a.cat-receitas  { background: linear-gradient(45deg, #6936f4, #E57373); }
a.cat-signos  { background: linear-gradient(45deg, #36c8f4, #77e573); }
a.cat-series  { background: linear-gradient(45deg, #f49236, #e573a8); }
a.cat-teen  { background: linear-gradient(45deg, #f436cb, #e59d73); }
a.cat-tecnologia  { background: linear-gradient(45deg, #36f4e4, #a473e5); }



/* Estilo para o Título dos Posts nos Cards */
.card-content h4 {
    font-size: 22px;    /* Tamanho da fonte do título. Pode ajustar. */
    font-weight: 700;   /* Deixa a fonte em negrito (bold). */
    line-height: 1.3;   /* Espaçamento entre as linhas. */
    color: #fff;        /* Cor do texto. */
    margin: 0;          /* Remove margens. */
}

/* ================================ 
   ENQUETE - Layout Ajustado para o Portal
   ================================ */

.home-poll-section {
    background: #2c2c2c; /* Cor escura mais neutra para destacar os botões */
    padding: 0 25px 25px; /* Adicionado padding para respiro */
    margin-top: 40px;
    margin-bottom: 30px;
    border-radius: 25px; /* Um pouco mais arredondado */
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    border: 3px solid #d629b4; /* Borda rosa para combinar com o header */
}

/* Título da enquete */
.home-poll-section h3 {
    background: #ffc900; /* Amarelo do header para unificar */
    color: #1c1c1c; /* Texto escuro para alto contraste */
    font-size: 22px; /* Levemente reduzido */
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 -25px 25px -25px; /* Ajuste para ocupar toda a largura */
    padding: 15px;
    letter-spacing: 1.5px;
    text-shadow: none;
}

/* Pergunta da enquete */
.wp-polls-form p {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 25px;
    text-align: center;
    color: #fff;
    max-width: 90%;
    line-height: 1.4;
    text-shadow: none;
}

/* Container das respostas */
.wp-polls ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Esconde o radio button original */
.wp-polls-ans input[type="radio"] {
    display: none;
}

/* Botões de resposta (labels) */
.wp-polls-ans label {
    display: block;
    padding: 14px 20px;
    border-radius: 50px; /* TOTALMENTE ARREDONDADO para combinar com o site */
    margin-bottom: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Cores dos botões baseadas no seu menu */
.wp-polls-ans li:nth-of-type(1) label {
    background-color: #e83e8c; /* Cor do botão "Moda" */
}
.wp-polls-ans li:nth-of-type(2) label {
    background-color: #00BFFF; /* Cor do botão "Música" */
}
.wp-polls-ans li:nth-of-type(3) label {
    background-color: #32CD32; /* Cor do botão "Séries" */
}

.wp-polls-ans label:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Estilo quando uma resposta é selecionada */
.wp-polls-ans input[type="radio"]:checked + label {
    border-color: #ffc900; /* Borda amarela para indicar seleção */
    transform: scale(1.02);
}

/* Botão Votar */
.wp-polls-form .Buttons {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    background: #8A2BE2; /* Roxo do botão "Entretenimento" */
    color: #fff;
    border: none;
    border-radius: 50px; /* TOTALMENTE ARREDONDADO */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.wp-polls-form .Buttons:hover {
    transform: translateY(-3px);
    background: #9932CC; /* Roxo um pouco mais claro no hover */
}

/* Link Ver Resultados */
.wp-polls a {
    display: inline-block;
    margin-top: 15px;
    color: #ffc900;
    text-decoration: none;
    font-weight: bold;
}

.wp-polls a:hover {
    text-decoration: underline;
}

/* ================================ 
   Estilo dos RESULTADOS da Enquete (VERSÃO CORRIGIDA)
   ================================ */

/* Remove marcadores da lista de resultados */
.wp-polls-ans ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Estilo de cada linha de resultado (cada opção) */
.wp-polls-ans li {
    color: #fff; /* Garante que o texto da opção seja branco */
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 15px;
    padding: 0;
}

/* Estilo do texto de porcentagem e votos (que fica entre parênteses) */
.wp-polls-ans li small {
    font-size: 14px;
    color: #ccc; /* Cor cinza claro para diferenciar */
    font-weight: normal;
    margin-left: 8px;
}

/* A barra de progresso colorida */
.wp-polls-ans .pollbar {
    height: 12px; /* Altura da barra */
    margin-top: 5px;
    border-radius: 12px;
    /* Gradiente vibrante para a barra, combinando com o site */
    background: linear-gradient(90deg, #d629b4, #ffc900);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

/* Estilo para o texto "Total de Votos" */
.wp-polls-total {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* Garante que o texto seja branco */
}

/* Garante que o link "Voltar para Votação" fique visível */
.wp-polls-links a {
    display: inline-block;
    margin-top: 15px;
    font-weight: bold;
    color: #ffc900; /* Amarelo, para combinar com o tema */
    text-decoration: none;
}
.wp-polls-links a:hover {
    text-decoration: underline;
}

/* --- Sidebar, Single Post, Footer etc... --- */
.sidebar { margin-bottom: 30px; }
.widget { background-color: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.widget h4, .widget .widget-title { margin-top: 0; font-size: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 10px 0; border-bottom: 1px solid #eee; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { text-decoration: none; color: #333; }
.single-post-container { background-color: #fff; padding: 30px; border-radius: 8px; margin: 30px 0; }
.single-post-header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 30px; }
.post-meta-single .category a { background-color: #ffc107; color: #333; padding: 5px 10px; border-radius: 5px; font-size: 14px; font-weight: bold; text-decoration: none; }
.post-meta-single .post-date { margin-left: 15px; font-size: 14px; color: #777; }
.single-post-title { font-size: 42px; margin: 20px 0 10px 0; }
.single-post-thumbnail { margin-bottom: 30px; }
.single-post-thumbnail img { width: 100%; height: auto; border-radius: 8px; }
.single-post-content { font-size: 18px; line-height: 1.7; }
.single-post-content p { margin-bottom: 1.5em; }
.site-footer {
    background-color: #1e1e1e;
    color: #a0a0a0;
    padding: 40px 20px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.site-footer .container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.footer-logo img {
    max-width: 80px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-logo img:hover {
    opacity: 1;
}

.social-media {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.social-media a {
    color: #fff;
    font-size: 22px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-media a:hover {
    transform: scale(1.2);
    color: #ffc900;
}

/* Container do menu de rodapé, organizado em coluna */
.footer-links .footer-menu-clean {
    display: flex;
    flex-direction: column; /* Coloca os links um embaixo do outro */
    align-items: center;   /* Centraliza os links horizontalmente */
    gap: 12px;             /* Espaçamento entre os links */
    padding: 0;
    margin: 10px 0;
    list-style: none;
}

/* A regra para '.footer-links .footer-menu-clean li' foi removida
   pois o Flexbox no container pai já controla o layout dos itens.
*/

/* Estilo para os links do menu */
.footer-links .footer-menu-clean a {
    color: #a0a0a0;
    font-weight: 500;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease;
}

/* Efeito ao passar o mouse */
.footer-links .footer-menu-clean a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-contact {
    font-size: 14px;
    margin: 0;
}

.footer-contact a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    font-weight: bold;
}

.footer-contact a:hover {
    color: #fff;
    text-decoration: underline;
}

.copyright {
    font-size: 13px;
    margin: 0;
}

.developed-by {
    font-size: 14px;
    margin: 0;
    color: #a0a0a0;
}

.developed-by a {
    color: #ffc900;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

.developed-by a:hover {
    color: #fff;
    text-decoration: underline;
}

.developed-by a {
    color: #ffc900;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}

.developed-by a:hover {
    color: #fff;
    text-decoration: underline;
}



/* =========================================================================
   HEADER MOBILE
   ========================================================================= */
.mobile-menu-toggle {
    display: none;
}
@media (max-width: 992px) {
    /* Esconde os itens de desktop no mobile */
    .main-header-menu-container {
        display: none;
    }
    .header-main-nav {
        display: none;
    }
    .header-search-area {
        display: none;
    }

    /* Mostra e estiliza o botão hambúrguer */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1010; /* Z-index alto para ficar acima de tudo */
    }
    .mobile-menu-toggle .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        border-radius: 10px;
        transition: all 0.3s ease-in-out;
    }

    /* Área colapsável (o menu que abre) */
    .collapsible-menu-area {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        max-width: 320px;
        height: 100%;
        background: #2c2c2c;
        padding: 80px 20px 20px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        overflow-y: auto;
        display: block; /* Garante que é visível quando aberto */
    }
    /* Mostra a área colapsável quando o menu está aberto */
    .site-header-final.menu-is-open .collapsible-menu-area {
        transform: translateX(0);
    }
    /* Mostra o menu e busca dentro da área colapsável */
    .site-header-final.menu-is-open .header-main-nav,
    .site-header-final.menu-is-open .header-search-area {
        display: block;
    }
    
    /* Animação do botão para 'X' */
    .site-header-final.menu-is-open .mobile-menu-toggle {
        position: fixed; /* Fixa o botão para não rolar com a página quando o menu está aberto */
        right: 20px;
        top: 20px;
    }
    .site-header-final.menu-is-open .mobile-menu-toggle .line:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .site-header-final.menu-is-open .mobile-menu-toggle .line:nth-child(2) {
        opacity: 0;
    }
    .site-header-final.menu-is-open .mobile-menu-toggle .line:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
    
    /* Adapta o menu de pílulas para lista vertical */
    .main-nav-pills ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .main-nav-pills .menu-item a {
        padding: 10px 15px;
        width: 100%;
        text-align: left;
    }
    .main-nav-pills .menu-item a:hover {
        transform: none; /* Remove o efeito de hover do desktop */
    }
}
/* =========================================================================
   LAYOUT ENQUETE + ANÚNCIO (VERSÃO ALINHADA)
   ========================================================================= */

/* O contêiner principal que cria as 2 colunas */
.poll-ads-wrapper {
    display: grid;
    /* ALTERADO: para que a primeira coluna ocupe o espaço restante */
    grid-template-columns: 1fr 300px; 
    gap: 30px;
    align-items: start;
    /* REMOVIDO: justify-content: center; (Este era o problema) */
    margin-top: 40px;
    margin-bottom: 30px;
}

.home-poll-section {
    width: 100%;
    max-width: 400px;
    /* ALTERADO: para alinhar a enquete à direita da sua coluna */
    justify-self: start;
    box-sizing: border-box;
}

/* Estilo para a nova seção de anúncios */
.home-ads-section {
    width: 100%;
    box-sizing: border-box;
}

.home-ads-section h4 {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    font-weight: normal;
}

.ads-placeholder {
    max-width: 300px;
    width: 100%;
    height: 260px;
    background-color: #e9e9e9;
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #aaa;
    box-sizing: border-box;
    margin: 0 auto;
}

.ads-placeholder::after {
    content: '300x260';
}

/* --- Ajustes para mobile --- */
@media (max-width: 768px) {
    .poll-ads-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .ads-placeholder {
        max-width: 100%;
        width: 100%;
        height: auto; /* Altura adaptável */
        aspect-ratio: 300 / 260; /* Mantém proporção original */
    }
}
/* =========================================================================
   LAYOUT DA PÁGINA DE POST (SINGLE.PHP)
   ========================================================================= */

/* Cria o container de 2 colunas: conteúdo + sidebar */
.site-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Coluna principal do conteúdo */
.site-main {
    flex: 1;
    min-width: 0;
}

/* Barra Lateral */
.sidebar {
    flex-basis: 300px;
    flex-shrink: 0;
}

/* Em telas de tablet para baixo, o layout vira de 1 coluna */
@media (max-width: 992px) {
    .sidebar {
        flex-basis: 100%;
    }
}

/* =========================================================================
   SEÇÃO DE POSTS RELACIONADOS
   ========================================================================= */
.related-posts-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #eee;
}

.related-posts-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}
/* =========================================================================
   AJUSTE PARA PÁGINA DE POST SEM SIDEBAR
   ========================================================================= */

/* Remove o layout de grid quando não há sidebar */
.site-content-wrapper.no-sidebar {
    display: block;
}

/* Centraliza a coluna principal QUANDO NÃO HÁ SIDEBAR */
.site-content-wrapper.no-sidebar .site-main {
    max-width: 800px; /* << Largura máxima para uma boa leitura. Ajuste como desejar. */
    margin: 0 auto; /* Truque mágico para centralizar */
}
/* =========================================================================
   FOOTER - AJUSTADO E REORGANIZADO
   ========================================================================= */
.site-footer {
    background-color: #1c1c1c;
    color: #ccc;
    padding: 30px 0 20px; /* Reduzido de 50px 0 30px */
    text-align: center;
    font-size: 16px;
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Reduzido de 30px */
}

.footer-logo img {
    max-width: 90px; /* Reduzido de 130px */
    height: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-logo img:hover {
    opacity: 1;
}

/* Redes sociais */
.social-media {
    display: flex;
    gap: 25px;
}

.social-media a {
    color: #fff;
    font-size: 24px; /* Reduzido de 28px */
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-media a:hover {
    transform: scale(1.2);
    color: #ffc900;
}

/* Links do menu do rodapé com estilo de 'pílula' (VERSÃO CORRIGIDA) */
.footer-menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Gap único para simplificar */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* O li não precisa de margem pois estamos usando 'gap' no container */
.footer-menu-list li {
    margin: 0;
}

/* O seletor agora é mais direto, aplicando aos links dentro da lista */
.footer-menu-list a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px; /* Cantos totalmente arredondados */
    color: #ccc;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease; /* Transição suave para todas as propriedades */
}

/* Efeito de hover mais impactante */
.footer-menu-list a:hover {
    background-color: #ffc900; /* Cor de destaque do seu site */
    border-color: #ffc900;
    color: #1c1c1c; /* Cor escura para contraste no amarelo */
    transform: translateY(-2px);
}

/* Copyright */
.copyright {
    font-size: 14px;
    color: #999;
    /* REMOVIDO: margin-top: 10px; (o 'gap' do container já faz esse espaçamento) */
}

/* Responsivo */
@media (max-width: 768px) {
    .site-footer .container {
        padding: 0 15px;
    }

    .social-media {
        gap: 20px;
    }

    .footer-links .footer-menu-list {
        gap: 10px 20px;
        flex-direction: column;
        align-items: center;
    }
}
/* ========================================
   SEÇÃO VEJA MAIS (VERSÃO CORRIGIDA E CENTRALIZADA)
   ======================================== */

/* REMOVA a regra para 'main.site-main' que passei antes, se ainda estiver lá */
/* main.site-main { ... } */


/* 1. SEÇÃO PRINCIPAL: CENTRALIZADA E COM TEXTO ALINHADO AO CENTRO */
.see-more-section {
    max-width: 960px;   /* Define a largura máxima da seção */
    margin-left: auto;  /* Força a centralização do bloco */
    margin-right: auto; /* Força a centralização do bloco */
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center; /* Centraliza o título "Veja Mais" */
}

/* 2. TÍTULO DA SEÇÃO */
.see-more-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff; /* Alterado para branco para ser legível */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid #ffc900;
    display: inline-block;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para ajudar na leitura */
}

/* 3. GRID DE ITENS */
.see-more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    text-align: left; /* Alinha o texto dos cards à esquerda novamente */
}

/* 4. ITEM INDIVIDUAL */
.see-more-item {
    display: block;
    text-decoration: none;
    background-color: transparent;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.see-more-item:hover {
    transform: translateY(-5px);
}

.see-more-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.see-more-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.see-more-item:hover .see-more-image img {
    transform: scale(1.05);
}

/* 5. TÍTULO DO ITEM (IMPORTANTE!) */
.see-more-item-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff; /* CORRIGIDO PARA BRANCO para ser legível */
    margin-top: 10px; /* Adiciona espaço entre a imagem e o título */
    padding: 0;
    line-height: 1.4;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); /* Sombra para ajudar na leitura */
}

/* Deixa responsivo para telas menores */
@media (max-width: 768px) {
    .see-more-grid {
        /* Exibe apenas 1 coluna em telas menores */
        grid-template-columns: 1fr;
    }
}
/* ========================================
   SLIDER DE DESTAQUES (SWIPER JS)
   ======================================== */

/* Adiciona um espaço superior controlado para o slider */
.featured-slider-section {
    margin: 25px 0 30px 0; 
}

/* Contêiner principal do slider com altura ajustada */
.featured-swiper {
    width: 100%;
    height: 420px; /* ALTURA AJUSTADA - Diminuído de 500px */
    border-radius: 15px;
    overflow: hidden;
}

/* Slide individual sem fundo branco */
.featured-swiper .swiper-slide {
    /* A propriedade 'background: #fff;' foi REMOVIDA para eliminar a linha branca */
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-swiper .featured-story {
    width: 100%;
    height: 100%;
    position: relative;
}

.featured-swiper .image-placeholder-large {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.featured-swiper .image-placeholder-large img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o slide */
}

/* Overlay escuro para melhorar a legibilidade do texto */
.featured-swiper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}

.featured-swiper .card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
box-sizing: border-box;
z-index: 10; /* Aumentamos o z-index para ficar ACIMA do link */
text-align: left;
}

.featured-swiper .card-content h2 {
    color: #fff;
    font-size: 32px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    margin: 10px 0 0 0;
}

/* Estilo das setas e paginação */
.featured-swiper .swiper-button-next,
.featured-swiper .swiper-button-prev {
    color: #ffc900; /* Cor de destaque amarela do seu site */
    --swiper-navigation-size: 30px; /* Tamanho das setas */
}

.featured-swiper .swiper-pagination-bullet-active {
    background: #ffc900; /* Cor da bolinha ativa */
}
/* ========================================
   CORREÇÃO PARA SLIDE CLICÁVEL
   ======================================== */

.featured-swiper .card-link-wrapper {
    position: relative;
    /* Eleva a camada do link para que ele fique clicável */
    z-index: 5; 
    
    /* Garante que o link ocupe todo o espaço do slide */
    display: block;
    width: 100%;
    height: 100%;
}
/* ========================================
   ELEMENTOS FLUTUANTES COM CSS PURO
   ======================================== */

/* O container que segura as formas e cobre toda a tela */
.background-shapes {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Deixa atrás do conteúdo principal mas acima do fundo do body */
}

/* Estilo padrão para cada forma flutuante */
.shape-item {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    /* Cor branca semi-transparente para combinar com os seus doodles */
    background: rgba(255, 255, 255, 0.2); 
    /* Nome da animação, duração, tipo e repetição infinita */
    animation: float-up 25s linear infinite; 
    /* Começa de baixo da tela */
    bottom: -150px; 
}

/* Estilos individuais para cada forma, criando um efeito aleatório */
.shape-item:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.shape-item:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.shape-item:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.shape-item:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; border-radius: 50%; }
.shape-item:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.shape-item:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; border-radius: 50%; }
.shape-item:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.shape-item:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; border-radius: 50%; }


/* A animação que faz as formas subirem e girarem */
@keyframes float-up {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
/* ========================================
   CORREÇÃO DE ESTILO PARA TÍTULOS COM LINK
   ======================================== */

/* Estilo para o link (a) dentro de um título (h4) em um card de notícia (.news-item) */
.news-item .card-content h4 a {
    color: #fff; /* Define a cor do texto do link como branco */
    text-decoration: none; /* Remove o sublinhado padrão */
    transition: color 0.2s ease; /* Adiciona uma transição suave */
}

/* Garante que o link não mude de cor depois de visitado */
.news-item .card-content h4 a:visited {
    color: #fff;
}

/* Opcional: Adiciona um efeito ao passar o mouse para indicar que é um link */
.news-item .card-content h4 a:hover {
    /* Você pode usar a cor de destaque do seu site */
    color: #ffc900; 
}
/* ========================================
   SEÇÃO DO FEED DO INSTAGRAM (VERSÃO MELHORADA)
   ======================================== */

.home-instagram-section {
    width: 100%;
    box-sizing: border-box;
}

.home-instagram-section h4 {
    font-size: 16px;
    font-weight: 900;
    color: #fff; /* Cor branca para o título */
    margin-top: 0;
    margin-bottom: 20px; /* Aumentei um pouco a margem */
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 3px solid #ffc900; /* Linha de destaque amarela */
    display: inline-block;
}

/* --- AJUSTES NO FEED GERADO PELO PLUGIN --- */

/* 1. Esconde o cabeçalho padrão do feed (foto de perfil, bio, etc.) */
#sb_instagram #sbi_header {
    display: none !important;
}

/* 2. Remove espaçamentos extras que o plugin adiciona */
#sb_instagram #sbi_images {
    padding: 0 !important;
}

/* 3. Estiliza a área dos botões "Carregar Mais" e "Seguir" */
#sb_instagram #sbi_load {
    display: flex; /* Alinha os botões lado a lado */
    gap: 10px; /* Espaço entre os botões */
    margin-top: 15px;
}

/* 4. Estilo geral para AMBOS os botões */
#sb_instagram #sbi_load .sbi_btn {
    flex-grow: 1; /* Faz os botões dividirem o espaço igualmente */
    width: 50%;
    background: #e83e8c; /* Cor rosa do seu tema */
    color: #fff;
    border: none;
    border-radius: 50px; /* Totalmente arredondado */
    padding: 10px 15px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s ease;
}

/* 5. Estilo específico para o botão "Seguir no Instagram" */
#sb_instagram #sbi_load .sbi_follow_btn a {
    background: #333 !important; /* Fundo escuro para diferenciar */
    color: #fff !important;
}

/* 6. Efeito de hover para os botões */
#sb_instagram #sbi_load .sbi_btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
/* ========================================
   LAYOUT DE 3 COLUNAS (ENQUETE / ANÚNCIO / INSTAGRAM) - VERSÃO ATUALIZADA
   ======================================== */

/* Container principal com 3 colunas */
.poll-ads-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    gap: 30px;
    align-items: center;
    margin: 40px 0;
}

/* Remove título do bloco de anúncio */
.home-middle-ads-section h4 {
    display: none;
}

/* Bloco de anúncio estilizado */
.ads-placeholder-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 350px;
    background: #2c2c2c;
    border: 3px solid #d629b4;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px;
    text-align: center; /* Centraliza o texto */
}

/* REMOVIDO: O texto agora está no HTML, então esta regra não é mais necessária */
/* .ads-placeholder-middle::after { ... } */

.ads-placeholder-middle:hover {
    background-color: #3a3a3a;
    border-color: #ffc900;
    transform: translateY(-5px);
}

/* NOVO: Estilos para o texto dentro do bloco de anúncio */
.ad-text-main {
    display: block;
    font-size: 32px; /* Aumentei um pouco para dar destaque */
    font-weight: 900;
    text-transform: uppercase;
}

.ad-text-sub {
    display: block;
    font-size: 16px;
    font-weight: 400;
    text-transform: none; /* Remove o uppercase para esta linha */
    opacity: 0.8;
    margin-top: 8px;
}

/* Alinhamento em colunas (desktop) */
.home-poll-section {
    justify-self: end;
}
.home-instagram-section {
    justify-self: start;
}

/* ========================================
   RESPONSIVO - MOBILE (largura até 768px)
   ======================================== */
@media (max-width: 768px) {
    .poll-ads-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 20px 10px;
    }
    .home-poll-section,
    .home-middle-ads-section,
    .home-instagram-section {
        justify-self: unset;
        width: 100%;
    }
    .ads-placeholder-middle {
        min-height: 200px;
    }
    /* NOVO: Ajuste de fonte para o texto do anúncio no mobile */
    .ad-text-main {
        font-size: 24px;
    }
    .ad-text-sub {
        font-size: 14px;
    }
}
/* =========================================================================
   ESTILOS PARA PÁGINAS (PAGE.PHP) - VERSÃO CORRIGIDA E MELHORADA
   ========================================================================= */

/* Garante que o layout de 2 colunas funcione bem quando a sidebar existe */
.site-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Coluna principal do conteúdo */
.site-main {
    flex: 1;
    min-width: 0;
}

/* Barra Lateral */
.sidebar {
    flex-basis: 300px;
    flex-shrink: 0;
}

/* Centraliza a coluna principal QUANDO NÃO HÁ SIDEBAR */
.site-content-wrapper.no-sidebar {
    display: block; /* Remove o flex para a centralização funcionar */
}
.site-content-wrapper.no-sidebar .site-main {
    max-width: 800px; /* Largura máxima para boa leitura. Ajuste como desejar. */
    margin: 0 auto; /* Centraliza a coluna */
}

/* Estilos para o contêiner branco da página */
.page-container {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* Novo estilo para o cabeçalho da página */
.page-header {
    text-align: center;
    margin: -30px -40px 30px -40px; /* Faz o cabeçalho ocupar o topo do card */
    padding: 25px;
    border-bottom: 1px solid #eee;
    background-color: #f7f7f7;
    border-radius: 20px 20px 0 0; /* Arredonda apenas os cantos superiores */
}

/* Novo estilo para o título da página */
.page-title {
    font-size: 32px;
    color: #1c1c1c;
    margin: 0;
    font-weight: 900; /* Mais forte */
}

/* Estilos para o conteúdo da página */
.page-content {
    font-size: 17px;
    line-height: 1.8;
}
.page-content p {
    margin-bottom: 1.5em;
}
.page-content a {
    color: #8A2BE2; /* Roxo do tema para links no texto */
    text-decoration: underline;
}
.page-content h1, .page-content h2, .page-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #1c1c1c;
}

/* Responsividade para a sidebar em telas menores */
@media (max-width: 992px) {
    .sidebar {
        flex-basis: 100%;
    }
}