/*RESET*/

*{margin:0; padding:0; box-sizing:border-box;}

body{font:14px "Segoe UI", "Trebuchet MS", Arial, Helvetica, sans-serif; color:#1A2B42; background:linear-gradient(180deg,#EAF0F7 0%,#F5F7FA 320px,#F5F7FA 100%);}

/* v3 — achado ao testar o bloco de vídeo em tela estreita: #box (o
   invólucro de TODA a página) tinha largura fixa em pixel, então em
   qualquer tela mais estreita que 1200px o site inteiro ficava largo
   demais e virava rolagem horizontal por baixo dos panos — mesmo com
   o #layout_principal internamente "respondendo" à tela estreita, ele
   continuava sendo 94% de um #box que nunca encolhia. Provavelmente a
   raiz de vários dos "espaços em branco"/cortes estranhos que o
   Leonardo reportou em tela estreita. min() deixa fluido abaixo de
   1200px sem mudar nada no desktop (telas largas continuam em 1200px
   normalmente, como sempre foi). */
#box{width:min(94%, 1200px); margin:0 auto; background:#FFF; box-shadow:0 0 40px rgba(10,30,60,.08);}



/*TOPBAR*/

#topbar{background:#0B1B33; height:34px;}

#topbar_inner{width:min(94%, 1160px); margin:0 auto; height:34px; display:flex; align-items:center; justify-content:space-between;}

#topbar_date{color:rgba(255,255,255,.55); font-size:11.5px; text-transform:capitalize; letter-spacing:.3px;}

#topbar_links{list-style:none; display:flex; gap:18px;}

#topbar_links li{display:inline;}

#topbar_links a{color:rgba(255,255,255,.75); text-decoration:none; font-size:11.5px; font-weight:600; letter-spacing:.3px;}

#topbar_links a:hover{color:#FFF;}



/*TOPO*/

/* position+z-index: cria um contexto de empilhamento próprio pro header,
   senão o dropdown do mega-menu (só ganha z-index quando em :hover) fica
   escondido atrás do bloco de destaque logo abaixo, que também é
   position:relative e vem depois no HTML. */
#header{width:min(94%, 1200px); margin:0 auto; border-bottom:1px solid #E4E9F0; position:relative; z-index:100;}

/* width:100% (não outro min(94%,...)): #header_inner e #header_menu são
   FILHOS de #header, que já é width:min(94%,1200px) — ou seja, já vem
   "encolhido" em relação à tela. Se eles também usarem min(94%,Npx), o
   94% é calculado em cima do #header (que já é 94% da tela), e o
   encolhimento junta duas vezes (94% de 94%), deixando o menu visivelmente
   mais estreito que o slider/conteúdo logo abaixo (que só encolhe uma vez,
   direto a partir de #box). Achado pelo Leonardo comparando o menu com o
   slider — aqui os dois passam a ocupar 100% da largura já ajustada de
   #header, alinhando com o slider. */
#header_inner{width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:22px 0 18px;}

#header_logo{flex:0 0 auto;}

#header_logo a{text-decoration:none; display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;}

#header_logo .logo_mark{background:linear-gradient(135deg,#0060BF,#C30); color:#FFF; font:800 18px "Segoe UI",Arial,sans-serif; padding:6px 9px; border-radius:8px; letter-spacing:.5px; box-shadow:0 4px 12px rgba(0,96,191,.22);}

#header_logo .logo_word{font:800 30px "Segoe UI",Arial,sans-serif; color:#0B1B33; letter-spacing:-.5px;}

#header_logo .logo_word strong{color:#0060BF;}

#header_logo .logo_tag{flex-basis:100%; font-size:11.5px; color:#8A94A3; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-left:1px;}

/* Busca modernizada — antes tinha largura fixa (280/320px) plantada bem
   à direita do #header_inner (que é justify-content:space-between),
   sobrando um vão em branco enorme entre ela e a logo. Agora ela cresce
   (flex:1, até um teto de 480px) pra ocupar esse espaço de verdade, com
   visual mais atual: sombra suave, borda mais sutil e o ícone de lupa
   como SVG inline (era uma imagem .png à parte) dentro de um botão
   circular com gradiente, em vez do ícone achatado antigo. */
#header_search{flex:1 1 auto; max-width:480px; min-width:0;}

#header_search form{position:relative; width:100%;}

#header_search label{display:block;}

#header_search .sr-only{position:absolute; left:-9999px;}

#header_search input[type=text]{
  font:14px "Segoe UI", Arial, Helvetica, sans-serif; color:#1A2B42;
  padding:12px 52px 12px 20px; border:1px solid #E4E9F0; border-radius:99px;
  width:100%; background:#F5F7FA; outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 10px rgba(10,30,60,.05);
}

#header_search input[type=text]:focus{border-color:#0060BF; background:#FFF; box-shadow:0 4px 16px rgba(0,96,191,.14);}

#header_search .btn{
  width:34px; height:34px; border:0; position:absolute; right:3px; top:50%;
  transform:translateY(-50%); border-radius:50%; padding:0; cursor:pointer;
  background:linear-gradient(135deg,#0060BF,#3E8EFF); color:#FFF;
  display:flex; align-items:center; justify-content:center;
  transition:filter .15s ease; flex:0 0 auto;
}

#header_search .btn:hover{filter:brightness(1.08);}

#header_search .btn svg{width:16px; height:16px; pointer-events:none;}

#header_menu{width:100%; margin:0 auto; display:flex; align-items:center; padding:4px 0;}




/*LEFT SIDEBAR*/

#sidebar_left{width:150px; float:left; margin:10px 0 3px 0;}

#sidebar_left ul{list-style:none; margin:0 0 10px; float:left;  width:146px; padding:5px 2px;}

#sidebar_left ul li{float:left; width:142px; padding:2px; border-bottom:1px groove #0080FF;}

#sidebar_left ul li:hover{background:#8AFFFF;}

#sidebar_left ul li a{text-decoration:none; color:#036;}

#sidebar_left .noticias {color:#C30; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; margin:8px; padding:0;}

#sidebar_left .esportes {color:#009933; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; margin:8px; padding:0;}

#sidebar_left .entreterimento {color:#f90; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; margin:8px; padding:0;}

#sidebar_left .tecnologia {color:#006699; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; margin:8px; padding:0;}

#sidebar_left .especial {color:#663399; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; margin:8px; padding:0;}

#left_adsence{padding:2px; display:block; margin:20px 10px 10px 10px; width:124px; float:left;}



/*CONTENT - Responsavel por todo o conteúdo*/



#content{width:780px; float:left; padding:0; margin:0 5px 5px 5px;}

#content_destaque{width:790px; border-bottom:5px solid #0060BF; padding-bottom:5px; margin-bottom:5px; float:left;}

#content_destaque a{text-decoration:none; color:#C30;}

#content_destaque img:hover{background:#C30;}

#content_destaque a:hover{text-decoration:underline;}

#content_destaque img{padding:3px; border:1px solid #84C1FF;}

#content_destaque span a{float:right; font:14 px Georgia, "Times New Roman", Times, serif; font-weight:bold; color:#036; padding:2px;}

#content_destaque p{font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}

#content_destaque .lista{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}

/*BLOCO ESQUERDO*/

#content_destaque_conteudo{width:415px; float:left; margin:5px 0 0 0;}

#content_destaque_conteudo ul{list-style:none; margin:0; padding:0;}

#content_destaque_conteudo ul li{width:410px; float:left; margin-bottom:3px; padding-bottom:3px; border-bottom:1px solid #91C8FF; padding:5px;}

#content_destaque_conteudo ul li h1{font-size:24px;}

#content_destaque_conteudo ul li img{float:left; margin-right:5px;}

#content_destaque_conteudo ul li ul li{width:120px; padding:0 5px; float:left; border:0; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;}



/*BLOCO Direito*/

#content_destaque_destaque{width:365px; height:260px; float:right; margin:0; padding:0;}

#content_destaque_destaque img{float:right;}
#content_destaque_destaque p{font:15px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; float:left ; padding:0 5px;}


/*conteudo esntreterimento*/

#content_entreterimento{width:790px; border-bottom:5px solid #0060BF; padding-bottom:5px; margin-bottom:5px; float:left;}

#content_entreterimento_conteudo{width:580px; float:left; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif;}

#content_entreterimento_conteudo a{text-decoration:none; color:#f90;}

#content_entreterimento_conteudo p { padding:0; margin:0; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; height:190px;}

/*#content_entreterimento_conteudo a:hover{text-decoration:underline;}*/

#content_entreterimento_conteudo img{padding:3px; border:1px solid #f90; float:left; margin-right:10px; margin-bottom:10px;}

#content_entreterimento_conteudo img:hover{background:#f90;}

#content_entreterimento_conteudo ul{float:left; width:585px; list-style:none; margin:0; padding:0;}

#content_entreterimento_conteudo ul li{ float:left; margin:0;}

#content_entreterimento_anuncio{width:200px; float:right;}


/*conteudo esportes*/


#content_esportes{width:790px; border-bottom:5px solid #0060BF; padding-bottom:5px; margin-bottom:5px; float:left;}

#content_esportes_conteudo{width:585px; padding:5px 10px 5px 0; float:left;}

#content_esportes_conteudo a{text-decoration:none; color:#093; font:17px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}

#content_esportes_conteudo h1 a{font:19px Georgia, "Times New Roman", Times, serif; font-weight:bold; color:#036;}

#content_esportes_conteudo h1 a:hover{text-decoration:none; color:#093;}

#content_esportes_conteudo a:hover{text-decoration:underline;}

#content_esportes_conteudo ul{float:left; list-style:none; margin:0; padding:0;}

#content_esportes_conteudo ul li{float:left; width:585px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px dotted #3E9EFF; float:left;}

#content_esportes_conteudo img{float:left; margin-right:8px; padding:3px; border:1px solid #093;}

#content_esportes_conteudo img:hover{background:#093;}

/* O <h1> do título nunca teve o próprio font-size/line-height resetado —
   só o <a> lá dentro tinha (18px). Como o <h1> ficava com o tamanho de
   fonte grande padrão do navegador, cada linha quebrada do título abria
   um vão enorme (o espaçamento de linha usava o tamanho do h1, não o do
   texto de 18px). Isso não tem relação com o ajuste do bloco de cima —
   já vinha assim desde o site original, só ficou mais visível agora que
   os títulos são mais longos (vêm do banco). */
#content_esportes_conteudo h1{font-size:1em; line-height:1.3; margin:0;}


/*comentados*/

