/* =====================================================================
   blog.css — el blog con el DS: el artículo (/blog/<slug>/), el listado
   (/blog/: portada, todos los artículos y búsqueda) y la página de cada tema
   (/blog/tema/<slug>/).

   Porta blog.css de la maqueta aprobada (~/Code/docokids-maquetas/blog/).
   Aquí vive solo lo que el blog necesita y el DS no tiene.
   Todo valor sale de un token; los pocos literales llevan su porqué.

   Carga después de home.css (el menú, el pie y .sticky-cta--hidden viven ahí),
   así que sus ajustes de abajo ganan por orden de fuente sin subir
   especificidad.
   ===================================================================== */

/* ---- La marca del tema: un ícono de línea en teal sobre un círculo gris claro.
   Un solo color para los catorce temas: el tema lo dicen el ícono y el nombre,
   no una paleta. El tamaño base es el de los estantes; cada lugar lo ajusta. ---- */
.blog-tema-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--gris-claro);
  color: var(--p-verde);
  font-size: var(--fs-h3);
}

/* ---- Rejilla: índice a la izquierda en escritorio, una columna en celular ---- */
.articulo { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.articulo__rejilla {
  display: grid;
  grid-template-columns: minmax(0, var(--measure-prose));
  justify-content: center;
}
@media (min-width: 992px) {
  .articulo__rejilla {
    /* 13rem: lo que ocupa un subtítulo de unos 40 caracteres (la mediana
       medida en los artículos) en dos renglones a --fs-small. */
    grid-template-columns: 13rem minmax(0, var(--measure-prose));
    column-gap: var(--space-6);
  }
  .articulo__cabecera { grid-column: 2; }
  .articulo__indice { grid-column: 1; grid-row: 2; }
  .articulo .prosa { grid-column: 2; grid-row: 2; }
}

/* ---- Cabecera ---- */
.articulo__miga {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-secundario);
  margin-bottom: var(--space-3);
}
.articulo__miga a { color: var(--p-rosado-texto); }
.articulo__miga a:hover { color: var(--p-verde); }
.articulo__miga span { color: var(--hairline); margin: 0 var(--space-2); }
/* El título es la única voz grande de la página. A --fs-display (el h1 global)
   un titular de 70 caracteres ocupa cinco renglones; dos escalones abajo. */
.articulo__titulo {
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}
.articulo__bajada { margin-bottom: var(--space-4); }
.articulo__firma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}
.articulo__firma p { margin: 0; }
.articulo__autor { color: var(--gris-oscuro); }
.articulo__firma a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.2em;
}
.articulo__fechas { color: var(--gris); }
.articulo__compartir { display: flex; align-items: center; gap: var(--space-1); color: var(--gris); }
.articulo__compartir .ds-icon { font-size: var(--fs-lead); }
.articulo__copiado { color: var(--gris-secundario); margin-left: var(--space-1); }
/* Solo lo ve el equipo: estado y botones de Editar y Borrar. */
.articulo__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}

/* ---- Índice: columna fija a la izquierda en escritorio; plegado arriba en celular ---- */
.articulo__indice { display: none; }
@media (min-width: 992px) {
  .articulo__indice {
    display: block;
    position: sticky;
    /* 6rem: debajo del menú fijo (.site-nav) con aire. El mismo valor que el
       scroll-margin-top de los subtítulos, para que el salto y el índice
       queden alineados. */
    top: 6rem;
    align-self: start;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
  }
}
.articulo__indice-titulo {
  font-weight: 600;
  color: var(--gris-oscuro);
  margin-bottom: var(--space-2);
}
.articulo__indice ol { list-style: none; margin: 0; padding: 0; }
.articulo__indice a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 2px solid var(--hairline);
  color: var(--gris);
  line-height: 1.35;
}
.articulo__indice a:hover { color: var(--gris-oscuro); }
.articulo__indice a[aria-current="true"] { color: var(--gris-oscuro); border-left-color: var(--p-verde); }

