/* ==========================================================================
main.css — blog multi-marca (7 domínios)
Carregado RENDER-BLOCKING e DEPOIS do async do Bootstrap no .
Consequência de cascata (P3/P13 da SPEC): por ordem de documento, este
arquivo SEMPRE vence o Bootstrap. Por isso ele precisa definir explicitamente
tudo que o reboot do Bootstrap tocaria above-fold (body, headings, a, ul, img)
— assim o sheet async chegando não causa snap-in.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens (P13 — nunca hex literal repetido no código)
-------------------------------------------------------------------------- */
:root {
--verde-900: #0e3d26;
--verde-rodape: #27332d; /* fundo do rodapé */
--verde-700: #16663f;
--verde-600: #1b7a4b;
--verde-100: #e8f1ec;
--vermelho: #c8102e;
--tinta: #16211c;
--tinta-70: #4a5a52;
--tinta-50: #77857d;
--borda: #e2e8e4;
--fundo: #ffffff;
--fundo-2: #f5f7f5;
--cinza-ph: #dcdfdd;
--cinza-ph2: #cfd4d1;
--fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fonte-tit: Georgia, "Times New Roman", serif;
--r: 4px;
--sombra: 0 1px 3px rgba(22, 33, 28, .08);
--larg-max: 1180px;
}
/* --------------------------------------------------------------------------
2. Reset / neutralização do reboot do Bootstrap (aplica no 1º paint)
-------------------------------------------------------------------------- */
*, ::after, ::before { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--fonte);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--tinta);
background: var(--fundo);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 700; color: inherit; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
/* a:hover { color: var(--verde-600); } */
img, svg { vertical-align: middle; max-width: 100%; }
hr { margin: 1.75rem 0; border: 0; border-top: 1px solid var(--borda); opacity: 1; }
button, select, input { font: inherit; color: inherit; }
.container { max-width: var(--larg-max); }
.oculto-visual {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pular {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--verde-900); color: #fff; padding: .6rem 1rem;
}
.pular:focus { left: 0; }
:focus-visible { outline: 3px solid var(--verde-600); outline-offset: 2px; }
/* --------------------------------------------------------------------------
3. Placeholder de imagem (§ "quadrados em cinza")
Reserva via aspect-ratio em CSS render-blocking => zero CLS (P3).
-------------------------------------------------------------------------- */
.ph {
position: relative;
display: block;
width: 100%;
background-color: var(--cinza-ph);
background-image: repeating-linear-gradient(
45deg, transparent 0 10px, rgba(255, 255, 255, .45) 10px 20px
);
border-radius: var(--r);
overflow: hidden;
}
.ph::after {
content: attr(data-ph);
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: .7rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: #8d968f;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--1x1 { aspect-ratio: 1 / 1; }
/* --------------------------------------------------------------------------
5. Cabeçalho + marca
-------------------------------------------------------------------------- */
/* UMA faixa só: logo e editorias na mesma linha horizontal, no verde.
Antes eram duas barras empilhadas (header branco + nav verde), o que custava
a altura de uma barra inteira acima da dobra. */
.cab {
background: var(--verde-600);
border-bottom: 3px solid var(--verde-900);
}
.cab .container {
display: flex; flex-wrap: wrap; align-items: center;
gap: .5rem 1.25rem;
padding-block: .5rem;
}
.marca { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
/* Só a logo é clicável — o wrapper .marca é um , não um
. */
.marca__link { flex: 0 0 auto; display: block; line-height: 0; }
/* ---- TROCA DE MARCA POR DOMÍNIO -------------------------------------------
A logo é background-image, NÃO ![]()
, de propósito: assim quem escolhe
o arquivo é o CSS (via data-marca no ), e não JS depois do DOM.
O script inline e síncrono no grava data-marca antes de o
existir => no 1º paint a logo certa já está escolhida. Zero flash de marca
errada e zero CLS, porque a caixa tem tamanho fixo aqui.
Header usa as -square recortadas (755x655 => 1.153). O rodapé segue na
horizontal (1200x655 => 1.832), ver .rodape__logo. Se as artes forem
reexportadas, ajustar SÓ o --logo-ratio de cada bloco.
-------------------------------------------------------------------------- */
/* Logo-only, grande: o nome vive na arte, e na -square ele ocupa ~7,3% da
altura do arquivo. Daí o tamanho: a 104px o nome sai com ~7,6px; a 152px,
com ~11px. Foi o espaço liberado por tirar a topbar e a busca que permitiu
chegar nesses valores. Alternativa, se quiser o nome ainda maior sem crescer
em altura: trocar as 7 URLs para os arquivos SEM `-square` (horizontal,
1200x655) e pôr --logo-ratio: 1.832 — lá o nome é ~8,4% da altura, porque a
fita corre larga em vez de comprimida na largura do brasão. */
.marca__logo {
--logo-h: 104px;
--logo-ratio: 1.153; /* proporção dos -square recortados (755x655) */
flex: 0 0 auto;
display: block;
height: var(--logo-h);
width: calc(var(--logo-h) * var(--logo-ratio));
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
}
html[data-marca="guiavivermelhor"] .marca__logo { background-image: url(../imgs/logos/logo_guiavivermelhor-square.webp); }
html[data-marca="guiavitalidade"] .marca__logo { background-image: url(../imgs/logos/logo_guiavitalidade-square.webp); }
html[data-marca="guiaviverbem"] .marca__logo { background-image: url(../imgs/logos/logo_guiaviverbem-square.webp); }
html[data-marca="newsvidanatural"] .marca__logo { background-image: url(../imgs/logos/logo_newsvidanatural-square.webp); }
html[data-marca="newsvidasaudavel"] .marca__logo { background-image: url(../imgs/logos/logo_newsvidasaudavel-square.webp); }
html[data-marca="noticiasaudenatural"] .marca__logo { background-image: url(../imgs/logos/logo_noticiasaudenatural-square.webp); }
html[data-marca="portalvivermelhor"] .marca__logo { background-image: url(../imgs/logos/logo_portalvivermelhor-square.webp); }
/* (O override provisório de proporção da noticiasaudenatural saiu: o arquivo
foi recortado e as 7 estão em 755x655.) */
/* O slogan saiu: com logo + editorias na mesma linha, ele só apertava a faixa.
Voltar é trocar este display por block dentro do @media de 768px. */
.marca__tag { display: none; }
/* Botão de menu agora vive sobre o verde => contorno claro em vez de cinza. */
.menu-btn {
flex: 0 0 auto; margin-left: auto;
display: inline-flex; align-items: center; gap: .45rem;
min-height: 44px; min-width: 44px; justify-content: center;
padding: .4rem .8rem; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r);
background: transparent; color: #fff;
font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.menu-btn:hover { background: rgba(255, 255, 255, .12); }
.menu-btn__barras { display: block; width: 16px; height: 2px; background: #fff; position: relative; }
.menu-btn__barras::before,
.menu-btn__barras::after {
content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #fff;
}
.menu-btn__barras::before { top: -5px; }
.menu-btn__barras::after { top: 5px; }
@media (min-width: 768px) {
.marca__logo { --logo-h: 128px; }
}
@media (min-width: 992px) {
.menu-btn { display: none; }
}
/* --------------------------------------------------------------------------
6. Editorias — agora DENTRO da faixa do header, não em barra própria.
Mobile: `flex: 0 0 100%` faz a lista cair para a linha de baixo quando o
hambúrguer abre. Desktop: ocupa o resto da linha, alinhada à direita.
-------------------------------------------------------------------------- */
.editorias { flex: 0 0 100%; }
.editorias__lista { display: none; }
.editorias__lista.aberto { display: block; }
.editorias a {
display: block; padding: .7rem .2rem;
color: #fff; font-size: .88rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.editorias a:hover { color: rgba(255, 255, 255, .75); }
.editorias a[aria-current="page"] { color: rgba(255, 255, 255, .6); }
@media (min-width: 992px) {
.editorias { flex: 1 1 auto; }
.editorias__lista, .editorias__lista.aberto {
display: flex; justify-content: flex-end; align-items: center; gap: .1rem;
}
.editorias a {
padding: .5rem .85rem; border-bottom: 0;
border-radius: var(--r); font-size: .82rem;
}
.editorias a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.editorias a[aria-current="page"] { background: var(--verde-900); color: #fff; }
}
/* --------------------------------------------------------------------------
7. Plantão (ticker)
-------------------------------------------------------------------------- */
.plantao {
background: var(--fundo-2);
border-bottom: 1px solid var(--borda);
font-size: .82rem;
}
/* align-items:stretch (não center) — a tarja vermelha ocupa a ALTURA INTEIRA
da faixa, como em ticker de portal. Com `center` sobrava fundo claro acima e
abaixo dela, e como a faixa encosta na barra verde essa sobra lia como
vazamento branco entrando no verde. Canto reto por P13. */
.plantao .container { display: flex; align-items: stretch; gap: 0; min-height: 34px; }
.plantao__selo {
flex: 0 0 auto;
display: flex; align-items: center;
background: var(--vermelho); color: #fff;
font-size: .66rem; font-weight: 800; letter-spacing: .12em;
padding: 0 .7rem; border-radius: 0; text-transform: uppercase;
}
.plantao__janela {
flex: 1 1 auto; min-width: 0; overflow: hidden;
display: flex; align-items: center; padding-left: .8rem;
}
.plantao__fita {
display: flex; gap: 2.5rem; white-space: nowrap; width: max-content;
animation: fita 38s linear infinite;
}
.plantao__fita span::before { content: "• "; color: var(--vermelho); font-weight: 700; }
.plantao:hover .plantao__fita { animation-play-state: paused; }
@keyframes fita {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.plantao__fita { animation: none; }
}
/* --------------------------------------------------------------------------
8. Publicidade fake
-------------------------------------------------------------------------- */
.ad { margin: 1.25rem 0; text-align: center; }
.ad__rot {
display: block; font-size: .62rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--tinta-50); margin-bottom: .3rem;
}
.ad__caixa {
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: .2rem;
border: 1px dashed #c3ccc7; border-radius: var(--r);
background: repeating-linear-gradient(135deg, #fafbfa 0 12px, #f2f5f3 12px 24px);
color: #97a09a; font-size: .74rem; font-weight: 600;
margin-inline: auto; width: 100%;
}
.ad__caixa b { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: #8b948e; }
.ad--lb .ad__caixa { aspect-ratio: 320 / 100; max-width: 320px; }
.ad--box .ad__caixa { aspect-ratio: 300 / 250; max-width: 300px; }
@media (min-width: 768px) {
.ad--lb .ad__caixa { aspect-ratio: 728 / 90; max-width: 728px; }
}
/* Slot com peça real: a largura é limitada pelo arquivo (960px), não esticada,
pra não subir a imagem além da resolução dela. */
.ad--peca img {
display: block; margin-inline: auto;
max-width: 100%; height: auto;
border-radius: var(--r);
}
/* --------------------------------------------------------------------------
9. Manchete principal (elemento LCP — texto no HTML inicial, P3)
-------------------------------------------------------------------------- */
.chapeu {
display: inline-block; margin-bottom: .5rem;
font-size: .7rem; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: var(--verde-600);
}
.chapeu--pub { color: var(--vermelho); }
.manchete { padding-top: 1.5rem; }
.manchete__fig { margin: 0 0 .9rem; }
.manchete__tit {
font-family: var(--fonte-tit);
font-size: clamp(1.55rem, 6vw, 2.6rem);
font-weight: 700; line-height: 1.14; letter-spacing: -.015em;
margin: 0 0 .6rem;
}
.manchete__lf {
font-size: 1.02rem; line-height: 1.55; color: var(--tinta-70);
margin-bottom: .6rem;
}
.meta { font-size: .78rem; color: var(--tinta-50); }
.meta b { color: var(--tinta-70); font-weight: 600; }
/* --------------------------------------------------------------------------
10. Cards de notícia
-------------------------------------------------------------------------- */
.cardn { display: flex; flex-direction: column; height: 100%; }
.cardn__fig { margin: 0 0 .6rem; }
/* A imagem do post é clicável e leva ao mesmo destino do título.
O é aria-hidden + tabindex=-1 no HTML: quem usa teclado ou leitor de tela
navega pelo link do título, sem ouvir/tabular o mesmo destino duas vezes. */
.fig-link { display: block; line-height: 0; }
.fig-link:hover img, .fig-link:hover .ph { opacity: .9; }
.fig-link img, .fig-link .ph { transition: opacity .15s ease; }
/* Capas de card e da manchete são recortadas em 16:9 com object-fit, para o
grid ficar uniforme mesmo com arquivos de proporções diferentes (1:1, 40:9…).
Na PÁGINA do artigo é o contrário: lá a capa usa a proporção real do arquivo. */
.cardn__fig img, .manchete__fig img {
display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
object-fit: cover; border-radius: var(--r);
}
.cardn__tit {
font-family: var(--fonte-tit);
font-size: 1.12rem; line-height: 1.25; font-weight: 700;
margin: 0 0 .4rem;
}
.cardn__lf { font-size: .88rem; color: var(--tinta-70); margin-bottom: .5rem; }
.cardn .meta { margin-top: auto; }
/* --------------------------------------------------------------------------
11. Seções
-------------------------------------------------------------------------- */
.secao { margin-top: 2rem; }
.secao__tit {
display: flex; align-items: center; gap: .6rem;
font-size: .95rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--verde-900);
margin: 0 0 1rem; padding-bottom: .5rem;
border-bottom: 2px solid var(--verde-600);
}
.secao__tit a { margin-left: auto; font-size: .72rem; color: var(--verde-600); letter-spacing: .04em; }
/* Lista "últimas" */
.ultimas li { border-bottom: 1px solid var(--borda); }
.ultimas a {
display: flex; gap: .75rem; align-items: baseline;
padding: .7rem 0; min-height: 44px;
}
.ultimas time { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--verde-600); font-variant-numeric: tabular-nums; }
.ultimas span { font-size: .95rem; line-height: 1.35; }
/* --------------------------------------------------------------------------
12. Previsão do tempo (dados via Open-Meteo — sem chave)
Sem container próprio: usa o MESMO cabeçalho das outras seções
(.secao__tit, caixa-alta + régua verde) e uma faixa densa de 1px, cantos
retos, do tipo tabela de jornal. Card arredondado com fundo tingido
destoava do ritmo da página e lia como widget colado.
-------------------------------------------------------------------------- */
.tempo__seletor {
margin-left: auto;
display: flex; align-items: center; gap: .4rem;
text-transform: none; letter-spacing: 0;
font-size: .72rem; font-weight: 600; color: var(--tinta-50);
}
.tempo__seletor select {
padding: .2rem .35rem; min-height: 44px; /* alvo de toque no mobile (P2) */
border: 1px solid var(--borda); border-radius: 0; background: #fff;
font-size: .8rem; font-weight: 400;
}
/* min-height calibrado para a altura real da faixa renderizada: reserva o
espaço antes do fetch sem sobrar buraco depois (P3). */
.tempo__corpo { min-height: 152px; border: 1px solid var(--borda); background: #fff; }
.tempo__msg { margin: 0; padding: 1.6rem 1rem; color: var(--tinta-70); font-size: .88rem; }
.tempo__agora {
display: flex; align-items: center; gap: .7rem;
padding: .7rem .85rem;
background: var(--fundo-2); border-bottom: 1px solid var(--borda);
}
.tempo__icone { flex: 0 0 auto; font-size: 2.1rem; line-height: 0; }
.tempo__temp {
flex: 0 0 auto;
font-size: 1.85rem; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.tempo__txt { min-width: 0; font-size: .78rem; line-height: 1.35; color: var(--tinta-70); }
.tempo__cidade {
display: block;
font-size: .68rem; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; color: var(--verde-700);
}
/* Divisórias de 1px entre os dias, sem borda/raio por célula. */
.tempo__dias { display: grid; grid-template-columns: repeat(4, 1fr); }
.tempo__dia { padding: .55rem .25rem .6rem; text-align: center; border-left: 1px solid var(--borda); }
.tempo__dia:first-child { border-left: 0; }
.tempo__dia b { display: block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-50); }
.tempo__dia i { display: block; font-size: 1.25rem; font-style: normal; margin: .3rem 0 .25rem; }
.tempo__dia i svg { margin: 0 auto; } /* ícone é SVG inline com display:block */
.tempo__dia em { font-style: normal; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tempo__dia em s { text-decoration: none; color: var(--tinta-50); font-weight: 400; }
.tempo__fonte { display: block; margin-top: .35rem; font-size: .66rem; color: var(--tinta-50); }
/* --------------------------------------------------------------------------
13. Sidebar / widgets
No mobile a coluna .col-lg-4 cai no fim do DOM => "posts no final da página".
-------------------------------------------------------------------------- */
.aside { padding-top: 1.5rem; }
.wid { margin-bottom: 1.75rem; }
.wid__tit {
font-family: var(--fonte-tit);
font-size: 1.4rem; font-weight: 700; color: var(--tinta);
margin: 0 0 .9rem; padding-bottom: .5rem;
border-bottom: 2px solid var(--tinta);
}
/* Mais lidas */
.pop li { border-bottom: 1px solid var(--borda); }
.pop a { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 0; }
.pop__fig {
flex: 0 0 96px; width: 96px; aspect-ratio: 4 / 3;
border: 1px solid var(--borda); border-radius: 2px; overflow: hidden;
background: var(--cinza-ph);
}
.pop__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pop__fig .ph { height: 100%; border-radius: 0; }
.pop__txt { display: block; min-width: 0; }
.pop__tit { display: block; font-size: .95rem; font-weight: 700; line-height: 1.28; margin: 0 0 .25rem; }
.pop__data { display: block; font-size: .74rem; color: var(--tinta-50); }
/* Newsletter */
.news {
background: var(--verde-900); color: #fff;
padding: 1.15rem; border-radius: var(--r);
}
.news h2 { font-family: var(--fonte-tit); font-size: 1.25rem; margin-bottom: .4rem; }
.news p { font-size: .85rem; color: rgba(255, 255, 255, .8); margin-bottom: .8rem; }
.news form { display: flex; flex-direction: column; gap: .5rem; }
.news input {
padding: .65rem .7rem; min-height: 44px;
border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r);
background: rgba(255, 255, 255, .1); color: #fff;
}
.news input::placeholder { color: rgba(255, 255, 255, .55); }
.news button {
padding: .7rem; min-height: 44px; border: 0; border-radius: var(--r);
background: var(--verde-600); color: #fff; font-weight: 700; cursor: pointer;
}
.news button:hover { background: #22945c; }
.news small { display: block; margin-top: .6rem; font-size: .7rem; color: rgba(255, 255, 255, .6); }
/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags a {
padding: .35rem .6rem; font-size: .78rem;
background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 100px;
}
.tags a:hover { background: var(--verde-100); border-color: #c2d6c9; }
/* --------------------------------------------------------------------------
13a. Página de artigo (C5 cabeçalho + C6 corpo)
Medida estreita para leitura; corpo ≥17px por P2.
-------------------------------------------------------------------------- */
.artigo { max-width: 760px; padding-top: 1.5rem; }
a.chapeu:hover { color: var(--verde-900); }
.artigo__tit {
font-family: var(--fonte-tit);
font-size: clamp(1.7rem, 6.2vw, 2.5rem);
line-height: 1.13; letter-spacing: -.018em;
margin: 0 0 .6rem;
}
.artigo__lf { font-size: 1.1rem; line-height: 1.5; color: var(--tinta-70); margin: 0 0 .7rem; }
.artigo__fig { margin: 1.2rem 0 1.6rem; }
.artigo__fig img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.artigo__fig figcaption { padding-top: .45rem; font-size: .73rem; color: var(--tinta-50); }
.artigo__corpo p { font-size: 1.0625rem; line-height: 1.75; margin: 0 0 1.15rem; }
.artigo__corpo h2 {
font-family: var(--fonte-tit);
font-size: 1.4rem; font-weight: 700; line-height: 1.25;
margin: 2rem 0 .8rem;
}
.artigo__corpo ul, .artigo__corpo ol { margin: 0 0 1.3rem; }
.artigo__corpo li { font-size: 1.0625rem; line-height: 1.7; }
.artigo__corpo ul li { position: relative; padding-left: 1.35rem; margin-bottom: .65rem; }
.artigo__corpo ul li::before {
content: ""; position: absolute; left: .2rem; top: .68rem;
width: 6px; height: 6px; border-radius: 50%; background: var(--verde-600);
}
.artigo__corpo ol { counter-reset: item; }
.artigo__corpo ol li { position: relative; padding-left: 2.2rem; margin-bottom: .9rem; counter-increment: item; }
.artigo__corpo ol li::before {
content: counter(item);
position: absolute; left: 0; top: .15rem;
display: flex; align-items: center; justify-content: center;
width: 1.5rem; height: 1.5rem; border-radius: 50%;
background: var(--verde-600); color: #fff;
font-size: .8rem; font-weight: 800;
}
.artigo__fonte {
margin: 2.2rem 0 0; padding-top: 1rem;
border-top: 1px solid var(--borda);
font-size: .78rem; color: var(--tinta-50);
}
/* "Leia também" e listagem de editoria reaproveitam .secao/.cardn da home */
.leia { max-width: 760px; margin-top: 2.5rem; }
.editoria-cab { max-width: 760px; padding-top: 1.75rem; }
.editoria-cab h1 {
font-family: var(--fonte-tit);
font-size: clamp(1.6rem, 5.5vw, 2.2rem); margin: 0 0 .4rem;
}
.editoria-cab p { font-size: 1rem; color: var(--tinta-70); margin: 0; }
/* --------------------------------------------------------------------------
13b. Páginas institucionais (texto corrido)
Medida estreita: linha longa demais é ilegível no desktop (P2).
-------------------------------------------------------------------------- */
.inst { max-width: 720px; padding-top: 1.75rem; }
.inst h1 {
font-family: var(--fonte-tit);
font-size: clamp(1.6rem, 5.5vw, 2.2rem);
line-height: 1.15; letter-spacing: -.015em;
margin: 0 0 .4rem;
}
.inst__data {
font-size: .76rem; color: var(--tinta-50);
margin: 0 0 1.6rem; padding-bottom: .7rem;
border-bottom: 2px solid var(--verde-600);
}
.inst h2 {
font-size: 1.02rem; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; color: var(--verde-900);
margin: 2rem 0 .7rem;
}
.inst h3 { font-size: 1rem; font-weight: 700; color: var(--tinta); margin: 1.4rem 0 .5rem; }
.inst p, .inst li { font-size: 1.0625rem; line-height: 1.7; color: var(--tinta-70); }
.inst strong { color: var(--tinta); font-weight: 700; }
.inst ul { margin: 0 0 1rem; }
.inst ul li { position: relative; padding-left: 1.2rem; margin-bottom: .6rem; }
.inst ul li::before {
content: "–"; position: absolute; left: 0;
color: var(--verde-600); font-weight: 700;
}
.inst a { color: var(--verde-600); text-decoration: underline; }
/* Marcador de pendência — visualmente impossível de passar batido em revisão.
REMOVER junto com o dado que ele marca. */
.pendente {
background: #fff3cd; border-bottom: 1px dashed #b8912a;
padding: 0 .2rem; font-weight: 600; color: #6b5514;
}
/* --------------------------------------------------------------------------
14. Rodapé
-------------------------------------------------------------------------- */
.rodape {
margin-top: 2.5rem; padding: 2rem 0 1.25rem;
background: var(--verde-rodape); color: rgba(255, 255, 255, .78);
font-size: .86rem;
}
.rodape__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.rodape h2 {
font-size: .74rem; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: #fff; margin-bottom: .7rem;
}
.rodape li { margin-bottom: .4rem; }
.rodape a:hover { color: #fff; text-decoration: underline; }
/* Logo do rodapé: versão HORIZONTAL (1200x655 => 1.832), sem placa clara atrás.
A placa existia quando o fundo era o --verde-900; com o #27332d, mais claro e
dessaturado, o interior creme/amarelo do brasão já contrasta sozinho. Se o
contorno verde-escuro da arte sumir no fundo, devolver a placa é uma linha:
background-color: #fbfcfb + padding + background-origin: content-box. */
.rodape__logo {
--logo-h: 105px;
--logo-ratio: 1.832;
display: block;
height: var(--logo-h);
width: calc(var(--logo-h) * var(--logo-ratio));
margin-bottom: .9rem;
background-position: left center; background-repeat: no-repeat; background-size: contain;
}
html[data-marca="guiavivermelhor"] .rodape__logo { background-image: url(../imgs/logos/logo_guiavivermelhor.webp); }
html[data-marca="guiavitalidade"] .rodape__logo { background-image: url(../imgs/logos/logo_guiavitalidade.webp); }
html[data-marca="guiaviverbem"] .rodape__logo { background-image: url(../imgs/logos/logo_guiaviverbem.webp); }
html[data-marca="newsvidanatural"] .rodape__logo { background-image: url(../imgs/logos/logo_newsvidanatural.webp); }
html[data-marca="newsvidasaudavel"] .rodape__logo { background-image: url(../imgs/logos/logo_newsvidasaudavel.webp); }
html[data-marca="noticiasaudenatural"] .rodape__logo { background-image: url(../imgs/logos/logo_noticiasaudenatural.webp); }
html[data-marca="portalvivermelhor"] .rodape__logo { background-image: url(../imgs/logos/logo_portalvivermelhor.webp); }
.rodape__aviso {
margin-top: 1.75rem; padding-top: 1.1rem;
border-top: 1px solid rgba(255, 255, 255, .16);
font-size: .76rem; color: rgba(255, 255, 255, .6);
}
.rodape__aviso p { margin-bottom: .5rem; }
@media (min-width: 768px) {
.rodape__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
}