/* ============================================================
   Blog premium (SPEC022) — cargado solo en vistas /blog
   Serif editorial (Fraunces) restringido a H1 del artículo y hero.
   ============================================================ */

/* ── Reading meter — elemento firma ──────────────────────────── */

.reading-meter-track {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  z-index: 200;
}

.reading-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--brand);
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .reading-meter-fill { transition: none; }
}

.reading-meter-label {
  position: fixed;
  bottom: 1.25rem; right: 1.25rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  box-shadow: var(--shadow-sm);
  z-index: 150;
  pointer-events: none;
}

@media (max-width: 640px) {
  .reading-meter-label { bottom: 0.75rem; right: 0.75rem; font-size: 0.65rem; }
}

/* ── Category rail / chips ───────────────────────────────────── */

.blog-cat-rail { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }

.blog-cat-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.blog-cat-chip:hover { border-color: var(--brand); color: var(--text); }

.blog-cat-chip[data-active="true"] {
  background: var(--cat-guias-bg);
  color: var(--cat-guias-fg);
  border-color: transparent;
}

.blog-cat-chip[data-cat="guias"][data-active="true"]     { background: var(--cat-guias-bg);     color: var(--cat-guias-fg); }
.blog-cat-chip[data-cat="modelos"][data-active="true"]   { background: var(--cat-modelos-bg);   color: var(--cat-modelos-fg); }
.blog-cat-chip[data-cat="casos"][data-active="true"]     { background: var(--cat-casos-bg);     color: var(--cat-casos-fg); }
.blog-cat-chip[data-cat="novedades"][data-active="true"] { background: var(--cat-novedades-bg); color: var(--cat-novedades-fg); }

.blog-cat-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  display: inline-block;
}
.blog-cat-tag[data-cat="guias"]     { background: var(--cat-guias-bg);     color: var(--cat-guias-fg); }
.blog-cat-tag[data-cat="modelos"]   { background: var(--cat-modelos-bg);   color: var(--cat-modelos-fg); }
.blog-cat-tag[data-cat="casos"]     { background: var(--cat-casos-bg);     color: var(--cat-casos-fg); }
.blog-cat-tag[data-cat="novedades"] { background: var(--cat-novedades-bg); color: var(--cat-novedades-fg); }

/* ── Índice — hero destacado ──────────────────────────────────── */

.blog-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

.blog-hero-cover {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.blog-hero-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  display: flex; gap: 0.6rem; align-items: center;
}

.blog-hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 0.9rem;
  color: var(--text);
}

.blog-hero-excerpt { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 860px) {
  .blog-hero { grid-template-columns: 1fr; }
}

/* ── Índice — grilla de cards ─────────────────────────────────── */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.blog-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.15s, transform 0.15s;
}

.blog-card:hover { border-color: var(--brand); }

@media (prefers-reduced-motion: no-preference) {
  .blog-card:hover { transform: translateY(-2px); }
}

.blog-card-cover {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--surface-2);
}

.blog-card-body { padding: 1.1rem 1.25rem 1.35rem; }

.blog-card-meta {
  display: flex; gap: 0.5rem; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem; color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.blog-card-title {
  font-size: 1rem; font-weight: 700; color: var(--text);
  line-height: 1.35; margin-bottom: 0.5rem;
}

.blog-card-excerpt { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }

/* ── Artículo — lectura editorial ─────────────────────────────── */

.blog-article-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 4rem;
  max-width: 1220px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
  align-items: start;
  position: relative;
}

@media (max-width: 980px) {
  .blog-article-wrap { grid-template-columns: 1fr; padding-top: 2rem; }
}

.blog-article-header { max-width: 72ch; margin-bottom: 2rem; }

.blog-article-title {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  color: var(--text);
  margin: 0.6rem 0 0.75rem;
}

.blog-article-subtitle {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.blog-article-byline {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.85rem; color: var(--text-muted);
}

.blog-article-avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--brand-15);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
  flex-shrink: 0;
}