#content_esportes_comentados{width:190px; float:right; height:367px;}

#content_esportes_comentados h1 {font:22px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#639; text-transform:uppercase; font-weight:bold; margin-bottom:5px;}

#content_esportes_comentados ol{margin:0 0 0 20px;}

#content_esportes_comentados ol li{margin:0 0 5px 0; padding:0 0 5px 0; border-bottom:1px solid #0070DF;}

#content_esportes_comentados a{text-decoration:none; color:#069;}

#content_esportes_comentados a:hover{text-decoration:underline;}


/*conteudo tecnologia*/ 


#content_tecnologia{width:790px; border-bottom:5px solid #0060BF; padding-bottom:5px; margin-bottom:5px; float:left; height:280px;}

#content_tecnologia a{text-decoration:none; color:#069;}

#content_tecnologia a:hover{text-decoration:none;}

#content_tecnologia_destaque{width:360px; float:left; padding:5px; height:270px;}

#content_tecnologia_destaque img{padding:3px; border:1px solid #069;}

#content_tecnologia_destaque img:hover{background:#069;}

#content_tecnologia_destaque p{font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}


#content_tecnologia_conteudo{width:410px; height:275px; border-bottom:5px solid #0060BF; float:right; padding:5px; font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}

#content_tecnologia_conteudo ul{list-style:none; margin:0; padding:0; width:240px;}

#content_tecnologia_conteudo ul li{width:410px; height:81px; float:left; margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #069;}

#content_vistos{width:630px; float:left;}

#content_vistos_conteudo{float:left; width:300px;}

#content_vistos_conteudo h1{font:20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#903;}

#content_vistos_conteudo a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#903; text-decoration:none;}

#content_vistos_conteudo a:hover{text-decoration:underline;}

#content_vistos_conteudo ol{margin:0 0 0 23px;}

#content_vistos_conteudo ol li{margin:0 0 5px 0; padding:0 0 5px 0; border-bottom:1px solid #0070DF;}


#content_vistos_anuncio{width:300px; padding:2px; float:right;}

#content_vistos .videos{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#48A4FF; margin:5px 5px 5px 5px;}


/*RIGHT SIDEBAR*/

#right_sidebar{width:200px; float:right; margin:0 0 5px 0;}

#sidebar_newsletter, #sidebar_enquete, #sidebar_siganos, #sidebar_equipe, #sidebar_plantao, #sidebar_contadores{border:1px solid #64B1FF; margin:5px 0 0 0; padding:5px; width:190px; float:left;}


/*SIDEBAR NEWSLETTER*/

.sidebar_newsletter{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:639; margin:0 0 5px 0;}

#sidebar_newsletter input{width:181px; padding:3px; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#0080FF; border:1px solid #639;}

#sidebar_newsletter .btn{width:100px; float:right; margin:5px 0; padding:0; color:#FFF; background:#333;}

#sidebar_newsletter .btn:hover{background:#FFF; color:#333; cursor:pointer;}

#sidebar_newsletter label{display:block;}

#sidebar_newsletter span{float:left; padding:7px; font-weight:bold;}


/*SIDEBAR ENQUETE*/

