: o ritmo da coluna vale também dentro dela. */
.rodape__col ul{display:flex;flex-direction:column;gap:.6rem}
/* A coluna de inscrição não cabe em um terço da faixa — ocupa a linha inteira. */
.rodape__titulo{
font-family:var(--fonte-condensada);
font-weight:600;
font-size:.8125rem;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--azul-gelo);
margin-bottom:.25rem;
}
.rodape__link{
font-size:.9375rem;
color:var(--sobre-escuro);
text-decoration:none;
transition:color var(--transicao);
}
.rodape__link:hover{color:var(--azul-gelo);text-decoration:underline;text-underline-offset:.2em}
.rodape__legal{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:1rem;
width:100%;
max-width:var(--container);
margin:clamp(2.5rem,5vw,3.5rem) auto 0;
padding:1.5rem clamp(1.25rem,4vw,2rem) 0;
border-top:1px solid var(--borda-escura);
font-size:.8125rem;
color:rgba(255,255,255,.78);
}
/* Quando a linha legal vem dentro de .rodape__interno (grade de 2 colunas)
ela precisa atravessar a grade inteira, sem repetir container e recuos. */
.rodape__interno > .rodape__legal{
grid-column:1 / -1;
max-width:none;
margin-inline:0;
padding-inline:0;
}
.rodape__legal a{color:rgba(255,255,255,.78);text-decoration:none}
.rodape__legal a:hover{color:var(--azul-gelo);text-decoration:underline}
/* A tagline "Tradição que evolui " é parte da marca. */
.rodape__tagline{
font-family:var(--fonte-condensada);
font-weight:600;
font-size:1rem;
letter-spacing:.08em;
color:var(--azul-gelo);
white-space:nowrap;
}
/* =====================================================================
16. UTILITÁRIOS E ALERTAS
===================================================================== */
.texto-mudo{color:var(--texto-mudo)}
.oculto{display:none !important} /* preferir o atributo hidden */
.sr-apenas{
position:absolute !important;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
.selo{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.15rem .6rem;
font-family:var(--fonte-condensada);
font-weight:600;
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--texto-mudo);
background:var(--cinza-claro);
border:1px solid var(--borda);
border-radius:var(--raio-sm);
white-space:nowrap;
}
.selo--destaque{
color:var(--azul-profundo);
background:var(--azul-gelo);
border-color:var(--azul-gelo);
}
.selo--rascunho{
color:var(--texto-mudo);
background:transparent;
border-style:dashed;
border-color:var(--cinza-medio);
}
.alerta{
display:flex;
align-items:flex-start;
gap:.75rem;
padding:.95rem 1.15rem;
font-size:.9375rem;
line-height:1.6;
background:var(--cinza-claro);
border:1px solid var(--borda);
border-left:3px solid var(--cinza-medio);
border-radius:var(--raio-sm);
color:var(--texto);
}
.alerta svg{width:20px;height:20px;margin-top:.15rem}
.alerta--sucesso{
background:var(--azul-tenue-forte);
border-color:var(--borda-forte);
border-left-color:var(--azul-royal);
color:var(--azul-profundo);
}
.alerta--info{
background:var(--cinza-claro);
border-left-color:var(--azul-ceu);
color:var(--texto);
}
/* Erro no site público permanece na paleta institucional; a severidade é
comunicada pelo texto e por aria-live, nunca apenas pela cor. */
.alerta--erro{
background:var(--tinta-suave);
border-color:var(--borda);
border-left-color:var(--grafite);
color:var(--grafite);
font-weight:500;
}
/* No admin, o vermelho de ação reforça o alerta. */
.admin .alerta--erro,
.login .alerta--erro{
border-left-color:var(--acao-destrutiva);
color:var(--acao-destrutiva);
}
/* Carregamento — brilho suave, desligado em prefers-reduced-motion. */
.esqueleto{
position:relative;
overflow:hidden;
min-height:1rem;
background:var(--cinza-claro);
border-radius:var(--raio-sm);
color:transparent !important;
user-select:none;
}
.esqueleto::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
transform:translateX(-100%);
animation:esqueleto-brilho 1.5s ease-in-out infinite;
}
.esqueleto--titulo{height:1.8rem}
.esqueleto--linha{height:.85rem}
.esqueleto--linha + .esqueleto--linha{margin-top:.65rem}
.esqueleto--curta{width:60%}
.esqueleto--card{height:210px;border-radius:var(--raio)}
@keyframes esqueleto-brilho{to{transform:translateX(100%)}}
/* Barra de proporção sem style inline: a largura vem de uma classe. */
.barra{
height:6px;
width:100%;
background:var(--cinza-claro);
border-radius:999px;
overflow:hidden;
}
.barra__nivel{
display:block;
height:100%;
width:0;
background:var(--azul-royal);
border-radius:999px;
transition:width var(--transicao);
}
.barra__nivel--p0{width:0}
.barra__nivel--p5{width:5%}
.barra__nivel--p10{width:10%}
.barra__nivel--p15{width:15%}
.barra__nivel--p20{width:20%}
.barra__nivel--p25{width:25%}
.barra__nivel--p30{width:30%}
.barra__nivel--p35{width:35%}
.barra__nivel--p40{width:40%}
.barra__nivel--p45{width:45%}
.barra__nivel--p50{width:50%}
.barra__nivel--p55{width:55%}
.barra__nivel--p60{width:60%}
.barra__nivel--p65{width:65%}
.barra__nivel--p70{width:70%}
.barra__nivel--p75{width:75%}
.barra__nivel--p80{width:80%}
.barra__nivel--p85{width:85%}
.barra__nivel--p90{width:90%}
.barra__nivel--p95{width:95%}
.barra__nivel--p100{width:100%}
/* =====================================================================
17. ADMIN
===================================================================== */
.admin{
display:flex;
flex-direction:column;
min-height:100vh;
background:var(--cinza-claro);
}
.admin__barra{
position:sticky;
top:0;
z-index:40;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding:.75rem clamp(1rem,3vw,2rem);
background:var(--azul-profundo);
color:var(--branco);
}
/* Funciona com ou sem .container interno. */
.admin__barra .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding-inline:0;
}
/* 38px de altura ≈ 94px de largura — respeita o mínimo do manual. */
.admin__logo{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--branco)}
.admin__logo img{height:44px;width:auto}
.admin__logo span{
font-family:var(--fonte-condensada);
font-weight:600;
font-size:.8125rem;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--azul-gelo);
}
.admin__sair{
display:inline-flex;
align-items:center;
gap:.45rem;
min-height:40px;
padding:.4rem 1rem;
font-size:.9375rem;
font-weight:600;
color:var(--branco);
text-decoration:none;
background:transparent;
border:1px solid var(--borda-escura);
border-radius:var(--raio-sm);
transition:background-color var(--transicao),border-color var(--transicao),color var(--transicao);
}
.admin__sair:hover{background:rgba(255,255,255,.12);border-color:var(--azul-gelo);color:var(--branco)}
.admin__conteudo{
flex:1 1 auto;
width:100%;
max-width:var(--container);
margin-inline:auto;
padding:clamp(1.75rem,4vw,2.75rem) clamp(1rem,3vw,2rem) 4rem;
}
.admin__abas{
display:flex;
gap:.25rem;
margin-bottom:clamp(1.5rem,3vw,2rem);
border-bottom:1px solid var(--borda);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.admin__aba{
min-height:44px;
padding:.7rem 1.1rem;
font-size:.9375rem;
font-weight:600;
color:var(--texto-mudo);
white-space:nowrap;
background:none;
border:0;
border-bottom:2px solid transparent;
transition:color var(--transicao),border-color var(--transicao);
}
.admin__aba:hover{color:var(--azul-royal)}
.admin__aba--ativa{color:var(--azul-profundo);border-bottom-color:var(--azul-royal)}
.admin__painel{
padding:clamp(1.25rem,3vw,2rem);
background:var(--branco);
border:1px solid var(--borda);
border-radius:var(--raio);
box-shadow:var(--sombra-sutil);
}
.admin__painel + .admin__painel{margin-top:1.5rem}
/* Acesso restrito ------------------------------------------------- */
.login{
display:grid;
place-items:center;
min-height:100vh;
padding:2rem 1rem;
background:linear-gradient(180deg,
var(--branco) 0%,
var(--cinza-claro) 60%,
rgba(179,217,255,.22) 100%);
}
.login__caixa{
width:100%;
max-width:420px;
padding:clamp(1.75rem,4vw,2.5rem);
background:var(--branco);
border:1px solid var(--borda);
border-radius:var(--raio-lg);
box-shadow:var(--sombra-media);
}
.login__caixa img{height:40px;width:auto;margin-bottom:1.5rem}
.login__caixa h1{font-size:1.5rem;margin-bottom:.35rem}
.login__caixa .btn{margin-top:1.5rem}
/* Tabelas ---------------------------------------------------------- */
/* O envoltório rola horizontalmente em telas estreitas — a página, nunca.
Aceita qualquer um dos nomes abaixo, conforme a marcação do painel. */
.tabela-rolagem,
.tabela-rolar,
.tabela__rolagem,
.tabela-wrap,
.admin__tabela{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border:1px solid var(--borda);
border-radius:var(--raio);
}
.tabela-rolagem .tabela,
.tabela-rolar .tabela,
.tabela__rolagem .tabela,
.tabela-wrap .tabela,
.admin__tabela .tabela{min-width:680px}
.tabela{width:100%;font-size:.9375rem;background:var(--branco)}
.tabela caption{
padding:.75rem 1rem;
text-align:left;
font-size:.875rem;
color:var(--texto-mudo);
}
.tabela th{
padding:.75rem 1rem;
text-align:left;
font-family:var(--fonte-condensada);
font-weight:600;
font-size:.8125rem;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--azul-profundo);
background:var(--cinza-claro);
border-bottom:1px solid var(--borda);
white-space:nowrap;
}
.tabela td{
padding:.8rem 1rem;
vertical-align:middle;
border-bottom:1px solid var(--borda);
color:var(--texto);
}
.tabela tbody tr{transition:background-color var(--transicao)}
.tabela tbody tr:hover{background:var(--azul-tenue)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela td.numero,
.tabela th.numero{text-align:right;font-variant-numeric:tabular-nums}
.tabela__titulo{
display:block;
font-weight:600;
color:var(--azul-profundo);
line-height:1.35;
}
.tabela__slug{
display:block;
margin-top:.15rem;
font-size:.8125rem;
color:var(--texto-mudo);
word-break:break-all;
}
/* A classe costuma ficar no próprio : como o display deixa de ser
table-cell, o `vertical-align:middle` da linha não vale mais e o
alinhamento vertical precisa vir do flex. */
.tabela__acoes{
display:flex;
flex-wrap:wrap;
align-items:center;
align-content:center;
gap:.4rem;
justify-content:flex-start;
}
/* Janela modal ------------------------------------------------------ */
.modal{
position:fixed;
inset:0;
z-index:80;
display:flex;
align-items:center;
justify-content:center;
padding:clamp(1rem,4vw,2rem);
}
.modal__fundo{
position:absolute;
inset:0;
background:rgba(26,26,46,.55);
border:0;
}
.modal__caixa{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
width:100%;
max-width:720px;
max-height:90vh;
background:var(--branco);
border-radius:var(--raio-lg);
box-shadow:var(--sombra-media);
overflow:hidden;
}
.modal__cabecalho{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding:1.25rem clamp(1.25rem,3vw,1.75rem);
border-bottom:1px solid var(--borda);
}
.modal__cabecalho h2,
.modal__cabecalho h3{font-size:1.25rem;font-weight:600}
.modal__corpo{
flex:1 1 auto;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:clamp(1.25rem,3vw,1.75rem);
}
.modal__rodape{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
gap:.6rem;
padding:1.1rem clamp(1.25rem,3vw,1.75rem);
background:var(--cinza-claro);
border-top:1px solid var(--borda);
}
/* Envio de PDF ------------------------------------------------------ */
.zona-upload{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.6rem;
padding:clamp(1.75rem,4vw,2.5rem) 1.25rem;
text-align:center;
color:var(--texto-mudo);
background:var(--cinza-claro);
border:2px dashed var(--borda);
border-radius:var(--raio);
cursor:pointer;
transition:border-color var(--transicao),background-color var(--transicao),color var(--transicao);
}
.zona-upload:hover{border-color:var(--azul-ceu)}
.zona-upload svg{width:32px;height:32px;color:var(--cinza-medio)}
.zona-upload strong{color:var(--azul-profundo);font-weight:600}
.zona-upload small{font-size:.8125rem}
.zona-upload--ativa{
border-color:var(--azul-royal);
background:var(--azul-tenue-forte);
color:var(--azul-profundo);
}
.zona-upload--ativa svg{color:var(--azul-royal)}
/* Métricas ---------------------------------------------------------- */
.metricas{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:clamp(1rem,2vw,1.5rem);
margin-bottom:clamp(1.5rem,3vw,2rem);
}
.metrica{
display:flex;
flex-direction:column;
gap:.35rem;
padding:1.35rem 1.5rem;
background:var(--branco);
border:1px solid var(--borda);
border-radius:var(--raio);
}
.metrica__numero{
font-family:var(--fonte-condensada);
font-weight:700;
font-size:clamp(2rem,3.4vw,2.6rem);
line-height:1;
color:var(--azul-profundo);
font-variant-numeric:tabular-nums;
}
.metrica__rotulo{
font-family:var(--fonte-condensada);
font-weight:600;
font-size:.8125rem;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--texto-mudo);
}
/* Estrutura interna dos painéis ------------------------------------ */
.pagina-admin{background:var(--cinza-claro)}
/* Trava a rolagem de fundo enquanto uma janela modal está aberta. */
.com-modal{overflow:hidden}
.admin__marca{display:flex;align-items:center;gap:.85rem;min-width:0}
/* O nome do painel é um : precisa perder o porte de título de página. */
.admin__nome{
margin:0;
font-family:var(--fonte-condensada);
font-weight:600;
font-size:1rem;
line-height:1.2;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--azul-gelo);
white-space:nowrap;
}
.admin__conta{display:flex;align-items:center;gap:1rem;min-width:0}
.admin__sessao{
margin:0;
font-size:.875rem;
color:var(--sobre-escuro);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.admin__sessao span{font-weight:600;color:var(--branco)}
.admin__abas-lista{display:flex;gap:.25rem;min-width:max-content}
.admin__titulo{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}
.admin__subtitulo{font-size:1.0625rem;font-weight:600}
.admin__acoes-rapidas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
/* Barra de ferramentas da listagem: busca elástica + filtros alinhados. */
.admin__ferramentas{
align-items:flex-end;
gap:.75rem;
margin:0 0 1rem;
}
.admin__ferramentas .busca{flex:1 1 260px;max-width:none}
.admin__ferramentas .busca__input{min-height:42px;box-shadow:none}
.admin__ferramentas .campo + .campo{margin-top:0}
.admin__ferramentas .btn{min-height:42px}
.admin__contagem{margin:0 0 .9rem;font-size:.875rem}
/* Sub-bloco de painel: separado por filete dentro do painel, em caixa
dentro de janelas modais. */
.admin__bloco{display:flex;flex-direction:column;gap:.7rem}
.admin__painel > .admin__bloco{
margin-top:2.25rem;
padding-top:1.75rem;
border-top:1px solid var(--borda);
}
.modal__corpo .admin__bloco{
margin-top:1.25rem;
padding:1.15rem;
background:var(--cinza-claro);
border:1px solid var(--borda);
border-radius:var(--raio);
}
.modal__corpo .admin__bloco .progresso{max-width:none}
.admin__bloco .btn{align-self:flex-start}
/* Tela de acesso restrito ------------------------------------------ */
.login__logo{height:40px;width:auto;margin-bottom:1.5rem}
.login__titulo{font-size:1.5rem;font-weight:700;margin-bottom:.35rem}
.login__texto{margin-bottom:1.75rem;font-size:.9375rem}
.login__form{display:flex;flex-direction:column}
.login__rodape{margin-top:1.5rem;text-align:center;font-size:.875rem}
.login__voltar{color:var(--azul-royal)}
/* Janela modal — títulos, fechamento e variação estreita ------------ */
.modal__titulo{font-size:1.25rem;font-weight:600;margin:0}
.modal__fechar{flex:0 0 auto}
.modal__caixa--estreita{max-width:480px}
/* Envio de PDF — arquivo escolhido ---------------------------------- */
.zona-upload .campo__controle{max-width:420px}
.zona-upload__selecionado{
font-size:.875rem;
font-weight:600;
color:var(--azul-profundo);
}
/* =====================================================================
18. RESPONSIVO
===================================================================== */
/* Três colunas passam a duas; duas colunas continuam duas. */
@media (max-width:1024px){
.grade--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.rodape__interno{grid-template-columns:1fr}
}
/* Menu principal colapsa em hambúrguer. */
@media (max-width:900px){
.cabecalho__interno{flex-wrap:wrap;padding-block:.5rem}
/* O colapso depende do script: sem ele o botão não abriria nada e a
navegação ficaria inacessível no celular. */
html.com-js .cabecalho__menu-btn{display:inline-flex}
html.com-js .cabecalho__nav,
html.com-js .cabecalho__acoes{display:none}
/* Sem JavaScript: menu sempre visível, empilhado. */
html:not(.com-js) .cabecalho__nav,
html:not(.com-js) .cabecalho__acoes{
display:flex;
flex-direction:column;
align-items:stretch;
flex-basis:100%;
gap:.2rem;
}
html:not(.com-js) .cabecalho__nav{padding:.75rem 0 .5rem;border-top:1px solid var(--borda)}
html:not(.com-js) .cabecalho__acoes{padding:.25rem 0 1rem}
html:not(.com-js) .cabecalho__acoes .btn{width:100%}
/* Dois ganchos de abertura: o atributo no cabeçalho (contrato) e o estado
que o script aplica diretamente à navegação. */
.cabecalho[data-aberto="true"] .cabecalho__nav,
.cabecalho[data-aberto="true"] .cabecalho__acoes,
.cabecalho__nav--aberta,
.cabecalho__nav[data-aberto]{
display:flex;
flex-direction:column;
align-items:stretch;
flex-basis:100%;
gap:.2rem;
max-height:calc(100vh - var(--altura-cabecalho) - 1rem);
overflow-y:auto;
}
.cabecalho[data-aberto="true"] .cabecalho__nav,
.cabecalho__nav--aberta,
.cabecalho__nav[data-aberto]{
padding:.75rem 0 .5rem;
border-top:1px solid var(--borda);
}
/* As ações acompanham a navegação aberta mesmo estando fora dela. */
.cabecalho:has(.cabecalho__nav--aberta) .cabecalho__acoes,
.cabecalho:has(.cabecalho__nav[data-aberto]) .cabecalho__acoes{
display:flex;
flex-basis:100%;
padding:.25rem 0 1rem;
}
.cabecalho[data-aberto="true"] .cabecalho__acoes{padding:.25rem 0 1rem}
.cabecalho[data-aberto="true"] .cabecalho__link,
.cabecalho__nav--aberta .cabecalho__link,
.cabecalho__nav[data-aberto] .cabecalho__link{
justify-content:flex-start;
padding:.7rem .75rem;
}
.cabecalho[data-aberto="true"] .cabecalho__link--ativo::after,
.cabecalho__nav--aberta .cabecalho__link--ativo::after,
.cabecalho__nav[data-aberto] .cabecalho__link--ativo::after{left:.75rem;right:auto;width:24px}
.cabecalho[data-aberto="true"] .cabecalho__acoes .btn,
.cabecalho:has(.cabecalho__nav--aberta) .cabecalho__acoes .btn,
.cabecalho:has(.cabecalho__nav[data-aberto]) .cabecalho__acoes .btn{width:100%}
/* Sem suporte a :has(), a chamada permanece visível em linha própria
para nunca ficar inacessível no celular. */
@supports not selector(:has(*)){
.cabecalho__acoes{
display:flex;
flex-basis:100%;
justify-content:flex-start;
padding:0 0 .75rem;
}
}
.cabecalho__submenu{width:100%}
.cabecalho__submenu > summary{width:100%;justify-content:space-between}
.cabecalho[data-aberto="true"] .cabecalho__submenu-lista,
.cabecalho__nav--aberta .cabecalho__submenu-lista,
.cabecalho__nav[data-aberto] .cabecalho__submenu-lista{
position:static;
min-width:0;
padding:.15rem 0 .35rem .75rem;
margin:.1rem 0 .35rem .55rem;
border:0;
border-left:2px solid var(--borda);
border-radius:0;
box-shadow:none;
}
}
@media (max-width:768px){
.newsletter{grid-template-columns:1fr}
.rodape__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
:root{--espaco-secao:clamp(3rem,9vw,4.5rem)}
/* Contrato §9: uma coluna abaixo de 640px, duas até 1024px. */
.grade--2,
.grade--3{grid-template-columns:1fr}
.cabecalho__marca img{height:38px} /* ≈94px de largura, acima do mínimo */
.hero__stats{gap:1.5rem 2rem}
.publicacao__meta{font-size:.8125rem}
.publicacao__download{flex-direction:column;align-items:flex-start}
.publicacao__download .btn{width:100%}
.rodape__cols{grid-template-columns:1fr}
.rodape__legal{justify-content:flex-start}
.modal{padding:0;align-items:flex-end}
.modal__caixa{max-width:none;max-height:94vh;border-radius:var(--raio-lg) var(--raio-lg) 0 0}
.tabela th,.tabela td{padding:.65rem .75rem}
.tabela__acoes{justify-content:flex-start}
}
/* =====================================================================
19. ACESSIBILIDADE E IMPRESSÃO
===================================================================== */
/* Foco sempre visível, em todo elemento focável. */
:focus-visible{
outline:3px solid var(--azul-royal);
outline-offset:2px;
border-radius:var(--raio-sm);
}
/* Sobre fundo institucional escuro o contorno muda para azul-gelo. */
.secao--escura :focus-visible,
.hero--escuro :focus-visible,
.rodape :focus-visible,
.admin__barra :focus-visible{outline-color:var(--azul-gelo)}
/* Ir para o conteúdo — visível apenas ao receber foco. */
.pular-conteudo,
.pular,
.pular-link,
.skip-link{
position:absolute;
top:.5rem;
left:1rem;
z-index:100;
padding:.75rem 1.1rem;
font-weight:600;
color:var(--branco);
text-decoration:none;
background:var(--azul-profundo);
border-radius:var(--raio-sm);
box-shadow:var(--sombra-media);
transform:translateY(-200%);
transition:transform var(--transicao);
}
/* A marcação pode combinar .sr-apenas com a classe do salto; ao receber
foco o link precisa desfazer o recorte de leitor de tela. */
.pular-conteudo:focus,
.pular:focus,
.pular-link:focus,
.skip-link:focus{
position:absolute !important;
width:auto;
height:auto;
margin:0;
overflow:visible;
clip:auto;
clip-path:none;
white-space:nowrap;
transform:translateY(0);
}
/* Elemento visualmente oculto que reaparece ao receber foco. */
.sr-apenas--focavel:focus,
.sr-apenas--focavel:focus-visible{
position:static !important;
width:auto;height:auto;
margin:0;overflow:visible;
clip:auto;clip-path:none;
white-space:normal;
}
/* Movimento reduzido: nenhuma transição, nenhuma animação. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.card:hover,.card:focus-within,
.area:hover,.area:focus-within{transform:none}
.esqueleto::after{display:none}
}
/* Mais contraste quando o sistema pede. */
@media (prefers-contrast:more){
:root{
--borda:rgba(26,26,46,.45);
--borda-forte:rgba(0,43,143,.55);
--texto-mudo:var(--grafite);
}
}
/* Impressão: a publicação é o documento. Sem navegação, sem chamadas. */
@media print{
.cabecalho,
.rodape,
.newsletter,
.busca,
.filtros,
.hero__acoes,
.card__acoes,
.publicacao__download,
.publicacao__relacionadas,
.admin__barra,
.admin__abas,
.modal,
.zona-upload,
.cabecalho__submenu-lista,
.pular-conteudo,
.pular,
.pular-link,
.skip-link,
.btn{display:none !important}
html,body{background:var(--branco) !important;color:var(--preto) !important}
body{font-size:11.5pt;line-height:1.5}
.secao,.publicacao,.hero{padding:0 !important;background:none !important;border:0 !important}
.hero::before{display:none}
.container,.container--leitura{max-width:none;padding:0}
h1,h2,h3,h4,
.publicacao__titulo,
.card__titulo,
.area__titulo{color:var(--preto) !important;break-after:avoid;page-break-after:avoid}
.publicacao__trilha:has(+ .publicacao),
.publicacao__cabecalho,
.publicacao__resumo,
.publicacao__corpo{max-width:none}
.publicacao__resumo{border-left-color:var(--cinza-medio);color:var(--preto)}
.publicacao__corpo blockquote{border-left-color:var(--cinza-medio);color:var(--preto)}
a{color:var(--preto) !important;text-decoration:none}
.publicacao__corpo a::after{content:" (" attr(href) ")";font-size:.85em;color:var(--texto-mudo)}
.card,.area,.alerta,.vazio,.metrica,.admin__painel{
border-color:var(--cinza-medio) !important;
box-shadow:none !important;
break-inside:avoid;
page-break-inside:avoid;
}
p,li,blockquote{orphans:3;widows:3}
}
|