/* ═══════════════════════════════════════════════════════════════════════
   BLOG · hoja de lectura
   Carga después de tokens.css y styles.css, así que puede con lo anterior.
   No define ningún color ni tipografía propios: todo sale de los tokens.

   Regla del sistema: estila POR ELEMENTO dentro de .bl-art__body. Escribir
   un artículo es escribir <h2> y <p>, sin divs decorativos y sin recordar
   nombres de clase. Las clases prefijadas bl- son solo para el andamiaje
   (cabecera, migas, CTA, pie).
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- lienzo ---------- */
.blog-post{ background:var(--bg); color:var(--ink); }

/* ---------- cabecera ---------- */
.bl-nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bl-nav__in{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px; }

/* ---------- columna de lectura ----------
   La medida manda: ~68 caracteres. Es lo único que decide si un texto largo
   se lee o se abandona. El ancho de .wrap (1200px) es para la portada. */
.bl-main{ padding-block:28px 72px; }
.bl-art{ max-width:68ch; margin-inline:auto; }
.bl-art__head{ margin-bottom:36px; }

/* ---------- migas ---------- */
.bl-migas{ max-width:68ch; margin:0 auto 26px; }
.bl-migas ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
  font-family:var(--f-mono); font-size:12px; color:var(--ink-3); }
.bl-migas li + li::before{ content:"/"; margin-right:8px; color:var(--line-2); }
.bl-migas a{ color:var(--ink-3); text-decoration:none; }
.bl-migas a:hover{ color:var(--gold); }
.bl-migas [aria-current]{ color:var(--ink-2); }

/* ---------- titular ---------- */
.bl-art__h1{
  font-size:clamp(30px, 5.2vw, 46px); line-height:1.1; letter-spacing:-.02em;
  font-weight:700; margin:10px 0 0; text-wrap:balance;
}
.bl-art__sub{ margin-top:14px; font-size:clamp(17px,2.2vw,19px); line-height:1.55;
  color:var(--ink-2); text-wrap:pretty; }
.bl-art__meta{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-family:var(--f-mono); font-size:12px; color:var(--ink-3);
}

/* ---------- cuerpo ---------- */
.bl-art__body{ font-size:17.5px; line-height:1.75; color:var(--ink-2); }
.bl-art__body > * + *{ margin-top:1.15em; }

.bl-art__body h2{
  margin-top:2.2em; font-size:clamp(22px,3.2vw,28px); line-height:1.25;
  letter-spacing:-.01em; font-weight:700; color:var(--ink); text-wrap:balance;
}
.bl-art__body h3{
  margin-top:1.8em; font-size:clamp(18px,2.4vw,21px); line-height:1.3;
  font-weight:700; color:var(--ink);
}
.bl-art__body strong{ color:var(--ink); font-weight:700; }
.bl-art__body a{ color:var(--gold); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px; }
.bl-art__body a:hover{ color:var(--gold-hi); }

.bl-art__body ul, .bl-art__body ol{ padding-left:1.35em; }
.bl-art__body ul{ list-style:disc; }
.bl-art__body ol{ list-style:decimal; }
.bl-art__body li + li{ margin-top:.5em; }
.bl-art__body li::marker{ color:var(--gold-dim); }
.bl-art__body ul li::marker{ color:var(--gold); }

.bl-art__body blockquote{
  margin-inline:0; padding:14px 18px;
  border-left:2px solid var(--gold); background:var(--surface);
  border-radius:0 var(--r-btn) var(--r-btn) 0; color:var(--ink);
}

.bl-art__body figure{ margin-inline:0; }
.bl-art__body img{ display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.bl-art__body figcaption{ margin-top:10px; font-family:var(--f-mono); font-size:12px;
  line-height:1.5; color:var(--ink-3); }

/* Las tablas se desbordan en móvil: scroll dentro de su caja, nunca la página. */
.bl-art__body .tabla{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bl-art__body table{ width:100%; border-collapse:collapse; font-size:15px; }
.bl-art__body th, .bl-art__body td{
  padding:10px 12px; border-bottom:1px solid var(--line); text-align:left;
  vertical-align:top; }
.bl-art__body th{ color:var(--ink); font-family:var(--f-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.06em; }
.bl-art__body td{ font-variant-numeric:tabular-nums; }

.bl-art__body code{ font-family:var(--f-mono); font-size:.9em; color:var(--gold-hi);
  background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px; }

.bl-art__body hr{ border:0; border-top:1px solid var(--line); margin-block:2.4em; }

/* ---------- CTA de cierre ---------- */
.bl-cta{
  margin-top:56px; padding:28px; text-align:center;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-shell); box-shadow:var(--lift);
}
.bl-cta__t{ font-size:clamp(18px,2.6vw,22px); line-height:1.35; font-weight:700;
  color:var(--ink); margin:0 0 18px; text-wrap:balance; }
.bl-cta .fine{ margin-top:14px; }

/* ---------- seguir leyendo ---------- */
.bl-rel{ margin-top:48px; padding-top:26px; border-top:1px solid var(--line); }
.bl-rel__t{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-3); margin:0 0 14px; font-weight:400; }
.bl-rel ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.bl-rel a{ display:block; padding:14px 16px; color:var(--ink); text-decoration:none;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); transition:border-color .2s var(--ease), color .2s var(--ease); }
.bl-rel a:hover{ border-color:var(--gold); color:var(--gold-hi); }

/* ---------- pie ---------- */
.bl-foot{ border-top:1px solid var(--line); background:var(--bg-2); padding-block:36px 44px; }

/* ═══════════════ ÍNDICE /blog ═══════════════ */
.bl-idx{ padding-block:28px 72px; }
.bl-idx__head{ max-width:68ch; margin:0 auto 40px; }
.bl-idx__h1{ font-size:clamp(30px,5.2vw,44px); line-height:1.1; letter-spacing:-.02em;
  font-weight:700; margin:10px 0 0; }
.bl-idx__sub{ margin-top:14px; font-size:17px; line-height:1.6; color:var(--ink-2); }

.bl-lista{ max-width:68ch; margin-inline:auto; list-style:none; padding:0;
  display:grid; gap:14px; }
.bl-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); transition:border-color .2s var(--ease); }
.bl-card:hover{ border-color:var(--gold); }
.bl-card a{ display:block; padding:22px 24px; text-decoration:none; color:inherit; }
.bl-card__sec{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--gold); }
.bl-card__t{ margin:8px 0 0; font-size:clamp(19px,2.6vw,22px); line-height:1.3;
  font-weight:700; color:var(--ink); text-wrap:balance; }
.bl-card__d{ margin:9px 0 0; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.bl-card__f{ margin:12px 0 0; font-family:var(--f-mono); font-size:11.5px;
  color:var(--ink-3); }

/* Estado vacío: solo se ve mientras no hay artículos. */
.bl-vacio{ max-width:68ch; margin-inline:auto; padding:44px 28px; text-align:center;
  background:var(--surface); border:1px dashed var(--line-2);
  border-radius:var(--r-shell); color:var(--ink-3); }

@media (prefers-reduced-motion: reduce){
  .bl-card, .bl-rel a{ transition:none; }
}