ou ) */
.mosaico > * {
position: relative;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden;
border-radius: 2px; /* A elegância suave */
}
/* Garante que a imagem preencha o espaço do filho */
.mosaico > * img {
width: 100% !important;
height: 100% !important;
object-fit: cover; /* O segredo do corte perfeito */
display: block;
border-radius: 2px;
}
/* -------------------------------------------------------
LÓGICA AUTOMÁTICA DE POSICIONAMENTO
------------------------------------------------------- */
/* MODO VERTICAL (Padrão: Grande na ESQUERDA) */
.mosaico.vertical {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
aspect-ratio: 4 / 3; /* Formato Retangular Paisagem */
}
/* O 1º item da lista será o grandão automaticamente */
.mosaico.vertical > :nth-child(1) {
grid-column: 1; /* Coluna da Esquerda */
grid-row: span 2; /* Ocupa as 2 linhas */
}
/* MODO VERTICAL INVERTIDO (Grande na DIREITA) */
/* Basta adicionar class="direita" no HTML e colocar a foto grande por último */
.mosaico.vertical.direita > :nth-child(1) {
/* Reseta o 1º item para ser pequeno */
grid-column: auto;
grid-row: auto;
}
.mosaico.vertical.direita > :last-child {
/* O ÚLTIMO item vira o grandão na direita */
grid-column: 2; /* Coluna da Direita */
grid-row: 1 / span 2; /* Começa no topo e desce até o fim */
}
/* --- MOBILE --- */
@media (max-width: 650px) {
.mosaico.vertical, .mosaico.vertical.direita {
display: flex;
flex-direction: column;
aspect-ratio: auto; /* Desliga a proporção fixa */
}
.mosaico > * img {
height: auto !important; /* Deixa a altura natural */
aspect-ratio: 3/2; /* Padrão retangular para todas no celular */
}
}
/* =======================================================
MOSAICO HORIZONTAL INTELIGENTE
Estrutura: 2 colunas, altura automática
======================================================= */
.mosaico.horizontal {
grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
grid-template-rows: auto auto; /* Altura definida pelo conteúdo */
aspect-ratio: auto; /* Remove proporção fixa, deixa fluir */
}
/* O 3º ITEM (A panorâmica) */
/* Por padrão, ele fica embaixo e ocupa as duas colunas */
.mosaico.horizontal > :nth-child(3) {
grid-column: 1 / -1; /* Vai da linha 1 até o final (-1) */
}
/* --- MODO INVERTIDO (Panorâmica sobe) --- */
.mosaico.horizontal.invertido > :nth-child(3) {
grid-column: 1 / -1; /* Continua ocupando tudo */
grid-row: 1; /* FORÇA ir para a primeira linha */
}
/* Obs: Os itens 1 e 2 fluirão automaticamente para a linha de baixo */
/* ----------- MOBILE (Responsividade Total) ----------- */
@media (max-width: 650px) {
.mosaico.vertical, .mosaico.vertical.direita,
.mosaico.horizontal, .mosaico.horizontal.tripla {
display: flex;
flex-direction: column;
aspect-ratio: auto;
gap: 15px;
}
.mosaico-item img {
height: auto !important;
aspect-ratio: 3/2;
}
/* Garante que o item ocupe a largura toda no celular */
figure.mosaico-item {
width: 100% !important;
max-width: 100% !important;
}
}
/* =======================================================
MOSAICO "LINHA" SUPER SIMPLIFICADO
Uso: Apenas div e img (ou div, a e img)
======================================================= */
.mosaico.simples {
/* 1. O Motor Automático */
display: grid;
grid-auto-flow: column; /* Cria colunas automaticamente */
grid-auto-columns: 1fr; /* Força larguras iguais para todos */
gap: 10px;
/* 2. Layout Base */
width: 100%;
margin-bottom: 2rem;
box-sizing: border-box;
/* Limpeza de conflitos com outros mosaicos */
grid-template-columns: none;
grid-template-rows: auto;
}
/* O SEGREDO: Estiliza diretamente as IMAGENS ou LINKS que são filhos diretos */
.mosaico.simples > img,
.mosaico.simples > a {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
/* PROPORÇÃO (Ajuste aqui: 2/3 para Livros, 1/1 para Quadrado) */
aspect-ratio: auto;
/* Garante que a imagem preencha o retângulo sem distorcer */
object-fit: cover;
height: auto !important; /* Deixa o aspect-ratio controlar a altura */
border-radius: 2px;
/* Remove decorações de link se houver */
text-decoration: none;
background: none;
}
/* Caso especial: Se for um LINK, a imagem dentro dele tem que obedecer */
.mosaico.simples > a > img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 2px;
}
/* --- MOBILE (Empilha tudo) --- */
@media (max-width: 650px) {
.mosaico.simples {
display: flex;
flex-direction: column;
gap: 15px;
}
/* No celular, removemos a proporção fixa */
.mosaico.simples > img,
.mosaico.simples > a {
aspect-ratio: auto;
height: auto !important;
}
}
/* ---------- FIGURAS e ALINHAMENTOS ---------- */
/* DIREITA */
figure.moderno.dir {
float: right;
margin: 0.5rem 0 0.5rem 1rem;
shape-margin: 1.2rem;
max-width: 45%;
}
figure.moderno.dir figcaption {
justify-self: end;
text-align: right;
margin-right: 0;
}
/* ESQUERDA */
figure.moderno.esq {
float: left;
margin: 0.5rem 1rem 0.5rem 0;
shape-margin: 1.2rem;
max-width: 45%;
}
figure.moderno.esq figcaption {
justify-self: start;
text-align: left;
margin-left: 0;
}
/* CENTRO (Ajustado para 90%) */
figure.moderno.centro {
float: none;
display: grid;
margin: 0 auto 1.5rem auto;
width: 90% !important; /* <--- FORÇAMOS OS 90% */
max-width: 100%;
}
/* Badge à ESQUERDA no centro */
figure.moderno.centro figcaption {
justify-self: start;
text-align: left;
}
/* Mobile */
@media (max-width: 380px) {
figure.moderno.dir,
figure.moderno.esq {
max-width: 60%;
}
.centro, figure.moderno.centro { /* Adicionamos a regra específica aqui */
width: 100% !important;
}
}
/* =======================================================
LEGENDA EM CAIXA (Estilo Nota Técnica)
Uso: Para destaques dentro de figures
======================================================= */
.cred3 {
/* 1. Estrutura e Fundo */
display: block; /* Garante que comporte o texto */
background-color: var(--cor-fundo-detalhe); /* Cinza muito suave (limpo) */
border-left: 3px solid var(--cor-principal); /* A Assinatura Vermelha */
/* 2. Espaçamento (Sem margens negativas perigosas) */
padding: 8px 12px; /* Respiro interno confortável */
margin-top: 0; /* Zera margens para colar na foto */
width: auto; /* Adapta-se à largura do container */
/* 3. Tipografia Harmonizada */
font-family: sans-serif; /* A mesma das outras legendas */
font-size: 0.75rem !important; /* Pequeno, mas legível (aprox 12px) */
line-height: 1.4; /* Altura de linha confortável */
color: var(--cor-texto-suave) !important; /* Cinza escuro (leitura fácil) */
text-align: left !important;
/* 4. Acabamento */
box-sizing: border-box; /* Garante que o padding não estoure a largura */
}
/* Ajuste fino: Se a imagem tiver borda ou padding, isso garante a união */
figure .cred3 {
width: 100%; /* Ocupa a largura total da figure */
}
.arte2 {
margin-top:-30px;
margin-bottom:35px;
float:right;
clear:both;
}
.arte2::before {
content: attr(artista);
color: var(--cor-texto-suave);
font-size:12px;
}
/* ---------- VÍDEOS ---------- */
/* =======================================================
VÍDEO BOX (Versão Definitiva & Limpa)
======================================================= */
.video-box {
display: block;
width: 100%;
position: relative;
/* 1. Formato Padrão */
aspect-ratio: 16 / 9;
/* 2. Limpeza Técnica (Mata espaços fantasmas) */
line-height: 0 !important;
font-size: 0 !important;
margin-bottom: 0 !important; /* Cola no elemento de baixo */
}
/* O Player */
.video-box iframe {
display: block !important;
width: 100%;
height: 100%;
border: none;
}
/* Variações */
.video-box.quadrado { aspect-ratio: 1 / 1; }
.video-box.vertical { aspect-ratio: 9 / 16; }
/* =======================================================
LEGENDA DO VÍDEO (.info2)
======================================================= */
/* --- A LEGENDA DO VÍDEO (Clean - Sem Borda) --- */
.info2 {
display: block;
width: 100%;
text-align: left !important;
font-family: sans-serif;
font-size: 0.75rem;
line-height: 1.3;
color: var(--cor-texto-suave);
/* Sem borda superior */
border: none;
/* Apenas espaçamento */
padding-top: 0.5rem; /* Um respiro suave entre o vídeo e o texto */
margin-top: 0 !important;
margin-bottom: 1rem;
}
.info2 strong {
color: var(--cor-principal);
text-transform: uppercase;
font-size: 0.7rem;
margin-right: 0.4rem;
}
/* ---------- BOXES ---------- */
#citacao, .citacao {
margin: 0 5% !important;
}
/* =======================================================
BOX DE DESTAQUE (Versão Diagramação Padrão)
======================================================= */
/* CONTAINER DESTAQUE (Neutro) */
.destaque {
/* Estrutura */
margin: 0 5% 1.5rem 5% !important;
padding: 20px !important;
background-color: var(--cor-fundo-citacao) !important;
border-radius: 6px;
border: none;
box-sizing: border-box;
/* Tipografia Padrão (Roboto) - Tamanho Normal */
font-family: var(--fonte-padrao);
font-size: 1em !important;
line-height: 1.5 !important;
color: var(--cor-texto);
}
.destaque.roman {
font-family: var(--fonte-serifa) !important;
font-size: 1.05em !important; /* Compensa o tamanho visual menor da serifa */
}
/* ---------- ORNAMENTOS ---------- */
#ornamento {
width: 100%;
position: relative;
margin-right: 10px;
}
.moldura {
position: absolute;
float: right;
right: 0;
opacity: 0.1;
}
.superior, .cima {
content:url(https://1.bp.blogspot.com/--sGhlKtVdt0/X_ndkJP9TqI/AAAAAAACpno/745-P43jnAspuoU4-fRIPOHryqgk_U5RgCLcBGAsYHQ/s0/cant-alta.png);
width:30%;
}
.media, .central {
content:url(https://1.bp.blogspot.com/-uSPFluKAC8M/X_n05OcBEKI/AAAAAAACpoA/YwZslOU3JXAccKe0EkdOCJJlJZtsXpAWwCLcBGAsYHQ/s0/cant-centro.png);
top: 50%;
transform: translateY(-50%);
width:30%;
}
.inferior, .baixo { content:url(https://1.bp.blogspot.com/-SnALcnPDM2k/X_ndkHPYBtI/AAAAAAACpns/bJPYauJk5C42qM34rpBHfCGciK4e1BJPQCLcBGAsYHQ/s0/cant-baixa.png);
bottom: 0;
width:30%;
}
/* ---------- PONTO FINAL ---------- */
.pontofinal {
float:right;
width:40px;
margin-top:-20px;
margin-bottom:-20px;
content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJDdIPfmeWB9GGCcyrIIcfeUX9Et_Olf06isLdHfH_3yZ-5EkYJO2T83zoMjC7vD1Lb5HsSc7zfDb-uEKe4lXF1OUEPuTS_1SglqbdWx8k42ujkV0Re4XQfAPnuwzwCpAILbhs_xGYwjOKy0pcRPir2gdU7ePITKYIOsCoCvbWHA6YaqtDnKqw4e6RsTA/s1600/LogoALCR.png);
border-radius:50%;
}
/* ---------- NOTAS FINAIS ----------- */
.pos-escrito {
/* 1. SIMETRIA VERTICAL */
/* Aumentamos de 0.5rem para 1.5rem.
Isso deve espelhar o espaço que existe acima da linha. */
margin-top: 1.5rem !important;
/* 2. PROTEÇÃO DO LOGOTIPO */
/* Mantém o texto longe da bolinha vermelha à direita */
margin-right: 60px !important;
/* Manter o resto */
padding-top: 0;
color: var(--cor-texto-suave);
font-size: 0.9rem;
line-height: 1.6;
}
.pos-escrito ul,
.pos-escrito ol {
margin-left: 1.5rem; /* Recuo da margem esquerda */
padding-left: 1rem; /* Espaço entre o marcador e o texto */
color: var(--cor-texto-suave); /* Cor do texto do item */
}
.pos-escrito li {
/* 1. Formato Geométrico */
list-style-type: square;
margin-bottom: 2px; /* Quase colado, apenas um respiro mínimo */
line-height: 1.4; /* Altura de linha mais econômica */
}
.pos-escrito li::marker {
color: var(--cor-texto-suave);
font-size: 0.9em; /* Tamanho discreto */
}
/* =======================================================
POEMA (Versão Zen)
======================================================= */
.poema {
white-space: pre-wrap; /* O motor da poesia */
text-align: left !important; /* Alinhamento */
width: auto !important; /* Previne vazar para o lado */
hyphens: none !important; /* Não quebra palavras */
display: block;
}
/* ---------- BARRA LATERAL ----------- */
#PopularPosts2 ul {
background-color: transparent !important;
text-align:center !important;
display: flex;
flex-wrap: wrap;
}
#PopularPosts2 li {
padding:0 !important;
margin: 0 auto 35px auto !important;
width:320px;
height:150px;
position:relative;
}
#PopularPosts2 li.contador {
counter-increment: item;
position:relative;
}
#PopularPosts2 li.contador:before {
content: counter(item);
color: var(--cor-branco);
font-size:3.5em;
font-weight:bold;
line-height:1em;
position:absolute;
top:0.1em;
left:0.1em;
display:block;
border:0px solid var(--cor-borda);
opacity:0.4;
}
#PopularPosts2 img {
padding: 0px;
width:320px;
overflow:hidden;
max-height:150px;
object-fit: cover;
object-position: 100% 0;
}
#PopularPosts2 .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 50%,rgba(0, 0, 0,0.7));
}
#PopularPosts2 .autor {
background:var(--cor-principal);
text-transform:uppercase;
padding: 4px 8px !important;
margin-bottom:5px;
font-size: 1em !important;
line-height:1em !important;
position:absolute;
left:15px;
color:var(--cor-branco) !important;
font-family: var(--fonte-padrao) !important;
font-weight:bold;
text-align:left !important;
top:57%;
overflow:hidden !important;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
#PopularPosts2 .titulo2 {
padding: 0 15px;
font-size: 1.8em;
line-height:1em ;
width:100% ;
color:var(--cor-branco) !important;
font-family: var(--fonte-padrao) !important;
font-weight:bold;
text-align:left !important;
position: absolute;
top: 70%;
overflow:hidden !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#PopularPosts3 ul {
background-color: transparent !important;
display: flex;
flex-wrap: wrap;
}
#PopularPosts3 li {
width: 320px !important;
height: 100px !important;
background-color: var(--cor-branco) !important;
padding: 0 !important;
margin: 0 auto 15px !important;
position:relative;
}
#PopularPosts3 img {
width: 320px !important;
height: 100px !important;
padding: 0px;
overflow:hidden;
object-fit:cover;
object-position: 100% 0;
}
#PopularPosts3 .overlay2 {
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(to left, transparent 1%,rgba(0, 0, 0,0.7));
}
#PopularPosts3 .titulo3 {
width:70%;
text-align:left !important;
padding: 0 10px !important;
font: bold 20px/20px var(--fonte-padrao) !important;
color:var(--cor-branco);
position:absolute;
top:35px;
left:10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow:hidden !important;
}
#PopularPosts3 li.capa {
background:transparent !important;
margin-bottom:-50px !important;
}
.max320 {
max-width:320px !important;
display: flex;
flex-wrap: wrap;
margin:0 auto;
}
.randomiza {
display: none; /* Todos os elementos ficam ocultos por padrão */
}
.randomiza.ativo {
display: block; /* Apenas o elemento ativo é exibido */
}
/* ---------- CAIXAS DO RODAPÉ DAS POSTAGENS ---------- */
fieldset {
display: block;
margin: 30px 0 40px 0 !important;
padding: 20px 20px;
border: 0px solid transparent !important;
border-radius: 4px !important;
background: var(--cor-fundo-detalhe);
/* opacity: 0.5 !important; */
z-index:100;
}
legend {
font-size:1.2rem !important;
border-radius: 4px !important;
text-transform: uppercase !important;
color: var(--cor-texto) !important;
padding: 3px 10px !important;
font-weight: bold !important;
width: auto !important;
background: var(--cor-fundo) !important;
display:block !important;
margin: 0 auto !important;
}
/* ---------- TABELAS ---------- */
table.tabela {
width:90%;
margin:0 auto 35px;
font-size:85%;
}
td.numero {
padding:5px 10px;
width:15% !important;
background:var(--cor-tabela-claro);
text-align:center
}
td.celula1 {
padding:5px 10px;
width:30% !important;
background:var(--cor-tabela-claro);
text-align:center
}
td.celula2 {
padding:5px 10px;
width:70% !important;
background:var(--cor-tabela-escuro);
}
td.celula3 {
padding:5px 10px;
width:85% !important;
background:var(--cor-tabela-escuro);
}
.listagem {
padding:5px 10px;
width:90%;
margin:0 auto 5px;
background:var(--cor-tabela-claro);
text-align:center
}
/* ---------- AUDIO ---------- */
.fraudio-container {
margin-top: 0 !important;
margin-bottom: 5px !important;
}
/* ---------- POSTS RELACIONADOS ---------- */
#relacionados {
width:100%;
color:var(--cor-texto);
text-align:center;
padding:10px 0 10px 0;
}
.leiamais {
font-size:calc(1em + 0.5vw);
color:var(--cor-branco);
opacity:0.8;
display:block;
margin:0 0 10px 0;
}
.relacionado, .relacionado a {
font-size:calc(1.5em + 0.5vw);
color:var(--cor-branco);
margin:0 0 10px 0;
text-decoration:none;
display:block;
}
/* ---------- RECUPERADOS ---------- */
/* -------------------- GRADIENTES -----------------------
.gradiente {
border-image: linear-gradient(45deg, rgb(240, 240, 240), rgb(183, 28, 28)) 1 / 1 / 0 stretch;
border-style: solid;
border-width: 0px 0px 2px;
}
.gradiente2 {
border-image: linear-gradient(45deg, rgb(183, 28, 28), rgb(240, 240, 240)) 1 / 1 / 0 stretch;
border-style: solid;
border-width: 0px 0px 2px;
}
*/
/* Aplica margem à direita de todos os ícones do Font Awesome */
.fa, .fas, .far, .fab {
margin-right: 2ch; /* 2ch equivale aproximadamente a 2 caracteres */
}