/* ───────────────────────────────────────────────
   BLOG · hub, pilares y artículos
   Hoja propia para no pisar main.css mientras varios
   agentes trabajan en paralelo. Integrable en main.css.
   ─────────────────────────────────────────────── */

/* ─── Rejilla de pilares (hub) ─── */
.pilar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.pilar-card {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}

.pilar-card:hover { border-color: var(--ink); }

.pilar-card-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.pilar-card-titulo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

.pilar-card-titulo a { color: inherit; text-decoration: none; }
.pilar-card-titulo a:hover, .pilar-card-titulo a:focus-visible { color: var(--red); }

.pilar-card p {
  font-size: 14px;
  color: var(--gray-text);
  line-height: 1.65;
  margin: 0 0 20px;
  flex-grow: 1;
}

.pilar-card-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* ─── Listado de artículos ─── */
.lista-articulos {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.lista-articulos li {
  border-bottom: 1px solid var(--border);
}

.lista-articulos a {
  display: block;
  padding: 22px 0;
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.2s, color 0.2s;
}

.lista-articulos a:hover,
.lista-articulos a:focus-visible {
  padding-left: 12px;
  color: var(--red);
}

.art-pilar {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 7px;
}

.art-titulo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 6px;
  line-height: 1.3;
}

.art-resumen {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--gray-text);
  line-height: 1.6;
  display: block;
  max-width: 640px;
}

/* ─── Cuerpo del artículo ─── */
.articulo-cuerpo h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
  margin: 52px 0 18px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.articulo-cuerpo h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 12px;
}

.articulo-cuerpo p { font-size: 16px; }

.articulo-cuerpo a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.articulo-cuerpo ul,
.articulo-cuerpo ol {
  margin: 0 0 24px;
  padding-left: 20px;
}

.articulo-cuerpo li {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 10px;
  color: var(--ink);
}

.articulo-cuerpo strong { color: var(--ink); font-weight: 600; }

.articulo-cuerpo blockquote {
  margin: 32px 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--red);
}

.articulo-cuerpo blockquote p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.articulo-cuerpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 28px;
}

.articulo-cuerpo th,
.articulo-cuerpo td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  color: var(--gray-text);
}

.articulo-cuerpo th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  font-weight: 500;
  background: var(--gray-surface);
}

.articulo-cuerpo td:last-child {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
}

/* Entradilla destacada del artículo */
.articulo-entradilla {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}

/* Bloque de cierre con llamada a la acción */
.articulo-cierre {
  margin-top: 56px;
  border-top: 3px solid var(--ink);
  padding-top: 28px;
}

.articulo-cierre p { font-size: 16px; }

/* Fuentes citadas */
.articulo-fuentes {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.articulo-fuentes h2 {
  font-size: 11px;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
  padding-top: 0;
  border-top: none;
  color: #777;
  font-weight: 500;
}

.articulo-fuentes ul { padding-left: 18px; margin: 0; }
.articulo-fuentes li { font-size: 13px; color: var(--gray-text); line-height: 1.6; }

@media (max-width: 860px) {
  .pilar-grid { grid-template-columns: 1fr; }
  .articulo-cuerpo h2 { font-size: 19px; }
}