.blog-article-cover {
  width: 100%; margin: 0 auto 2.5rem;
  display: block; border-radius: 14px; border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.blog-article-body {
  max-width: 72ch; margin: 0 auto;
  font-size: 1.08rem; line-height: 1.78; color: var(--text);
}

/* Drop cap — solo el primer párrafo del cuerpo */
.blog-article-body > p:first-of-type::first-letter {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 3.6em;
  line-height: 0.82;
  float: left;
  margin: 0.03em 0.1em 0 0;
  color: var(--brand);
}

.blog-article-body h2, .blog-article-body h3 {
  font-weight: 700; margin: 2rem 0 0.75rem; line-height: 1.3;
  scroll-margin-top: 1.5rem;
}
.blog-article-body h2 { font-size: 1.4rem; }
.blog-article-body h3 { font-size: 1.15rem; }
.blog-article-body p { margin-bottom: 1.15rem; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 1.15rem 1.4rem; }
.blog-article-body li { margin-bottom: 0.4rem; }
.blog-article-body blockquote {
  position: relative;
  border-left: 3px solid var(--brand);
  padding: 0.3rem 0 0.3rem 1.75rem;
  margin: 2.25rem 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--text);
}
.blog-article-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.3rem; top: -0.35rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.5rem;
  color: var(--brand);
  opacity: 0.55;
}
.blog-article-body blockquote p { margin-bottom: 0; }
.blog-article-body img { max-width: 100%; border-radius: 8px; margin: 1.5rem 0; }
.blog-article-body pre {
  background: var(--code-bg); border-radius: 8px; padding: 1rem 1.1rem;
  overflow-x: auto; margin: 1.5rem 0;
}
.blog-article-body code {
  font-family: "JetBrains Mono", monospace; font-size: 0.85em;
}
.blog-article-body :not(pre) > code {
  background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 4px;
}

/* Pygments (codehilite) — --code-bg es siempre oscuro en ambos temas,
   así que un único set de colores de sintaxis funciona para dark y light. */
