/* =========================================================================
   Blog de Kairis · vídeos + reflexiones
   Lo generan scripts/build-blog.mjs (listado + subpáginas). Reutiliza el sistema
   visual de styles.css/recursos.css; aquí solo lo específico del blog.
   ========================================================================= */

/* ---- Listado /blog ---- */
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.8rem; }
.blog-filter__chip {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 7px 16px; border-radius: 99px;
  border: 1px solid var(--line-soft, rgba(23,23,20,.14));
  background: var(--paper, #F7F5EF); color: var(--ink-dim, #56554F);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.blog-filter__chip:hover { border-color: var(--ink, #171714); color: var(--ink, #171714); }
.blog-filter__chip[aria-pressed="true"] { background: var(--ink, #171714); border-color: var(--ink, #171714); color: var(--paper, #F7F5EF); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.blog-empty { color: var(--ink-dim, #56554F); }

.blog-card {
  display: flex; flex-direction: column;
  background: var(--paper, #F7F5EF);
  border: 1px solid var(--line-soft, rgba(23,23,20,.1)); border-radius: 16px;
  overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(0,0,0,.22); border-color: var(--accent-human-deep, #D46A2A); }
.blog-card__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 12px; flex: 1; }
.blog-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(23,23,20,.05); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.blog-card__head { display: flex; align-items: center; gap: 10px; }
.blog-card__tipo {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 2px 9px; border-radius: 99px;
  background: var(--accent-human-deep, #D46A2A);
}
.blog-card__tipo[data-accent="tech"]  { background: var(--accent-tech-deep, #1A6D8E); }
.blog-card__tipo[data-accent="sage"]  { background: var(--accent-sage-deep, #7F844C); }
.blog-card__tipo[data-accent="lime"]  { background: #94A12B; }
.blog-card__date { margin-left: auto; font-size: .78rem; color: var(--ink-dim, #56554F); font-family: "JetBrains Mono", ui-monospace, monospace; }
.blog-card h3 { font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--ink, #171714); margin: 2px 0 0; }
.blog-card__link p { font-size: .92rem; line-height: 1.5; color: var(--ink-dim, #56554F); margin: 0; }
.blog-card__foot { display: flex; align-items: center; gap: 10px; padding: 0 20px 16px; }
.blog-card__plats { display: inline-flex; gap: 6px; color: var(--ink-dim, #56554F); }
.blog-card__plat svg { display: block; }
.blog-card__tags { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.blog-card__tag { font-size: .68rem; color: var(--ink-dim, #56554F); background: rgba(23,23,20,.05); padding: 2px 8px; border-radius: 99px; }

/* ---- Subpágina de post ---- */
.blog-watch { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto 1.4rem; padding: 20px; background: var(--bg-ink, #171714); border-radius: 18px; }
.blog-watch__label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(247,245,239,.6); }
.blog-watch__links { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-plat { display: inline-flex; align-items: center; gap: 8px; }
/* CTA hacia el artículo original: relleno con el acento del post, alto contraste sobre el papel */
.blog-cta { max-width: 760px; margin: 1.8rem auto 2rem; text-align: center; }
.blog-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 30px; border-radius: 99px;
  font: inherit; font-weight: 700; font-size: 1.03rem; text-decoration: none;
  background: var(--accent-tech-deep, #1A6D8E); color: #fff;
  box-shadow: 0 14px 28px -12px rgba(23, 23, 20, .4);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.blog-cta__btn[data-accent="human"] { background: var(--accent-human-deep, #D46A2A); }
.blog-cta__btn[data-accent="sage"]  { background: var(--accent-sage-deep, #7F844C); }
.blog-cta__btn[data-accent="lime"]  { background: #94A12B; }
.blog-cta__btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 20px 36px -12px rgba(23, 23, 20, .5); }
.blog-cta__arrow { transition: transform .16s ease; }
.blog-cta__btn:hover .blog-cta__arrow { transform: translateX(4px); }

/* Reflexión de cierre: destacada en serif, antes del CTA */
.blog-cierre { max-width: 720px; margin: 2rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--line-soft, rgba(23,23,20,.12)); }
.blog-cierre p { font-family: "Source Serif 4", Georgia, serif; font-size: 1.34rem; line-height: 1.55; font-style: italic; color: var(--ink, #171714); margin: 0; }

/* ---- Programa: bloque de descarga ---- */
.blog-descarga { max-width: 760px; margin: 0 auto 2rem; padding: 22px 24px; border: 1px solid var(--line-soft, rgba(23,23,20,.12)); border-radius: 18px; background: var(--tint-sage, rgba(127,132,76,.07)); }
.blog-descarga__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.blog-descarga__meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem; color: var(--ink-dim, #56554F); }
.blog-descarga__repo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--ink, #171714); text-decoration: none; }
.blog-descarga__repo:hover { text-decoration: underline; }
.blog-descarga__repo svg { flex: none; }
.blog-descarga__nota { margin: 12px 0 0; font-size: .85rem; color: var(--ink-dim, #56554F); }

/* ---- Programa: conversación con el autor (Q&A) ---- */
.blog-entrevista { max-width: 720px; margin: 0 auto; }
.blog-qa { margin: 0 0 1.7rem; }
.blog-qa__q { font-family: "Manrope", sans-serif; font-size: 1.18rem; font-weight: 700; line-height: 1.3; color: var(--accent-sage-deep, #7F844C); margin: 0 0 .55rem; }
.blog-qa__r { font-size: 1.06rem; line-height: 1.65; color: var(--ink, #171714); margin: 0 0 .8rem; }
.blog-qa__r:last-child { margin-bottom: 0; }

.blog-embed { position: relative; max-width: 760px; margin: 0 auto 1.4rem; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0f0f0d; display: flex; align-items: center; justify-content: center; }
.blog-embed__play { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); border-radius: 99px; padding: 12px 22px; cursor: pointer; }
.blog-embed__play:hover { background: rgba(0,0,0,.5); }
.blog-embed__tri { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.blog-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.blog-figure { max-width: 480px; margin: 0 auto 1.6rem; }
.blog-figure img { width: 100%; height: auto; border-radius: 16px; display: block; }
.blog-figure figcaption { text-align: center; font-size: .82rem; color: var(--ink-dim, #56554F); margin-top: .55rem; }

.blog-body { max-width: 720px; margin: 0 auto; }
.blog-body p { font-size: 1.08rem; line-height: 1.7; color: var(--ink, #171714); margin: 0 0 1.1rem; }
.blog-body p:last-child { margin-bottom: 0; }

.blog-rel { max-width: 760px; margin: 2.4rem auto 0; padding-top: 1.8rem; border-top: 1px solid var(--line-soft, rgba(23,23,20,.1)); }
.blog-rel__title { font-family: "Manrope", sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--ink, #171714); margin: 0 0 1rem; }

.blog-back { max-width: 760px; margin: 2.2rem auto 0; }
.blog-back a { font-weight: 600; color: var(--accent-human-deep, #D46A2A); text-decoration: none; }
.blog-back a:hover { text-decoration: underline; }

/* ---- Series (indicador + navegación entre partes) ---- */
.blog-serie { margin: .9rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; color: var(--ink-dim, #56554F); }
.blog-serie__k { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-tech-deep, #1A6D8E); margin-right: .5rem; }

.blog-card__serie { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-tech-deep, #1A6D8E); }

.blog-partnav { max-width: 760px; margin: 1.8rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.blog-partnav__link { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line-soft, rgba(23,23,20,.12)); border-radius: 14px; text-decoration: none; color: inherit; background: var(--paper, #F7F5EF); transition: border-color .15s ease, transform .15s ease; }
.blog-partnav__link:hover { border-color: var(--accent-tech-deep, #1A6D8E); transform: translateY(-2px); }
.blog-partnav__next { text-align: right; }
.blog-partnav__dir { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--accent-tech-deep, #1A6D8E); font-weight: 700; }
.blog-partnav__ttl { font-weight: 600; font-size: .95rem; color: var(--ink, #171714); line-height: 1.3; }

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-partnav { grid-template-columns: 1fr; }
  .blog-partnav__next { text-align: left; }
}