.articulo__indice-movil {
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}
@media (min-width: 992px) { .articulo__indice-movil { display: none; } }
.articulo__indice-movil summary {
  cursor: pointer;
  font-weight: 600;
  padding-bottom: var(--space-3);
}
.articulo__indice-movil ol { margin: 0 0 var(--space-3); padding-left: 1.25em; }
.articulo__indice-movil li { padding: var(--space-1) 0; }
.articulo__indice-movil a { color: var(--gris-secundario); }

.articulo__video { margin-bottom: var(--space-5); }
.articulo__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 4px;
}

/* ---- Prosa: lo que pega el editor del admin (CKEditor), sin clases ---- */
.prosa {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--gris-oscuro);
}
.prosa > *:first-child { margin-top: 0; }
.prosa p { margin: 0 0 var(--space-3); }
.prosa h2,
.prosa--secciones-h3 h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: var(--space-6) 0 var(--space-3);
}
.prosa h3 {
  font-size: var(--fs-lead);
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-2);
}
/* El salto desde el índice deja el subtítulo debajo del menú fijo, no tapado. */
.prosa h2,
.prosa h3 { scroll-margin-top: 6rem; }
.prosa ul, .prosa ol { margin: 0 0 var(--space-3); padding-left: 1.25em; }
.prosa li { margin-bottom: var(--space-2); }
.prosa li::marker { color: var(--gris); }
.prosa a:not(.btn) {
  color: var(--p-rosado-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prosa a:not(.btn):hover { text-decoration-thickness: 2px; }
/* 845 enlaces de los artículos traen el color escrito en línea
   (style="color: #ed5482"), el rosa de marca, que sobre blanco da 3.39:1 y no
   llega al 4.5:1 de WCAG AA. Para ganarle a un estilo en línea hace falta
   !important. La misma regla que cuida tests_blog_contraste_enlaces.py en
   style.css (el stack viejo), aquí para el artículo nuevo. */
.prosa a[style*="#ed5482" i] { color: var(--p-rosado-texto) !important; }
.prosa strong, .prosa b { font-weight: 600; }
.prosa img { max-width: 100%; height: auto; }
.prosa blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--p-rosado);
  color: var(--gris-secundario);
}

/* ---- Banda del tema, a mitad del artículo: ícono, texto, botón debajo y la
   letra chica. Vive dentro de .prosa, así que cada regla de texto lleva la
   clase propia para ganarle a las de la prosa. ---- */
/* Dentro de la banda gris, el círculo del ícono va blanco y un escalón abajo. */
.blog-cta-tema .blog-tema-icono { width: 3rem; height: 3rem; font-size: var(--fs-lead); background: var(--paper); }
.blog-cta-tema {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  align-items: start;
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  /* 4px = el radio de .btn en button.css: el DS usa geometría quieta. */
  border-radius: 4px;
  background: var(--gris-claro);
  font-family: var(--font-sans);
}
/* Ninguna línea de la banda termina con una palabra sola ("hora." sola en un
   renglón agregaba un renglón de más). */
.blog-cta-tema p { text-wrap: pretty; }
.prosa .blog-cta-tema__titulo {
  margin: 0 0 var(--space-1);
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--gris-oscuro);
}
.prosa .blog-cta-tema__meta {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gris-secundario);
}
.blog-cta-tema__accion { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prosa .blog-cta-tema__letra {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--gris);
}
/* Emergencias: el aviso, con borde rosa para que se lea como aviso y no como venta. */
.blog-cta-tema--aviso { align-items: center; border-color: var(--p-rosado); background: var(--paper); }
.blog-cta-tema--aviso .blog-tema-icono { color: var(--p-rosado-texto); background: var(--gris-claro); }
.prosa .blog-cta-tema--aviso .blog-cta-tema__titulo { margin: 0; }
@media (max-width: 575.98px) {
  .blog-cta-tema { grid-template-columns: 1fr; }
  .blog-cta-tema__accion .btn { width: 100%; }
}

/* Los formularios de la prueba no agregan aire propio: el botón manda. */
.blog-prueba { margin: 0; }
.blog-cta-tema__accion .blog-prueba { flex: 0 1 auto; }
@media (max-width: 575.98px) {
  .blog-cta-tema__accion .blog-prueba { flex-basis: 100%; }
}