.blog-article-body .codehilite,
.blog-article-body .codehilite pre { color: #E4E4EA; }
.blog-article-body .codehilite .hll { background-color: rgba(255,255,255,0.06); }
.blog-article-body .codehilite .c,
.blog-article-body .codehilite .ch,
.blog-article-body .codehilite .cm,
.blog-article-body .codehilite .cp,
.blog-article-body .codehilite .cpf,
.blog-article-body .codehilite .c1,
.blog-article-body .codehilite .cs { color: #7A7A8C; font-style: italic; }
.blog-article-body .codehilite .err { color: #EB5757; }
.blog-article-body .codehilite .k,
.blog-article-body .codehilite .kc,
.blog-article-body .codehilite .kd,
.blog-article-body .codehilite .kn,
.blog-article-body .codehilite .kp,
.blog-article-body .codehilite .kr,
.blog-article-body .codehilite .kt,
.blog-article-body .codehilite .ow { color: #8FA8FF; }
.blog-article-body .codehilite .s,
.blog-article-body .codehilite .s1,
.blog-article-body .codehilite .s2,
.blog-article-body .codehilite .sb,
.blog-article-body .codehilite .sc,
.blog-article-body .codehilite .sd,
.blog-article-body .codehilite .se,
.blog-article-body .codehilite .sh,
.blog-article-body .codehilite .si,
.blog-article-body .codehilite .sx,
.blog-article-body .codehilite .sr,
.blog-article-body .codehilite .ss,
.blog-article-body .codehilite .dl { color: #F2B046; }
.blog-article-body .codehilite .m,
.blog-article-body .codehilite .mb,
.blog-article-body .codehilite .mf,
.blog-article-body .codehilite .mh,
.blog-article-body .codehilite .mi,
.blog-article-body .codehilite .mo,
.blog-article-body .codehilite .il { color: #A0A4FF; }
.blog-article-body .codehilite .nf,
.blog-article-body .codehilite .fm { color: #6BE2BF; }
.blog-article-body .codehilite .nc,
.blog-article-body .codehilite .nd,
.blog-article-body .codehilite .nn { color: #FFC178; }
.blog-article-body .codehilite .nt { color: #FF8FB6; }
.blog-article-body .codehilite .na { color: #6BE2BF; }
.blog-article-body .codehilite .nb,
.blog-article-body .codehilite .bp,
.blog-article-body .codehilite .no,
.blog-article-body .codehilite .nv,
.blog-article-body .codehilite .vc,
.blog-article-body .codehilite .vg,
.blog-article-body .codehilite .vi { color: #F4F4F5; }
.blog-article-body .codehilite .o,
.blog-article-body .codehilite .p,
.blog-article-body .codehilite .pm { color: #B8B8C4; }
.blog-article-body .codehilite .gd { color: #EB5757; }
.blog-article-body .codehilite .gi { color: #26C281; }
.blog-article-body .codehilite .gh,
.blog-article-body .codehilite .gu { color: #7A7A8C; }
.blog-article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; }
.blog-article-body th, .blog-article-body td {
  border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left;
}
.blog-article-body th { background: var(--surface-2); }
.blog-article-body .admonition {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  background: var(--surface); border-radius: 8px; padding: 0.9rem 1.1rem; margin: 1.5rem 0;
}
.blog-article-body .admonition-title { font-weight: 700; margin-bottom: 0.35rem; }

/* ── TOC flotante ─────────────────────────────────────────────── */

.blog-toc {
  position: sticky; top: 1.5rem;
  font-size: 0.82rem;
}

.blog-toc-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 0.75rem;
}

.blog-toc-list { display: flex; flex-direction: column; gap: 0.45rem; }

.blog-toc-list a {
  color: var(--text-muted); text-decoration: none; line-height: 1.4;
  border-left: 2px solid transparent; padding-left: 0.6rem;
}
.blog-toc-list a:hover { color: var(--text); }
.blog-toc-list a[data-level="3"] { padding-left: 1.2rem; font-size: 0.78rem; }

.blog-toc-list a.is-active {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 600;
}

@media (max-width: 980px) {
  .blog-toc { display: none; }
}

/* ── Relacionados / compartir ────────────────────────────────── */

.blog-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.blog-share-btn svg { width: 18px; height: 18px; }
.blog-share-btn:hover { transform: translateY(-1px); }
.blog-share-btn[data-network="linkedin"]:hover { border-color: #0A66C2; color: #0A66C2; background: rgba(10,102,194,0.10); }
.blog-share-btn[data-network="whatsapp"]:hover { border-color: #25D366; color: #25D366; background: rgba(37,211,102,0.10); }
.blog-share-btn[data-network="x"]:hover        { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.blog-share-btn[data-network="copy"]:hover     { border-color: var(--brand); color: var(--brand); background: var(--brand-10); }
.blog-share-btn[data-network="copy"].is-copied { border-color: var(--success); color: var(--success); background: var(--success-15); }

/* Rail flotante de compartir — aparece cuando el viewport tiene margen
   lateral de sobra (SPEC022 ampliación de ancho); en pantallas más
   angostas la fila de compartir al pie del artículo es el único punto. */
.blog-share-rail {
  display: none;
  position: fixed;
  left: max(20px, calc((100vw - 1220px) / 2 - 84px));
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 0.6rem;
  z-index: 20;
}

@media (min-width: 1500px) {
  .blog-share-rail { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-share-btn { transition: none; }
}

/* ── SPEC027: resaltado y secciones plegables del editor ─────── */

.blog-article-body mark {
  background: var(--warning);
  color: #1a1a1a;
  padding: 0.05em 0.25em;
  border-radius: 3px;
}

.blog-article-body details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin: 0 0 1.15rem;
  background: var(--surface-2);
}
.blog-article-body details[open] { padding-bottom: 0.25rem; }
.blog-article-body summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  padding: 0.25rem 0;
  list-style: none;
}
.blog-article-body summary::-webkit-details-marker { display: none; }
.blog-article-body summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.blog-article-body details[open] summary::before { transform: rotate(90deg); }