.blog-header { background: var(--oscuro); padding: 10rem 3rem 6rem; text-align: center; position: relative; overflow: hidden }
.blog-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(74,103,65,.12) 0%, transparent 65%); pointer-events: none }
.blog-header-inner { position: relative; max-width: 640px; margin: 0 auto }
.blog-header .section-tag { color: var(--salvia) }
.blog-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; color: var(--beige); margin: 1rem 0; line-height: 1.1 }
.blog-header h1 em { color: var(--salvia); font-style: italic }
.blog-header p { font-size: 1.05rem; line-height: 1.8; color: rgba(232,228,208,.6); max-width: 520px; margin: 0 auto }

.blog-listing { background: var(--beige); padding: 5rem 3rem }

.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: 1100px; margin: 0 auto }

.post-card { background: var(--blanco); border-radius: 20px; overflow: hidden; border: 1px solid rgba(74,103,65,.12); text-decoration: none; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; animation: fadeUp .6s ease both }
.post-card:nth-child(2) { animation-delay: .1s }
.post-card:nth-child(3) { animation-delay: .2s }
.post-card:hover { box-shadow: 0 16px 40px rgba(45,74,39,.12); transform: translateY(-5px) }

.post-card-img { height: 180px; overflow: hidden; background: linear-gradient(135deg, #d4e8cf, #b8d4b2); display: flex; align-items: center; justify-content: center }
.post-card-img img { width: 100%; height: 100%; object-fit: cover }
.post-card-img-placeholder svg { width: 80px; opacity: .5 }

.post-card-body { padding: 1.8rem; flex: 1; display: flex; flex-direction: column }
.post-card-meta { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem }
.post-card-date { font-family: 'DM Mono', monospace; font-size: .68rem; color: var(--muted); letter-spacing: .04em }
.post-card-tag { font-family: 'DM Mono', monospace; font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 100px; background: var(--bosque); color: var(--beige) }

.post-card-body h2 { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--oscuro); line-height: 1.35; margin-bottom: .6rem }
.post-card-body p { font-size: .875rem; line-height: 1.65; color: var(--muted); flex: 1 }
.post-card-link { display: inline-block; margin-top: 1.2rem; font-size: .85rem; font-weight: 600; color: var(--bosque); letter-spacing: .02em }

.blog-empty { text-align: center; padding: 4rem; color: var(--muted); font-size: 1rem; max-width: 400px; margin: 0 auto }

@media (max-width: 1024px) { .posts-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px) { .posts-grid { grid-template-columns: 1fr } .blog-listing { padding: 4rem 1.5rem } .blog-header { padding: 8rem 1.5rem 4rem } }