:root {
  --front-space-xxll: 60px;}
.separator-divider { border: none; height: 1px; margin: var(--front-space-xxll) auto; display: block; background: var(--white); }
/* Espaço entre header e imagem destaque */
.hero_post {
  margin-top: 0; margin-bottom: var(--space-xxl); }
/* Títulos */
.titulo-publicacoes, .titulo-categoria {
  font-size: var(--font-size-h2); font-weight: var(--semibold);
  margin: var(--front-space-xxll) 0 var(--space-xxl) 0;}
.titulo-publicacoes { text-align: center; }
.titulo-categoria { text-align: left; }
/* Grid de posts */
.grid_ultimos_posts, .grid-posts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--space-md) !important; margin: var(--space-md) 0;}
.grid-posts .grid-item img { width: 100%; height: auto; border-radius: var(--radius);object-fit: cover;}
.grid-posts .grid-item h3 { margin: 0 0 4px;}
.grid-posts .grid-item h3 a { color: var(--color-text); font-size: var(--font-sm); font-weight: var(--semibold);}
.grid-posts .grid-item h3 a:hover { color: var(--color-primary);}
.grid-posts .grid-item .data-post { font-size: var(--font-xs); color: var(--muted);}
@media (min-width: 1024px) {.grid-posts {grid-template-columns: repeat(3,1fr);} }
@media (max-width: 1023px) { .grid-posts .grid-item:nth-child(n+2) { display: none !important; } }
/* Hero */
.hero-post { background: center/cover no-repeat; color: var(--white); width: 100%; max-width: 1200px; height: 630px; margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; padding: 0 var(--space-md); }
.hero-post::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.65); z-index: 1; transition: background .3s;}
.hero-post:hover::before { background: rgba(0,0,0,0.3);}
.hero-content { position: relative; z-index: 2; padding: var(--space-md); max-width: 700px; width: 100%; margin-top: 350px; }
.hero-category { display: inline-block; background: var(--color-primary); color: var(--white); font-size: var(--font-xs); padding: 6px 12px; border-radius: var(--radius); margin-bottom: var(--space-sm); font-weight: var(--semibold);}
.hero-meta { font-size: var(--font-xs); color: var(--white); margin-bottom: var(--space-sm); font-weight: var(--semibold);}
.hero-titulo { margin: var(--space-sm) 0 var(--space-xxl); color: var(--white); font-weight: var(--semibold);}
@media (max-width: 1024px) { .hero-post { height: auto; aspect-ratio: 1200/630; padding: var(--space-xxl) var(--space-sm); } }
/* Botão padrão */
.u-btn { background: var(--color-primary); color: var(--white); padding: var(--space-sm) var(--space-xxl); border-radius: var(--radius); display: inline-block; font-weight: var(--semibold); transition: background .3s; text-align: center; text-decoration: none; }
.u-btn:hover { background: var(--color-text); color: var(--white); }
.u-center { text-align: center; margin-top: var(--space-sm); }
/* MAIS LIDOS */
.mais-lidos-wrapper { max-width: 100%; margin: var(--space-sm) 0 0 0; padding: 0; }
.mais-lidos-titulo { font-size: 1.5rem; margin: var(--space-md); font-weight: var(--semibold); color: var(--white);}
.mais-lidos-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-md);}
.mais-lidos-destaque, .mais-lidos-sub { background-size: cover; background-position: center; position: relative; min-height: 300px; display: flex; align-items: flex-end; justify-content: flex-start; color: var(--white); padding: var(--space-md);}
.mais-lidos-destaque::before, .mais-lidos-sub::before { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.5); transition: background-color .3s; z-index: 1;}
.mais-lidos-destaque:hover::before, .mais-lidos-sub:hover::before { background-color: rgba(0,0,0,0.2);}
.mais-lidos-content { position: relative; z-index: 2;}
.mais-lidos-content h3, .mais-lidos-content h4 { margin: var(--space-sm) 0 10px 0; font-weight: var(--semibold); color: var(--white);}
.mais-lidos-content a { background: var(--color-primary); color: var(--white); padding: 8px 16px; font-size: var(--font-tm); font-weight: bold; border-radius: var(--radius); display: inline-block; transition: background .3s;}
.mais-lidos-content a:hover { background: var(--color-text);}
.mais-lidos-lateral { display: flex; flex-direction: column; gap: var(--space-md);}
@media (max-width: 768px) { .mais-lidos-grid { grid-template-columns: 1fr; } }