/* ---- Barra fija de celular: la pregunta del tema y el precio al lado del botón ---- */
.sticky-cta__fila { display: flex; align-items: center; gap: var(--space-3); }
.sticky-cta__texto { flex: 1; margin: 0; font-family: var(--font-sans); line-height: 1.3; }
.sticky-cta__pregunta { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--gris-oscuro); }
.sticky-cta__precio { display: block; font-size: var(--fs-caption); color: var(--gris-secundario); }
@media (max-width: 767.98px) {
  /* sticky-cta.css pone el botón a lo ancho; aquí comparte la fila con el texto. */
  .sticky-cta.sticky-cta--tema .btn { display: inline-block; width: auto; }
  .sticky-cta--tema .blog-prueba { flex-shrink: 0; }
}

/* ---- Sigue leyendo: la tarjeta de artículo del home, sin foto ---- */
.blog-sigue { padding-bottom: var(--space-7); }
.blog-sigue h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.blog-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .blog-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .blog-rejilla { grid-template-columns: repeat(3, 1fr); } }
.article-card--sin-foto {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
}
/* Tres títulos a --fs-h3 gritan todos a la vez; un escalón abajo. */
.article-card--sin-foto .article-card__title { font-size: var(--fs-lead); line-height: 1.3; }
.article-card__meta {
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--gris);
}

/* =====================================================================
   El listado (/blog/) y la página de cada tema (/blog/tema/<slug>/).
   ===================================================================== */

/* ---- Cabecera ---- */
.blog-cabecera {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
}
.blog-cabecera h1 { margin-bottom: var(--space-3); }
.blog-cabecera .lead {
  max-width: var(--measure-prose);
  margin-bottom: var(--space-5);
}

/* ---- Buscador: campo del DS + botón teal pegado ---- */
.blog-buscador {
  display: flex;
  gap: var(--space-2);
  /* 30rem: cabe "Busca un tema: fiebre, sueño, vacunas" sin cortarse. */
  max-width: 30rem;
}
.blog-buscador .ds-field { flex: 1; margin-bottom: 0; }
.blog-buscador .btn { flex-shrink: 0; }
.blog-busqueda-estado {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  color: var(--gris-secundario);
}

/* ---- Temas: enlaces de texto, el activo subrayado en teal ---- */
.blog-temas {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.blog-temas a {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gris-secundario);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
/* En celular quince temas ocupaban cinco renglones antes del primer artículo:
   una sola fila que se desliza de lado, con el último tema cortado como pista. */
@media (max-width: 767.98px) {
  .blog-temas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--space-3));
    padding-right: var(--space-3);
    padding-bottom: var(--space-1);
  }
  .blog-temas::-webkit-scrollbar { display: none; }
  .blog-temas li { flex-shrink: 0; }
}
.blog-temas a:hover { color: var(--gris-oscuro); }
.blog-temas a[aria-current="true"] {
  color: var(--gris-oscuro);
  border-bottom-color: var(--p-verde);
}

.blog-cuerpo { padding-bottom: var(--space-7); }

/* ---- Panel de redacción: solo lo ve el equipo ---- */
.blog-redaccion {
  padding: var(--space-3) 0;
  margin-bottom: var(--space-5);
  background: var(--gris-claro);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}
.blog-redaccion__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.blog-redaccion__titulo { margin: 0; font-weight: 600; color: var(--gris-oscuro); }
.blog-redaccion__lista { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.blog-redaccion__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.blog-redaccion__titulo-articulo { flex: 1; color: var(--gris-oscuro); }

/* ---- Índice: una fila por artículo, el tema y la fecha a la izquierda ---- */
.article-index {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 56rem: la columna del tema más una línea de --measure-prose. */
  max-width: 56rem;
}
.article-index__item { border-top: 1px solid var(--hairline); }
.article-index__item:last-child { border-bottom: 1px solid var(--hairline); }
.article-index__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  color: var(--gris-oscuro);
}
@media (min-width: 768px) {
  /* 11rem: cabe "RECIÉN NACIDO" en mayúsculas sin partirse. */
  .article-index__link { grid-template-columns: 11rem 1fr; gap: var(--space-5); }
}
.article-index__link:hover .article-index__titulo { color: var(--p-verde); }
.article-index__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-content: start;
}
@media (min-width: 768px) { .article-index__meta { flex-direction: column; padding-top: 0.35em; } }
.article-index__tema {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-rosado-texto);
}
.article-index__fecha {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--gris);
}
.article-index__titulo {
  display: block;
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.3;
  transition: color 150ms ease;
}
.article-index__intro {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gris-secundario);
  max-width: var(--measure-prose);
}

