/* Tema mobile do torcidaflamengo, mesmo desenho aprovado no cruzeiroweb, nas cores da
   marca (vermelho #cc0000, que o style.css ja usa nos titulos de secao).
   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.

   O que NAO entrou, e por que (medido no fonte deste portal em 17/09/2026):

   - Barra do menu de ponta a ponta com so o sinal de tres tracos: JA EXISTE aqui, por
     outro caminho. header.asp:740-765 poe .menu em position:fixed no topo, largura toda,
     esconde os itens de texto (.menu > li{display:none}) e deixa so .menu li.iconMenu,
     que e o botao com /img/menu.png. O body reserva o espaco com padding-top:44px. As
     regras da barra do cruzeiroweb disputariam essa barra e a quebrariam.
   - Imagem de fundo reduzida para o celular: nao tem efeito aqui. A barra fixa cobre o
     topo e o #container_master sobe 50px (header.asp:741-742), entao a arte do body nao
     aparece no celular.
   - Contraste do botao "Fazer login": ja corrigido no proprio header (o botao traz
     background:#1e7e34 no atributo style, e nao o #5bb75b do bootstrap 2). */
@media (max-width:767px){

:root{--cor-link:#cc0000;--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,.manchete-menor a h3,.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.
   Aqui o titulo da manchete menor vem dentro de um <h2> (o gerador deste portal escreve
   <h2> onde o cruzeiroweb escreve texto solto), entao o <h2> e que e o segundo item do
   grid, e precisa perder a margem que o bootstrap da a ele. */
.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}
.manchete-menor .span4>a>h3{margin:0;font-size:18px;line-height:1.3;font-weight:700}
.mais-lidas .line{margin-bottom:14px}
/* A coluna da direita deste portal e .span4.col-direita (inc-coluna-direita.asp:2), nao
   .span5 como no cruzeiroweb; .span5{max-width:336px} do style.css:11 fica cancelado
   para o caso de a classe aparecer em outra tela. */
.col-direita,.span5{width:100%;max-width:none}

/* 4) Espaco reservado antes do carregamento (evita deslocamento de layout).
   Este portal NAO usa nailthumb na manchete menor: o gerador escreve so
   .polegarsquare.img-rounded com height:143px no atributo style (medido em
   inc-manchete-menor.asp), e o !important vence o atributo. */
.manchete-menor .polegarsquare{
width:110px!important;height:80px!important;aspect-ratio:11/8;overflow:hidden;padding:0!important;margin:0}
.manchete-menor .polegarsquare img{
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. Aqui o gerador
   escreve li.dia-lista, nao li.data-dia como no cruzeiroweb (escrevenews.asp:86,182). */
.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}

/* A regra do cruzeiroweb que encolhe container de anuncio sem criativo NAO entrou: aqui
   os containers trazem a classe .mob-ad-reserve, e style.css:367 reserva um quadrado
   neles de proposito, para o anuncio nao deslocar o conteudo ao chegar. Encolher seria
   desfazer uma correcao que este portal ja tem. */
}

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