/* ═══════════════════════════════════════════════════════════════════════════
   blog.css — piel del blog (/blog y /blog/<slug>), generado por
   scripts/build-blog.mjs. Se carga DESPUÉS de /css/classical.css.

   Dirección (nov-2026, pedido de Luis: «más sobrio, más editorial de periódico»):
   página de diario serio. Blanco y negro casi total, un solo acento (rojo oscuro)
   para antetítulos, filetes en lugar de cajas, titular en Fraunces con peso,
   cuerpo en Lora. Nada de tarjetas, sombras, radios ni píldoras.

   Todo va colgado de `body.blog`: classical.css sigue intacto para el resto del
   sitio. Los tokens --np-* son del blog; los --color-* se re-apuntan aquí solo
   para que el cromo del sitio (cabecera, pie) tome el papel del diario.
   ═══════════════════════════════════════════════════════════════════════ */

body.blog{
  --np-paper:#fdfcfa;--np-ink:#121212;--np-ink-2:#2e2d2b;--np-muted:#5d5a55;
  --np-rule:#121212;--np-hair:color-mix(in srgb,#121212 17%,transparent);
  --np-accent:#9b1b1b;
  --np-display:'Fraunces',Georgia,'Times New Roman',serif;
  --np-text:'Lora',Georgia,'Times New Roman',serif;
  --np-col:680px;
  --color-bg:var(--np-paper);--color-surface:#f5f3ef;--color-text:var(--np-ink);--color-muted:var(--np-muted);
  --color-divider:var(--np-hair);
}
:root[data-theme="dark"] body.blog{
  --np-paper:#151413;--np-ink:#ece8e1;--np-ink-2:#d6d1c9;--np-muted:#a8a29a;
  --np-rule:#ece8e1;--np-hair:color-mix(in srgb,#ece8e1 20%,transparent);
  --np-accent:#e2786b;--color-surface:#1d1c1a;
}
body.blog::before{display:none}
body.blog main{color:var(--np-ink)}
.blog h1,.blog h2,.blog h3,.blog h4{font-family:var(--np-display);color:var(--np-ink);letter-spacing:-.01em}

/* Versalitas falsas: las fuentes del sitio no traen `smcp`, así que se compone
   en mayúsculas pequeñas con espaciado, que es lo que hace el diario impreso. */
.antetitulo,.folio,.post-meta,.tags,.toc summary,.fuente figcaption,.filtro .chip,.post-body th,.blog-rss,.post-volver{
  font-family:var(--np-text);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:lining-nums
}
.antetitulo{margin:0 0 12px;color:var(--np-accent)}
.blog .sep{color:var(--np-muted);font-weight:400}

/* ── Folio: la línea de cabecera de la página, con filete doble ───────────── */
.folio{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin:0 0 44px;padding:14px 0 10px;border-bottom:3px double var(--np-rule);color:var(--np-muted)}
.folio ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.folio li+li::before{content:'›';margin-right:6px;color:var(--np-muted)}
.folio a{color:var(--np-ink);text-decoration:none}.folio a:hover{color:var(--np-accent)}
.folio-lema{font-family:var(--np-display);font-size:14px;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}

/* ── Post: cabecera de nota ──────────────────────────────────────────────── */
.post{padding:0 0 88px}
.post-head{max-width:880px;margin-inline:auto;padding-top:4px}
.post-head h1{max-width:22ch;font-size:clamp(2.15rem,4.6vw,3.6rem);font-weight:700;line-height:1.04;letter-spacing:-.018em;font-variation-settings:'opsz' 72;text-wrap:balance}
.post-head .lede{max-width:56ch;margin-top:20px;color:var(--np-ink-2);font-family:var(--np-text);font-size:clamp(1.12rem,1.9vw,1.3rem);font-weight:400;line-height:1.5;text-wrap:pretty}
.post-meta{margin-top:26px;padding:10px 0;border-top:1px solid var(--np-rule);border-bottom:1px solid var(--np-hair);color:var(--np-muted)}
.post-meta .firma{color:var(--np-ink)}
.post-meta time,.entrada-kicker time{white-space:nowrap}
.post-cover{max-width:880px;margin:30px auto 0}
.post-cover img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:0}

