) pra linkar a notícia real —
display:block acima evita o comportamento inline padrão de
. A
imagem real (picture/img) entra absoluta, cobrindo o gradiente. */
.homepage2-destaques-noticia-card-img picture{
position:absolute;
inset:0;
}
.homepage2-destaques-noticia-card-img img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.homepage2-destaques-noticia-card-data{
position:absolute;
left:10px;
bottom:10px;
background:rgba(8,44,68,0.85);
color:#ffffff;
font-size:16px;
font-weight:700;
padding:4px 10px;
border-radius:8px;
display:flex;
flex-direction:column;
line-height:1.3;
}
.homepage2-destaques-noticia-card-data span{
font-weight:400;
font-size:16px;
opacity:0.85;
}
.homepage2-destaques-noticia-card h4{
margin:0 0 8px;
/* 2026-09-11 (pedido do Luciano, print temp/240.jpg): mesmo ajuste
do h3 do Destaque logo acima — Medium (500) em vez do ExtraBold
(800) do Hero, sem tracking, tamanho maior (era 16px, "muito
pequeno") e CAIXA ALTA via CSS pra padronizar os títulos
digitados sem critério pelo Enockes. */
font-family:var(--homepage2-base-font-titulo);
font-size:20px;
line-height:1.3;
letter-spacing:normal;
text-transform:uppercase;
color:#1B506F; /* era var(--homepage2-base-navy) — 2026-09-11 (pedido do
Luciano): título de notícia estava "preto" (navy bem escuro),
padronizado pro "Azul Staecnon" (#1B506F) em TODOS os lugares onde
aparece título de notícia (homepage, notícia, relacionadas, listagem). */
font-weight:600;
}
html.homepage2-base-dark .homepage2-destaques-noticia-card h4{
color:var(--homepage2-base-text);
}
.homepage2-destaques-noticia-card h4 a{
color:inherit;
text-decoration:none;
}
.homepage2-destaques-noticia-card p{
margin:0 0 12px;
font-size:16px;
line-height:1.5;
color:var(--homepage2-base-text-soft);
flex-grow:1;
}
.homepage2-destaques-leia-mais{
display:inline-flex;
align-items:center;
gap:6px;
font-size:16px;
font-weight:700;
color:var(--homepage2-base-blue);
text-decoration:none;
}
.homepage2-destaques-leia-mais:hover{
color:var(--homepage2-base-navy);
}
html.homepage2-base-dark .homepage2-destaques-ver-todas:hover,
html.homepage2-base-dark .homepage2-destaques-leia-mais:hover{
color:var(--homepage2-base-text);
}
@media(max-width:991px){
.homepage2-destaques-destaque-principal{
grid-template-columns:1fr;
}
.homepage2-destaques-destaque-principal-img{
min-height:200px;
}
.homepage2-destaques-duplo{
grid-template-columns:1fr;
}
.homepage2-destaques-grid{
grid-template-columns:repeat(2, 1fr);
}
}
/* 2026-10-20 (pedido do Luciano): no celular as 4 últimas notícias viram
carrossel (deslize lateral com encaixe + bolinhas). Só ≤600px; no tablet
e desktop a grade continua igual. Bolinhas criadas por
assets/js/homepage2-noticias-carrossel.js. */
.homepage2-destaques-carrossel-dots{
display:none;
}
.homepage2-destaques-ver-todas-mobile,
.homepage2-destaques-ultimas-titulo{
display:none;
}
@media(max-width:600px){
.homepage2-destaques-ultimas-titulo{
display:block;
margin:32px 0 16px;
font-family:var(--homepage2-base-font-titulo);
font-size:20px;
line-height:1.3;
font-weight:700;
color:#1B506F;
}
html.homepage2-base-dark .homepage2-destaques-ultimas-titulo{
color:var(--homepage2-base-text);
}
/* "Ver todas as notícias" desce pra depois do carrossel (2026-10-20) */
.homepage2-destaques-ver-todas-desktop{
display:none;
}
.homepage2-destaques-ver-todas-mobile{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin:16px 0 8px;
}
.homepage2-destaques-grid{
display:flex;
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.homepage2-destaques-grid::-webkit-scrollbar{
display:none;
}
.homepage2-destaques-noticia-card{
flex:0 0 100%;
scroll-snap-align:start;
}
/* imagens reais das notícias são ~3:2 (941x630); altura fixa de 150px
deixava o corte muito achatado no celular */
.homepage2-destaques-noticia-card-img{
height:auto;
aspect-ratio:3/2;
}
.homepage2-destaques-carrossel-dots{
display:flex;
justify-content:center;
gap:8px;
margin:20px 0 8px;
}
.homepage2-destaques-carrossel-dots button{
width:10px;
height:10px;
padding:0;
border:0;
border-radius:50%;
background:var(--homepage2-base-text-soft);
opacity:0.35;
cursor:pointer;
}
.homepage2-destaques-carrossel-dots{
align-items:center;
gap:14px;
}
.homepage2-destaques-carrossel-dots button.homepage2-destaques-carrossel-seta{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background:var(--homepage2-base-blue);
color:#ffffff;
opacity:1;
}
.homepage2-destaques-carrossel-dots button.ativo{
background:var(--homepage2-base-blue);
opacity:1;
}
}