.sidebar_enquete{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#F90; margin:0 0 5px 0;}

#sidebar_enquete span{font:15px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#036; display:block; text-align:center;}

#sidebar_enquete ul{list-style:none; margin:10px 0 10px 8px;}

#sidebar_enquete ul li{margin:2px 0; font:16px Georgia, "Times New Roman", Times, serif;}

#sidebar_enquete a{text-decoration:none; display:block; text-align:center; color:#F60; margin:3px; padding:0; font-weight:bold;}

#sidebar_enquete .ver_result{font-weight:normal; text-transform:lowercase;}

#sidebar_enquete a:hover{color:#F00;}


/*SIDEBAR SIGANOS*/

.sidebar_siganos{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight:bold; color:#0078F0;}

#sidebar_siganos img{border:0;}

#sidebar_siganos ul{list-style:none; float:left; width:100%;}

#sidebar_siganos ul li{float:left; display:inline; margin:0 8px;}


/*SIDEBAR EQUIPE*/

#sidebar_equipe h1{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; margin:0 0 5px 0;} 

#sidebar_equipe a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; color:#0079F2;}

#sidebar_equipe a:hover{text-decoration:underline;}

#sidebar_equipe img{float:left; padding:2px; border:1px solid #06C; margin-right:5px;}

#sidebar_equipe img:hover{background:#71D0FF; cursor:pointer;}

#sidebar_equipe ul{list-style:none; margin:0; padding:0;}

#sidebar_equipe ul li{float:left; width:190px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px groove #036;}

#sidebar_equipe span{display:block;}


/*SIDEBAR PLANTAO*/

.sidebar_plantao{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight:bold; color:#069;}

#sidebar_plantao{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}

#sidebar_plantao a{text-decoration:none; color:#639;}

#sidebar_plantao a:hover{text-decoration:underline;}

#sidebar_plantao ul{list-style:none; margin:0; padding:0;}

#sidebar_plantao ul li{float:left; width:190px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px groove #036;}


/*SIDEBAR COMENTADORES*/

#sidebar_contadores{font:15px "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight:bold; color:#C10061;}

#sidebar_contadores img{float:left; padding:2px; border:1px solid #06C; margin-right:5px;}

#sidebar_contadores img:hover{background:#71D0FF; cursor:pointer;}

#sidebar_contadores ul{list-style:none; margin:0; padding:0;}

#sidebar_contadores ul li{float:left; width:190px; margin-bottom:5px; padding-bottom:5px; border-bottom:1px groove #036;}


/*FOOTER*/

#clear{clear:both;}

#footer_all{background:#0B1B33;}

#footer{width:min(94%, 1160px); margin:0 auto; padding:48px 0 32px; display:flex; gap:40px; flex-wrap:wrap;}

#footer_col_brand{flex:1.4; min-width:260px;}

.footer_logo{display:flex; align-items:baseline; gap:8px; margin-bottom:10px;}

.footer_logo .logo_mark{background:linear-gradient(135deg,#3E8EFF,#FF6A3D); color:#FFF; font:800 14px "Segoe UI",Arial,sans-serif; padding:5px 8px; border-radius:6px;}

.footer_logo .logo_word{font:800 20px "Segoe UI",Arial,sans-serif; color:#FFF;}

.footer_logo .logo_word strong{color:#79B4FF;}

.footer_tagline{color:rgba(255,255,255,.55); font-size:13px; line-height:1.6; max-width:280px; margin-bottom:16px;}

#footer_social{list-style:none; display:flex; gap:10px;}

#footer_social li{display:inline;}

#footer_social a{display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:rgba(255,255,255,.08); border-radius:50%; transition:.2s;}

#footer_social a:hover{background:#3E8EFF;}

#footer_social img{width:16px; height:16px; opacity:.9;}

.footer_col{flex:1; min-width:150px;}

.footer_col h1{font:700 12px "Segoe UI",Arial,sans-serif; text-transform:uppercase; letter-spacing:1.5px; color:#79B4FF; margin-bottom:16px;}

.footer_col ul{list-style:none;}

.footer_col ul li{margin-bottom:10px;}

.footer_col ul li a{text-decoration:none; font:600 13.5px "Segoe UI", Arial, Helvetica, sans-serif; color:rgba(255,255,255,.72); transition:.15s;}

.footer_col ul li a:hover{color:#FFF; padding-left:3px;}

.footer_col ul li a.noticias:hover{color:#FF7A5C;}

.footer_col ul li a.esportes:hover{color:#4CE07A;}

.footer_col ul li a.entreterimento:hover{color:#FFB74D;}

.footer_col ul li a.tecnologia:hover{color:#5CC2FF;}

.footer_newsletter_txt{color:rgba(255,255,255,.55); font-size:12.5px; line-height:1.6; margin-bottom:12px;}

#footer_newsletter_form input[type=email]{width:100%; padding:9px 12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); border-radius:6px 6px 0 0; color:#FFF; font-size:12.5px; outline:none;}

#footer_newsletter_form input[type=submit]{width:100%; padding:9px 12px; border:0; border-radius:0 0 6px 6px; background:linear-gradient(90deg,#3E8EFF,#5CC2FF); color:#FFF; font:700 12.5px "Segoe UI",Arial,sans-serif; cursor:pointer; letter-spacing:.5px;}

#footer_newsletter_form input[type=submit]:hover{filter:brightness(1.1);}

#footer_bottom{width:min(94%, 1160px); margin:0 auto; padding:18px 0; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center;}

#footer_bottom span{color:rgba(255,255,255,.4); font-size:11.5px;}

#voltar_topo{color:rgba(255,255,255,.55); font-size:11.5px; text-decoration:none; font-weight:600;}

#voltar_topo:hover{color:#FFF;}

/*PAGINAS*/

#page_noticias{width:1200px; margin:0 auto;}

#page_noticias a{font:16px Tahoma, Geneva, sans-serif; color:#069; font-weight:bold;}

#page_noticias a:hover{text-decoration:underline;}

#page_noticias h1{font:30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-shadow: 1px 1px 1px #069;}

#page_noticias ul{list-style:none; width:650px; float:left;}

#page_noticias li{float:left; padding:3px; margin-bottom:20px;}

#page_noticias span{font:20px Tahoma, Geneva, sans-serif; font-weight:bold; margin:20px; text-shadow: 1px 1px 1px #069;}

#page_noticias img{float:left; padding:3px; border:1px solid #036; margin:5px 5px 5px 5px;}

#page_noticias img:hover{background:#FC0; cursor:pointer;}



#page_esportes{width:1200px; margin:0 auto;}

#page_esportes ul{list-style:none; width:650px; float:left;}

#page_esportes li{float:left; padding:3px; margin-bottom:20px;}

#page_esportes a{font:16px Tahoma, Geneva, sans-serif; color:#069; font-weight:bold;}

#page_esportes a:hover{text-decoration:underline;}

#page_esportes h1{font:30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-shadow: 1px 1px 1px #069;}

#page_esportes span{font:20px Tahoma, Geneva, sans-serif; color:#060; font-weight:bold; margin:20px; text-shadow: 1px 1px 1px #069;}

#page_esportes img{float:left; padding:3px; border:1px solid #09C; margin:5px 5px 5px 5px;}

#page_esportes img:hover{background:#060; cursor:pointer;}


/*SOBRE*/

/* ---------- Sobre Nós — reconstruída (a versão antiga usava floats com
   largura fixa em pixel — #sobrenos{width:1200px}, .titulo/p{width:630px;
   float:left} — presa a um template antigo, sem relação com a largura
   fluida do grid novo). Adicionado também o bloco de portfólio a pedido
   do Leonardo. ---------- */
#sobrenos{width:auto; margin:0;}

#sobrenos .titulo{font:800 26px "Segoe UI", Arial, sans-serif; color:#0B1B33; margin:4px 0 16px; text-decoration:none;}

#sobrenos p{margin:0 0 16px; padding:0; font:14px "Segoe UI", Arial, sans-serif; color:#5C6B7D; line-height:1.65; max-width:760px;}

/* ---------- /Portfólio — projetos pessoais em Node.js do Leonardo,
   exibidos abaixo do texto institucional. Cada card usa um "selo" com
   ícone/gradiente no lugar de um print real da tela (os apps rodam
   localmente e não têm capturas prontas) — pode trocar por screenshots
   reais depois, se quiser. ---------- */
.portfolio{margin-top:8px;}
.portfolio_titulo{
  font:800 12.5px "Segoe UI", Arial, sans-serif; text-transform:uppercase;
  letter-spacing:.6px; color:#fff; background:#1A2B42;
  display:inline-block; padding:9px 16px; border-radius:9px; margin:0 0 12px;
}
.portfolio_intro{margin:0 0 20px; max-width:760px;}

.portfolio_grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:20px;}

.portfolio_card{
  background:#FFF; border:1px solid #E4E9F0; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(10,30,60,.05); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.portfolio_card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,30,60,.12);}

.portfolio_capa{
  height:104px; display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.portfolio_capa svg{width:40px; height:40px;}
.portfolio_capa_dashboard{background:linear-gradient(135deg,#0060BF,#0B1B33);}
.portfolio_capa_exam{background:linear-gradient(135deg,#7A3FE0,#3A1E70);}
.portfolio_capa_kb{background:linear-gradient(135deg,#069,#003355);}
.portfolio_capa_financas{background:linear-gradient(135deg,#1FAE63,#0B4A2C);}

.portfolio_corpo{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.portfolio_corpo h3{margin:0; font:700 15.5px "Segoe UI", Arial, sans-serif; color:#0B1B42;}
.portfolio_stack{
  margin:0; font:700 10.5px "Segoe UI", Arial, sans-serif; text-transform:uppercase;
  letter-spacing:.4px; color:#0060BF;
}
.portfolio_desc{margin:0; font:13px "Segoe UI", Arial, sans-serif; color:#5C6B7D; line-height:1.55;}
.portfolio_features{margin:2px 0 0; padding:0 0 0 18px; font:12.5px "Segoe UI", Arial, sans-serif; color:#5C6B7D; line-height:1.7;}
.portfolio_features li{margin:0;}

@media (max-width:980px){
  .portfolio_grade{grid-template-columns:1fr;}
}


/*CONTATO*/

/* ---------- Fale Conosco — reconstruída do zero (a versão antiga usava
   floats com largura fixa em pixel — .meio{width:630px}, fieldset{width:
   610px}, input{width:570px} — presa a um template de 2012 e deixando um
   vão enorme em branco antes do sidebar, sem nenhuma relação com a
   largura fluida do grid novo). Formulário agora envia de verdade via
   contato/enviar.php (mail() nativo do PHP, incluído no plano da
   Hostinger) e mostra mensagem de sucesso/erro pelo mesmo padrão já usado
   no newsletter (?contato=ok|erro). ---------- */
#contato_page{width:auto; margin:0;}

.contato_cabecalho{margin:4px 0 22px;}
.contato_cabecalho h1{margin:0 0 8px; font:800 26px "Segoe UI", Arial, sans-serif; color:#0B1B33;}
.contato_cabecalho p{margin:0; font:14px "Segoe UI", Arial, sans-serif; color:#5C6B7D; max-width:640px; line-height:1.6;}

.contato_grade{display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start;}

.contato_form_card, .contato_info_card{
  background:#FFF; border:1px solid #E4E9F0; border-radius:14px;
  padding:26px; box-shadow:0 2px 10px rgba(10,30,60,.05);
}

.contato_msg{margin:0 0 18px; padding:12px 16px; border-radius:9px; font:600 13px "Segoe UI", Arial, sans-serif; line-height:1.5;}
.contato_msg_ok{background:#E8F7EE; color:#1B7A43; border:1px solid #BFE8CE;}
.contato_msg_erro{background:#FDECEC; color:#B3261E; border:1px solid #F5C2C0;}

.contato_form{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contato_campo{display:flex; flex-direction:column; gap:6px;}
.contato_campo_full{grid-column:1 / -1;}
.contato_campo label{font:700 12.5px "Segoe UI", Arial, sans-serif; color:#1A2B42;}
.contato_campo .contato_opcional{font-weight:400; color:#9AA5B3;}
.contato_campo input, .contato_campo textarea{
  font:14px "Segoe UI", Arial, sans-serif; color:#1A2B42; padding:11px 14px;
  border:1px solid #DCE2EA; border-radius:9px; background:#F5F7FA; outline:none;
  transition:.2s ease; resize:vertical; font-family:"Segoe UI", Arial, sans-serif;
}
.contato_campo input:focus, .contato_campo textarea:focus{
  border-color:#0060BF; background:#FFF; box-shadow:0 0 0 3px rgba(0,96,191,.12);
}

.contato_btn{
  grid-column:1 / -1; justify-self:start; margin-top:4px;
  background:linear-gradient(135deg,#0060BF,#0B1B33); color:#FFF; border:0;
  font:700 14px "Segoe UI", Arial, sans-serif; padding:13px 30px; border-radius:30px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 14px rgba(0,96,191,.25);
}
.contato_btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,96,191,.32); color:#FFF;}

.contato_info_card h2{margin:0 0 16px; font:800 15px "Segoe UI", Arial, sans-serif; color:#0B1B33;}
.contato_info_lista{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:16px;}
.contato_info_lista li{display:flex; gap:12px; align-items:flex-start;}
.contato_info_icone{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:#EAF2FC; color:#0060BF; display:flex; align-items:center; justify-content:center;
}
.contato_info_lista strong{display:block; font:700 13px "Segoe UI", Arial, sans-serif; color:#1A2B42; margin-bottom:2px;}
.contato_info_lista span.contato_info_texto{display:block; font:13px "Segoe UI", Arial, sans-serif; color:#5C6B7D; line-height:1.5;}
.contato_info_rodape{margin:0; font:12.5px "Segoe UI", Arial, sans-serif; color:#8A96A6; line-height:1.6; border-top:1px solid #E4E9F0; padding-top:14px;}

@media (max-width:980px){
  .contato_grade{grid-template-columns:1fr;}
  .contato_form{grid-template-columns:1fr;}
}

/* ============================================================
   MELHORIAS 2026 — páginas de categoria dinâmicas + efeitos
   (mantém a paleta já usada no header/footer modernizados)
   ============================================================ */

/*Grid moderno para as 4 páginas de categoria (antes só noticias/esportes
  tinham estilo; entreterimento/tecnologia reaproveitavam #page_noticias
  por engano no template antigo — agora cada uma tem a sua)*/
#page_noticias, #page_esportes, #page_entreterimento, #page_tecnologia, #page_busca{
  width:1200px; margin:0 auto; padding:0 0 40px;
}

#page_noticias h1, #page_esportes h1, #page_entreterimento h1, #page_tecnologia h1, #page_busca h1{
  font:800 30px "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  text-shadow:none; margin-bottom:6px; letter-spacing:-.5px;
}

.categoria_descricao{color:#5C6B7D; font-size:14.5px; margin-bottom:22px; max-width:720px;}

.categoria_sub_ativa{font-weight:400; opacity:.75;}

/* Barra de filtro por subcategoria (Brasil, Mundo, Política...) nas páginas
   de listagem — a pedido do Leonardo, ligada aos links reais do submenu do
   cabeçalho (?sub=slug). "Todas" sempre aparece primeiro pra limpar o filtro. */
/* float:none/width:auto com !important são necessários aqui: o template
   antigo (pré-2026, só existe em #page_noticias/#page_esportes — ver
   comentário abaixo) tem "#page_noticias ul{width:650px; float:left}" /
   "#page_esportes ul{width:650px; float:left}", com especificidade
   (ID+tag) MAIOR que ".categoria_filtro_sub" sozinha (só classe) — sem
   isso essa barra de filtro ficava "flutuando" encolhida em 650px em vez
   de ocupar a largura real do conteúdo. */
.categoria_filtro_sub{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 22px; padding:0; float:none !important; width:auto !important;
}
.categoria_filtro_sub li{margin:0; padding:0;}
.categoria_filtro_sub a{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background:#EAF0F7; color:#3A4A5E; font:600 13px "Segoe UI", Arial, sans-serif;
  text-decoration:none; border:1px solid transparent; transition:background .15s ease, color .15s ease;
}
.categoria_filtro_sub a:hover{background:#DCE6F2;}
.categoria_filtro_sub a.ativo{background:#0060BF; color:#FFF;}

/* :not(.categoria_filtro_sub) é necessário: "#page_noticias ul" (ID+tag)
   tem mais especificidade que ".categoria_filtro_sub" (só classe), então
   sem essa exclusão esta regra SEMPRE vencia a barra de filtro por
   subcategoria acima — não importa a ordem no arquivo — e transformava
   aqueles pills (Todas/Brasil/Mundo/...) numa grid de colunas de 320px,
   fazendo cada botão "pular" pra sua própria linha com um vão gigante
   entre eles em vez de ficarem lado a lado numa barra só. */
#page_noticias ul:not(.categoria_filtro_sub),
#page_esportes ul:not(.categoria_filtro_sub),
#page_entreterimento ul:not(.categoria_filtro_sub),
#page_tecnologia ul:not(.categoria_filtro_sub){
  /* float:none é o outro lado do mesmo problema do comentário acima:
     mesmo com "width:auto" já vencendo o "width:650px" do template
     antigo (nossa especificidade aqui é maior), ninguém tirava o
     "float:left" que sobrava — e um elemento flutuante usa cálculo de
     largura "encolhe pro conteúdo" mesmo com width:auto, então a grade
     de posts ficava travada em ~660px (2 colunas mínimas) em vez de
     esticar até a borda do sidebar. */
  list-style:none; width:auto; float:none; display:grid;
  /* auto-fit (não auto-fill): com poucos posts (ex.: só 4, cabendo em 2
     colunas de 320px+), "auto-fill" reserva o espaço de uma 3ª coluna
     fantasma mesmo sem post nenhum pra preenchê-la — sobrava aquele vão
     vazio enorme entre os cards e o sidebar. "auto-fit" colapsa as
     colunas vazias e deixa o "1fr" esticar só as colunas com conteúdo
     de verdade, ocupando a largura toda. */
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:20px; margin:0; padding:0;
}

.post_card{
  float:none !important; width:auto !important; padding:16px !important; margin:0 !important;
  background:#FFF; border:1px solid #E4E9F0; border-radius:14px;
  box-shadow:0 2px 10px rgba(10,30,60,.05);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
  opacity:0; animation:lr-fade-up .5s ease forwards;
}

.post_card:hover{transform:translateY(-4px); box-shadow:0 10px 26px rgba(10,30,60,.12);}

.post_card img{
  float:none !important; width:100% !important; height:170px !important; object-fit:cover;
  border-radius:9px; border:0 !important; margin:0 0 12px 0 !important; padding:0 !important;
}

.post_card span{
  display:block; font:700 17px "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
  text-shadow:none !important; margin:0 0 6px 0 !important; color:#0B1B33;
}

.post_card span a{color:#0B1B33 !important; font-weight:700 !important;}

/* Selo de categoria inline — usado nos resultados de busca, que misturam
   editorias diferentes na mesma lista (as páginas de categoria não
   precisam disso porque já são todas da mesma cor). */
.post_categoria_tag_inline{font:800 11px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase; letter-spacing:.4px;}

.post_card p{font:14px "Segoe UI", Arial, sans-serif; color:#5C6B7D; line-height:1.55; margin:0 0 10px;}

.post_meta{font-size:12.5px !important; color:#8A94A3 !important; font-weight:400 !important;
  text-shadow:none !important; margin-top:auto !important;}

.post_leia_mais{font-weight:700 !important; color:#0060BF !important;}

/* Faixa de cor lateral por categoria, igual ao esquema já usado no menu */
#page_noticias .post_card{border-left:4px solid #C30;}
#page_esportes .post_card{border-left:4px solid #009933;}
#page_entreterimento .post_card{border-left:4px solid #f90;}
#page_tecnologia .post_card{border-left:4px solid #006699;}

@keyframes lr-fade-up{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.post_card:nth-child(1){animation-delay:.02s;}
.post_card:nth-child(2){animation-delay:.08s;}
.post_card:nth-child(3){animation-delay:.14s;}
.post_card:nth-child(4){animation-delay:.20s;}
.post_card:nth-child(5){animation-delay:.26s;}
.post_card:nth-child(6){animation-delay:.32s;}
.post_card:nth-child(n+7){animation-delay:.36s;}

.fade-in-item{opacity:0; animation:lr-fade-up .5s ease forwards;}

/* Efeito padrão de hover em imagens do site inteiro (substitui o antigo
   "fundo colorido atrás da borda" por um zoom + sombra suave) */
.img-hover{
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
  display:block; cursor:pointer; border-radius:6px;
}
.img-hover:hover{transform:scale(1.035); box-shadow:0 6px 18px rgba(10,30,60,.18); filter:brightness(1.03);}

/* Página de post individual */
#page_post{width:1200px; margin:0 auto; padding:24px 0 48px;}

#page_post #page{max-width:820px; margin:0 auto;}

.post_categoria_tag{
  display:inline-block; color:#FFF !important; font:700 11.5px "Segoe UI", Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.6px; padding:5px 12px; border-radius:99px; margin-bottom:14px;
}

#page_post h1{font:800 32px "Segoe UI", "Trebuchet MS", Arial, sans-serif; line-height:1.25; margin-bottom:8px; color:#0B1B33;}

.post_subtitulo{font-size:17px; color:#5C6B7D; margin-bottom:14px;}

#page_post .post_meta{display:block; margin-bottom:18px; color:#8A94A3; font-size:13px;}

.post_imagem_capa{
  width:100%; max-height:420px; object-fit:cover; border-radius:14px;
  margin-bottom:22px; box-shadow:0 8px 24px rgba(10,30,60,.12);
}

/* Player de vídeo do post — link externo (YouTube/Vimeo, via <iframe>) ou
   arquivo enviado no upload (via <video>). Proporção 16:9 mantida com
   aspect-ratio (fallback simples, sem precisar do hack de padding-top). */
.post_video{
  margin-bottom:22px; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 24px rgba(10,30,60,.12); background:#000;
}
.post_video iframe, .post_video video{
  display:block; width:100%; aspect-ratio:16/9; border:0; background:#000;
}

.post_galeria{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px;
  margin:-8px 0 22px;
}

.post_galeria_item{
  display:block; border-radius:10px; overflow:hidden; box-shadow:0 3px 10px rgba(10,30,60,.1);
  height:90px; background:#EAF0F7;
}

.post_galeria_item img{
  width:100%; height:90px; object-fit:cover; display:block; transition:transform .2s ease;
  color:transparent; /* se a imagem não carregar, esconde o texto alternativo em vez de estourar o layout */
}

.post_galeria_item:hover img{transform:scale(1.06);}

.post_corpo{font:16px/1.8 "Segoe UI", Arial, sans-serif; color:#1A2B42;}

.post_corpo p{margin-bottom:16px;}

.post_relacionados{margin-top:40px; padding-top:24px; border-top:1px solid #E4E9F0;}

.post_relacionados h1{font:700 15px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase;
  letter-spacing:.5px; color:#0060BF !important; text-shadow:none !important; margin-bottom:14px !important;}

.post_relacionados ul{list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; margin:0; padding:0;}

.post_relacionados li a{display:flex; align-items:center; gap:10px; text-decoration:none; color:#1A2B42;}

.post_relacionados img{width:60px; height:60px; object-fit:cover; border-radius:8px; flex-shrink:0;}

.post_relacionados span{font-size:13.5px; font-weight:600; line-height:1.35;}

/* ---------- Comentários do post ---------- */
#post_comentarios{margin-top:40px; padding-top:24px; border-top:1px solid #E4E9F0;}

#post_comentarios h1{font:700 15px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase;
  letter-spacing:.5px; color:#0060BF !important; text-shadow:none !important; margin-bottom:16px !important;}

.ajuda_comentarios{color:#8A94A3; font-size:13.5px; margin-bottom:16px;}

.lista_comentarios{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:14px;}

.lista_comentarios li{background:#F7FAFD; border:1px solid #E4E9F0; border-radius:12px; padding:14px 16px;}

.comentario_autor{font:700 13.5px "Segoe UI", Arial, sans-serif; color:#0B1B33;}

.comentario_data{font-size:12px; color:#8A94A3; margin-left:8px;}

.lista_comentarios p{margin-top:6px; font:14px/1.6 "Segoe UI", Arial, sans-serif; color:#1A2B42;}

.comentario_msg{font:600 13px "Segoe UI", Arial, sans-serif; border-radius:8px; padding:10px 12px; margin-bottom:16px;}
.comentario_msg_ok{background:#EAFBEF; color:#116631; border:1px solid #BEEBCB;}
.comentario_msg_erro{background:#FFF3F0; color:#A32E0F; border:1px solid #F3C6B9;}

.form_comentario{background:#FFF; border:1px solid #E4E9F0; border-radius:14px; padding:18px; max-width:520px;}

.form_comentario label{display:block; font:600 12.5px "Segoe UI", Arial, sans-serif; color:#5C6B7D; margin-bottom:12px;}

.form_comentario input[type=text], .form_comentario input[type=email], .form_comentario textarea{
  display:block; width:100%; margin-top:6px; border:1px solid #DCE2EA; border-radius:8px;
  padding:9px 10px; font:14px "Segoe UI", Arial, sans-serif; color:#1A2B42; background:#FBFCFE; resize:vertical;
}

.form_comentario .campo_oculto{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

.form_comentario .btn{
  background:#0060BF; color:#FFF; border:0; border-radius:8px; padding:10px 20px;
  font:700 13px "Segoe UI", Arial, sans-serif; cursor:pointer;
}
.form_comentario .btn:hover{background:#0050A3;}

/* Placeholders de anúncio/vídeo (substituem embeds Flash/AdSense mortos).
   Só estilo por enquanto — quando entrar o AdSense de verdade, o miolo
   (badge + ícone + texto) sai e entra o <ins class="adsbygoogle">. */
.anuncio_placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; height:200px; padding:16px; position:relative; overflow:hidden;
  border:1px solid #E4E9F0; border-radius:14px; background:linear-gradient(160deg,#F7FAFD 0%,#EAF0F7 100%);
}
.anuncio_badge{
  position:absolute; top:10px; right:10px; background:#FFF; border:1px solid #DCE2EA;
  color:#8A94A3; font:700 9px "Segoe UI", Arial, sans-serif; text-transform:uppercase;
  letter-spacing:.6px; padding:3px 8px; border-radius:99px;
}
.anuncio_icone{width:32px; height:32px; color:#B9C4D3; flex:0 0 auto;}
.anuncio_texto{color:#8A94A3; font:700 12px "Segoe UI", Arial, sans-serif; text-transform:uppercase; letter-spacing:.5px;}
.anuncio_texto small{display:block; margin-top:3px; color:#AEB8C6; font:500 10.5px "Segoe UI", Arial, sans-serif; text-transform:none; letter-spacing:0;}
.anuncio_video{height:250px;}
.anuncio_lateral{height:600px; width:100%;}

/* Sidebar esquerda — leve modernização dos links dinâmicos */
#sidebar_left ul li{transition:background .15s ease;}
#sidebar_left ul li a{transition:color .15s ease;}

/* ============================================================
   CORREÇÃO — caixas de altura fixa (herdadas do template de 2011,
   pensadas pra textos curtos e fixos) estourando com o conteúdo
   dinâmico do banco, que é mais longo. Trunca com reticências em
   vez de deixar o texto vazar por cima dos elementos vizinhos.
   Também corrige fotos esticadas: object-fit:cover faz a imagem
   preencher a caixa sem distorcer, cortando o excesso.
   ============================================================ */

.img-hover{object-fit:cover; object-position:center;}

#content_destaque_destaque p{
  height:auto; max-height:78px; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical;
}

#content_entreterimento_conteudo p{
  height:auto; max-height:88px; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:17px !important;
}

#content_tecnologia_destaque p{
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

#content_tecnologia_conteudo ul li{
  height:auto; min-height:60px; overflow:hidden;
}

#content_destaque_conteudo ul li p.lista{
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* Trecho/resumo abaixo do título — mesma ideia do texto que já aparecia
   no bloco em destaque à direita, só que compacto (2 linhas). Antes o
   template só imprimia o título, sobrando bastante espaço vazio abaixo. */
#content_destaque_conteudo ul li .lista_texto{min-width:0; flex:1 1 auto;}
#content_destaque_conteudo ul li p.lista{font-size:15px !important;}
#content_destaque_conteudo ul li p.lista_resumo{
  margin-top:4px; font:13.5px "Segoe UI", Arial, Helvetica, sans-serif; font-weight:400;
  color:#5C6B80; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
#content_destaque_conteudo ul li p.lista_resumo a{color:inherit; text-decoration:none;}
#content_destaque_conteudo ul li p.lista_resumo a:hover{color:#0060BF;}

#content_esportes_conteudo ul li{height:auto; min-height:140px;}

/* Clearfix — os containers antigos não fecham os floats internos,
   o que colapsa a altura do bloco pai e faz o próximo bloco subir
   por cima. Isso já existia no template original; fica mais visível
   agora que o texto varia de tamanho. */
#content_destaque::after, #content_entreterimento::after,
#content_esportes::after, #content_tecnologia::after,
#content_destaque_conteudo ul li::after{
  content:""; display:table; clear:both;
}
#sidebar_left ul li a{transition:color .15s ease;}

/* ============================================================
   REDESIGN 2026 — layout em grid de 3 colunas + modernização
   completa de sidebar e blocos de conteúdo.

   Motivo: o template original tinha uma #sidebar_left pronta mas
   NUNCA incluída em nenhuma página, então o layout usava só
   #content (780px) + #right_sidebar (200px) dentro de um #box de
   1200px — sobrava ~220px de vão morto. Agora sidebar_left entra
   em cena (menu rápido por editoria) e as 3 colunas dividem o
   espaço todo via CSS Grid, com larguras fluidas em vez de pixels
   fixos (que é o que permite reaproveitar o espaço em qualquer
   tamanho de conteúdo).
   ============================================================ */

/* v2 — a pedido do Leonardo: os dois sidebars (esquerdo e direito) agora
   dividem a MESMA coluna à direita (sidebar_left empilhado acima do
   right_sidebar), liberando toda a largura extra para o conteúdo central,
   que fica mais amplo. A coluna de sidebars também ficou mais larga
   (260px -> 320px) para os cards não ficarem apertados. */
#layout_principal{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-rows:auto auto;
  gap:26px;
  width:min(94%, 1160px);
  margin:0 auto;
  padding:26px 0 36px;
  align-items:start;
}

#content{width:auto !important; float:none !important; margin:0 !important; grid-column:1; grid-row:1; padding:0 !important;}
/* v3 — a pedido do Leonardo: inverte a ordem visual dos blocos da coluna direita.
   Os widgets (newsletter/enquete/redes sociais/equipe) sobem para o topo (row 1)
   e os menus rápidos por editoria (/NOTÍCIAS, /ESPORTES...) descem para baixo
   (row 2). Continua tudo dentro da mesma coluna 2 do grid — só troca a ordem
   vertical entre os dois blocos. */
#coluna_direita{grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:18px;}
#sidebar_left{width:auto !important; float:none !important; margin:0 !important;}
#right_sidebar{width:auto !important; float:none !important; margin:0 !important; display:flex; flex-direction:column; gap:18px;}

/* Slider "em destaque" (hero) — só existe na home, acima de tudo (row 1).
   #content/#right_sidebar/#sidebar_left/#content_descubra_mais são
   compartilhados por TODAS as páginas (vêm de header.php/index.php), então
   uso :has() para só empurrar essas linhas pra baixo quando o slider
   realmente está presente — nas demais páginas o grid continua igual. */
#hero_slider{grid-column:1 / -1; grid-row:1;}
#layout_principal:has(#hero_slider) #content{grid-row:2;}
#layout_principal:has(#hero_slider) #coluna_direita{grid-row:2;}
#layout_principal:has(#hero_slider) #content_descubra_mais{grid-row:3;}

#page_noticias, #page_esportes, #page_entreterimento, #page_tecnologia,
#page_post, #sobrenos, #contato_page, #page_busca{
  width:auto !important; margin:0 !important; grid-column:1; grid-row:1;
}

@media (max-width:980px){
  /* minmax(0,1fr) e não só "1fr": uma coluna de grid "1fr" pura ainda
     carrega um mínimo implícito igual ao maior min-content de dentro
     (ex.: a grade nova "/Descubra mais", com cards de min 210px cada),
     então a coluna não encolhia de verdade e a página inteira ganhava
     rolagem horizontal em tela estreita. Com minmax(0,1fr) o mínimo
     vira 0 e a coluna encolhe até o tamanho real da tela. */
  #layout_principal{grid-template-columns:minmax(0,1fr); width:94%;}
  #sidebar_left{display:none;}
  #hero_slider, #content, #page_noticias, #page_esportes, #page_entreterimento, #page_tecnologia,
  #page_post, #sobrenos, #contato_page, #page_busca, #coluna_direita{
    grid-column:1; grid-row:auto;
  }

  /* Correção: os painéis de largura fixa (comentados/anúncio/vídeos) dos
     blocos da home usam flex:0 0 <largura> pensado pra ficar ao LADO da
     lista em telas largas. Quando o flex-wrap empurra eles pra própria
     linha em telas estreitas/médias, esse tamanho fixo vira uma caixa
     pequena isolada no canto, com uma faixa enorme em branco ao lado —
     era exatamente o espaço vazio embaixo do bloco "+Vistos"/"/Videos"
     reportado pelo Leonardo. Aqui eles passam a esticar (flex-basis 100%)
     e ocupar a linha inteira quando ficam sozinhos nela. */
  #content_esportes_comentados, #content_entreterimento_anuncio, #content_vistos_anuncio{
    flex:1 1 100% !important; width:auto !important;
  }

  /* Achados ao investigar a rolagem horizontal escondida em tela estreita
     (a causa raiz maior era o #box com largura fixa, corrigido acima) —
     mais 3 elementos que também empurravam a página pra os lados:
     1) a busca do header tinha largura fixa (280/320px);
     2) as prévias do mega-menu (só aparecem no :hover) ficam com
        display:flex !important por padrão — a correção de fato fica
        lá embaixo, perto da regra original (que faltava !important e
        por isso nunca vencia), pra ficar depois dela no arquivo;
     3) os blocos flex da home (carrossel de destaque etc.) não tinham
        min-width:0, então o texto internos impedia o encolhimento
        abaixo do tamanho "natural" do conteúdo. */
  #header_inner{flex-wrap:wrap; row-gap:10px;}
  #header_search, #header_search form{width:100%;}
  #header_search input[type=text]{width:100%;}
  #header_search input[type=text]:focus{width:100%;}

  #content_destaque_conteudo, #content_destaque_destaque,
  #content_entreterimento_conteudo, #content_entreterimento_anuncio,
  #content_esportes_conteudo, #content_esportes_comentados,
  #content_tecnologia_destaque, #content_tecnologia_conteudo,
  #content_vistos_conteudo, #content_vistos_anuncio{
    min-width:0;
  }

}

/* ---------- Sidebar esquerda (menu rápido por editoria) ---------- */
#sidebar_left h1{
  font:800 11.5px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase;
  letter-spacing:.6px !important; margin:0 0 8px !important; padding:9px 12px !important;
  color:#fff !important; border-radius:9px !important; display:block;
}
#sidebar_left h1.noticias{background:#C30 !important;}
#sidebar_left h1.esportes{background:#009933 !important;}
#sidebar_left h1.entreterimento{background:#f90 !important;}
#sidebar_left h1.tecnologia{background:#006699 !important;}
#sidebar_left h1.especial{background:#663399 !important;}

#sidebar_left ul{
  background:#FFF; border:1px solid #E4E9F0; border-radius:10px; padding:5px !important;
  margin:0 0 18px !important; width:auto !important; float:none !important;
  box-shadow:0 2px 8px rgba(10,30,60,.04);
}
#sidebar_left ul li{width:auto !important; float:none !important; border-bottom:1px solid #F0F3F8 !important; padding:7px 7px !important;}
#sidebar_left ul li:last-child{border-bottom:0 !important;}
#sidebar_left ul li:hover{background:#F5F7FA; border-radius:6px;}
#sidebar_left ul li a{color:#1A2B42 !important; font-size:13px !important; line-height:1.4;}

/* ---------- Sidebar direita — widgets em card ---------- */
#sidebar_newsletter, #sidebar_enquete, #sidebar_siganos, #sidebar_equipe, #sidebar_plantao, #sidebar_contadores{
  width:auto !important; float:none !important; margin:0 !important; padding:18px !important;
  border:1px solid #E4E9F0 !important; border-radius:14px !important; background:#FFF;
  box-shadow:0 2px 8px rgba(10,30,60,.04);
}

.sidebar_newsletter, .sidebar_enquete, .sidebar_siganos, .sidebar_plantao, .sidebar_contadores,
#sidebar_equipe h1{
  font:800 11px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase;
  letter-spacing:.6px !important; color:#0B1B33 !important; margin:0 0 14px !important; padding:0 !important;
}

#sidebar_newsletter input[type=text], #sidebar_newsletter input[type=email]{
  width:100% !important; border:1px solid #DCE2EA !important; border-radius:8px !important;
  padding:9px 10px !important; font:13px "Segoe UI", Arial, sans-serif !important; color:#1A2B42 !important;
  margin:0 0 8px !important; background:#FBFCFE !important;
}
#sidebar_newsletter .btn{
  width:100% !important; float:none !important; background:#0060BF !important; color:#FFF !important;
  border-radius:8px !important; padding:9px !important; font:700 12px "Segoe UI", Arial, sans-serif !important;
  border:0 !important; cursor:pointer;
}
#sidebar_newsletter .btn:hover{background:#0050A3 !important;}
#sidebar_newsletter label span{display:none;}

.newsletter_msg{
  font:600 12px "Segoe UI", Arial, sans-serif !important; border-radius:8px !important;
  padding:8px 10px !important; margin:0 0 10px !important; text-transform:none !important; letter-spacing:0 !important;
}
.newsletter_msg_ok{background:#EAFBEF !important; color:#116631 !important; border:1px solid #BEEBCB !important;}
.newsletter_msg_erro{background:#FFF3F0 !important; color:#A32E0F !important; border:1px solid #F3C6B9 !important;}

#sidebar_enquete span{font:13px "Segoe UI", Arial, sans-serif !important; color:#5C6B7D !important; text-align:left !important; display:block !important; margin-bottom:10px !important;}
#sidebar_enquete ul{margin:0 0 10px !important;}
#sidebar_enquete ul li{font:13px "Segoe UI", Arial, sans-serif !important; padding:4px 0 !important; color:#1A2B42 !important;}
#sidebar_enquete a{font:700 11.5px "Segoe UI", Arial, sans-serif !important; color:#0060BF !important; text-align:left !important; display:inline-block !important; margin:0 12px 0 0 !important;}
#sidebar_enquete a:hover{color:#003D7A !important;}

#sidebar_enquete ul li label{display:flex !important; align-items:center; gap:7px; cursor:pointer;}
#sidebar_enquete ul li input[type=radio]{margin:0 !important; accent-color:#0060BF;}

.enquete_botao_vote{
  width:100% !important; float:none !important; background:#0060BF !important; color:#FFF !important;
  border-radius:8px !important; padding:9px !important; font:700 12px "Segoe UI", Arial, sans-serif !important;
  border:0 !important; cursor:pointer; text-align:center !important; display:block !important;
  margin:4px 0 10px !important;
}
.enquete_botao_vote:hover{background:#0050A3 !important;}

.lista_enquete_resultado{margin:0 0 6px !important;}
.lista_enquete_resultado li{padding:0 0 10px !important;}

.enquete_opcao_nome{font:600 12.5px "Segoe UI", Arial, sans-serif !important; color:#1A2B42 !important; display:block !important; margin-bottom:4px !important;}

.enquete_barra{display:block; width:100%; height:7px; border-radius:99px; background:#EAF0F7; overflow:hidden;}
.enquete_barra_preenchida{display:block; height:100%; background:linear-gradient(90deg,#0060BF,#3E8EFF); border-radius:99px; transition:width .3s ease;}

.enquete_total{font:12px "Segoe UI", Arial, sans-serif !important; color:#8A94A3 !important; margin:2px 0 10px !important;}

#sidebar_siganos ul{display:flex !important; gap:8px !important; width:auto !important; float:none !important;}
#sidebar_siganos ul li{margin:0 !important; float:none !important; display:block !important;}
#sidebar_siganos img{width:30px !important; height:30px !important; border-radius:8px; transition:transform .15s ease;}
#sidebar_siganos img:hover{transform:translateY(-2px);}

#sidebar_equipe ul{list-style:none !important; margin:0 !important; padding:0 !important;}
#sidebar_equipe ul li{
  width:auto !important; float:none !important; display:flex !important; align-items:center; gap:10px;
  border-bottom:1px solid #F0F3F8 !important; padding:9px 0 !important; margin:0 !important;
}
#sidebar_equipe ul li:last-child{border-bottom:0 !important;}
#sidebar_equipe img{
  float:none !important; border:0 !important; border-radius:10px !important;
  width:38px !important; height:38px !important; object-fit:cover; margin:0 !important; padding:0 !important;
}
#sidebar_equipe span{font:700 12.5px "Segoe UI", Arial, sans-serif !important; color:#1A2B42 !important; display:block !important;}
#sidebar_equipe ul li a[href="#"]{font:400 11px "Segoe UI", Arial, sans-serif !important; color:#0060BF !important;}

#sidebar_plantao ul{list-style:none !important; margin:0 !important; padding:0 !important;}
#sidebar_plantao ul li{width:auto !important; float:none !important; border-bottom:1px solid #F0F3F8 !important; padding:8px 0 !important; margin:0 !important;}
#sidebar_plantao ul li:last-child{border-bottom:0 !important;}
#sidebar_plantao a{font:600 12.5px "Segoe UI", Arial, sans-serif !important; color:#1A2B42 !important; line-height:1.4;}
#sidebar_plantao a:hover{color:#0060BF !important;}

#sidebar_contadores ul{display:flex !important; flex-wrap:wrap !important; gap:8px !important; list-style:none !important; margin:0 !important; padding:0 !important;}
#sidebar_contadores ul li{width:auto !important; float:none !important; border:0 !important; margin:0 !important; padding:0 !important;}
#sidebar_contadores img{float:none !important; border:0 !important; border-radius:8px !important; width:36px !important; height:36px !important; object-fit:cover; margin:0 !important; padding:0 !important;}
#sidebar_contadores span{display:none !important;}

/* ---------- Blocos de conteúdo da home — cards + larguras fluidas ---------- */
#content_destaque, #content_entreterimento, #content_esportes, #content_tecnologia, #content_vistos{
  width:auto !important; float:none !important; border-bottom:0 !important; height:auto !important;
  background:#FFF; border:1px solid #E4E9F0; border-radius:14px; padding:20px !important;
  margin:0 0 20px !important; box-shadow:0 2px 8px rgba(10,30,60,.04);
  display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start;
}

/* O bloco em destaque (imagem grande à direita) tinha só 1 post e ficava
   bem mais baixo que a lista de 4 posts ao lado, sobrando uma faixa branca
   vazia embaixo. Agora a linha inteira estica os dois lados na mesma
   altura (só para este bloco — os outros mantêm align-items:flex-start,
   que já fazia sentido para eles) e a imagem cresce para preencher o
   espaço disponível, cortando com object-fit em vez de distorcer. */
#content_destaque{align-items:stretch;}

#content_destaque_conteudo{width:auto !important; float:none !important; margin:0 !important; flex:1 1 300px;}
#content_destaque_destaque{
  width:auto !important; float:none !important; height:auto !important; margin:0 !important; flex:1 1 260px;
  display:flex; flex-direction:column; position:relative;
}

/* Carrossel: cada slide ocupa a coluna inteira e se alterna via .is-active
   (JS em scripts/rotator_destaque.js, troca a cada 7s). */
#content_destaque_destaque .rotator_slide{display:none; flex-direction:column; flex:1; min-height:0;}
#content_destaque_destaque .rotator_slide.is-active{display:flex; animation:destaqueFade .5s ease;}
#content_destaque_destaque .rotator_slide img{
  float:none !important; width:100% !important; height:auto !important;
  flex:1 1 auto; min-height:320px; object-fit:cover; border-radius:10px;
}
#content_destaque_destaque .rotator_slide p{float:none !important; flex:0 0 auto;}
#content_destaque_destaque .rotator_slide span{flex:0 0 auto;}

@keyframes destaqueFade{ from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce){
  #content_destaque_destaque .rotator_slide.is-active{animation:none;}
}

#content_destaque_conteudo ul li{width:auto !important; float:none !important; display:flex !important; gap:12px; align-items:flex-start; padding:9px 4px !important;}
#content_destaque_conteudo ul li img{float:none !important; flex:0 0 112px; width:112px !important; height:72px !important;}

#content_entreterimento_conteudo{width:auto !important; float:none !important; flex:1 1 320px;}
#content_entreterimento_anuncio{width:190px !important; float:none !important; flex:0 0 190px;}

/* Agora mostra 2 posts (antes só 1, sobrando bastante espaço vazio ao lado
   do anúncio) — lista vira coluna flex em vez de depender de float, senão
   o segundo post quebraria estranho ao lado do primeiro. */
#content_entreterimento_conteudo ul{display:flex !important; flex-direction:column; gap:16px; float:none !important; width:auto !important;}
#content_entreterimento_conteudo ul li{display:flex !important; float:none !important; gap:12px; align-items:flex-start; width:auto !important;}
#content_entreterimento_conteudo ul li > a{float:none !important;}
#content_entreterimento_conteudo ul li > a:first-child{flex:0 0 auto;}
#content_entreterimento_conteudo ul li > a:last-child{flex:1 1 auto; min-width:0;}
#content_entreterimento_conteudo img{width:175px !important; height:115px !important; margin:0 !important;}

#content_esportes_conteudo{width:auto !important; float:none !important; flex:1 1 320px; padding:0 !important;}
#content_esportes_conteudo ul li{width:auto !important; float:none !important;}
#content_esportes_conteudo img{width:175px !important; height:140px !important;}
#content_esportes_comentados{width:190px !important; float:none !important; height:auto !important; flex:0 0 190px;}

#content_tecnologia_destaque{width:auto !important; float:none !important; height:auto !important; flex:1 1 280px; padding:0 !important;}
#content_tecnologia_destaque img{width:100% !important; height:auto !important; aspect-ratio:16/9;}
#content_tecnologia_conteudo{width:auto !important; float:none !important; height:auto !important; border-bottom:0 !important; flex:1 1 240px; padding:0 !important;}
#content_tecnologia_conteudo ul li{width:auto !important; float:none !important;}

#content_vistos{width:auto !important;}
#content_vistos_conteudo{width:auto !important; float:none !important; flex:1 1 260px;}
/* v2 — a pedido do Leonardo: painel mais largo (220px -> 300px) pra caber
   uma área de vídeo maior (era 110px de altura, agora 190px). */
#content_vistos_anuncio{width:300px !important; float:none !important; flex:0 0 300px;}

/* Bloco "/Videos" da home — mostra 1 único post com vídeo, sorteado
   aleatoriamente (getPostVideoAleatorio(), em inc/functions.php) a cada
   carregamento da home. Conforme novos posts com vídeo vão sendo
   publicados, eles entram no sorteio e passam a aparecer aqui de vez
   em quando também — não fica travado sempre nos mais recentes.
   Sem nenhum vídeo cadastrado ainda, cai no placeholder simples de antes. */
.video_home_destaque{display:block; text-decoration:none;}
.video_home_destaque .video_home_titulo{
  display:block; margin:0 0 8px; font:700 14px "Segoe UI", Arial, sans-serif;
  color:#1A2B42; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.video_home_destaque:hover .video_home_titulo{color:#0060BF;}
.video_home_thumb{
  position:relative; display:block; border-radius:10px; overflow:hidden;
  background:#0B1B33; box-shadow:0 2px 8px rgba(10,30,60,.1);
}
.video_home_thumb img{width:100%; height:190px; object-fit:cover; display:block; opacity:.88; transition:opacity .15s ease;}
.video_home_destaque:hover .video_home_thumb img{opacity:1;}
.video_home_play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:rgba(11,27,51,.72);
  color:#FFF; display:flex; align-items:center; justify-content:center;
  font-size:17px; padding-left:3px; pointer-events:none;
}

/* ---------- "/Descubra mais" — grade full-width abaixo do conteúdo
   principal, misturando posts com vídeo e com foto, sorteados a cada
   carregamento (listarPostsAleatorios(), em inc/functions.php). Ocupa
   as duas colunas do grid principal (conteúdo + sidebars). ---------- */
#content_descubra_mais{grid-column:1 / -1; grid-row:2; margin-top:4px;}
.descubra_mais_titulo{
  font:800 12.5px "Segoe UI", Arial, sans-serif; text-transform:uppercase;
  letter-spacing:.6px; color:#fff; background:#1A2B42;
  display:inline-block; padding:9px 16px; border-radius:9px; margin:0 0 16px;
}
.grid_descubra_mais{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:18px;
}
.grid_descubra_mais li{margin:0; padding:0;}
.descubra_mais_thumb{
  position:relative; display:block; border-radius:10px; overflow:hidden;
  background:#0B1B33; box-shadow:0 2px 8px rgba(10,30,60,.1); margin-bottom:8px;
}
.descubra_mais_thumb img{width:100%; height:135px; object-fit:cover; display:block; opacity:.9; transition:opacity .15s ease;}
.descubra_mais_thumb:hover img{opacity:1;}
.descubra_mais_thumb .video_home_play{width:38px; height:38px; font-size:14px;}
.descubra_mais_categoria{
  position:absolute; left:8px; bottom:8px; background:rgba(11,27,51,.78); color:#fff;
  font:700 10px "Segoe UI", Arial, sans-serif; text-transform:uppercase; letter-spacing:.4px;
  padding:3px 8px; border-radius:5px;
}
.descubra_mais_titulo_link{
  display:block; font:700 13px "Segoe UI", Arial, sans-serif; color:#1A2B42;
  text-decoration:none; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.descubra_mais_titulo_link:hover{color:#0060BF;}

@media (max-width:980px){
  #content_descubra_mais{grid-column:1; grid-row:auto;}
}

/* ---------- Hero slider — topo da home, acima do bloco /destaque, no
   estilo do antigo projeto WordPress do Leonardo: foto de fundo, etiqueta
   com a cor da própria categoria, título/descrição subindo em cada troca
   de slide, botão "Ler artigo" e setas + bolinhas no canto inferior
   direito. Diferente da referência (que cobria a tela toda), aqui a
   altura é proporcional ao site via clamp(), não 100vh. Rotação e cliques
   ficam em scripts/hero_slider.js; sem JS os slides continuam empilhados
   e o primeiro (.is-active) aparece normalmente. ---------- */
#hero_slider{
  position:relative;
  width:100%;
  height:clamp(220px, 30vw, 380px);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:2px;
  background:#0B1B33;
  box-shadow:0 4px 16px rgba(10,30,60,.18);
}
.hero_slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease;
  z-index:0;
}
.hero_slide.is-active{opacity:1; visibility:visible; z-index:1;}
.hero_slide_overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,10,20,.90) 0%, rgba(6,10,20,.58) 42%, rgba(6,10,20,.12) 72%, rgba(6,10,20,0) 100%);
}
.hero_slide_texto{position:relative; z-index:2; padding:22px 120px 24px 28px; max-width:640px;}
@keyframes heroTextoSobe{
  from{opacity:0; transform:translateY(22px);}
  to{opacity:1; transform:translateY(0);}
}
.hero_slide_badge{
  display:inline-block; font:700 11px "Segoe UI", Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.5px; color:#fff;
  padding:4px 13px; border-radius:20px; margin:0 0 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.hero_slide_titulo{margin:0 0 8px; font:700 22px/1.28 Georgia, "Times New Roman", serif;}
.hero_slide_titulo a{color:#fff; text-decoration:none; text-shadow:0 2px 8px rgba(0,0,0,.5);}
.hero_slide_titulo a:hover{text-decoration:underline;}
.hero_slide_resumo{
  margin:0 0 14px; font:400 13px/1.5 "Segoe UI", Arial, sans-serif;
  color:rgba(255,255,255,.88); overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.hero_slide_cta{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:#0B1B33; font:700 12px "Segoe UI", Arial, sans-serif;
  padding:8px 18px; border-radius:22px; text-decoration:none;
}
.hero_slide_cta:hover{background:#f0f0f0;}
/* entrada "subindo" — reinicia a cada troca de slide porque o JS remove e
   recoloca a classe is-active (ver hero_slider.js) */
.hero_slide.is-active .hero_slide_badge{animation:heroTextoSobe .55s ease both; animation-delay:.1s;}
.hero_slide.is-active .hero_slide_titulo{animation:heroTextoSobe .55s ease both; animation-delay:.22s;}
.hero_slide.is-active .hero_slide_resumo{animation:heroTextoSobe .55s ease both; animation-delay:.34s;}
.hero_slide.is-active .hero_slide_cta{animation:heroTextoSobe .55s ease both; animation-delay:.46s;}

.hero_slider_controles{
  position:absolute; z-index:3; right:16px; bottom:16px;
  display:flex; align-items:center; gap:14px;
}
.hero_slider_dots{display:flex; align-items:center; gap:7px;}
.hero_slider_dot{
  width:8px; height:8px; border-radius:50%; padding:0; border:0;
  background:rgba(255,255,255,.45); cursor:pointer;
}
.hero_slider_dot.is-active{background:#fff;}
.hero_slider_seta{
  width:32px; height:32px; border-radius:50%; padding:0;
  border:1px solid rgba(255,255,255,.5); background:rgba(10,16,30,.45);
  color:#fff; font-size:19px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.hero_slider_seta:hover{background:rgba(10,16,30,.8);}

@media (max-width:980px){
  #hero_slider{height:clamp(180px, 62vw, 300px); border-radius:10px;}
  .hero_slide_texto{padding:16px 20px 18px; max-width:100%;}
  .hero_slide_titulo{font-size:17px;}
  .hero_slide_resumo{font-size:12px; max-width:88%;}
  .hero_slider_controles{right:12px; bottom:12px; gap:10px;}
  .hero_slider_seta{width:28px; height:28px; font-size:16px;}
}

#content_destaque::after, #content_entreterimento::after, #content_esportes::after,
#content_tecnologia::after, #content_vistos::after,
#content_destaque_conteudo ul li::after{content:none;} /* flex não precisa de clearfix */

/* ---------- Redes sociais — ícones SVG modernos (Instagram/X/Facebook) ---------- */
/* Substituem o antigo carrossel jQuery (jCarouselLite), que quebrava com o
   grid novo e por isso o bloco aparecia em branco. Ícones agora são SVG
   inline, sem depender de imagens antigas nem de plugin de carrossel. */
.icone_social{
  display:flex !important; align-items:center; justify-content:center;
  width:34px !important; height:34px !important; border-radius:9px;
  background:#F0F3F8; color:#0B1B33; transition:all .18s ease;
}
.icone_instagram:hover{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); color:#fff; transform:translateY(-2px);}
.icone_x:hover{background:#000; color:#fff; transform:translateY(-2px);}
.icone_facebook:hover{background:#1877F2; color:#fff; transform:translateY(-2px);}

/* ---------- Usuário do mês — grade estática (era carrossel quebrado) ---------- */
#sidebar_contadores ul{display:flex !important; flex-wrap:wrap !important; gap:10px !important; list-style:none !important; margin:0 !important; padding:0 !important; width:auto !important;}
#sidebar_contadores ul li{width:auto !important; float:none !important; border:0 !important; margin:0 !important; padding:0 !important;}
#sidebar_contadores img{float:none !important; border:0 !important; border-radius:10px !important; width:42px !important; height:42px !important; object-fit:cover; margin:0 !important; padding:0 !important;}

/* ============================================================
   MENU PRINCIPAL — v3, a pedido do Leonardo: os 3 botões utilitários
   (Página Inicial/Fale Conosco/Sobre Nós) e as 4 editorias agora vivem
   num único <ul class="menu"> (era dois <ul> separados, um "cartão"
   branco flutuando ao lado do outro — destoava). Sendo <li> irmãos
   dentro do MESMO menu, herdam a mesma altura/borda azul (definidas
   em ".menu li" logo abaixo) e formam uma barra contínua, sem vão
   entre os dois grupos. Os utilitários ganham a classe
   ".menu_item_utilitario" para um estilo PRÓPRIO (fundo azul-marinho
   sólido, ícone, texto normal em vez de maiúsculo) — as editorias à
   direita continuam exatamente como estavam (gradiente, preenchimento
   sólido no hover, flip 3D do submenu, cores por editoria).
   ============================================================ */

/* -- Editorias (Notícias/Esportes/...): mesmo layout e efeitos do site
      original (float, gradiente, preenchimento no hover, flip 3D do
      submenu) — só troca as cores, igual antes. -- */
.menu li{
  background:-moz-linear-gradient(#EAF0F7,#FFF) !important;
  background:-webkit-linear-gradient(#EAF0F7,#FFF) !important;
  background:linear-gradient(#EAF0F7,#FFF) !important;
  border-bottom:2px solid #0060BF !important;
  border-top:2px solid #0060BF !important;
}
.menu li:hover{
  background-color:#0060BF !important;
  background:-moz-linear-gradient(#0060BF,#0060BF) !important;
  background:-webkit-linear-gradient(#0060BF,#0060BF) !important;
  background:linear-gradient(#0060BF,#0060BF) !important;
  border-bottom:2px solid #0060BF !important;
  border-top:2px solid #0060BF !important;
}

/* -- 3 botões utilitários: estilo próprio (fundo sólido escuro, ícone,
      texto normal) — mesma altura/borda da barra (herdada de ".menu li"
      acima), só o preenchimento e a tipografia mudam. -- */
.menu li.menu_item_utilitario{
  background:#0B1B33 !important;
  min-width:0 !important;
}
.menu li.menu_item_utilitario:hover{
  background:#0060BF !important;
}
.menu li.menu_item_utilitario a{
  color:#FFF !important; text-transform:none !important; text-align:left;
  font:600 12.5px "Segoe UI", Arial, sans-serif !important; letter-spacing:.2px;
  line-height:1.2 !important; padding:0 13px !important; border-left:0 !important;
  display:flex !important; align-items:center; gap:5px; height:54px; white-space:nowrap;
}
.menu li.menu_item_utilitario a:hover{color:#FFF !important;}
.menu li.menu_item_utilitario .icone_home{flex:0 0 auto; opacity:.9;}

/* ============================================================
   MEGA-MENU — card de prévia do último post por editoria
   O posicionamento/flip 3D do dropdown em si (.submenu) já existe
   e funciona via css2/main.css (carregado depois deste arquivo) —
   isso NÃO é recriado aqui, só complementado. O card de prévia é
   um elemento novo (.submenu_preview), irmão do <ul class="submenu">
   dentro do mesmo <li>, posicionado de forma independente logo à
   direita da lista de subitens, aparecendo junto no mesmo :hover.

   Especificidade: ".submenu_preview" sozinho perde pra ".menu a"
   (classe+tag, definida em css2/main.css), que aplicaria maiúsculas,
   fonte Lucida Console e padding errados no card (ele também é um
   <a>, descendente de .menu). Por isso as regras abaixo usam
   ".menu .submenu_preview" (2 classes) pra vencer e resetam
   explicitamente o que ".menu a" empurra por herança/cascata.
   ============================================================ */

/* Painel do submenu (dropdown) não tinha fundo nenhum no site original — ficava
   transparente. Só recebeu cor de fundo + sombra leve para ficar legível; a
   animação de flip 3D, os delays por item e a fonte continuam intactos
   (definidos em css2/main.css). */
.submenu{background:#FFF !important; box-shadow:0 10px 24px rgba(10,30,60,.12) !important;}

.menu > li{overflow:visible;}

/* Última editoria (Tecnologia): o card abriria pra fora da largura do
   #header_menu (1160px). Nesse item o dropdown + card abrem para a
   esquerda em vez de para a direita. */
.menu > li:last-child .submenu{left:auto !important; right:0 !important;}
.menu > li:last-child .submenu_preview{left:auto; right:166px;}

.menu .submenu_preview{
  position:absolute !important; left:166px; top:100%; z-index:0;
  /* width:0 (não 250px) enquanto fechado — achado ao esticar o menu pra
     alinhar com o slider: mesmo com max-height:0/opacity:0, um
     position:absolute com width:250px explícito continua "existindo"
     geometricamente (max-height:0 só zera a altura, não a largura), e
     em telas médias esse retângulo de 250px sai da viewport e força
     rolagem horizontal mesmo sem ninguém passar o mouse. width só vira
     250px de fato quando o item é ativado (regras de :hover/:focus
     abaixo), então fechado ele não ocupa espaço nenhum. */
  width:0; max-height:0; opacity:0; overflow:hidden;
  padding:16px !important; border-left:1px solid #E4E9F0;
  background:#FFF; box-shadow:0 10px 24px rgba(10,30,60,.12);
  display:flex !important; flex-direction:column; align-items:stretch; gap:8px;
  text-decoration:none; text-transform:none !important; white-space:normal !important;
  font-family:"Segoe UI", Arial, sans-serif;
  transition:opacity .3s ease, max-height .3s ease;
}
.menu > li:hover > .submenu_preview, .menu > li:focus > .submenu_preview{
  width:250px; max-height:2000px; opacity:1; z-index:10;
}
.menu .submenu_preview img{width:100%; height:110px; object-fit:cover; border-radius:8px; border:0; padding:0;}
.menu .submenu_preview_label{
  font:800 10px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase;
  letter-spacing:.5px; color:#0060BF;
}
.menu .submenu_preview_title{font:700 13px "Segoe UI", Arial, sans-serif !important; color:#0B1B33; line-height:1.35; text-transform:none !important;}
.menu .submenu_preview_resumo{font:12px "Segoe UI", Arial, sans-serif !important; color:#5C6B7D; line-height:1.4; text-transform:none !important;}
.menu .submenu_preview:hover .submenu_preview_title{color:#0060BF;}
.menu .submenu_preview_vazio{font:12.5px "Segoe UI", Arial, sans-serif !important; color:#8A96A6; margin-top:4px; text-transform:none !important;}

/* ============================================================
   MEGA-MENU — prévia INDIVIDUAL por subcategoria (Brasil, Mundo,
   Futebol, Cinema...), a pedido do Leonardo. Cada <li> do submenu
   (.submenu_item_com_previa) ganha sua própria .submenu_preview,
   aninhada dentro dele, que aparece só quando o mouse passa
   especificamente naquele item — substituindo a prévia padrão da
   editoria (que continua existindo e aparecendo quando o mouse
   está sobre o menu mas ainda não focou num item específico).

   Regra acima ".menu > li:hover > .submenu_preview" agora usa o
   combinador ">" pra só acender a prévia padrão (filha direta do
   <li> de primeiro nível), nunca as prévias aninhadas dentro dos
   itens do submenu — essas são controladas pelas regras abaixo.
   ============================================================ */
.submenu_item_com_previa{position:relative; overflow:visible;}

/* Prévia aninhada: abre "pra fora", encostada na lateral direita do
   próprio item do submenu (não mais ancorada no <li> de primeiro
   nível), então acompanha verticalmente a linha que está com o
   mouse em cima. Especificidade (3 classes) vence a regra base
   ".menu .submenu_preview" sem precisar duplicar !important. */
.menu .submenu_item_com_previa .submenu_preview{
  left:100%; right:auto; top:0; margin-left:1px;
}
.submenu_item_com_previa:hover .submenu_preview,
.submenu_item_com_previa:focus-within .submenu_preview{
  width:250px !important; max-height:2000px !important; opacity:1 !important; z-index:30;
}
/* Enquanto uma prévia de subcategoria está ativa, esconde a prévia
   padrão da editoria (mesma editoria, mesmo <li> pai) pra não
   sobrepor duas prévias na tela ao mesmo tempo. */
.menu > li:has(.submenu_item_com_previa:hover) > .submenu_preview,
.menu > li:has(.submenu_item_com_previa:focus-within) > .submenu_preview{
  opacity:0 !important; max-height:0 !important;
}
/* Última editoria (Tecnologia): assim como a prévia padrão, as
   prévias de subcategoria também abrem pra esquerda em vez de
   pra direita, senão vazam pra fora da largura do #header_menu. */
.menu > li:last-child .submenu_item_com_previa .submenu_preview{
  left:auto; right:100%; margin-left:0; margin-right:1px;
}

/* Clearfix do menu: os <li> são float:left (css2/main.css) e ".menu" tem
   altura FIXA de 58px pensada pra 1 linha só. Com 7 <li> (3 utilitários +
   4 editorias) nem sempre cabendo numa linha só em telas menores, os que
   quebram pra 2ª linha "vazavam" pra fora da caixa (que não cresce, por
   ter altura fixa) e ficavam sobrepostos ao conteúdo logo abaixo. O
   clearfix por si só não basta — é a altura fixa que precisa virar
   automática sempre que os 7 itens puderem quebrar linha.
   Achado ao testar o slider novo em 1024px: os 7 itens só cabem numa
   linha só a partir de ~1300px (ver comentário da v3 do menu mais acima);
   entre 981px e ~1299px eles já quebram pra 2ª linha, então a altura
   automática precisa valer nessa faixa também, não só no mobile
   (abaixo de 980px). */
.menu::after{content:""; display:table; clear:both;}
.menu{height:auto !important;}

/* Vão em branco à direita do menu (a partir de ~1300px, faixa em que os
   7 itens já cabem numa linha só): ".menu" é filho único de
   "#header_menu" (display:flex), mas sem largura própria ele só ocupa o
   espaço do seu conteúdo (998px, a soma dos <li> flutuantes) — sobrava
   um vão sem cor até a borda do header (1128px+), deixando a barra
   "cortada" antes do slider/conteúdo abaixo, que ocupam a largura cheia.
   Solução: só nessa faixa (onde não há quebra de linha, então dá pra
   usar flex com segurança), vira ".menu" num flex container e deixa as
   4 editorias (não os 3 botões utilitários, que devem manter a largura
   pelo conteúdo) crescerem igualmente pra preencher o espaço que sobra
   — a barra colorida passa a ir de ponta a ponta, igual ao slider. */
@media (min-width:1300px){
  .menu{display:flex; width:100%;}
  .menu > li{float:none;}
  .menu > li:not(.menu_item_utilitario){flex:1 1 auto;}
}

@media (max-width:980px){

  /* !important: a regra base ".menu .submenu_preview" (acima) também usa
     display:flex !important, então sem !important aqui esse "display:none"
     nunca vencia — a prévia ficava "invisível" (opacity:0, max-height:0)
     mas ainda ocupando 250px de largura de verdade, empurrando a página
     inteira pros lados em tela estreita (rolagem horizontal fantasma). */
  .menu .submenu_preview{display:none !important;}
}

/* ============================================================
   BLOCO "/ÚLTIMAS NOTÍCIAS" — efeito sanfona (accordion) logo
   abaixo do destaque principal da home.
   ============================================================ */
#content_accordion_noticias{
  background:#FFF; border:1px solid #E4E9F0; border-radius:14px;
  padding:20px; margin:0 0 20px; box-shadow:0 2px 8px rgba(10,30,60,.04);
}
.accordion_titulo{
  font:800 11.5px "Segoe UI", Arial, sans-serif !important; text-transform:uppercase;
  letter-spacing:.6px !important; color:#fff !important; background:#C30;
  border-radius:9px; display:inline-block; padding:9px 12px; margin:0 0 14px !important;
}
.accordion_item{border-bottom:1px solid #F0F3F8;}
.accordion_item:last-child{border-bottom:0;}
.accordion_header{
  width:100%; display:flex; align-items:center; gap:12px; background:none; border:0;
  padding:13px 4px; cursor:pointer; text-align:left;
  font:600 14.5px "Segoe UI", Arial, sans-serif; color:#1A2B42;
}
.accordion_header_titulo{flex:1 1 auto;}
.accordion_header_data{flex:0 0 auto; font:12px "Segoe UI", Arial, sans-serif; color:#8A96A6;}
.accordion_icone{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#F0F3F8;
  display:flex; align-items:center; justify-content:center; font:700 15px Arial, sans-serif;
  color:#0060BF; transition:transform .25s ease;
}
.accordion_item.is-open .accordion_header{color:#0060BF;}
.accordion_item.is-open .accordion_icone{transform:rotate(45deg); background:#0060BF; color:#FFF;}
.accordion_painel{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.accordion_item.is-open .accordion_painel{max-height:600px;}
.accordion_painel_inner{display:flex; gap:16px; padding:2px 4px 18px;}
.accordion_painel_inner img{width:180px; height:112px; object-fit:cover; border-radius:8px; flex:0 0 180px;}
.accordion_painel_inner p{margin:0; font:13.5px "Segoe UI", Arial, sans-serif; color:#3C4A5E; line-height:1.55;}
.accordion_painel_inner a{color:#0060BF; text-decoration:none; font-weight:700;}
.accordion_painel_inner a:hover{text-decoration:underline;}
.accordion_vazio{font:13px "Segoe UI", Arial, sans-serif; color:#8A96A6; padding:8px 4px;}

@media (max-width:640px){
  .accordion_painel_inner{flex-direction:column;}
  .accordion_painel_inner img{width:100%; height:160px; flex:0 0 auto;}
  .accordion_header_data{display:none;}
}