/* ═══════════════════════════════════════════════════════════
   BLOG — tipografía larga para las notas del sitio.
   Reutiliza las variables de moleris.css (colores, tipografía,
   espaciado). Este archivo solo agrega los estilos de artículo
   que la landing de una sola página no necesitaba.
   ═══════════════════════════════════════════════════════════ */

.blog-hero{padding:calc(var(--esp-6) + 40px) 0 var(--esp-5)}
.blog-hero__cont{max-width:74ch;position:relative;z-index:2}

/* El campo de puntos es el fondo de toda la página: fijo al viewport,
   detrás de todo, y sin capturar el puntero para no robarle los clics
   a las tarjetas. Va atenuado porque a opacidad plena compite con el
   texto que tiene encima. */
.dotfield{
  position:fixed;inset:0;z-index:0;opacity:.45;pointer-events:none
}
/* El contenido se apoya encima del fondo. El pie lleva su propio fondo
   opaco, así que necesita entrar en la misma capa: sin `position` queda
   por debajo del canvas —que es `fixed`— y los puntos se le montan
   encima. */
.blog-hero,.blog-lista,.blog-articulo,.pie{position:relative;z-index:1}
.blog-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--txt-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--esp-2)
}
.blog-hero__eyebrow a{color:inherit}
.blog-hero__eyebrow a:hover{color:var(--ink)}

.blog-articulo{padding:0 0 var(--esp-6)}
.blog-articulo__cont{max-width:70ch}

.blog-articulo__cuerpo p{
  color:var(--ink-2);font-size:var(--txt-lg);line-height:1.7;
  margin:0 0 var(--esp-3);max-width:none
}
.blog-articulo__cuerpo h2{
  font-size:var(--txt-xl);margin:var(--esp-5) 0 var(--esp-2);color:var(--ink)
}
.blog-articulo__cuerpo ul{
  color:var(--ink-2);font-size:var(--txt-lg);line-height:1.7;
  margin:0 0 var(--esp-3);padding-left:1.3em
}
.blog-articulo__cuerpo li{margin-bottom:6px}
.blog-articulo__cuerpo li::marker{color:var(--gold)}
.blog-articulo__cuerpo strong{color:var(--ink);font-weight:700}

.blog-articulo__cierre{
  margin-top:var(--esp-5);padding:var(--esp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radio);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3)
}
.blog-articulo__cierre p{color:var(--ink);font-size:var(--txt-md);margin:0;max-width:44ch}

.blog-volver{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--txt-sm);color:var(--ink-3);margin-top:var(--esp-5)
}
.blog-volver:hover{color:var(--gold)}

/* ── Índice del blog ── */
.blog-lista{padding:0 0 var(--esp-6)}
.blog-lista__grid{
  display:grid;gap:var(--esp-3);margin-top:var(--esp-4)
}
.blog-tarjeta{
  display:block;padding:var(--esp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radio);
  transition:box-shadow .2s ease, border-color .2s ease
}
.blog-tarjeta:hover{border-color:var(--gold);box-shadow:var(--elev-1)}
.blog-tarjeta h2{font-size:var(--txt-lg);margin:0 0 8px;color:var(--ink)}
.blog-tarjeta p{color:var(--ink-2);font-size:var(--txt-md);margin:0;max-width:none}