/* Tema mobile do verdaoweb, mesmo desenho aprovado no cruzeiroweb, na cor da marca
   do Palmeiras (#427f42, o verde que style.css ja usa nos titulos de "mais lidas").
   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. */
@media (max-width:767px){

:root{--cor-link:#427f42;--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}

/* 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}

/* 3) Card horizontal: miniatura 110x80 a esquerda, titulo a direita */
.manchete-menor{margin-bottom:0}
.manchete-menor .span4{margin:0 0 14px}
/* O titulo saiu de dentro do <a> e virou <h3> irmao dele, entao quem vira grade agora e o
   pai: a miniatura fica na primeira coluna e o titulo na segunda, com o mesmo desenho. */
.manchete-menor .span4,.mais-lidas .line{
display:grid;grid-template-columns:110px 1fr;column-gap:12px;align-items:start;min-height:80px}
.manchete-menor .span4>a,.mais-lidas .line>a{display:block;margin:0}
.manchete-menor h3,.mais-lidas .line h3{margin:0}
.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, e o gerador
   ainda escreve height:143px no atributo style do container; 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,
.noticias .titulo-secao,.mais-lidas .titulo-mais-lidas{color:var(--cor-link)}
/* Data do dia dentro de li (a ul so aceita li); sem o padding dos itens.
   No verdaoweb o gerador escreve li.dia-lista, nao li.data-dia (escrevenews.asp:79). */
.ultimas-noticias li.dia-lista{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}

/* 5) Container de anuncio sem criativo nao reserva altura. */
.span5>.banner300x250:not(:has(*)){margin:0;padding:0;height:0;min-height:0;overflow:hidden}

/* 6) Barra do menu de ponta a ponta, colada no cabecalho, no verde da marca.
   O recuo lateral vinha do padding do .container que a envolve; as margens negativas em
   calc(50% - 50vw) anulam esse padding sem depender do valor dele.
   O sinal de tres tracos a esquerda e o botao de login a direita, na mesma linha. */
.row-fluid.menu{order:2;position:relative;box-sizing:border-box;width:auto;
margin:0!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
padding:0 12px;background:#427f42;min-height:48px;
display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:visible}
/* O clearfix do bootstrap (.row-fluid:before/:after com display:table) conta como item do
   flex e empurrava o menu e o login para o meio da barra. */
.row-fluid.menu:before,.row-fluid.menu:after{display:none}
.row-fluid.menu>.span9{margin:0;width:auto;min-width:0;flex:0 1 auto}
.row-fluid.menu>.login-redes{margin:0!important;width:auto;flex:0 0 auto;display:flex;align-items:center}
/* O botao de login do verdaoweb traz margin-top:15px no atributo style; na barra em flex
   essa margem o joga para baixo da linha. */
.row-fluid.menu .login-redes .login,.row-fluid.menu .login-redes #foto,
.row-fluid.menu .login-redes #foto>div{margin:0;display:flex;align-items:center}
.row-fluid.menu .login-redes .btn{margin-top:0!important}
nav.menu{margin:0;width:auto;overflow:visible;font-size:16px}
/* Rotulo do menu: sem a caixa cinza, texto e sinal de tres tracos em branco. */
nav.menu label{display:inline-flex;align-items:center;min-height:44px;padding:0 6px 0 32px;
background:none;background-image:none;border:0;box-shadow:none;border-radius:0;
color:#fff;text-shadow:none;font-size:16px;position:relative}
nav.menu input[type=checkbox]:checked~label,nav.menu input[type=checkbox]~label:hover{color:#fff}
nav.menu label:before{left:0;top:50%;transform:translateY(-50%);font-size:26px;line-height:1;color:#fff}
/* A lista aberta sai do fluxo para a barra nao mudar de altura; largura igual a da barra. */
nav.menu>ul{position:absolute!important;top:100%;left:0;right:0;margin:0!important;padding:0;z-index:1000;border-radius:0}
nav.menu>ul:after{content:none}
nav.menu>ul>li>a{color:#fff;font-size:17px;padding:14px 16px;min-height:44px;box-sizing:border-box}
/* Rotulo "Menu" oculto (decisao do dono): fica o sinal de tres tracos, maior. O nome
   continua no HTML, so nao e desenhado, entao o leitor de tela ainda o anuncia. */
nav.menu label{padding:0 4px;font-size:0;min-width:44px;justify-content:center}
nav.menu label:before{position:static;transform:none;font-size:34px}
.menu input[type=checkbox]:focus-visible~label{outline:3px solid var(--cor-foco);outline-offset:2px}
/* Botao de login na barra verde: fundo da propria barra com borda clara e texto branco
   (o verde claro #5bb75b do bootstrap 2 dava 2,51:1 com texto branco). */
.login-redes .btn,.login-redes .btn-success,.login-redes .btn-success:hover,
.login-redes .btn-success:active,.login-redes .btn-success:focus{
background:#427f42;background-image:none;color:#fff;text-shadow:none;
border:1px solid rgba(255,255,255,.45);font-weight:700;border-radius:4px;padding:0 14px;box-shadow:none;
min-height:44px;display:inline-flex;align-items:center;line-height:1}
}

/* Compartilhar no celular: botoes 44x44 so com icone, rotulo escondido de forma
   acessivel (clip), pedido do dono em 17/09/2026. O @media 480px antigo que
   dava flex:1 1 45% ao .csb-btn saiu do <style> de inc-social-box.asp para nao
   brigar com esta regra. */
@media (max-width:767px){
.csb-compartilhe{flex-wrap:nowrap;justify-content:center;gap:8px}
.csb-btn{flex:0 0 44px;width:44px;height:44px;padding:0;justify-content:center;border-radius:8px;box-sizing:border-box}
.csb-btn span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}