/* Importa a fonte cursiva do Google */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

.carta {
    border-left: 4px solid #ada365; /* Cria uma linha (borda) apenas no lado esquerdo da caixa. Ela terá 4 pixels de espessura, será uma linha contínua (solid) e terá aquela cor caqui/dourada (#ada365).  */
    padding-left: 16px; /* O padding é o "enchimento" interno. Essa linha empurra o texto 16 pixels para a direita, para que as letras não fiquem coladas na borda esquerda que acabamos de criar.   */
    margin: 20px 40px; /*  A margin é o espaço externo, do lado de fora da caixa. Isso garante que a sua citação não fique colada no resto do texto do site. Ela aplica 20 pixels de distância em cima e embaixo, e 40 pixels de distância na esquerda e na direita.  */
    color: #cccccc; /*  Define a cor das letras do texto para um cinza claro.  */
    background-color: #2a2a2a; /*  Pinta o fundo da caixa inteira com um cinza bem escuro.  */
    padding: 15px 20px; /*  (Atenção aqui): Como o código é lido de cima para baixo, essa linha substitui aquele padding-left lá de cima. Ela define um preenchimento interno geral: 15 pixels de espaço no topo e no fundo, e 20 pixels de espaço nas laterais esquerda e direita.  */
    border-radius: 4px; /*  "Lixa" as quinas da caixa. Em vez de ter cantos pontiagudos de 90 graus, o fundo escuro terá cantinhos suavemente arredondados (com raio de 4 pixels).  */
    line-height: 1.5; /*  Define a altura da linha. Aumenta o respiro vertical entre uma linha de texto e a linha de baixo, deixando o espaçamento 1.5 vezes maior que o tamanho da letra.  */
    
    /* Aplica a fonte cursiva */
    font-family: 'Dancing Script', 'Lucida Handwriting', cursive;
    
    /* Fontes cursivas costumam ser menores, então aumentei para 1.5em para manter a legibilidade */
    font-size: 1.8em; 
    text-align: justify;
}

.carta cite {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-weight: bold;
    color: #ffffff;
    /* Mantém o nome do autor em uma fonte normal (sem ser cursiva) para dar contraste */
    font-family: 'Courier New', Courier, monospace; 
    font-size: 0.7em; /* Ajusta o tamanho do nome do autor */
}   

.assinatura {
    padding-left: 16px; 
    margin: 20px 40px; 
    color: #cccccc;
    padding: 15px 20px;
    border-radius: 4px;
    line-height: 1.5; 
    text-align: right; /* <-- Adicione esta linha aqui */
    
    /* Aplica a fonte cursiva */
    font-family: 'Dancing Script', 'Lucida Handwriting', cursive;
    
     /*Fontes cursivas costumam ser menores, então aumentei para 1.5em para manter a legibilidade */
    font-size: 2.0em; 
}

.musica {
    margin: 20px 40px; /* Mantém o recuo generoso para afastar do texto principal */
    padding-left: 20px;
    border-left: 2px dotted #ada365; /* Uma linha pontilhada fina, menos agressiva que a da carta */
    background-color: transparent; /* Sem fundo, mescla com a página */
    color: #e0e0e0; /* Um branco levemente acinzentado */
    font-family: 'Georgia', 'Times New Roman', serif; /* Fonte com serifa para dar cara de poesia/letra */
    font-style: italic; /* Itálico para indicar que está sendo cantado */
    line-height: 1.8; /* Espaçamento bem largo para parecer estrofes de música */
    font-size: 1.2em;
}

.musica .notas {
    color: #ada365; /* Pinta as notinhas musicais com o dourado/caqui do seu tema */
    font-style: normal; /* Tira o itálico das notas para não deformar o símbolo */
    font-size: 1.4em;
}

.musica cite {
    display: block;
    margin-top: 15px;
    font-size: 1.0em;
    font-family: 'Roboto Mono', monospace;
    text-align: left; /* <-- Adicione esta linha aqui */
    color: #cccccc;
    font-weight: bold;
    /* color: #ffffff; */
    /* font-style: normal; */
}

