/* Container Geral do Banner */
/* Container Geral do Banner */
/* Container Geral do Banner */
.banner-assimetrico {
    position: relative;
    width: 100%; 
    
    /* É AQUI A MÁGICA: O banner para de crescer ao atingir 1400px */
    max-width: 1400px; 
    
    /* O 'auto' garante que, se a tela for maior que 1400px, o banner fique no meio */
    margin: 40px auto; 
    
    padding-left: 120px; /* O respiro da esquerda que criamos antes */
    padding-right: 0; 
}

/* Onde a mágica da assimetria acontece */
.banner-wrapper {
    position: relative;
    width: 100%;
    
    /* É EXATAMENTE AQUI QUE VOCÊ DIMINUI O COMPRIMENTO VERTICAL */
    /* Teste baixar para 450px, 400px ou até 380px */
    height: 450px; 
    
    display: flex;
    align-items: center;
}

/* Imagem da Autora (Colada 100% no final da direita) */
.banner-img-direita {
    position: absolute;
    right: 0;
    top: 0;
    
    /* É AQUI! Aumente para 90% ou 95% para deixar a imagem bem mais comprida */
    width: 90%; 
    
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px 0 0 12px;
}

/* Card Bege (Invade a parte branca e a imagem) */
.banner-card-esq {
    position: relative; 
    z-index: 10;
    background-color: #f4ede6; 
    width: 410px;
    padding: 40px;
    border-radius: 16px;
    margin-left: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.banner-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.banner-tags span {
    background-color: #ffffff;
    color: #555;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}

.banner-titulo {
    color: #ecd6a8; 
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 15px;
}

.banner-texto {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

/* Setas de navegação */
.seta-fora {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 20;
    transition: color 0.3s, transform 0.2s;
}

/* Seta esquerda: no espaço branco, cor cinza */
.esq { 
    left: 10px; 
    color: #ccc; 
}
.esq:hover { color: #d82626; }

/* Seta direita: em cima da foto, cor branca, colada no final da tela */
.dir { 
    right: 20px; 
    color: rgba(255, 255, 255, 0.8); 
}
.dir:hover { 
    color: #ffffff; 
    transform: translateY(-50%) scale(1.1);
}

/* Bolinhas de navegação */
.banner-bolinhas {
    text-align: center;
    margin-top: 20px;
}

.ponto {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.ponto.ativo { background-color: #111; }

/* Estilização da Seção Assuntos */
.secao-assuntos {
    text-align: center;
    padding: 60px 0;
    background-color: #ffffff;
}

.titulo-assuntos {
    color: #ecd6a8; /* Vermelho Fllumen */
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.lista-filtros {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap; /* Para os botões quebrarem linha no celular */
    max-width: 1000px;
    margin: 0 auto;
}

.btn-filtro {
    background-color: #f4ede6; /* Bege claro das imagens */
    color: #111;
    border: none;
    padding: 12px 28px;
    border-radius: 50px; /* Formato de pílula */
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filtro:hover {
    background-color: #e6dfd9; /* Escurece levemente ao passar o mouse */
}

/* =======================================================
   LAYOUT PRINCIPAL (DIVISÃO EM DUAS COLUNAS)
   ======================================================= */
.conteudo-principal {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 partes para os posts, 1 parte para a sidebar */
    gap: 60px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    align-items: start; /* Impede que uma coluna estique a outra */
}

/* =======================================================
   GRID DE POSTS (ESQUERDA)
   ======================================================= */
.grid-posts {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Coloca exatamente 2 posts lado a lado */
    gap: 30px;
}

.post-card {
    display: flex;
    flex-direction: column;
}

.post-card img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Deixa a imagem quadradinha */
    object-fit: cover;
    border-radius: 16px;
}

.post-tag {
    align-self: flex-start;
    background-color: #f4ede6;
    color: #555;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    margin: 15px 0 10px 0;
    font-weight: bold;
}

.post-titulo {
    color: #ecd6a8;
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 10px;
    text-decoration: none;
}

.post-titulo:hover {
    text-decoration: underline;
}

.post-resumo {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* =======================================================
   SIDEBAR "MAIS LIDAS" (DIREITA)
   ======================================================= */
.sidebar-titulo {
    color: #3e4b5b; /* Cinza escuro/Azulado */
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.lista-mais-lidas {
    display: flex;
    flex-direction: column; /* Coloca um item embaixo do outro */
    gap: 25px; /* Espaçamento entre as postagens */
}

.item-mais-lida {
    display: flex; /* Coloca a imagem do lado esquerdo do texto */
    gap: 15px;
    align-items: center; /* Centraliza verticalmente texto e imagem */
}

.item-mais-lida img {
    width: 90px;
    height: 90px;
    min-width: 90px; /* Garante que a imagem não encolha */
    object-fit: cover;
    border-radius: 12px;
}

.info-lateral {
    display: flex;
    flex-direction: column;
}

.mais-lida-titulo {
    color: #d82626;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}

.mais-lida-titulo:hover {
    text-decoration: underline;
}

/* =======================================================
   GRID SECUNDÁRIO (4 COLUNAS) E BOTÃO
   ======================================================= */
.grid-secundario {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Força 4 colunas de tamanhos iguais */
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto; /* Dá um espaço da seção de cima */
    padding: 0 20px;
}

.container-carregar-mais {
    text-align: center;
    margin-bottom: 80px; /* Espaço para o rodapé da página */
}

.btn-carregar {
    background-color: #888888; /* Cinza chique da imagem */
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 30px; /* Deixa o botão redondo nas pontas */
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-carregar:hover {
    background-color: #666666; /* Escurece levemente no mouse */
}

/* Regra para telas menores (Celulares e Tablets) não espremerem as 4 colunas */
@media (max-width: 992px) {
    .grid-secundario { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-secundario { grid-template-columns: 1fr; }
}

/* =======================================================
   ANIMAÇÃO DO CÍRCULO GIRATÓRIO (LOADING)
   ======================================================= */
.icone-giratorio {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3); /* Círculo transparente */
    border-radius: 50%;
    border-top-color: #ffffff; /* Ponta branca que vai girar */
    animation: girar-widget 0.8s linear infinite; /* Tempo e estilo do giro */
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -2px; 
}

@keyframes girar-widget {
    to { transform: rotate(360deg); }
}

/* =======================================================
   SEÇÃO ASSUNTOS (FILTRO DO BLOG)
   ======================================================= */
.secao-assuntos {
    background-color: #ffffff; 
    padding: 60px 20px 40px 20px;
    text-align: center; 
}

.titulo-assuntos {
    font-family: 'Barlow Condensed', sans-serif;
    color: #ecd6a8; /* Vermelho Fllumen */
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: lowercase; 
}

.lista-assuntos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 15px; /* Distância entre as pílulas */
}

/* O visual de "pílula" bege da sua imagem */
.lista-assuntos a {
    background-color: #f4ede6; /* O fundo bege característico da Fllumen */
    color: #111111; /* Texto bem escuro */
    font-size: 1.1rem;
    padding: 8px 24px; /* O preenchimento que dá o formato gordinho */
    border-radius: 30px; /* Borda 100% arredondada */
    text-decoration: none;
    text-transform: lowercase; /* Força tudo a ficar minúsculo igual à foto */
    transition: all 0.2s ease;
}

/* Efeito ao passar o mouse */
.lista-assuntos a:hover {
    background-color: #e5dfd9; /* Fica um bege ligeiramente mais escuro */
    color: #d1b476; /* O texto fica vermelho para dar um charme */
    transform: translateY(-2px); /* Dá uma leve puladinha para cima */
}

/* =======================================================
   CORREÇÃO DE CLIQUES NO CARD DO BANNER (ESCUDO INVISÍVEL)
   ======================================================= */

/* 1. Joga o card bege para a frente de tudo na tela */
.banner-card-esq {
    position: relative !important;
    z-index: 100 !important; 
    pointer-events: auto !important; /* Garante que a caixa inteira "sinta" o mouse */
}

/* 2. Força o navegador a mostrar a mãozinha e aceitar o clique nas tags */
.tag-banner-pill {
    cursor: pointer !important;
    position: relative;
    z-index: 101;
}

/* 3. Força a mãozinha e a área de clique no título vermelho */
.titulo-banner-link {
    cursor: pointer !important;
    position: relative;
    z-index: 101;
    display: inline-block !important; /* Ajuda a definir a caixa exata do clique */
}

/* Garante que o H2 não bloqueie o link que está dentro dele */
.banner-titulo {
    pointer-events: none; /* O H2 ignora o mouse... */
}
.banner-titulo a {
    pointer-events: auto; /* ...mas o link dentro dele aceita o clique! */
}

/* O visual padrão da Tag */
.post-tag {
    align-self: flex-start;
    background-color: #f4ede6;
    color: #555; /* Cor cinza original */
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    margin: 15px 0 10px 0;
    font-weight: bold;
    text-decoration: none; /* Como vai virar link, isso tira o sublinhado feio */
    display: inline-block; /* Necessário para a animação de pulo funcionar */
    transition: all 0.3s ease; /* Deixa o movimento suave (não seco) */
}

/* A MÁGICA: O que acontece quando o mouse passa por cima */
.post-tag:hover {
    color: #d82626; /* O texto fica no vermelho Fllumen */
    transform: translateY(-3px); /* Faz a tag "subir" 3 pixels! */
}