/* Páginas del blog: cada artículo es una ventana de lectura */
.blog-page { font-size: 16px; line-height: 1.7; }
.topnav__links a { padding: 0.3rem 0; color: var(--ink); text-decoration: none; }
.topnav__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.post-main {
  position: relative;
  width: min(820px, 100% - 32px);
  margin: 0 auto;
  padding: 76px 0 2rem;
}
.post-main--wide { width: min(1120px, 100% - 32px); }

.crumbs { margin-bottom: 0.9rem; font-size: 12px; font-weight: 600; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 0.3rem; opacity: 0.5; }

.post-win {
  background: var(--cream);
  border: 2.4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.post-win .win-bar { cursor: default; }
.post-body { padding: clamp(1.25rem, 4vw, 3rem); }
.post-body h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.12; margin-bottom: 0.6rem; }
.post-meta { margin-bottom: 1.4rem; font-size: 13px; font-weight: 600; opacity: 0.7; }
.post-hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.8rem;
  border: 2.4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
}
.post-body h2 { margin: 2.2rem 0 0.7rem; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.2; }
.post-body h3 { margin: 1.5rem 0 0.4rem; font-size: 1.2rem; }
.post-body p { margin: 0 0 1.05rem; }
.post-body .post-intro { font-size: 1.12rem; }
.post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.post-body li { margin-bottom: 0.45rem; }
.post-body li::marker { color: var(--primary); font-weight: 700; }
.post-body strong { color: var(--ink); }
.post-body .label { font-size: 11px; }

/* Llamada a la acción final */
.post-cta {
  margin-top: 2.6rem;
  padding: clamp(1.25rem, 3.5vw, 2.2rem);
  background: var(--yellow);
  border: 2.4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink);
}
.post-cta h2 { margin-top: 0; }
.post-cta ul { list-style: none; padding: 0; }
.post-cta li { position: relative; padding-left: 1.7rem; }
.post-cta li::before { content: "✦"; position: absolute; left: 0; color: var(--primary); -webkit-text-stroke: 1px var(--ink); }
.post-cta .actions { margin-top: 1.2rem; }
.post-cta .pill { font-size: 13px; padding: 0.6rem 1.1rem; }

.post-related { margin-top: 3rem; }
.post-related h2 { margin-bottom: 1rem; }

.blog-head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.blog-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.blog-head .lead { font-size: 1.05rem; }
.blog-page .post-card h2 { margin: 0.3rem 0 0.5rem; font-size: 1.2rem; line-height: 1.25; }

.blog-page .foot { padding-bottom: 2.5rem; }

@media (max-width: 560px) {
  .blog-page { font-size: 15px; }
  .crumbs { font-size: 11px; }
}

/* Fotos dentro del artículo */
.post-photo { margin: 1.8rem 0 2rem; }
.post-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.4px solid var(--ink);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--ink);
}