/* =============================================================================
Café com Leite Notícias — identidade do site
IDEIA: jornal no esqueleto, moderno na pele. A página é quase toda texto,
porque quase nenhum post tem foto. Então quem organiza a leitura é a
tipografia e o fio, não o card com miniatura: grade de jornal, uma manchete
que domina, carimbo de hora à esquerda da lista, cor só no rótulo da
editoria. A foto, quando existe, é privilégio da manchete.
Para mudar a cara do site inteiro, mexa nos tokens abaixo.
========================================================================== */
:root{
/* --- cor: papel levemente quente, tinta de café, sinal em petróleo --- */
--brl-papel: #FBF8F4;
--brl-papel-2: #F2EBE1;
--brl-papel-3: #E8DECF;
--brl-tinta: #1C1512;
--brl-tinta-2: #5E5249;
--brl-cafe: #6B3F23;
--brl-fio: #DED3C5;
--brl-sinal: #15605C;
--brl-capa-txt: #FBF8F4;
/* --- cor por editoria: só no rótulo e na capa, nunca em fundo largo --- */
--brl-s-destaques: #6B3F23;
--brl-s-educacao: #15605C;
--brl-s-ciencia: #2F4A86;
--brl-s-tecnologia: #3C4751;
--brl-s-ia: #6B2F5B;
--brl-s-seguranca: #8A3324;
--brl-s-inovacao: #55602A;
/* --- tipografia: serifa editorial nos títulos, grotesca na mobília --- */
--brl-fonte-titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
--brl-fonte-texto: "Newsreader", Georgia, serif;
--brl-fonte-mob: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--brl-fonte-estr: "Archivo Narrow", "Archivo", system-ui, sans-serif;
/* --- medidas --- */
--brl-largura: 1180px;
--brl-linha: 1px;
}
/* Modo escuro: o visitante que lê de madrugada não leva um flash branco.
Mesma marca, mesmo contraste — não é a paleta invertida. */
@media (prefers-color-scheme: dark){
:root{
--brl-papel: #15100D;
--brl-papel-2: #1E1814;
--brl-papel-3: #2A221C;
--brl-tinta: #F5EFE7;
--brl-tinta-2: #AEA197;
--brl-cafe: #DCA978;
--brl-fio: #332A23;
--brl-sinal: #63C9BF;
--brl-capa-txt: #15100D;
--brl-s-destaques: #DCA978;
--brl-s-educacao: #4FB5AB;
--brl-s-ciencia: #93AEE8;
--brl-s-tecnologia: #AFBDC9;
--brl-s-ia: #D79BC4;
--brl-s-seguranca: #EC9480;
--brl-s-inovacao: #B9C777;
color-scheme: dark;
}
}
/* ----------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box }
body{
margin:0;
background:var(--brl-papel);
color:var(--brl-tinta);
font-family:var(--brl-fonte-texto);
font-size:17px; line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
img,svg{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.1; text-wrap:balance }
:focus-visible{ outline:2px solid var(--brl-sinal); outline-offset:3px }
.brl-env{ max-width:var(--brl-largura); margin:0 auto; padding-inline:20px }
/* Páginas de texto corrido — matéria, páginas legais e 404 — usam a largura
cheia do site, de ponta a ponta, igual ao cabeçalho e ao rodapé. A classe
existe para dar um ponto único de ajuste dessas páginas; a largura vem do
.brl-env. O corpo do texto vai um pouco maior aqui, que é o que mantém a
linha larga confortável. */
.brl-env-texto{ max-width:var(--brl-largura) }
/* Pular para o conteúdo: invisível até o teclado pedir. */
.brl-pular{ position:absolute; left:-9999px; top:0; z-index:100;
background:var(--brl-tinta); color:var(--brl-papel); padding:10px 16px;
font-family:var(--brl-fonte-mob); font-size:14px }
.brl-pular:focus{ left:8px; top:8px }
/* ------------------------------------------------------------ tarja/topo --- */
.brl-tarja{ border-bottom:var(--brl-linha) solid var(--brl-fio);
font-family:var(--brl-fonte-mob); font-size:12.5px }
.brl-tarja-in{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline;
justify-content:space-between; padding-block:10px; color:var(--brl-tinta-2) }
.brl-tarja .data{ font-weight:600; color:var(--brl-tinta) }
.brl-topo{ border-bottom:3px solid var(--brl-tinta) }
.brl-topo-in{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:flex-end;
justify-content:space-between; padding-block:26px 20px }
.brl-marca{ min-width:0 }
.brl-marca .nome{ font-family:var(--brl-fonte-titulo); font-weight:700;
font-size:clamp(38px,7.6vw,70px); line-height:.92; letter-spacing:-.025em; display:block }
.brl-marca .nome em{ font-style:italic; font-weight:400 }
/* O logo do WordPress sai dentro do próprio ,
e sem teto de altura ele entra com o tamanho do arquivo enviado. */
.brl-marca .custom-logo-link{ display:block; line-height:0 }
.brl-marca img{ max-height:clamp(38px,5.4vw,58px); width:auto }
.brl-marca .sub{ display:flex; align-items:center; gap:10px; margin-top:9px;
font-family:var(--brl-fonte-mob); font-size:11.5px; font-weight:700;
letter-spacing:.3em; text-transform:uppercase; color:var(--brl-cafe) }
.brl-marca .sub::after{ content:""; flex:1; height:var(--brl-linha); background:var(--brl-fio) }
.brl-busca{ display:flex; align-items:center; border-bottom:2px solid var(--brl-tinta); padding-bottom:4px }
.brl-busca input{ font-family:var(--brl-fonte-mob); font-size:14px; color:var(--brl-tinta);
background:none; border:0; padding:4px 6px; width:200px; min-width:0 }
.brl-busca input::placeholder{ color:var(--brl-tinta-2) }
.brl-busca button{ font-family:var(--brl-fonte-mob); font-size:12px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
background:none; border:0; color:var(--brl-cafe); padding:4px 2px }
/* ---------------------------------------------------------------- seções --- */
.brl-secoes{ border-bottom:var(--brl-linha) solid var(--brl-fio); position:sticky; top:0;
background:var(--brl-papel); z-index:40 }
.brl-secoes-rol{ overflow-x:auto; min-width:0; -webkit-overflow-scrolling:touch }
.brl-secoes ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0;
font-family:var(--brl-fonte-mob); font-size:13.5px; font-weight:600; white-space:nowrap }
.brl-secoes a{ display:block; padding:13px 0; border-bottom:2px solid transparent }
.brl-secoes a:hover{ border-bottom-color:var(--brl-cafe); color:var(--brl-cafe) }
.brl-secoes .current-menu-item > a,
.brl-secoes .current_page_item > a{ border-bottom-color:var(--brl-tinta) }
/* O submenu do WordPress vira item simples: a barra de editorias é uma
fileira só, e menu que abre sozinho no hover atrapalha no toque. */
.brl-secoes .sub-menu{ display:none }
/* --------------------------------------------------------------- rótulos --- */
.brl-rot{ display:inline-block; font-family:var(--brl-fonte-mob); font-size:11px;
font-weight:700; letter-spacing:.11em; text-transform:uppercase;
color:var(--brl-cor-sec,var(--brl-cafe)) }
.brl-rot:hover{ text-decoration:underline }
.brl-destaques { --brl-cor-sec:var(--brl-s-destaques) }
.brl-educacao { --brl-cor-sec:var(--brl-s-educacao) }
.brl-ciencia { --brl-cor-sec:var(--brl-s-ciencia) }
.brl-tecnologia{ --brl-cor-sec:var(--brl-s-tecnologia) }
.brl-ia { --brl-cor-sec:var(--brl-s-ia) }
.brl-seguranca { --brl-cor-sec:var(--brl-s-seguranca) }
.brl-inovacao { --brl-cor-sec:var(--brl-s-inovacao) }
.brl-meta{ font-family:var(--brl-fonte-mob); font-size:12.5px; color:var(--brl-tinta-2);
display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
font-variant-numeric:tabular-nums; margin:0 }
.brl-meta .quem{ color:var(--brl-tinta); font-weight:600 }
/* ----------------------------------------------------------------- corpo --- */
.brl-corpo{ display:grid; grid-template-columns:minmax(0,1fr) 332px; gap:0 44px; padding-block:34px 0 }
.brl-servico{ border-left:var(--brl-linha) solid var(--brl-fio); padding-left:44px; min-width:0 }
@media (max-width:980px){
.brl-corpo{ grid-template-columns:minmax(0,1fr) }
.brl-servico{ border-left:0; padding-left:0; border-top:3px solid var(--brl-tinta);
margin-top:38px; padding-top:26px }
}
/* -------------------------------------------------------------- manchete --- */
/* align-items:stretch, e não start: com start a foto fica com a altura
natural dela e sobra um buraco embaixo, porque a coluna do título é mais
alta. Esticada, a foto acompanha o texto e as duas colunas terminam
juntas. O min-height segura o caso contrário, de título curto demais. */
.brl-manchete{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
gap:30px; align-items:stretch }
@media (max-width:760px){ .brl-manchete{ grid-template-columns:minmax(0,1fr); gap:20px } }
.brl-figura{ margin:0; min-width:0; display:flex; flex-direction:column; min-height:300px }
.brl-figura .foto{ flex:1; min-height:0; display:block }
.brl-figura img{ width:100%; height:100%; min-height:300px; object-fit:cover }
.brl-figura figcaption{ font-family:var(--brl-fonte-mob); font-size:11.5px;
color:var(--brl-tinta-2); padding-top:8px; margin-top:8px;
border-top:var(--brl-linha) solid var(--brl-fio) }
@media (max-width:760px){
.brl-figura, .brl-figura img{ min-height:0 }
.brl-figura img{ aspect-ratio:3/2 }
}
/* Teto menor que o da maquete: a coluna do título tem ~390px, e 52px ali
quebravam a manchete em quatro linhas. */
.brl-manchete h1{ font-family:var(--brl-fonte-titulo); font-size:clamp(30px,3.5vw,42px);
letter-spacing:-.02em; margin:10px 0 0 }
.brl-manchete h1 a:hover{ color:var(--brl-cafe) }
.brl-linha-fina{ font-size:19px; line-height:1.5; color:var(--brl-tinta-2);
margin:14px 0 16px; max-width:46ch }
/* Sem foto, a manchete ocupa a largura toda e o título cresce. */
.brl-manchete.sem-foto{ grid-template-columns:minmax(0,1fr) }
.brl-manchete.sem-foto h1{ font-size:clamp(34px,6vw,62px); max-width:18ch }
.brl-manchete.sem-foto .brl-linha-fina{ font-size:21px; max-width:54ch }
/* ------------------------------------------------------------ secundárias --- */
.brl-secundarias{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
gap:0 34px; margin-top:32px; padding-top:26px; border-top:3px solid var(--brl-tinta) }
.brl-secundarias article{ padding-bottom:4px; min-width:0 }
@media (min-width:761px){
.brl-secundarias article + article{ border-left:var(--brl-linha) solid var(--brl-fio);
padding-left:34px; margin-left:-17px }
}
@media (max-width:760px){
.brl-secundarias{ gap:0 }
.brl-secundarias article + article{ border-top:var(--brl-linha) solid var(--brl-fio);
margin-top:20px; padding-top:20px }
}
.brl-secundarias h3{ font-family:var(--brl-fonte-titulo); font-size:clamp(20px,2.5vw,24px);
letter-spacing:-.012em; margin:8px 0 10px }
.brl-secundarias h3 a:hover{ color:var(--brl-cafe) }
.brl-secundarias p{ margin:0 0 10px; font-size:15.5px; line-height:1.5; color:var(--brl-tinta-2) }
/* ------------------------------------------------------- faixa ilustrada --- */
.brl-cartoes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:30px; padding-top:22px }
@media (max-width:860px){ .brl-cartoes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px } }
@media (max-width:560px){ .brl-cartoes{ grid-template-columns:minmax(0,1fr) } }
.brl-cartao{ position:relative; min-width:0 }
.brl-cartao .foto{ display:block; margin-bottom:12px }
.brl-cartao .foto img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.brl-cartao .brl-rot{ position:relative; z-index:1 }
.brl-cartao h3{ font-family:var(--brl-fonte-titulo); font-size:21px; letter-spacing:-.012em;
margin:7px 0 8px }
.brl-cartao:hover h3{ color:var(--brl-cafe) }
.brl-cartao p{ margin:0 0 10px; font-size:15px; line-height:1.5; color:var(--brl-tinta-2) }
/* --------------------------------------------------------------- banners --- */
.brl-banner{ margin-top:34px }
.brl-banner img{ width:100% }
/* Banner da coluna de serviço.
INTEIRO, nunca cortado: anúncio cortado é anúncio entregue errado, e o
anunciante paga pela arte toda. object-fit:contain e height:auto impedem
que qualquer regra de fora imponha altura e corte a peça; aspect-ratio
auto desfaz proporção herdada. Gruda na rolagem a partir de 68px, abaixo
da barra de editorias, que também é sticky. */
.brl-banner-v{ margin-top:34px; position:sticky; top:68px }
.brl-banner-v img{
width:100%; height:auto; max-height:none;
object-fit:contain; aspect-ratio:auto;
}
/* Telas baixas: sticky numa peça mais alta que a janela prende a rolagem. */
@media (max-height:780px), (max-width:980px){
.brl-banner-v{ position:static }
}
/* ---------------------------------------------------------------- blocos --- */
.brl-bloco{ margin-top:46px }
.brl-bloco-topo{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline;
justify-content:space-between; border-bottom:3px solid var(--brl-tinta); padding-bottom:8px }
.brl-bloco-topo h2{ font-family:var(--brl-fonte-mob); font-size:13px; font-weight:800;
letter-spacing:.16em; text-transform:uppercase }
.brl-bloco-topo .mais{ font-family:var(--brl-fonte-mob); font-size:12px; font-weight:700;
color:var(--brl-cafe); letter-spacing:.04em }
.brl-bloco-topo .mais:hover{ text-decoration:underline }
/* A lista de texto: carimbo à esquerda, fio entre os itens, nada de
miniatura. É o formato que aguenta uma home inteira sem foto. */
/* A linha inteira é clicável sem ser um por fora: brl-alvo estica um
pseudo-elemento sobre o . Link dentro de link é inválido, e o rótulo
da editoria precisa continuar sendo link próprio. */
.brl-alvo::after{ content:""; position:absolute; inset:0 }
.brl-fio-lista{ list-style:none; margin:0; padding:0 }
.brl-fio-lista li{ position:relative; display:grid; grid-template-columns:62px minmax(0,1fr);
gap:0 18px; padding:15px 0; border-bottom:var(--brl-linha) solid var(--brl-fio) }
.brl-fio-lista li:hover h3{ color:var(--brl-cafe) }
.brl-fio-lista .brl-rot{ position:relative; z-index:1 }
.brl-fio-lista .quando{ font-family:var(--brl-fonte-estr); font-size:12.5px; font-weight:600;
color:var(--brl-tinta-2); font-variant-numeric:tabular-nums; padding-top:5px;
text-transform:lowercase }
.brl-fio-lista .quando.agora{ color:var(--brl-sinal) }
.brl-fio-lista h3{ font-family:var(--brl-fonte-titulo); font-size:20px; font-weight:600;
letter-spacing:-.01em; margin:5px 0 0 }
.brl-fio-lista p{ margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--brl-tinta-2) }
@media (max-width:480px){
.brl-fio-lista li{ grid-template-columns:minmax(0,1fr); gap:4px }
.brl-fio-lista .quando{ padding-top:0 }
}
/* --------------------------------------------------- bloco de seção/capa --- */
.brl-secao-grade{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:34px; padding-top:22px }
@media (max-width:760px){ .brl-secao-grade{ grid-template-columns:minmax(0,1fr); gap:24px } }
/* Capa tipográfica: o que entra no lugar da foto que o post não tem. */
.brl-capa{ display:flex; flex-direction:column; justify-content:space-between; gap:18px;
padding:26px 24px 24px; min-height:232px;
background-color:var(--brl-cor-sec,var(--brl-cafe)); color:var(--brl-capa-txt);
background-image:radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.3px);
background-size:9px 9px }
.brl-capa .brl-rot{ color:inherit; opacity:.82 }
.brl-capa h3{ font-family:var(--brl-fonte-titulo); font-size:clamp(23px,3vw,30px);
letter-spacing:-.015em; color:inherit }
.brl-capa .pe{ font-family:var(--brl-fonte-mob); font-size:12px; opacity:.82;
font-variant-numeric:tabular-nums }
.brl-capa:hover{ filter:saturate(1.15) brightness(1.06) }
.brl-lista-seca{ list-style:none; margin:0; padding:0 }
.brl-lista-seca li{ position:relative; padding:13px 0;
border-bottom:var(--brl-linha) solid var(--brl-fio) }
.brl-lista-seca li:first-child{ border-top:var(--brl-linha) solid var(--brl-fio) }
.brl-lista-seca .brl-rot{ position:relative; z-index:1 }
.brl-lista-seca h4{ font-family:var(--brl-fonte-titulo); font-size:18px; font-weight:600;
letter-spacing:-.008em; margin:4px 0 0 }
.brl-lista-seca li:hover h4{ color:var(--brl-cafe) }
/* --------------------------------------------------------------- serviço --- */
.brl-cx + .brl-cx, .brl-cx + .brl-banner-v, .brl-banner-v + .brl-cx{ margin-top:34px }
.brl-cx-topo{ font-family:var(--brl-fonte-mob); font-size:12.5px; font-weight:800;
letter-spacing:.15em; text-transform:uppercase;
border-bottom:2px solid var(--brl-tinta); padding-bottom:7px }
.brl-ranque{ list-style:none; margin:0; padding:0; counter-reset:r }
.brl-ranque li{ border-bottom:var(--brl-linha) solid var(--brl-fio); counter-increment:r }
.brl-ranque a{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 12px;
padding:13px 0; align-items:start }
.brl-ranque a::before{ content:counter(r); font-family:var(--brl-fonte-estr); font-size:27px;
font-weight:700; line-height:.9; color:var(--brl-cafe); font-variant-numeric:tabular-nums }
.brl-ranque h4{ font-family:var(--brl-fonte-titulo); font-size:17.5px; font-weight:600;
letter-spacing:-.006em; margin:0 }
.brl-ranque a:hover h4{ color:var(--brl-cafe) }
.brl-ranque .quando{ font-family:var(--brl-fonte-mob); font-size:11.5px;
color:var(--brl-tinta-2); display:block; margin-top:5px }
.brl-verbetes{ list-style:none; margin:0; padding:0 }
.brl-verbetes li{ border-bottom:var(--brl-linha) solid var(--brl-fio) }
.brl-verbetes a{ display:block; padding:12px 0 }
.brl-verbetes dfn{ font-family:var(--brl-fonte-mob); font-size:14.5px; font-weight:700;
font-style:normal; color:var(--brl-cafe) }
.brl-verbetes p{ margin:3px 0 0; font-size:14.5px; line-height:1.45; color:var(--brl-tinta-2) }
.brl-verbetes a:hover dfn{ text-decoration:underline }
.brl-cx-pe{ display:inline-block; margin-top:14px; font-family:var(--brl-fonte-mob);
font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--brl-cafe) }
.brl-cx-pe:hover{ text-decoration:underline }
.brl-editorias{ list-style:none; margin:0; padding:0; font-family:var(--brl-fonte-mob); font-size:15px }
.brl-editorias li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:11px 0; border-bottom:var(--brl-linha) solid var(--brl-fio) }
.brl-editorias a{ font-weight:600 }
.brl-editorias a:hover{ color:var(--brl-cafe); text-decoration:underline }
.brl-editorias span{ font-family:var(--brl-fonte-estr); font-size:13px; color:var(--brl-tinta-2);
font-variant-numeric:tabular-nums }
/* Na página de uma editoria, marca qual delas você está lendo. */
.brl-editorias li.aqui a{ color:var(--brl-cafe) }
.brl-editorias li.aqui{ box-shadow:inset 3px 0 0 var(--brl-cafe); padding-left:11px }
.brl-arquivo{ display:block; padding-top:16px }
.brl-arquivo .quando{ font-family:var(--brl-fonte-mob); font-size:11.5px; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:var(--brl-tinta-2) }
.brl-arquivo h4{ font-family:var(--brl-fonte-titulo); font-size:19px; font-weight:600;
letter-spacing:-.01em; margin:7px 0 0 }
.brl-arquivo:hover h4{ color:var(--brl-cafe) }
/* ----------------------------------------------------------------- posts --- */
.brl-post-topo{ padding:40px 0 18px }
/* Sem teto em caracteres: o título usa a coluna toda. Com max-width:20ch ele
quebrava em três linhas curtas tendo espaço de sobra ao lado. */
.brl-post-topo h1{ font-family:var(--brl-fonte-titulo); font-size:clamp(32px,5vw,50px);
letter-spacing:-.02em; margin:10px 0 0 }
.brl-post-topo .brl-linha-fina{ font-size:21px; max-width:none }
.brl-post-capa{ margin-bottom:32px }
.brl-post-capa img{ width:100%; max-height:620px; object-fit:cover }
/* Preenche a página inteira. Sem teto aqui: a largura é a do contêiner, e
dois tetos se contradizem — um deles sempre vence sem que se perceba qual.
Corpo maior e entrelinha mais alta porque a linha é larga. */
.brl-prosa{ max-width:none; padding-bottom:64px; font-size:19.5px; line-height:1.8 }
.brl-prosa p{ margin:0 0 1.1em }
.brl-prosa h2{ font-family:var(--brl-fonte-titulo); font-size:28px; margin:1.7em 0 .5em }
.brl-prosa h3{ font-family:var(--brl-fonte-titulo); font-size:22px; margin:1.5em 0 .4em }
.brl-prosa a{ color:var(--brl-cafe); text-decoration:underline; text-underline-offset:2px }
.brl-prosa img{ margin:28px 0 }
.brl-prosa ul,.brl-prosa ol{ padding-left:22px }
.brl-prosa li{ margin-bottom:.5em }
.brl-prosa blockquote{ margin:30px 0; padding:4px 0 4px 20px;
border-left:3px solid var(--brl-cafe); font-size:21px; color:var(--brl-tinta-2) }
/* -------------------------------------------------------------- listagem --- */
.brl-lista-topo{ padding:10px 0 0; border-bottom:3px solid var(--brl-tinta); margin-bottom:6px }
.brl-lista-topo h1{ font-family:var(--brl-fonte-titulo); font-size:clamp(32px,5vw,50px);
letter-spacing:-.022em; margin:10px 0 0; max-width:20ch }
.brl-lista-topo .brl-linha-fina{ margin:12px 0 0; max-width:56ch; font-size:18px }
.brl-lista-topo .brl-meta{ padding:14px 0 12px }
/* Busca grande: a da página de resultado e a da 404. Mais alta que a do
cabeçalho porque ali ela é a ação principal, não um acessório. */
.brl-busca-grande{ display:flex; gap:0; margin:20px 0 4px; max-width:520px }
.brl-busca-grande input{ flex:1; min-width:0; font-family:var(--brl-fonte-mob); font-size:16px;
color:var(--brl-tinta); background:var(--brl-papel);
border:var(--brl-linha) solid var(--brl-fio); border-right:0; padding:13px 14px }
.brl-busca-grande input::placeholder{ color:var(--brl-tinta-2) }
.brl-busca-grande button{ font-family:var(--brl-fonte-mob); font-size:13px; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
background:var(--brl-tinta); color:var(--brl-papel); border:0; padding:13px 20px }
.brl-busca-grande button:hover{ background:var(--brl-cafe) }
/* Chamada de capa da editoria. Foto à esquerda, como a manchete, mas em
corpo menor: é a capa de uma seção, não a do dia. */
.brl-lista-capa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:28px; align-items:stretch; padding:26px 0; border-bottom:var(--brl-linha) solid var(--brl-fio) }
@media (max-width:760px){ .brl-lista-capa{ grid-template-columns:minmax(0,1fr); gap:16px } }
.brl-lista-capa .foto{ display:block; height:100% }
.brl-lista-capa .foto img{ width:100%; height:100%; min-height:220px; object-fit:cover }
@media (max-width:760px){ .brl-lista-capa .foto img{ height:auto; min-height:0; aspect-ratio:3/2 } }
.brl-lista-capa h2{ font-family:var(--brl-fonte-titulo); font-size:clamp(24px,3.2vw,32px);
letter-spacing:-.018em; margin:0 0 10px }
.brl-lista-capa h2 a:hover{ color:var(--brl-cafe) }
.brl-lista-capa .brl-linha-fina{ font-size:17px; margin:0 0 12px }
.brl-vazio{ padding:40px 0 56px; max-width:52ch }
.brl-vazio p{ font-size:19px; color:var(--brl-tinta-2); margin:0 0 24px }
.brl-404-editorias{ font-family:var(--brl-fonte-mob); font-size:14.5px;
color:var(--brl-tinta-2); margin:24px 0 0 }
.brl-404-editorias a{ color:var(--brl-cafe); font-weight:600 }
.brl-404-editorias a:hover{ text-decoration:underline }
/* ----------------------------------------------------------- paginação --- */
/* paginate_links devolve para as outras páginas e para a atual
e para as reticências, por isso os dois são estilizados. */
.brl-paginacao{ display:flex; flex-wrap:wrap; gap:8px; align-items:center;
padding:30px 0 10px; font-family:var(--brl-fonte-mob); font-size:14px; font-weight:600 }
.brl-paginacao .page-numbers{ display:inline-block; min-width:42px; text-align:center;
padding:10px 12px; border:var(--brl-linha) solid var(--brl-fio);
color:var(--brl-tinta); font-variant-numeric:tabular-nums }
.brl-paginacao a.page-numbers:hover{ border-color:var(--brl-cafe); color:var(--brl-cafe) }
.brl-paginacao .page-numbers.current{ background:var(--brl-tinta); color:var(--brl-papel);
border-color:var(--brl-tinta) }
.brl-paginacao .page-numbers.dots{ border-color:transparent; min-width:0; padding:10px 2px }
.brl-paginacao .prev, .brl-paginacao .next{ min-width:0 }
/* ---------------------------------------------------------- página legal --- */
.brl-legal-topo{ padding:46px 0 10px; border-bottom:3px solid var(--brl-tinta);
margin-bottom:34px }
.brl-legal-topo h1{ font-family:var(--brl-fonte-titulo); font-size:clamp(34px,5.4vw,50px);
letter-spacing:-.022em; margin:10px 0 0 }
.brl-legal-topo .brl-linha-fina{ margin:14px 0 14px; font-size:21px; max-width:none }
.brl-legal-topo .brl-meta{ padding-bottom:16px }
/* Mesma largura da matéria: o site tem um eixo de leitura só. */
.brl-legal{ max-width:none; font-size:19.5px; line-height:1.8 }
.brl-legal h2{ font-size:27px; margin-top:2em }
.brl-legal ul{ margin:0 0 1.1em }
.brl-404{ padding:76px 0 10px; max-width:none }
.brl-404 h1{ font-family:var(--brl-fonte-titulo); font-size:clamp(34px,6vw,58px); letter-spacing:-.02em }
.brl-404 p{ font-size:19px; color:var(--brl-tinta-2); margin:16px 0 26px }
.brl-btn{ display:inline-block; font-family:var(--brl-fonte-mob); font-size:13px; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; background:var(--brl-tinta);
color:var(--brl-papel); padding:14px 20px }
.brl-btn:hover{ background:var(--brl-cafe) }
/* ---------------------------------------------------------------- rodapé --- */
.brl-pe{ border-top:3px solid var(--brl-tinta); padding-block:38px 30px; margin-top:58px }
.brl-pe-grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px }
@media (max-width:760px){ .brl-pe-grade{ grid-template-columns:minmax(0,1fr) } }
.brl-pe .nome{ font-family:var(--brl-fonte-titulo); font-size:27px; font-weight:700;
letter-spacing:-.02em; display:block }
.brl-pe-marca{ display:inline-block; line-height:0 }
.brl-pe .brl-pe-logo{ max-height:46px; width:auto }
.brl-pe .aviso{ font-size:14px; line-height:1.5; color:var(--brl-tinta-2); margin:12px 0 0; max-width:50ch }
.brl-pe h4{ font-family:var(--brl-fonte-mob); font-size:11px; font-weight:800;
letter-spacing:.12em; text-transform:uppercase; color:var(--brl-tinta-2) }
.brl-pe ul{ list-style:none; margin:12px 0 0; padding:0; font-family:var(--brl-fonte-mob); font-size:14px }
.brl-pe li{ margin-bottom:9px }
.brl-pe ul a:hover{ color:var(--brl-cafe); text-decoration:underline }
.brl-pe-bot{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
border-top:var(--brl-linha) solid var(--brl-fio); margin-top:30px; padding-top:16px;
font-family:var(--brl-fonte-mob); font-size:12.5px; color:var(--brl-tinta-2) }
/* No celular não há menu em gaveta: a barra de editorias rola para o lado.
Uma fileira que se arrasta mostra que há mais seções; um ícone de três
riscos esconde isso atrás de um toque. Sobre e Fale conosco ficam no pé. */
/* ---------------------------------------------------------------- defesa --- */
/* Rede de segurança contra CSS de tema que não passa pela fila de estilos
e por isso não pode ser retirado pelo PHP — tema que imprime