/* Conteúdo Principal */

#main-content{
max-width:1200px;
margin:20px auto 40px;
padding:0 20px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}


/* cards */

.noticia-card{
position:relative;
cursor:pointer !important;

background:var(--cor-superficie);

border-radius:12px;
overflow:hidden;

box-shadow:var(--sombra-leve);

transition:transform 0.2s ease;
}

.noticia-card:hover{
transform:translateY(-5px);
box-shadow:var(--sombra-media);
}


/* card destaque */

.noticia-card2{
cursor:pointer !important;

background:var(--cor-superficie);

border-radius:12px;
overflow:hidden;

box-shadow:var(--sombra-leve);

transition:transform 0.2s ease;

text-align:center;

position:relative;

padding-bottom:20%;

grid-column:1 / -1;

max-width:100%;
width:100%;
height:auto;
}

.noticia-card2 img{
width:100%;
height:auto;
display:block;
}

.noticia-card2:hover{
transform:translateY(-5px);
box-shadow:var(--sombra-media);
}


/* categoria */

.noticia-categoria{

position:absolute !important;
top:10px !important;
left:10px !important;

color:var(--texto-claro);

padding:6px 15px;

border-radius:4px;

font-size:0.75em;
font-weight:700;

text-transform:uppercase;
letter-spacing:0.8px;

z-index:99999;

backdrop-filter:blur(2px);

background-color:rgba(0,0,0,0.6);

border:1px solid rgba(255,255,255,0.2);

max-width:30px;
width:30px;

overflow:hidden;
white-space:nowrap;

transition:0.3s;

padding-left:10px;

color:transparent;
}

.noticia-categoria::before{

content:"\21E8";

position:absolute;

left:0;
top:50%;

padding-left:5px;

transform:translateY(-50%);

color:var(--texto-claro);

font-size:1.2em;

transition:opacity 0.3s;

z-index:1;
}

.noticia-categoria:hover{

width:auto;
max-width:1000px;

color:var(--texto-claro);

z-index:2;
}


/* imagens */

.noticia-imagem{
width:100%;
height:200px;
object-fit:cover;
}

.noticia-imagem2{
width:100%;
height:65%;

position:relative;

border-radius:2%;

object-fit:cover;

padding-bottom:2%;
}


/* conteúdo */

.noticia-conteudo{
padding:20px;
}


/* título */

.noticia-titulo{
font-size:1.1rem;
margin-bottom:10px;

color:var(--cor-primaria);
}


/* fonte */

.noticia-fonte{

display:flex;
align-items:center;

gap:8px;

color:var(--texto-secundario);

font-size:0.9rem;

margin-bottom:12px;
}

.noticia-fonte img{
width:16px;
height:16px;
}


/* descrição */

.noticia-descricao{

color:var(--texto-principal);

font-size:0.95rem;

line-height:1.4;
}
.noticia-categoria:hover::before {
  opacity: 0; /* Esconde suavemente a seta */
  visibility: hidden; /* Remove do fluxo de layout */
}

/* Cores especficas para cada categoria */
.categoria-politicainternacional {
    background-color: rgba(231, 76, 60, 0.9); /* Vermelho vibrante */
}

.categoria-economia {
    background-color: rgba(46, 204, 113, 0.9); /* Verde */
}
.categoria-religiao {
    background-color: rgba(40, 244, 135, 0.8); /* Verde dif */
}

.categoria-tecnologia {
    background-color: rgba(52, 152, 219, 0.9); /* Azul */
}

.categoria-entretenimento {
    background-color: rgba(155, 89, 182, 0.9); /* Roxo */
}
.categoria-politicanacional {
    background-color: rgba(155, 189, 182, 0.4); /* Roxo outra */
}

.categoria-esportes {
    background-color: rgba(241, 196, 15, 0.9); /* Amarelo */
}
.categoria-jogos {
    background-color: rgba(250, 120, 10, 0.8); /* Laranja */
}

.categoria-ciencia {
    background-color: rgba(155, 89, 182, 0.9); /* Roxo */
}
.categoria-noticias {
    background-color: rgba(52, 152, 239, 0.7); /* Azul */
}
.categoria-alimentacao {
    background-color: rgba(241, 190, 25, 0.7); /* Amarelo */
}
.categoria-acidentesdesastres {
    background-color: rgba(231, 76, 80, 0.7); /* Vermelho vibrante */
}

.categoria-segurancapublica {
    background-color: rgba(0, 0, 60, 0.7); /* preto */
}
.conteudoContainer{
    /*display:none;*/
    position:relative;

    max-width:800px;
    margin:20px auto;
    padding:20px;

    background:var(--cor-superficie);
    color:var(--texto-principal);

    border:1px solid var(--borda-clara);
    border-radius:8px;

    box-shadow:var(--sombra-leve);

    max-height:80vh;
    overflow-y:auto;
}

.conteudoContainer p{
    text-align:justify;
    text-justify:inter-word;

    hyphens:auto;

    line-height:1.6;

    margin:0 0 1.2em 0;
    text-indent:1.2em;

    color:var(--texto-secundario);
}
/* controles */

.controls{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
padding:10px;

font-family:Inter,system-ui,Arial,sans-serif;

background:var(--cor-superficie);
border-top:1px solid var(--borda-clara);
box-shadow:var(--sombra-leve);
}


/* botão de ícone */

.btn2-icon{

display:flex;
align-items:center;
justify-content:center;

width:36px;
height:36px;

border:none;
cursor:pointer;

background:var(--aba-fundo);
color:var(--texto-principal);

border-radius:6px;

border:1px solid var(--borda-clara);

transition:all .2s ease;

unicode-bidi:isolate;

}


/* hover */

.btn2-icon:hover{

background:var(--cor-primaria);
color:var(--cor-branco);

border-color:var(--cor-primaria-hover);

box-shadow:var(--sombra-leve);

}


/* clique */

.btn2-icon:active{

background:var(--cor-primaria-hover);
transform:scale(0.95);

}


/* svg */

.btn2-icon svg{

width:22px;
height:22px;
fill:currentColor;

}