/* Blog técnico (/blog/). Usa los tokens y componentes de style.css; aquí solo lo propio del blog. */

/* Cabecera: banda azul corporativa con la textura de plano técnico, sin foto (el H1 es una pregunta larga) */
.blog-cabecera {
  position: relative;
  padding: 3rem 0 2.75rem;
  background: linear-gradient(100deg, #091759 0%, var(--igd-azul) 60%, #16308f 100%);
  color: #fff;
  overflow: hidden;
}
.blog-cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.blog-cabecera > .container { position: relative; }
.blog-cabecera h1 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15; text-wrap: balance; }
.blog-cabecera .subheadline { color: rgba(255,255,255,.85); max-width: 62ch; }
.blog-cabecera .breadcrumb-item a { color: rgba(255,255,255,.75); }
.blog-cabecera .breadcrumb-item.active,
.blog-cabecera .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.55); }
.blog-datos { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-family: 'JetBrains Mono', monospace; font-size: .8125rem; color: rgba(255,255,255,.7); }

/* Cuerpo del artículo: lectura cómoda (~70 caracteres) */
.blog-articulo { font-size: 1.0625rem; line-height: 1.7; }
.blog-articulo > * { max-width: 72ch; }
.blog-articulo h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; scroll-margin-top: 6rem; text-wrap: balance; }
.blog-articulo h3 { font-size: 1.1875rem; margin: 1.75rem 0 .5rem; text-wrap: balance; }
.blog-articulo p, .blog-articulo ul, .blog-articulo ol { margin-bottom: 1rem; }
.blog-articulo li { margin-bottom: .35rem; }
.blog-articulo a { color: var(--igd-azul); text-decoration: underline; text-decoration-color: var(--igd-acento); text-underline-offset: 3px; }
.blog-articulo a:hover { color: var(--igd-acento); }

.blog-resumen {
  background: var(--igd-fondo-alt);
  border-left: 4px solid var(--igd-azul);
  border-radius: 4px;
  padding: 1.25rem 1.5rem .5rem;
  margin: 0 0 2rem;
}
.blog-resumen ul { padding-left: 1.1rem; }

.blog-nota {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--igd-acento); border-radius: 4px;
  background: #F5F8FE; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.blog-nota i { color: var(--igd-acento); font-size: 1.25rem; line-height: 1.4; }
.blog-nota p { margin: 0; }

.blog-tabla { margin: 1.5rem 0; max-width: 72ch; }
.blog-tabla table { font-size: .9375rem; margin: 0; }
.blog-tabla th { background: var(--igd-azul); color: #fff; font-family: 'Barlow', sans-serif; font-weight: 600; border-color: var(--igd-azul); }
.blog-tabla td { vertical-align: top; }

.blog-ayuda-titulo { padding-top: 1.5rem; border-top: 3px solid var(--igd-azul); }

/* Columna lateral: acompaña la lectura en escritorio */
@media (min-width: 992px) {
  .blog-lateral { position: sticky; top: 6.5rem; }
}
.blog-indice ol { padding-left: 1.1rem; margin: 0; font-size: .875rem; display: flex; flex-direction: column; gap: .4rem; }
.blog-indice a { color: var(--igd-texto-sec); text-decoration: none; }
.blog-indice a:hover { color: var(--igd-azul); }

/* Listado */
.blog-filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-filtro {
  border: 1px solid var(--igd-borde); background: #fff; color: var(--igd-texto);
  border-radius: 4px; padding: .4rem .85rem; font-size: .875rem;
}
.blog-filtro:hover, .blog-filtro:focus-visible { border-color: var(--igd-acento); outline: none; }
.blog-filtro.activo { background: var(--igd-azul); border-color: var(--igd-azul); color: #fff; }
.blog-tarjeta { text-decoration: none; color: inherit; }
.blog-tarjeta h3 { color: var(--igd-azul); text-wrap: balance; }
.blog-tarjeta-cat { font-family: 'JetBrains Mono', monospace; font-size: .75rem; color: var(--igd-texto-sec); text-transform: uppercase; letter-spacing: .04em; }