/* ==========================================================================
   Blog index (guías / landings) - every selector scoped under body.page-blog
   ========================================================================== */
body.page-blog { background: var(--c-bg); }
body.page-blog .t-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
body.page-blog .bl-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-6); }
body.page-blog .bl-hero { padding: 160px 0 var(--sp-7); }
body.page-blog .bl-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--f-switzer); font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-grey-eyebrow); }
body.page-blog .bl-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-purple); }
body.page-blog .bl-title { margin-top: var(--sp-5); max-width: 900px; font-family: var(--f-dm); font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: -0.05em; color: var(--c-ink); }
body.page-blog .bl-lead { margin-top: var(--sp-5); max-width: 680px; font-family: var(--f-general); font-size: 21px; line-height: 1.35; letter-spacing: -0.02em; color: rgba(17, 16, 17, 0.72); }
body.page-blog .bl-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-7); }
body.page-blog .bl-tab { height: 44px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-white); font-family: var(--f-dm); font-weight: 500; font-size: 15px; color: var(--c-ink); transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
body.page-blog .bl-tab:hover { border-color: var(--c-ink); }
body.page-blog .bl-tab.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-green); }
body.page-blog .bl-featured { padding: var(--sp-5) 0 var(--sp-4); }
body.page-blog .bl-grid-section { padding: var(--sp-4) 0 var(--sp-10); }
body.page-blog .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
body.page-blog .bl-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--c-white); border: 1px solid var(--c-line); transition: border-color 0.2s var(--ease-out); }
body.page-blog .bl-card:hover { border-color: var(--c-ink); }
body.page-blog .bl-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-dark); overflow: hidden; }
body.page-blog .bl-card__media img:first-child { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
body.page-blog .bl-card__mascot { position: absolute; right: 16px; bottom: 0; width: 34%; height: auto; max-height: 92%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35)); }
body.page-blog .bl-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-6); flex: 1; }
body.page-blog .bl-card__tag { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body.page-blog .bl-card__group { padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-green); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
body.page-blog .bl-card__label { padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-panel); color: var(--c-grey-mid); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
body.page-blog .bl-card__title { font-family: var(--f-dm); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; color: var(--c-ink); }
body.page-blog .bl-card__desc { font-family: var(--f-satoshi); font-size: 15px; line-height: 1.5; color: var(--c-text); }
body.page-blog .bl-card__cta { margin-top: auto; padding-top: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-dm); font-weight: 600; font-size: 14px; color: var(--c-ink); }
body.page-blog .bl-card__cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.page-blog .bl-card--featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); background: var(--c-dark); border-color: var(--c-dark); }
body.page-blog .bl-card--featured .bl-card__media { aspect-ratio: auto; min-height: 460px; }
body.page-blog .bl-card--featured .bl-card__body { padding: var(--sp-8); justify-content: center; }
body.page-blog .bl-card--featured .bl-card__title { font-family: var(--f-dm); font-weight: 300; font-size: 40px; letter-spacing: -0.04em; color: #f4f2ef; }
body.page-blog .bl-card--featured .bl-card__desc { color: rgba(249, 247, 246, 0.8); font-size: 17px; }
body.page-blog .bl-card--featured .bl-card__cta { color: var(--c-green); }
body.page-blog .bl-card--featured .bl-card__group { background: var(--c-green); color: var(--c-ink); }
body.page-blog .bl-card--featured .bl-card__label { background: rgba(255, 255, 255, 0.08); color: rgba(249, 247, 246, 0.7); }
body.page-blog .bl-empty { padding: var(--sp-7) 0; text-align: center; font-family: var(--f-satoshi); font-size: 18px; color: var(--c-grey-mid); }
@media (max-width: 1199px) {
  body.page-blog .bl-title { font-size: 54px; }
  body.page-blog .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.page-blog .bl-wrap { padding: 0 var(--sp-4); }
  body.page-blog .bl-hero { padding-top: 120px; }
  body.page-blog .bl-title { font-size: 40px; }
  body.page-blog .bl-lead { font-size: 18px; }
  body.page-blog .bl-grid, body.page-blog .bl-card--featured { grid-template-columns: 1fr; }
  body.page-blog .bl-card--featured .bl-card__media { min-height: 260px; }
  body.page-blog .bl-card--featured .bl-card__body { padding: var(--sp-6) var(--sp-5); }
  body.page-blog .bl-card--featured .bl-card__title { font-size: 30px; }
  body.page-blog .bl-card__body { padding: var(--sp-5); }
}

/* type badge on the cover (added with the editorial pages, 2026-09-14) */
body.page-blog .bl-card__type { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(12, 17, 17, 0.72); backdrop-filter: blur(6px); color: #fff; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
body.page-blog .bl-card--featured .bl-card__type { left: 24px; top: 24px; background: var(--c-green); color: var(--c-ink); }