/* ==========================================================
   GRUPO ON TIME — BLOG (estilos propios)
   Integrado al tema neumórfico del sitio (styles.css)
   ========================================================== */

.breadcrumb {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--red); font-weight: 600; }

.blog-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0 40px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}

.blog-card {
  display: block;
  text-decoration: none;
  transition: var(--trans);
}
.blog-card.neu-card { padding: 0; overflow: hidden; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.blog-card .thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.blog-card .body { padding: 24px; }
.blog-card .date { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pagination .neu-btn { min-width: 46px; text-align: center; padding: 12px 16px; }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 0;
}

/* ── Artículo individual ── */
.post-hero { padding-bottom: 24px; }

.post-article {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 40px 60px;
}
.post-article .post-featured-img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--rad-lg);
  margin-bottom: 40px;
  box-shadow: var(--shadow-out);
  display: block;
}

.post-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-dark);
}
.post-content h2 { margin-top: 2.2rem; margin-bottom: 1rem; font-size: 1.6rem; color: var(--text-dark); }
.post-content h3 { margin-top: 1.8rem; margin-bottom: 0.75rem; font-size: 1.3rem; color: var(--text-dark); }
.post-content p { margin-bottom: 1.25rem; }
.post-content img { border-radius: var(--rad-md); margin: 1.5rem 0; max-width: 100%; height: auto; }
.post-content ul, .post-content ol { margin: 0 0 1.25rem 1.5rem; list-style: revert; }
.post-content a { color: var(--red); font-weight: 600; }

.cta-band {
  max-width: 820px;
  margin: 3rem auto 0;
  background: var(--red);
  color: #fff;
  border-radius: var(--rad-lg);
  padding: 2.2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-red-out);
}
.cta-band h2 { color: #fff; font-size: 1.3rem; margin: 0 0 0.4rem; }
.cta-band p { margin: 0; color: rgba(255,255,255,0.9); }

@media (max-width: 768px) {
  .post-article { padding: 20px 20px 40px; }
  .post-article .post-featured-img { aspect-ratio: 16 / 9; }
  .cta-band { flex-direction: column; text-align: center; }
}