/* ========== ARTIGO SINGLE ========== */
.article-header { padding: calc(70px + var(--spacing-xl)) 0 var(--spacing-xl); background-color: var(--color-white); text-align: center; }
.article-container { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-md); }

.article-meta { display: flex; justify-content: center; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); color: var(--color-text-secondary); font-size: 0.9rem; flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: 0.5rem; }

.article-title { font-size: 2rem; margin-bottom: var(--spacing-lg); max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.2; }
@media (min-width: 768px) { .article-title { font-size: 2.8rem; } }

.article-featured-image { width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--spacing-2xl); box-shadow: var(--shadow-md); }

.article-body { font-size: 1.125rem; color: var(--color-text-primary); line-height: 1.8; }
.article-body p { margin-bottom: var(--spacing-lg); }
.article-body h2 { font-size: 1.8rem; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); color: var(--color-text-primary); }
.article-body h3 { font-size: 1.4rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); color: var(--color-primary); }
.article-body ul, .article-body ol { margin-bottom: var(--spacing-lg); padding-left: var(--spacing-lg); }
.article-body li { margin-bottom: 0.5rem; }
.article-body blockquote { border-left: 4px solid var(--color-primary); margin: var(--spacing-xl) 0; font-style: italic; color: var(--color-text-secondary); font-size: 1.25rem; background-color: var(--color-bg-light); padding: var(--spacing-lg); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-body img { border-radius: var(--radius-md); margin: var(--spacing-lg) 0; display: block; margin-left: auto; margin-right: auto; max-width: 100%; }

.img-caption { text-align: center; font-size: 0.9rem; color: var(--color-text-secondary); margin-top: -1rem; margin-bottom: var(--spacing-lg); font-style: italic; }

.share-section { margin-top: var(--spacing-3xl); padding-top: var(--spacing-xl); border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md); }
.share-title { font-weight: 600; color: var(--color-text-secondary); }
.share-links { display: flex; gap: var(--spacing-sm); }
.share-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-bg-light); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; transition: var(--transition); font-size: 1.2rem; }
.share-btn:hover { background-color: var(--color-primary); color: var(--color-white); }

/* Reuse News Grid for Related Posts */
.related-posts { padding: var(--spacing-3xl) 0; background-color: var(--color-bg-light); margin-top: var(--spacing-3xl); }
/* (Nota: news-card styles already in noticias.css or can be duplicated/imported here if preferred) */