:root {
    --fundo-site: #2a2a2a;   /* Cinza bem mais claro e visível para o corpo do site */
    --fundo-menu: #1a1a1a;     /* Sidebar bem mais escura, resgatando o contraste forte */
    --texto-principal: #e0e0e0;
    --texto-secundario: #b0b0b0;
    --destaque-vermelho: #ff3333;
    --borda: #4a4a4a;          /* Borda ajustada para combinar com o novo tom */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #1f1f1f !important;
    color: #ffffff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    
    /* O Mapa do Grid para o PC */
    display: grid;
    grid-template-columns: 250px 1fr; /* Coluna 1 tem 250px, Coluna 2 ocupa o resto */
    grid-template-rows: auto 1fr; /* Linha 1 pega o tamanho da foto, Linha 2 ocupa o resto */
    grid-template-areas:
        "sidebar banner"
        "sidebar content";
}

/* Associando os blocos aos nomes no mapa */
.sidebar { grid-area: sidebar; }
.banner-site { grid-area: banner; }
.content { grid-area: content; }

/* BARRA LATERAL */
.sidebar {
    width: 250px;
    background-color: var(--fundo-menu);
    padding: 40px 30px;
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.links-menu { display: flex; flex-direction: column; gap: 10px; }

.sidebar a {
    color: var(--texto-secundario);
    text-decoration: none;
    font-size: 15px;
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.sidebar a:hover, .sidebar a.ativo {
    color: #ffffff;
    background-color: rgba(255, 51, 51, 0.1);
    transform: translateX(5px);
    border-left: 3px solid var(--destaque-vermelho);
}

.divisor { 
    border: none; 
    border-top: 1px solid var(--borda); 
    margin: 30px 0; 
    flex-shrink: 0; 
}

.titulo-secao { color: #444; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 15px; text-transform: uppercase; }

/* ÁREA PRINCIPAL - Expandida */
.content {
    flex: 1;
    padding: 60px 5%;
    background: var(--fundo-site);
    overflow-y: auto;
}

/* TÍTULO PRINCIPAL - Bem longe do texto */
.titulo-site {
    font-family: 'JetBrains Mono', monospace;
    font-size: 48px;
    margin-bottom: 60px; /* Aumentei bastante a distância aqui */
    letter-spacing: -2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.titulo-site .cor-1 { color: var(--destaque-vermelho); }
.titulo-site .cor-2 { color: #ffffff; }

/* CONTAINER DO ARTIGO SEM CAIXA NENHUMA */
.card-artigo { width: 100%; }

/* TÍTULO DO ARTIGO DO BANCO DE DADOS (Mantido em branco) */
.card-artigo h1 { 
    font-size: 48px; 
    font-weight: 600; 
    color: #fcc419; /* Amarelo */ 
    margin-top: 0px; 
    margin-bottom: 30px; 
    letter-spacing: -1px; 
}

/* TEXTO DO ARTIGO OCUPANDO A TELA TODA */
.texto-artigo p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--texto-secundario);
    margin-bottom: 25px;
    width: 100%;
    text-align: justify; /* <-- Esta é a linha nova */
}

/* =========================================
   FORMATAÇÃO AUTOMÁTICA DE TODOS OS ARTIGOS
   ========================================= */
/* Espaçamento e cor para Títulos de Nível 1 (Ex: INTRODUÇÃO) */
.texto-artigo h1 {
    font-size: 38px; /* Restaurado o tamanho original */
    font-weight: 600; /* Restaurada a espessura original */
    letter-spacing: -1px; /* Restaurado o espaçamento original */
    color: #ff9800; /* Laranja suave */
    margin-top: 40px;  
    margin-bottom: 30px; 
    line-height: 1.2;
}

/* Espaçamento para Títulos de Nível 2 */
.texto-artigo h2 {
    font-size: 28px;
    color: #4dabf7; /* Azul suave */
    margin-top: 40px;    /* Pula espaço ANTES do título */
    margin-bottom: 20px; /* Pula espaço DEPOIS do título */
    line-height: 1.3;
}

/* Espaçamento para Títulos de Nível 3 */
.texto-artigo h3 {
    font-size: 20px;
    color: #69db7c; /* Verde suave */
    margin-top: 40px;
    margin-bottom: 20px; /* Espaço DEPOIS do subtítulo */
    line-height: 1.4;
}

/* Espaçamento para Títulos de Nível 4 */
.texto-artigo h4 {
    font-size: 20px;
    color: #ffffff; /* Branco */
    margin-top: 20px;
    margin-bottom: 20px; /* Espaço DEPOIS do subtítulo */
    line-height: 1.4;
}

/* Garante que imagens ou outros elementos dentro do texto não quebrem o layout */
.texto-artigo img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 4px;
}

/* Correção do layout principal para alinhar com a sidebar */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
}

.banner-site {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 0;
}

/* Espaçamento maior entre o banner e o "Artigo em Destaque" */
.leitor-texto {
    padding: 110px 50px 40px 50px; /* Aumentou o topo de 40px para 75px */
}

/* =========================================
   ESTILOS DA CAIXA DO GOOGLE (Desciclopédia Style)
   ========================================= */
.caixa-google {
    background-color: rgba(255, 51, 51, 0.05); /* Fundo avermelhado super discreto */
    border-left: 4px solid var(--destaque-vermelho); /* Borda vermelha chamativa */
    padding: 15px 20px;
    margin: 0 0 40px 0;
    border-radius: 0 4px 4px 0;
}

.caixa-google p {
    font-size: 16px;
    margin-bottom: 6px;
    color: #e0e0e0;
}

.caixa-google .link-falso {
    color: #4dabf7; /* Simula a cor azul de um link clicável */
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
}

.caixa-google .link-falso:hover {
    text-decoration: underline; /* Faz um sublinhado se o mouse passar por cima */
}

.caixa-google .fonte-google {
    color: #888888; /* Texto explicativo em cinza mais escuro */
    font-size: 0.9em;
}

/* =========================================
   ESTILOS DAS CITAÇÕES INICIAIS
   ========================================= */
.caixa-citacoes {
    margin: 0 0 60px 0;
    padding: 25px 0;
    border-top: 1px dashed #4a4a4a; 
    border-bottom: 1px dashed #4a4a4a; 
}

/* TÍTULO "Citações:" EM AZUL SUAVE */
.caixa-citacoes h2 {
    color: #4dabf7; 
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 35px; /* Espaço abaixo do título */
}

.citacao-item {
    margin-bottom: 50px; /* <--- MUDE AQUI PARA MAIS OU MENOS ESPAÇO ENTRE AS CITAÇÕES (antes era 25px) */
    padding-left: 15px;
    border-left: 2px solid #69db7c; 
}

.citacao-item:last-child {
    margin-bottom: 0; 
}

.citacao-item p {
    font-size: 16px;
    font-style: italic; 
    color: #cccccc;
    margin-bottom: 8px; /* Afastei um pouquinho mais o texto do nome do autor */
}

.citacao-item cite {
    display: block;
    text-align: left; /* <--- ALINHAMENTO DO AUTOR: Mude para 'right' se quiser voltar pra direita */
    font-size: 1.0em;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;

    /* <--- COR DO AUTOR ESTÁ AQUI (Marrom claro/envelhecido) ---> */
    /* Se não gostar desse, teste um cinza médio: #888888 */
    /* Ou um marrom mais escuro/sóbrio: #8b6b43 */
    color: #a67c52; 
}

/* Container principal da imagem e legenda */
.caixa-imagem {
  margin: 0;
  display: inline-block;
}

/* Estilo apenas para a imagem dentro da caixa */
.caixa-imagem img {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* Estilo para a legenda dentro da caixa */
.caixa-imagem figcaption {
  color: white;
  font-weight: bold;
  background-color: #333333; /* Apague esta linha se não quiser o fundo escuro */
  text-align: center;
  padding: 8px;
}

/* =========================================
   IMAGEM EXPANDIDA DE PONTA A PONTA
   ========================================= */
.imagem-expandida {
    /* Pega 100% do espaço + compensa a margem vazia dos dois lados */
    width: calc(100% + 100px) !important; 
    max-width: none !important; /* Quebra a trava de imagens da classe .texto-artigo */
    
    /* Puxa a imagem violentamente por cima do padding esquerdo para colar na borda */
    margin-left: -50px !important; 
    
    /* Distância em relação aos textos acima e abaixo */
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    display: block;
}

/* =========================================
   CAIXA DE ÍNDICE (BLINDADA CONTRA O TEMA)
   ========================================= */
.caixa-indice {
    background-color: var(--fundo-menu) !important;
    border: 1px solid var(--borda) !important;
    padding: 20px 25px !important;
    display: inline-block !important; /* Faz a caixa abraçar o texto */
    margin-bottom: 40px !important;
    border-radius: 4px !important;
}

.indice-cabecalho {
    text-align: center !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
}

.indice-cabecalho strong {
    color: #ffffff !important;
}

.indice-cabecalho .ocultar {
    color: #4dabf7 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-left: 5px !important;
}

.indice-cabecalho .ocultar:hover {
    text-decoration: underline !important;
}

/* MATA AS BOLINHAS E AJUSTA O ESPAÇAMENTO GERAL */
.caixa-indice ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.caixa-indice li {
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 12px !important; /* Mais espaço entre as linhas */
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #e0e0e0 !important; /* Deixa os números brancos/cinzas */
}

/* IDENTAÇÃO (O recuo exato das sub-listas) */
.caixa-indice ul ul {
    padding-left: 25px !important; /* Recuo do nível 2 */
    margin-top: 12px !important; 
}

.caixa-indice ul ul ul {
    padding-left: 30px !important; /* Recuo do nível 3 */
    margin-top: 12px !important;
}

/* CORES DOS LINKS (Azul limpo, matando a cor padrão do navegador) */
.caixa-indice a,
.caixa-indice a:link,
.caixa-indice a:visited,
.caixa-indice a:active {
    text-decoration: none !important;
    color: #4dabf7 !important; 
}

.caixa-indice a:hover {
    text-decoration: underline !important;
}  

/* =========================================
   CAIXA COM ROLAGEM INTERNA (BLINDADA)
   ========================================= */
.caixa-scroll {
    max-height: 500px !important; /* Limite de altura forçado */
    overflow-y: auto !important;  /* Força a rolagem vertical */
    background-color: var(--fundo-menu) !important;
    border: 1px solid var(--borda) !important;
    padding: 20px !important;
    margin-bottom: 40px !important;
    border-radius: 4px !important;
    display: block !important;
}

/* Estilização da barra de rolagem */
.caixa-scroll::-webkit-scrollbar {
    width: 10px !important;
}

.caixa-scroll::-webkit-scrollbar-track {
    background: #1a1a1a !important; 
    border-radius: 4px !important;
}

.caixa-scroll::-webkit-scrollbar-thumb {
    background: #4a4a4a !important; 
    border-radius: 4px !important;
}

.caixa-scroll::-webkit-scrollbar-thumb:hover {
    background: #666666 !important; 
}

/* Estilo para os links de referências no meio do texto */
.link-referencia {
    color: #4dabf7; /* <-- ALTERADO: Azul mais claro e brilhante */
    font-size: 1.1em; /* <-- ADICIONADO: Deixa a letra um pouco maior que o texto normal */
    text-decoration: none; /* Remove o sublinhado padrão feio */
    font-weight: bold; /* Deixa o texto do link mais forte */
    border-bottom: 1px dashed #4dabf7; /* <-- ALTERADO: A linhazinha de baixo também acompanha o novo azul */
    padding-bottom: 2px; /* Dá um pequeno respiro entre a letra e a linha */
    transition: all 0.3s ease; /* Faz a mudança de cor ser suave */
}

/* Efeito ao passar o mouse por cima (hover) */
.link-referencia:hover {
    color: #d9534f; /* Muda para um tom avermelhado/ferrugem */
    border-bottom: 1px solid #d9534f; /* A linha tracejada vira uma linha contínua */
    background-color: #fdfdfd; /* Um fundo quase imperceptível de destaque */
}

/* Estilo para a Caixa Lateral de Informações (Infobox) */
.caixa-info {
    float: right; /* Isso faz a caixa ir para a direita e o texto fluir pela esquerda */
    width: 300px; /* Largura da caixa */
    margin: 0 0 20px 20px; /* Espaçamento: 0 em cima, 0 na direita, 20px embaixo, 20px na esquerda (afasta do texto) */
    background-color: #1e1e1e; /* Cor de fundo escuro, combinando com seu site */
    border: 1px solid #333; /* Borda sutil */
    border-radius: 5px; /* Bordas levemente arredondadas */
    padding: 15px; /* Espaço interno */
    box-sizing: border-box;
}

.caixa-info-titulo {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #fff;
}

.caixa-info img {
    width: 100%; /* Imagem ocupa toda a largura da caixa */
    height: auto;
    border-radius: 3px;
    margin-bottom: 5px;
}

.caixa-info-legenda {
    text-align: center;
    font-size: 0.85em;
    color: #aaa;
    margin-bottom: 15px;
}

/* Estilo para a tabela de dados dentro da caixa */
.caixa-info-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.caixa-info-tabela th {
    text-align: left;
    padding: 5px 0;
    color: #ccc;
    font-weight: bold;
    width: 35%; /* Largura da coluna dos rótulos (ex: "Apelidos") */
    vertical-align: top;
}

.caixa-info-tabela td {
    padding: 5px 0;
    color: #fff;
    vertical-align: top;
}

/* =========================================
   ENVOLUCRO PARA TABELAS RESPONSIVAS
   ========================================= */
.tabela-responsiva {
    width: 100% !important;
    overflow-x: auto !important; /* Cria a rolagem horizontal apenas se precisar */
    display: block !important;
    margin-bottom: 30px !important; /* Espaço abaixo da tabela */
    border-radius: 4px; /* Opcional, para deixar os cantos suaves */
}

/* Estilização da barra de rolagem horizontal (tema escuro) */
.tabela-responsiva::-webkit-scrollbar {
    height: 8px !important; /* Barra mais fininha e discreta */
}

.tabela-responsiva::-webkit-scrollbar-track {
    background: #1a1a1a !important; 
    border-radius: 4px !important;
}

.tabela-responsiva::-webkit-scrollbar-thumb {
    background: #4a4a4a !important; 
    border-radius: 4px !important;
}

.tabela-responsiva::-webkit-scrollbar-thumb:hover {
    background: #666666 !important; 
}

/* =========================================
   SISTEMA DE REFERÊNCIAS (Caso você não conheça)
   ========================================= */

/* O numerozinho acadêmico no meio do texto */
.ref-link {
    color: #69db7c;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.0em;
    vertical-align: super;
    padding: 0 2px;
    transition: color 0.3s;
}

.ref-link:hover {
    color: #ff9800;
    text-decoration: underline;
}

/* A caixa principal no final do artigo */
.caixa-referencias {
    margin-top: 60px;
    padding: 30px;
    background-color: rgba(0,0,0,0.2);
    border-top: 2px solid #4a4a4a;
    border-radius: 8px;
    margin-bottom: 50px;
}

.caixa-referencias h3 {
    color: #4dabf7;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.caixa-referencias h4 {
    color: #69db7c;
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.lista-referencias {
    list-style: none !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* ---> ESTE É O BLOCO QUE HAVIA SUMIDO <--- */
/* O quadrado de cada personalidade no fim do artigo */
.lista-referencias li {
    margin-bottom: 15px;
    padding: 15px 20px;
    background-color: #2a2a2a;
    border-left: 3px solid #4a4a4a; 
    border-radius: 4px;
    color: #cccccc;
    font-size: 15px;
    line-height: 1.6;
    text-align: justify;
    transition: all 0.4s ease; 
}

/* =========================================
   PARÁGRAFOS DENTRO DAS REFERÊNCIAS (BLINDADO)
   ========================================= */
.caixa-referencias .lista-referencias li p,
.lista-referencias li p {
    font-size: 15px !important; 
    color: #cccccc !important; 
    text-align: justify !important; 
    line-height: 1.6 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
}

/* Remove a margem extra do último parágrafo */
.caixa-referencias .lista-referencias li p:last-child,
.lista-referencias li p:last-child {
    margin-bottom: 0 !important;
}

/* O NOME da pessoa na lista */
.lista-referencias li strong {
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1em;
    margin-right: 5px;
}

/* A MÁGICA: Ilumina a caixa que o usuário acabou de clicar */
.lista-referencias li:target {
    /*background-color: rgba(105, 219, 124, 0.15); */
    border-left: 3px solid #69db7c; 
}

/* Botão de voltar pro texto */
.btn-voltar {
    text-decoration: none;
    color: #4dabf7;
    font-size: 13px;
    margin-left: 10px;
    font-weight: bold;
}

.btn-voltar:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* =========================================
   SESSÃO: CASO VOCÊ NÃO CONHEÇA (Caixa Amarela)
   ========================================= */
.sessao-referencias {
    margin: 40px 0; 
    padding: 20px 25px; 
    border-left: 4px solid #fcc419; 
    background-color: #2a2a2a; 
    border-radius: 0 4px 4px 0; 
}

.sessao-referencias-titulo {
    color: #fcc419; 
    font-size: 24px; 
    font-weight: bold;
    display: block; 
    margin-bottom: 25px; 
}

.sessao-referencias a {
    display: block; 
    color: #b19cd9; 
    font-size: 18px; 
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 12px; 
    padding-left: 10px; 
}

.sessao-referencias a:hover {
    color: #ffffff; 
    text-decoration: underline;
}

/* =========================================
   CAIXA DE PIADAS (Para a seção de Humor)
   ========================================= */
.caixa-piadas {
    margin-bottom: 40px !important;
    padding-left: 20px !important;
    border-left: 5px solid #ff3333 !important; /* <-- BARRA VERMELHA FORÇADA AQUI */
}

/* O texto-artigo antes garante que ele vence a hierarquia do site */
.texto-artigo .caixa-piadas p,
.caixa-piadas p {
    font-size: 19px !important; /* Letra ainda maior */
    font-style: italic !important; 
    color: #cccccc !important;
    line-height: 1.9 !important; /* Espaçamento bem maior entre as linhas */
    margin-bottom: 20px !important; /* Espaço mais largo entre as piadas */
}

.texto-artigo .caixa-piadas p:last-child,
.caixa-piadas p:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   BLOCO ÚNICO E DEFINITIVO PARA CELULAR
   ========================================= */
@media (max-width: 768px) {
    /* 1. O MAPA DO CELULAR */
    body {
        display: grid !important;
        grid-template-columns: 1fr !important; 
        grid-template-rows: auto auto 1fr !important;
        grid-template-areas:
            "banner"   
            "sidebar"  
            "content" !important; 
    }

    /* 2. O CRACHÁ DA FOTO (Força pro topo com correção de altura) */
    .banner-site {
        grid-area: banner !important; 
        margin-bottom: 20px !important;
        width: 100% !important; 
        max-width: 100vw !important; 
        height: 120px !important; 
        object-fit: fill !important; 
    }

    /* 3. O CRACHÁ DO MENU (Força pro meio) */
    .sidebar {
        grid-area: sidebar !important; 
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--borda) !important;
    }

    /* 4. O CRACHÁ DO ARTIGO (Força pro fim) */
    .content {
        grid-area: content !important; 
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    .titulo-site {
        font-size: 28px !important;
        margin-bottom: 40px !important;
        white-space: normal !important;
    }

    .card-artigo h1 {
        font-size: 28px !important;
    }

    .leitor-texto {
        padding: 25px 20px !important;
    }

    .imagem-expandida {
        width: calc(100% + 40px) !important; 
        margin-left: -20px !important; 
    }
    /* 5. CORREÇÃO DA ASSINATURA (Remove margens exageradas e permite quebra natural no limite da tela) */
    .assinatura {
        margin: 20px 0px !important; /* Dá só 10px de respiro para não encostar no canto da tela */
        padding: 15px 0 !important;
        white-space: normal !important; /* Permite a quebra de linha natural */
    }
}