/* ── Post: rejilla (índice al margen + columna de lectura) ──────────────── */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--np-col)) minmax(0,1fr);column-gap:48px;align-items:start;max-width:none;margin-top:40px}
.post-grid>.post-body{grid-column:2}
.post-grid>.toc{grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:210px;position:sticky;top:100px}
.post-head{max-width:calc(var(--np-col) + 200px);margin-inline:auto;padding-left:0}
@media(min-width:1101px){.post-head,.post-cover{margin-left:calc(50% - var(--np-col) / 2);margin-right:auto}}

.toc details{border-top:1px solid var(--np-rule);padding-top:10px}
.toc summary{margin-bottom:10px;color:var(--np-ink);cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{margin:0;padding:7px 0;border-bottom:1px solid var(--np-hair);font-family:var(--np-text);font-size:13px;line-height:1.35}
.toc li.toc-h3{padding-left:12px;font-size:12.5px}
.toc a{color:var(--np-muted);text-decoration:none}.toc a:hover,.toc a.activo{color:var(--np-ink);text-decoration:underline;text-underline-offset:3px}

/* ── Post: cuerpo de lectura ─────────────────────────────────────────────── */
.post-body{max-width:var(--np-col);color:var(--np-ink);font-family:var(--np-text);font-size:19px;line-height:1.62;hyphens:manual;-webkit-hyphens:manual;font-variant-numeric:oldstyle-nums}
.post-body>*:first-child{margin-top:0}
.post-body.prose p,.post-body.prose li{color:var(--np-ink);font-size:inherit;line-height:inherit}
.post-body.prose p{margin-bottom:1em;text-wrap:pretty}
/* Justificado de diario. Los cortes los pone el build como guiones suaves (&shy;,
   ver «guionado» en scripts/build-blog.mjs): `hyphens:auto` no sirve porque Chromium
   en Linux/Android no trae diccionario de español y, sin guiones, abría ríos. */
.post-body.prose>p,.post-body .callout p{text-align:justify;text-align-last:left;hyphens:manual;-webkit-hyphens:manual}
/* En celular (<480px, ~35 caracteres por línea) ni con guiones se cierra el
   justificado: medido a 390px, el 10% de las líneas estiraba los espacios a más de
   3× y alguna a 7×. Ahí va en bandera a la izquierda y sin cortar palabras (en
   bandera, los guiones solo afean: salían en una de cada dos líneas). */
@media(max-width:479px){.post-body.prose>p,.post-body .callout p{text-align:left;hyphens:none;-webkit-hyphens:none}}
.post-body.prose>p:first-of-type::first-letter{float:left;margin:.06em .09em 0 0;color:var(--np-ink);font-family:var(--np-display);font-size:3.55em;font-weight:700;line-height:.82;font-variation-settings:'opsz' 144}
.post-body.prose h2{margin:1.9em 0 .6em;padding:10px 0 0;border-top:1px solid var(--np-rule);border-bottom:0;scroll-margin-top:96px;font-size:1.32rem;font-weight:700;line-height:1.2;letter-spacing:-.005em}
.post-body.prose h3{margin:1.6em 0 .45em;scroll-margin-top:96px;font-size:1.1rem;font-weight:700;line-height:1.25}
.post-body.prose h4{margin:1.4em 0 .35em;font-family:var(--np-text);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.post-body.prose ul,.post-body.prose ol{margin:0 0 1em 1.3em}
.post-body.prose li{margin-bottom:.4em;text-align:left}
.post-body.prose li::marker{color:var(--np-ink)}
.post-body.prose a{color:var(--np-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--np-ink) 40%,transparent);text-underline-offset:3px}
.post-body.prose a:hover{color:var(--np-accent);text-decoration-color:currentColor}
.post-body.prose strong{font-weight:700}
.post-body blockquote{margin:1.5em 0 1.5em 1.4em;padding:0 0 0 1.1em;border-left:1px solid var(--np-rule);color:var(--np-ink-2);font-style:normal}
.post-body code{padding:0 3px;border-radius:0;background:var(--color-surface);font-family:var(--font-mono);font-size:.8em}
.post-body pre{margin:1.5em 0;padding:16px 18px;overflow-x:auto;border:0;border-top:1px solid var(--np-rule);border-bottom:1px solid var(--np-rule);border-radius:0;background:transparent;font-size:13.5px;line-height:1.6}
.post-body pre code{padding:0;background:none;font-size:inherit}
.post-body hr{margin:2.2em auto;width:100%;border:0;border-top:1px solid var(--np-hair);text-align:center;overflow:visible}
.post-body hr::after{content:'❧';position:relative;top:-.75em;padding:0 .6em;background:var(--np-paper);color:var(--np-muted);font-size:15px}
.post-body img{border-radius:0}
/* Foto con pie, de periódico: la imagen a todo el ancho de la columna, pie en serif
   pequeña gris oscuro bajo un filete fino, crédito en versalitas al final. */
.post-body .figura{margin:2em 0 2.1em}
.post-body .figura img{display:block;width:100%;height:auto;background:var(--color-surface)}
.post-body .figura figcaption{margin-top:9px;padding-top:7px;border-top:1px solid var(--np-hair);color:var(--np-ink-2);font-family:var(--np-text);font-size:14px;font-style:normal;line-height:1.45;text-align:left;text-wrap:pretty;font-variant-numeric:lining-nums}
.post-body .figura .credito{display:block;margin-top:4px;color:var(--np-muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:normal}
.post-body .figura .credito a{color:inherit;text-decoration:none;border-bottom:1px solid var(--np-hair)}
.post-body .figura .credito a:hover{color:var(--np-accent);border-color:currentColor}
.post-body .callout{margin:1.6em 0;padding:14px 0;border:0;border-top:2px solid var(--np-rule);border-bottom:1px solid var(--np-rule);border-radius:0;background:transparent;font-size:.92em}
.post-body .callout>strong:first-child{display:block;margin-bottom:6px;font-family:var(--np-text);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.post-body .callout p:last-child{margin-bottom:0}

/* Tablas de diario: filetes horizontales, sin fondos, cifras tabulares */
.post-body .tabla{margin:1.7em 0;overflow-x:auto}
.post-body .tabla table{width:100%;margin:0;border-collapse:collapse;border-top:2px solid var(--np-rule);border-bottom:1px solid var(--np-rule);font-size:15px;line-height:1.45;font-variant-numeric:lining-nums;hyphens:manual}
/* Cifras tabulares solo en columnas alineadas a la derecha: en Lora, `tnum` también ensancha el espacio */
.post-body td[style*="right"],.post-body th[style*="right"],.post-body td[style*="center"]{font-variant-numeric:lining-nums tabular-nums}
.post-body th{padding:9px 10px 7px 0;border-bottom:1px solid var(--np-rule);color:var(--np-ink);font-size:10.5px;vertical-align:bottom}
.post-body td{padding:10px 12px 10px 0;border-bottom:1px solid var(--np-hair);color:var(--np-ink);vertical-align:top}
.post-body tr:last-child td{border-bottom:0}
.post-body td strong{font-weight:700}

/* Cita de ley (bloque :::fuente): sangría, filete fino, referencia en versalitas */
.fuente{position:relative;margin:1.8em 0 1.8em 1.4em;padding:0 0 0 1.3em;border:0;border-left:2px solid var(--np-rule);border-radius:0;background:transparent}
.fuente blockquote{margin:0;padding:0;border:0;color:var(--np-ink);font-family:var(--np-display);font-size:1.04em;font-style:normal;font-weight:400;line-height:1.5;font-variation-settings:'opsz' 18;text-align:left}
.fuente blockquote p{margin-bottom:.6em;text-align:left!important}.fuente blockquote p:last-child{margin-bottom:0}
.fuente blockquote>p:first-child::before{content:'«';margin-right:.05em}
.fuente blockquote>p:last-child::after{content:'»';margin-left:.05em}
.fuente figcaption{margin-top:10px;padding:0;border:0;color:var(--np-ink);font-style:normal}
.fuente figcaption::before{content:'— '}
.fuente-et{display:none}
.fuente .ord{margin-left:.04em;font-size:.85em;text-transform:none;letter-spacing:0;vertical-align:.35em}
.fuente figcaption a{color:var(--np-ink);text-decoration:none;border-bottom:1px solid var(--np-hair)}
.fuente figcaption a:hover{color:var(--np-accent);border-color:currentColor}

/* ── Post: pie de nota ───────────────────────────────────────────────────── */
.tags{max-width:var(--np-col);margin:40px auto 0;padding-top:10px;border-top:1px solid var(--np-rule);color:var(--np-muted)}
.tags-et{margin-right:8px;color:var(--np-ink)}
.tags a{color:var(--np-accent);text-decoration:none}.tags a:hover{text-decoration:underline;text-underline-offset:3px}
.blog-cta{max-width:var(--np-col);margin:56px auto 0;padding:18px 0 22px;border:0;border-top:3px double var(--np-rule);border-bottom:1px solid var(--np-rule);border-radius:0;background:transparent}
.blog-cta h2{max-width:26ch;font-size:clamp(1.45rem,2.6vw,1.85rem);font-weight:700;line-height:1.12}
.blog-cta>p:not(.antetitulo){max-width:60ch;margin-top:10px;color:var(--np-ink-2);font-family:var(--np-text);font-size:16px;line-height:1.55}
.blog-cta-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.blog .blog-cta .btn{min-height:40px;padding:8px 16px;border-radius:0;font-family:var(--np-text);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;transform:none}
.blog .blog-cta .btn-primary{color:var(--np-paper);background:var(--np-ink);border-color:var(--np-ink)}
.blog .blog-cta .btn-primary:hover{color:var(--np-ink);background:transparent;border-color:var(--np-ink)}
.blog .blog-cta .btn-secondary{color:var(--np-ink);border-color:var(--np-ink)}
.blog .blog-cta .btn-secondary:hover{color:var(--np-accent);border-color:var(--np-accent)}
.post-volver{max-width:var(--np-col);margin:28px auto 0}
.post-volver a,.blog-rss a{color:var(--np-ink);text-decoration:none}.post-volver a:hover,.blog-rss a:hover{color:var(--np-accent)}
@media(min-width:1101px){.tags,.blog-cta,.post-volver{margin-left:calc(50% - var(--np-col) / 2)}}

/* ── Listado /blog: una columna de entradas (estructura del blog de BodyEase) ──
   Encabezado con una palabra en itálica de acento y bajada; debajo, un contenedor
   centrado de ~820px con una fila por entrada: kicker (fecha · tema), titular,
   resumen de dos líneas y miniatura 4:3 a la derecha. Filetes, no tarjetas. */
.blog-index{padding:0 0 88px}
.blog-cabecera,.blog-lista{max-width:820px;margin-inline:auto}
.blog-cabecera{padding:6px 0 0}
.blog-cabecera h1{margin:0;font-size:clamp(2.3rem,5vw,3.6rem);font-weight:700;line-height:1.04;letter-spacing:-.018em;font-variation-settings:'opsz' 72;text-wrap:balance}
.blog-cabecera h1 em{color:var(--np-accent);font-style:italic;font-weight:500}
.blog-bajada{max-width:56ch;margin:16px 0 0;color:var(--np-ink-2);font-family:var(--np-text);font-size:clamp(1.05rem,1.7vw,1.2rem);line-height:1.5;text-wrap:pretty}
.blog-lista{margin-top:36px;border-top:3px double var(--np-rule)}

.filtro{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:8px 0;border-bottom:1px solid var(--np-rule)}
.filtro .chip{min-height:30px;margin:0;padding:4px 14px;border:0;border-radius:0;background:transparent;color:var(--np-muted);cursor:pointer;transition:color .15s}
.filtro .chip:first-child{padding-left:0}
.filtro .chip+.chip{border-left:1px solid var(--np-hair)}
.filtro .chip:hover{color:var(--np-ink)}
.filtro .chip[aria-pressed="true"]{color:var(--np-accent);background:transparent;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.entradas{margin:0;padding:0;list-style:none}
.entrada{position:relative;border-bottom:1px solid var(--np-hair)}
.entrada[hidden]{display:none}
.entrada>article{display:flex;align-items:center;gap:32px;padding:26px 0}
.entrada-texto{flex:1;min-width:0}
.entrada-kicker{margin:0 0 8px;color:var(--np-accent);font-family:var(--np-text);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:lining-nums}
.entrada-kicker .sep{color:var(--np-accent);opacity:.55}
.entrada h2{margin:0;font-size:1.5rem;font-weight:700;line-height:1.16;letter-spacing:-.01em;text-wrap:balance}
.entrada h2 a{color:var(--np-ink);text-decoration:none}
/* La fila entera es el enlace: el ::after del titular cubre el <li>. */
.entrada h2 a::after{content:'';position:absolute;inset:0;z-index:1}
.entrada h2 a:focus-visible{outline:none}
.entrada:has(a:focus-visible){outline:2px solid var(--np-accent);outline-offset:4px}
.entrada:hover h2 a{color:var(--np-accent)}
.entrada-desc{margin:9px 0 0;color:var(--np-ink-2);font-family:var(--np-text);font-size:16px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entrada-foto{flex:none;order:2;display:block;width:180px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;background:var(--color-surface)}

.vacio,.vacio-filtro{max-width:60ch;margin-inline:auto;padding:18px 0;border:0;border-bottom:1px solid var(--np-hair);border-radius:0;color:var(--np-muted);font-family:var(--np-text);text-align:center}
.vacio a{color:var(--np-ink)}
.blog-rss{margin-top:28px;text-align:left}

/* ── Cortes ──────────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .post-grid{grid-template-columns:minmax(0,1fr);max-width:var(--np-col);margin-inline:auto;margin-top:30px}
  .post-grid>.post-body,.post-grid>.toc{grid-column:1;grid-row:auto}
  .post-grid>.toc{position:static;justify-self:stretch;max-width:none;margin-bottom:26px}
  .toc details{padding:10px 0 0;border-bottom:1px solid var(--np-rule)}
  .toc summary{margin-bottom:10px}.toc details:not([open]) summary{margin-bottom:10px}
  .toc summary::after{content:' +';color:var(--np-muted)}.toc details[open] summary::after{content:' −'}
  .toc li:last-child{border-bottom:0}
  .post-head{max-width:var(--np-col)}
}
@media(max-width:600px){
  /* Listado en celular: la miniatura se queda a la derecha, más chica (como BodyEase) */
  .blog-lista{margin-top:28px}
  .entrada>article{align-items:flex-start;gap:16px;padding:20px 0}
  .entrada h2{font-size:1.16rem;line-height:1.2}
  .entrada-kicker{margin-bottom:6px;font-size:10.5px;letter-spacing:.1em}
  .entrada-desc{margin-top:7px;font-size:14.5px;line-height:1.5}
  .entrada-foto{width:96px;margin-top:2px}
  .post-body{font-size:18px;line-height:1.6}
  .post-body.prose>p:first-of-type::first-letter{font-size:3.3em}
  .fuente,.post-body blockquote{margin-left:0}
  .folio{margin-bottom:28px}.folio-lema{display:none}
  .post-meta .sep:last-of-type,.post-meta>span:last-child{white-space:nowrap}
  .filtro{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.filtro .chip{flex:none;padding:4px 12px}.filtro .chip:first-child{padding-left:0}
  .post-body .tabla table{font-size:14px}
}
@media print{
  body.blog{--np-paper:#fff;--np-ink:#000}
  .toc,.blog-cta,.folio,.tags,.post-volver{display:none!important}
  .post-grid{display:block}.post-body{max-width:none;font-size:11pt}
}