/* Tema mobile do tudotimao, mesmo desenho aprovado no cruzeiroweb, nas cores da
   marca do Corinthians (preto e branco, vermelho so na faixa do cabecalho que ja
   vem na imagem de fundo). Carregado pelo header.asp com media="(max-width:767px)";
   tudo aqui fica dentro da mesma media query para que o desktop nunca leia nada. */
@media (max-width:767px){

:root{--cor-link:#000;--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}
.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,
.titulo-secao,.titulo-mais-lidas{color:var(--cor-link)}
/* 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 no botao de noticias anteriores */
.btn-anteriores{min-height:44px}

/* 3) 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;width:100%;float: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; 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}

/* 5) Barra do menu de ponta a ponta, colada na faixa do escudo, no preto 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 vao acima
   vinha de .menu{margin-top:20px} (style.css) somado ao margin-top inline do login.
   MENU a esquerda e o botao de login a direita, na mesma linha. */
.row-fluid.menu{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:#000;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 MENU e login para o meio da barra. */
.row-fluid.menu:before,.row-fluid.menu:after{display:none}
.row-fluid.menu>.span9{margin:0;padding:0;width:auto;min-width:0;flex:0 1 auto}
.row-fluid.menu>.login-redes{margin:0!important;padding:0;width:auto;flex:0 0 auto;display:flex;align-items:center}
.row-fluid.menu .login{overflow:visible;float:none;margin-right:0}
nav.menu{margin:0;width:auto;overflow:visible;font-size:16px}
/* Rotulo do menu: sem a caixa cinza de responsive-menu.css, so o sinal de tres tracos
   em branco (21:1 sobre o preto). O nome MENU continua no HTML, apenas nao e desenhado,
   entao o leitor de tela ainda o anuncia. Area de toque de 44x44. */
nav.menu label{display:inline-flex;align-items:center;justify-content:center;
min-height:44px;min-width:44px;padding:0 4px;
background:none;background-image:none;border:0;box-shadow:none;border-radius:0;
color:#fff;text-shadow:none;font-size:0;position:relative}
nav.menu input[type=checkbox]:checked~label,nav.menu input[type=checkbox]~label:hover{color:#fff}
nav.menu label:before{position:static;transform:none;font-size:34px;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}
/* Botao de login dentro da barra preta: fundo da marca, borda branca fina e texto
   branco (21:1). O verde do .btn-success e o vermelho do .btn-danger nao sao cores
   deste clube e saem aqui. */
.login-redes .btn,.login-redes .btn-success,.login-redes .btn-success:hover,
.login-redes .btn-success:active,.login-redes .btn-success:focus{
background:#000;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;margin:0!important;min-height:44px;box-shadow:none;
display:inline-flex;align-items:center;line-height:1}
}