/* ANGUPETS — Blog (estilos exclusivos de blog.html y blog-*.html) */
.blog-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
@media (max-width: 760px) { .blog-wrap { width: calc(100% - 32px); } }

.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 34px; }
.blog-filters button {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  border: 2px solid var(--navy-deep); background: transparent; color: var(--navy-deep);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.blog-filters button:hover { transform: translateY(-1px); }
.blog-filters button[aria-pressed="true"] { background: var(--navy-deep); color: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 80px; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column; background: #fff; color: inherit; text-decoration: none;
  border: 2px solid var(--navy-deep); border-radius: 22px; overflow: hidden;
  box-shadow: 0 6px 0 rgba(16,36,68,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(16,36,68,.16); }
.post-card[hidden] { display: none; }
.post-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gold-pale); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-tag {
  align-self: flex-start; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--gold-pale); color: #7A5712; padding: 5px 12px; border-radius: 999px;
}
.post-card h2, .post-card h3 { font-size: 20px; line-height: 1.25; margin: 0; color: var(--navy-deep); }
.post-card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.post-meta { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.blog-empty { display: none; padding: 30px 0 80px; color: var(--ink-soft); }

/* Artículo */
.article-hero-img { border-radius: 24px; overflow: hidden; margin-top: 28px; max-height: 420px; }
.article-hero-img img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 18px; color: var(--ink-soft); font-size: 14.5px; }
.sede-hero .article-title { font-size: clamp(1.8rem, 3.2vw, 2.7rem); max-width: 24ch; }

.article { width: min(740px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 20px; font-size: 17.5px; line-height: 1.75; color: var(--ink); }
@media (max-width: 760px) { .article { width: calc(100% - 32px); font-size: 17px; } }
.article h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2em 0 .5em; color: var(--navy-deep); line-height: 1.25; }
.article p { margin: 0 0 1.1em; }
.article ul, .article ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.article li { margin-bottom: .6em; }
.article li::marker { color: var(--navy); font-weight: 700; }
.callout {
  margin: 2em 0 1.2em; padding: 20px 24px; border-radius: 18px;
  background: var(--gold-pale); border: 2px solid var(--navy-deep); font-size: 16.5px; line-height: 1.6;
}
.disclaimer { font-size: 14px; color: var(--ink-soft); border-top: 1px solid rgba(16,36,68,.15); padding-top: 14px; }
.article-nav { width: min(740px, calc(100% - 40px)); margin: 0 auto; padding: 10px 0 70px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
@media (max-width: 760px) { .article-nav { width: calc(100% - 32px); } }
.article-nav a { font-weight: 700; color: var(--navy); text-decoration: none; }
.article-nav a:hover { text-decoration: underline; }

.related { background: var(--gold-pale); padding: 56px 0 64px; }
.related h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 24px; color: var(--navy-deep); }
.related .blog-grid { padding-bottom: 0; }

/* Halloween (solo se aplica si la edición está activa) */
html.halloween .post-tag { background: rgba(255,138,31,.16); color: var(--hw-orange-deep); }
html.halloween .post-card { border-color: var(--hw-blue-deep); box-shadow: 0 6px 0 rgba(123,63,209,.28); }
html.halloween .callout { border-color: var(--hw-edge); background: #FFF3E3; }
html.halloween .related { background: #FFF3E3; }
html.halloween .article-meta { color: #DCE8FA; }
.article-hero-img img { object-position: center 35%; }