/* ============================================================================
   blog.css — El blog público de la vitrina (1.10.68 · fase 2.0): /blog y /blog?a=<slug>.
   Tokens de la vitrina (tokens.css), móvil primero. Sin franjas verticales de color y sin puntos en las etiquetas:
   la etiqueta es texto, el acento es el verde de siempre y solo en el botón.
   ============================================================================ */

.blog { background: var(--color-bg); }

/* ---- Piezas comunes ---- */
.blog-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-cuerpo);
  font-size: var(--fs-eyebrow);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--verde-texto);
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-texto-suave);
}
.blog-enlace {
  color: var(--verde-texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.blog-enlace:hover, .blog-enlace:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ============================== LA LISTA ============================== */
.blog-lista { padding-block: var(--seccion-py); }
.blog-lista__cab { max-width: 46rem; margin-bottom: var(--space-6); }
.blog-lista__t {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h1);
  line-height: var(--lh-titulo);
}
.blog-lista__lead {
  margin: 0;
  font-size: var(--fs-subtitulo);
  line-height: 1.45;
  color: var(--color-texto-suave);
}
.blog-vacio {
  margin: 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-bg-alt);
  font-size: var(--fs-cuerpo);
  color: var(--color-texto-suave);
  text-align: center;
}

.blog-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.blog-tarjeta { min-width: 0; }
.blog-tarjeta__a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.blog-tarjeta__a:hover, .blog-tarjeta__a:focus-visible {
  border-color: var(--color-borde-fuerte);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}
.blog-tarjeta__a:focus-visible { outline: 3px solid var(--verde-texto); outline-offset: 2px; }
.blog-tarjeta__img {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--gris-200);
  overflow: hidden;
}
.blog-tarjeta__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-tarjeta__img--vacia { background: linear-gradient(135deg, var(--azul-800), var(--azul-700)); }
.blog-tarjeta__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.blog-tarjeta__txt .blog-eyebrow { margin: 0; }
.blog-tarjeta__t {
  margin: 0;
  font-size: var(--fs-subtitulo);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.blog-tarjeta__r {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--color-texto-suave);
  line-height: var(--lh-cuerpo);
}
.blog-tarjeta__txt .blog-meta { margin-top: auto; padding-top: var(--space-2); }

.blog-pag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
}
.blog-pag__b {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio);
  color: var(--color-texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.blog-pag__b:hover, .blog-pag__b:focus-visible { border-color: var(--verde); color: var(--verde-700); background: var(--verde-50); }
.blog-pag__n { color: var(--color-texto-suave); font-size: var(--fs-caption); }

/* ============================== EL ARTÍCULO ============================== */
.blog-art {
  max-width: calc(46rem + 2 * var(--gutter));
  padding-block: var(--space-5) var(--seccion-py);
}
.blog-migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-caption);
  color: var(--color-texto-suave);
}
.blog-migas a { color: var(--color-texto-suave); text-decoration: none; }
.blog-migas a:hover, .blog-migas a:focus-visible { color: var(--verde-texto); text-decoration: underline; }
.blog-migas [aria-current] { color: var(--color-texto); overflow-wrap: anywhere; }

.blog-art__cab { margin-bottom: var(--space-5); }
.blog-art__t {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h1);
  line-height: var(--lh-titulo);
  overflow-wrap: anywhere;
}
.blog-art__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-subtitulo);
  line-height: 1.45;
  color: var(--color-texto-suave);
}
.blog-art__portada {
  margin: 0 0 var(--space-6);
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--gris-200);
}
.blog-art__portada img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

/* El cuerpo: lo que escribió la administración (HTML saneado o párrafos). */
.blog-cuerpo {
  font-size: var(--fs-cuerpo);
  line-height: 1.75;
  color: var(--color-texto);
  overflow-wrap: break-word;
}
.blog-cuerpo > :first-child { margin-top: 0; }
.blog-cuerpo p, .blog-cuerpo ul, .blog-cuerpo ol { margin: 0 0 var(--space-4); }
.blog-cuerpo ul, .blog-cuerpo ol { padding-left: 1.4em; }
.blog-cuerpo li { margin-bottom: var(--space-2); }
.blog-cuerpo h2 { margin: var(--space-6) 0 var(--space-3); font-size: var(--fs-h3); line-height: var(--lh-titulo); }
.blog-cuerpo h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-subtitulo); line-height: 1.3; }
.blog-cuerpo a { color: var(--verde-texto); text-decoration: underline; text-underline-offset: 3px; }
.blog-cuerpo img, .blog-cuerpo video, .blog-cuerpo iframe { max-width: 100%; height: auto; border-radius: var(--radio); }
.blog-cuerpo blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radio);
  background: var(--color-bg-alt);
  color: var(--color-texto);
}
.blog-cuerpo blockquote > :last-child { margin-bottom: 0; }
.blog-cuerpo table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.blog-cuerpo pre { max-width: 100%; overflow-x: auto; }

.blog-formacion {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-bg-alt);
}
.blog-formacion__t { margin: 0 0 var(--space-2); font-size: var(--fs-h3); line-height: var(--lh-titulo); overflow-wrap: anywhere; }
.blog-formacion__x { margin: 0 0 var(--space-4); color: var(--color-texto-suave); line-height: var(--lh-cuerpo); }
.blog-formacion .btn { width: 100%; }

.blog-art__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-borde);
}

/* ---- Tableta y escritorio ---- */
@media (min-width: 640px) {
  .blog-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-formacion .btn { width: auto; }
  .blog-formacion { padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .blog-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .blog-art { padding-top: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-tarjeta__a { transition: none; }
  .blog-tarjeta__a:hover, .blog-tarjeta__a:focus-visible { transform: none; }
}