/* ---- Paginación: estado en el centro, flechas de texto ---- */
.blog-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  max-width: 56rem;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}
.blog-paginacion__estado { color: var(--gris); }
.blog-paginacion__apagado { color: var(--hairline); }

/* Búsqueda sin resultados: la banda apilada, con el enlace a todos debajo. */
.blog-sin-resultados { max-width: 40rem; }
.blog-sin-resultados .blog-cta-tema { margin: var(--space-2) 0 0; }

/* ---- Portada: el más reciente en grande y lo más reciente al lado ---- */
.blog-destacado { padding-bottom: var(--space-6); }
.blog-destacado__titulo {
  font-size: var(--fs-h2);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.blog-destacado__titulo a { color: inherit; }
.blog-destacado__titulo a:hover { color: var(--p-verde); }
.blog-destacado .lead { max-width: var(--measure-prose); margin-bottom: var(--space-3); }
.blog-recientes__titulo {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--gris-secundario);
  margin-bottom: var(--space-2);
}
.blog-recientes { list-style: none; margin: 0; padding: 0; }
.blog-recientes li { border-top: 1px solid var(--hairline); }
.blog-recientes a {
  display: block;
  padding: var(--space-3) 0;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gris-oscuro);
}
.blog-recientes a:hover { color: var(--p-verde); }
.blog-recientes .article-index__tema { display: block; margin-bottom: var(--space-1); font-weight: 500; }

/* ---- Estantes por tema ---- */
.blog-estante { padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.blog-estante + .blog-estante { margin-top: var(--space-6); }
.blog-estante__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.blog-estante__cabeza h2 { font-size: var(--fs-h3); }
.blog-estante__nombre { display: flex; align-items: center; gap: var(--space-3); }
.blog-estante__bajada {
  margin: var(--space-1) 0 0;
  color: var(--gris-secundario);
}

/* Acomodo "destacado": uno grande y una lista al lado. */
.blog-estante__principal { display: block; color: var(--gris-oscuro); }
.blog-estante__principal h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: var(--space-3); transition: color 150ms ease; }
.blog-estante__principal p { color: var(--gris-secundario); max-width: var(--measure-prose); margin-bottom: var(--space-3); }
.blog-estante__principal:hover h3 { color: var(--p-verde); }
.blog-estante__lista { list-style: none; margin: 0; padding: 0; }
.blog-estante__lista li { border-top: 1px solid var(--hairline); }
.blog-estante__lista li:last-child { border-bottom: 1px solid var(--hairline); }
.blog-estante__lista a { display: block; padding: var(--space-3) 0; color: var(--gris-oscuro); }
.blog-estante__lista a:hover .blog-estante__titulo-corto,
.blog-estante__numerada a:hover .blog-estante__titulo-corto { color: var(--p-verde); }
.blog-estante__titulo-corto {
  display: block;
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: 1.3;
  margin-bottom: var(--space-1);
  transition: color 150ms ease;
}

/* Acomodo "numerado": número grande en el rosa de la marca. No en
   --p-rosado-texto: ese rosa oscurecido es para texto chico y, a este tamaño y
   peso, se lee como rojo, que en salud suena a alarma. El de marca da 3.39:1
   sobre blanco, suficiente para texto grande (WCAG pide 3:1 desde 18.66px en
   negrita), y el número es decorativo: el lector de pantalla no lo lee. */
.blog-estante__numerada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-6);
}
@media (min-width: 768px) { .blog-estante__numerada { grid-template-columns: repeat(2, 1fr); } }
.blog-estante__numerada a {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--gris-oscuro);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.blog-estante__numero {
  flex-shrink: 0;
  min-width: 2.2ch;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--p-rosado);
}

