/* Tema mobile compartilhado pelos portais irmaos (mesma estrutura de HTML).
   Carregado pelo header.asp com media="(max-width:767px)"; tudo aqui fica dentro
   da mesma media query para que o desktop nunca leia nenhuma regra.
   Cores da marca por variavel: cada header.asp pode redefinir --cor-link. */
@media (max-width:767px){

:root{--cor-link:#012D9A;--cor-foco:#ffbf00;--cor-foco-interno:#111}

/* 1) Foco visivel por teclado. style.css zera o outline em a/button/.btn:focus;
   o clique do mouse continua sem contorno pela regra :focus:not(:focus-visible) do header. */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--cor-foco)!important;outline-offset:3px!important;
box-shadow:0 0 0 3px var(--cor-foco-interno)!important}

/* Contraste AA do "Fazer login": branco sobre #2e7d32 = 5,13:1 (era 2,51:1 sobre #5bb75b) */
.login-redes .btn-success,.login-redes .btn-success:hover,.login-redes .btn-success:active{
background:#2e7d32;background-image:none;color:#fff;text-shadow:none;border-color:#1b5e20}
.login-redes .btn-success{min-height:24px}

/* 2) Tipografia */
.manchete-maior a{font-size:22px;line-height:1.3;font-weight:700}
.manchete-menor a,.mais-lidas .line a{font-size:18px;line-height:1.3;font-weight:700}
.ultimas-noticias li,.ultimas-noticias li a,.ultimas-noticias li a span,.ultimas-noticias li b{font-size:16px;line-height:1.4}
.ultimas-noticias li{padding:14px 0}
.mais-lidas .btn-small{font-size:15px;padding:10px 14px}

/* 1) Card horizontal: miniatura 110x80 a esquerda, titulo a direita */
.manchete-menor{margin-bottom:0}
.manchete-menor .span4{margin:0 0 14px}
.manchete-menor .span4>a,.mais-lidas .line>a{
display:grid;grid-template-columns:110px 1fr;column-gap:12px;align-items:start;min-height:80px}
.mais-lidas .line{margin-bottom:14px}
.span5{width:100%;max-width:none}

/* 4) Espaco reservado antes do carregamento (evita deslocamento de layout).
   nailthumb.js grava width/height/top/left inline no container e na imagem; os !important vencem. */
.manchete-menor .nailthumb-container{
width:110px!important;height:80px!important;aspect-ratio:11/8;overflow:hidden;padding:0!important;margin:0}
.manchete-menor .nailthumb-container img,.manchete-menor .nailthumb-container .nailthumb-image{
position:static!important;top:auto!important;left:auto!important;
width:110px!important;height:80px!important;max-width:none;object-fit:cover;display:block;margin:0}
.mais-lidas .line>a>img{
width:110px;height:80px;aspect-ratio:11/8;object-fit:cover;max-width:none;display:block;margin:0}
.manchete-maior img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.noticias h4,.mais-lidas h4,.ultimas-noticias li a span,.mais-lidas h4 a,.noticias h4 a,
.noticias h2,.mais-lidas h2,.mais-lidas h2 a,.noticias h2 a{color:#012D9A}
/* Data do dia dentro de li (a ul so aceita li); sem o padding dos itens */
.ultimas-noticias li.data-dia{padding:0}
/* Alvo de toque de 44px e respiro entre o link e o botao de noticias anteriores */
.noticias-anteriores{margin-bottom:16px}
.noticias-anteriores a{min-height:44px;line-height:44px}
.btn-anteriores{min-height:44px}
}