/* Acomodo "portada": fondo gris de lado a lado y un titular grande. La sombra
   recortada pinta el fondo hasta los bordes de la ventana sin causar
   desplazamiento horizontal. */
.blog-estante--portada {
  border-top: 0;
  padding-bottom: var(--space-6);
  background: var(--gris-claro);
  box-shadow: 0 0 0 100vmax var(--gris-claro);
  clip-path: inset(0 -100vmax);
}
.blog-estante--portada + .blog-estante { border-top: 0; }
.blog-estante--portada .blog-tema-icono { background: var(--paper); }
.blog-estante__portada { display: block; color: var(--gris-oscuro); }
.blog-estante__portada-titulo {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
  transition: color 150ms ease;
}
.blog-estante__portada:hover .blog-estante__portada-titulo { color: var(--p-verde); }
.blog-estante__portada-intro {
  display: block;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--gris-secundario);
  max-width: var(--measure-prose);
  margin-bottom: var(--space-4);
}
.blog-estante .article-card--sin-foto { border-top: 0; padding-top: 0; }

/* ---- La banda de la prueba donde hay ancho: el componente del home
   (.pricing-trial-band, ds/pages/home.css) tal cual. Aquí solo el aire
   alrededor y el botón teal a ancho completo en celular (el home lo hace con
   su botón gris). ---- */
.blog-banda { margin: var(--space-5) 0; }
.blog-banda .pricing-trial-band__copy { max-width: 42rem; }
.blog-banda__letra { color: var(--gris); }
/* Ninguna línea de la banda termina con una palabra sola. */
.blog-banda p { text-wrap: pretty; }
@media (max-width: 767.98px) {
  .blog-banda .btn-primary { width: 100%; }
}
/* En la portada, entre el segundo y el tercer estante. */
.blog-banda--portada { margin: var(--space-6) 0 0; }
.blog-banda--portada + .blog-estante { margin-top: var(--space-6); }
/* Emergencias: el mismo cuerpo, sin botón y con borde rosa para que se lea como aviso. */
.blog-banda--aviso { border-color: var(--p-rosado); background: var(--paper); }

/* ---- Página de un tema ---- */
.blog-tema__cabeza { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.blog-cabecera .blog-tema__cabeza h1 { margin-bottom: 0; }
.blog-tema__icono { width: 4.5rem; height: 4.5rem; font-size: var(--fs-h2); }
@media (max-width: 767.98px) {
  .blog-tema__icono { width: 3.5rem; height: 3.5rem; font-size: var(--fs-h3); }
}
.blog-tema__cuenta {
  margin: calc(-1 * var(--space-4)) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--gris);
}
.blog-tema__vacio { color: var(--gris-secundario); }
/* Arriba: el más reciente en grande y tres numerados en una columna. */
.blog-tema__principal-titulo {
  font-size: var(--fs-h2);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  transition: color 150ms ease;
}
.blog-estante__principal:hover .blog-tema__principal-titulo { color: var(--p-verde); }
.blog-estante__numerada.blog-tema__numerada { grid-template-columns: 1fr; gap: var(--space-3); }
.blog-tema__todos { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-4); }
/* Al final: los demás temas. */
.blog-otros-temas { margin-top: var(--space-6); border-top: 1px solid var(--hairline); }
.blog-otros-temas .blog-tema__todos { margin-top: var(--space-5); }

/* ---- Los temas con su ícono: cierre de la portada y de cada tema ---- */
.blog-temas-con-icono {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 12rem: cabe "Recién nacido" con su ícono en una línea. */
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3) var(--space-4);
}
.blog-temas-con-icono a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--gris-oscuro);
}
.blog-temas-con-icono a:hover { color: var(--p-verde); }
.blog-temas-con-icono .blog-tema-icono { width: 2.75rem; height: 2.75rem; font-size: var(--fs-lead); }
/* En una columna, los catorce temas ocupaban una pantalla entera del celular. */
@media (max-width: 575.98px) {
  .blog-temas-con-icono {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-3);
  }
  .blog-temas-con-icono a { gap: var(--space-2); }
}