/* ==========================================================================
   NextPatch — Blog público (/blog y /blog/{slug})
   Página autónoma como la landing y /login: no carga app.css. Misma paleta
   (fondo #12141D, índigo #635BFF, coral #FF7A59) y mismas fuentes (Outfit +
   JetBrains Mono solo para código, fechas y datos). Prefijo de clases: bl-.

   Color por categoría: Producto = índigo (la marca), Java = coral (el color
   de la energía de la marca, que además evoca la taza de Java). El coral de
   relleno sigue reservado al hover de los CTA grandes, como en la landing.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --np-bg: #12141d;
  --np-surface: #1b1e2b;
  --np-surface-2: #232738;
  --np-border: #2e3347;
  --np-text: #eceef6;
  --np-muted: #9aa0b5;
  --np-primary: #635bff;
  --np-primary-hover: #756eff;
  --np-primary-soft: rgba(99, 91, 255, 0.14);
  --np-accent: #ff7a59;
  --np-accent-soft: rgba(255, 122, 89, 0.12);
  --np-code-bg: #0d0f16;

  /* Texto secundario de lectura: entre --np-text y --np-muted. */
  --bl-text-2: #c4c8d6;
  /* Enlaces dentro del texto: el índigo aclarado para llegar a 4.5:1. */
  --bl-link: #8f89ff;

  --bl-space-1: 4px;
  --bl-space-2: 8px;
  --bl-space-3: 12px;
  --bl-space-4: 16px;
  --bl-space-5: 24px;
  --bl-space-6: 32px;
  --bl-space-7: 48px;
  --bl-space-8: 72px;

  --bl-pad: clamp(16px, 5vw, 104px);
  --bl-maxw: 1240px;
  /* Columna de lectura del artículo: 640px con la prosa a 18px dan ~70
     caracteres por línea en Outfit. Va en px y no en ch porque el "0" de
     Outfit es ancho (68ch daban ~93 caracteres) y porque el paginador y la
     llamada final, con otro tamaño de letra, deben alinearse con el texto. */
  --bl-measure: 640px;
  --bl-radius: 16px;

  /* Curva de salida fuerte (Emil Kowalski): arranca rápido, frena suave. */
  --bl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bl-dur-fast: 160ms;
  --bl-dur: 220ms;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
  scrollbar-color: var(--np-border) var(--np-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--np-bg);
  color: var(--np-text);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(99, 91, 255, 0.45);
  color: #fff;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--bl-link);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  font-family: 'Outfit', sans-serif;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.bl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Iconos del set np por máscara: toman el color del texto (currentColor). */
.bl-ico {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--bl-icon) center / contain no-repeat;
  mask: var(--bl-icon) center / contain no-repeat;
}

/* Enlace "estirado": todo el bloque es clicable pero solo hay un enlace
   (un único nombre accesible, sin enlaces anidados). */
.bl-stretch {
  text-decoration: none;
}

.bl-stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.bl-stretch:focus-visible {
  outline: none;
}

/* Saltar al contenido -------------------------------------------------- */

.bl-skip {
  position: absolute;
  left: var(--bl-space-4);
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--np-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.bl-skip:focus {
  top: var(--bl-space-3);
}

/* Botones (mismos que la landing) -------------------------------------- */

.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--np-surface-2);
  color: var(--np-text);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bl-dur-fast) ease, border-color var(--bl-dur-fast) ease,
    color var(--bl-dur-fast) ease, box-shadow var(--bl-dur-fast) ease;
}

.bl-btn:active {
  transform: scale(0.97);
}

.bl-btn--primary {
  background: var(--np-primary);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(99, 91, 255, 0.75);
}

.bl-btn--ghost {
  background: transparent;
  border-color: var(--np-border);
}

.bl-btn--lg {
  min-height: 50px;
  padding: 13px 24px;
  font-size: 15.5px;
  border-radius: 13px;
}

@media (hover: hover) and (pointer: fine) {
  .bl-btn--primary:hover {
    background: var(--np-primary-hover);
  }

  /* Igual que la landing: el coral solo en el CTA grande y poco frecuente. */
  .bl-btn--primary.bl-btn--lg:hover {
    background: var(--np-accent);
    color: #24120d;
    box-shadow: 0 14px 30px -14px rgba(255, 122, 89, 0.6);
  }

  .bl-btn--ghost:hover {
    border-color: var(--np-muted);
    background: var(--np-surface-2);
  }
}

/* Cabecera ------------------------------------------------------------ */

.bl-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--bl-space-4);
  padding: 12px var(--bl-pad);
  background: rgba(18, 20, 29, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--np-border);
}

.bl-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
}

.bl-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--np-primary);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(99, 91, 255, 0.35);
}

.bl-brand__name {
  font-size: 18px;
}

.bl-nav__sep {
  color: var(--np-border);
  font-size: 22px;
  font-weight: 300;
}

.bl-nav__section {
  font-size: 16px;
  font-weight: 500;
  color: var(--np-muted);
  text-decoration: none;
  transition: color var(--bl-dur-fast) ease;
}

.bl-nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.bl-nav__link {
  padding: 8px 10px;
  font-size: 14px;
  color: var(--np-muted);
  text-decoration: none;
  transition: color var(--bl-dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .bl-nav__section:hover,
  .bl-nav__link:hover {
    color: var(--np-text);
  }
}

/* Contenido --------------------------------------------------------- */

.bl-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--bl-maxw) + 2 * var(--bl-pad));
  margin: 0 auto;
  padding: var(--bl-space-8) var(--bl-pad) 96px;
}

.bl-main:focus {
  outline: none;
}

/* Metadatos (categoría · fecha · lectura) */
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
  color: var(--np-muted);
  font-variant-numeric: tabular-nums;
}

.bl-meta > * + *::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--np-border);
  vertical-align: middle;
}

.bl-meta > .bl-cat + *::before {
  display: none;
}

.bl-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--np-border);
}

.bl-cat--product {
  color: #a9a4ff;
  border-color: rgba(99, 91, 255, 0.45);
  background: var(--np-primary-soft);
}

.bl-cat--java {
  color: var(--np-accent);
  border-color: rgba(255, 122, 89, 0.4);
  background: var(--np-accent-soft);
}

/* ============================ LISTADO ============================ */

.bl-intro {
  margin-bottom: var(--bl-space-7);
}

.bl-intro__title {
  max-width: 20ch;
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.bl-intro__lead {
  max-width: 58ch;
  margin: var(--bl-space-4) 0 0;
  font-size: clamp(16px, 1.5vw, 18.5px);
  color: var(--bl-text-2);
  text-wrap: pretty;
}

/* Filtro por categoría: control segmentado de enlaces. */
.bl-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--bl-space-6);
  padding: 4px;
  border: 1px solid var(--np-border);
  border-radius: 14px;
  background: var(--np-surface);
}

.bl-filter__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--np-muted);
  text-decoration: none;
  transition: background-color var(--bl-dur-fast) ease, color var(--bl-dur-fast) ease;
}

.bl-filter__n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--np-muted);
}

.bl-filter__tab[aria-current='page'] {
  background: var(--np-surface-2);
  color: var(--np-text);
  box-shadow: inset 0 0 0 1px var(--np-border);
}

.bl-filter__tab[aria-current='page'] .bl-filter__n {
  color: #a9a4ff;
}

@media (hover: hover) and (pointer: fine) {
  .bl-filter__tab:not([aria-current='page']):hover {
    color: var(--np-text);
  }
}

/* Post destacado */
.bl-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--bl-space-6);
  align-items: stretch;
  padding: clamp(24px, 3.4vw, 44px);
  margin-bottom: var(--bl-space-8);
  border: 1px solid var(--np-border);
  border-radius: 22px;
  background: var(--np-surface);
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, 0.7);
  transition: border-color var(--bl-dur) var(--bl-ease-out);
}

.bl-featured:has(.bl-stretch:focus-visible) {
  outline: 2px solid var(--bl-link);
  outline-offset: 4px;
}

.bl-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--bl-space-4);
  min-width: 0;
}

.bl-featured__title {
  font-size: clamp(26px, 3.3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.bl-featured__summary {
  max-width: 60ch;
  margin: 0;
  font-size: 17px;
  color: var(--bl-text-2);
  text-wrap: pretty;
}

.bl-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--bl-space-3);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bl-link);
}

.bl-readmore .bl-ico {
  width: 18px;
  height: 18px;
  transition: transform var(--bl-dur) var(--bl-ease-out);
}

/* Rótulo del destacado: la versión o el nombre de la función, como dato. */
.bl-featured__badge {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: var(--bl-space-5);
  border-radius: 16px;
  border: 1px solid var(--np-border);
  background:
    linear-gradient(var(--np-border) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--np-code-bg);
  background-blend-mode: normal;
  overflow: hidden;
}

.bl-featured__badge span {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: clamp(34px, 5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  color: #a9a4ff;
  padding: 10px 16px;
  background: var(--np-code-bg);
}

.bl-featured__badge--java span {
  color: var(--np-accent);
}

@media (hover: hover) and (pointer: fine) {
  .bl-featured:hover {
    border-color: rgba(99, 91, 255, 0.55);
  }

  .bl-featured:hover .bl-readmore .bl-ico {
    transform: translateX(3px);
  }
}

/* Archivo por meses: el mes hace de carril a la izquierda. */
.bl-month {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--bl-space-6);
  padding-top: var(--bl-space-5);
  border-top: 1px solid var(--np-border);
}

.bl-month + .bl-month {
  margin-top: var(--bl-space-7);
}

.bl-month__title {
  position: sticky;
  top: 88px;
  align-self: start;
  padding-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--np-muted);
}

.bl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bl-item + .bl-item {
  border-top: 1px solid rgba(46, 51, 71, 0.6);
}

.bl-item__inner {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 20px 0 24px;
  border-radius: 14px;
}

/* Fondo de hover que desborda el texto sin mover el layout. */
.bl-item__inner::before {
  content: '';
  position: absolute;
  inset: 4px -16px;
  border-radius: 14px;
  background: var(--np-surface);
  opacity: 0;
  transition: opacity var(--bl-dur) var(--bl-ease-out);
  pointer-events: none;
}

.bl-item__inner > * {
  position: relative;
}

.bl-item__title {
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color var(--bl-dur-fast) ease;
}

.bl-item__summary {
  max-width: 70ch;
  margin: 0;
  color: var(--bl-text-2);
  font-size: 15.5px;
  text-wrap: pretty;
}

.bl-item__inner:has(.bl-stretch:focus-visible)::before {
  opacity: 1;
  outline: 2px solid var(--bl-link);
  outline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .bl-item__inner:hover::before {
    opacity: 1;
  }

  .bl-item__inner:hover .bl-item__title {
    color: #fff;
  }
}

/* Estado vacío */
.bl-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl-space-4);
  padding: var(--bl-space-6);
  border: 1px dashed var(--np-border);
  border-radius: var(--bl-radius);
  color: var(--bl-text-2);
}

.bl-empty p {
  margin: 0;
}

/* ============================ ARTÍCULO ============================ */

.bl-page--post .bl-main {
  padding-top: var(--bl-space-7);
}

.bl-article,
.bl-pager,
.bl-cta {
  width: 100%;
  max-width: var(--bl-measure);
  margin-inline: auto;
}

.bl-article {
  font-size: 18px;
}

.bl-article__head {
  display: grid;
  gap: var(--bl-space-4);
  padding-bottom: var(--bl-space-6);
  margin-bottom: var(--bl-space-6);
  border-bottom: 1px solid var(--np-border);
}

.bl-crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  color: var(--np-muted);
  text-decoration: none;
  transition: color var(--bl-dur-fast) ease;
}

.bl-crumbs .bl-ico {
  width: 18px;
  height: 18px;
  transition: transform var(--bl-dur) var(--bl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bl-crumbs a:hover {
    color: var(--np-text);
  }

  .bl-crumbs a:hover .bl-ico {
    transform: translateX(-3px);
  }
}

.bl-article__title {
  font-size: clamp(32px, 4.6vw, 50px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.bl-article__lead {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--bl-text-2);
  text-wrap: pretty;
}

.bl-fallback {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  font-size: 14px;
  color: var(--bl-text-2);
}

/* Prosa del artículo */
.bl-prose {
  line-height: 1.75;
  color: #dfe2ec;
}

.bl-prose > :first-child {
  margin-top: 0;
}

.bl-prose p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

.bl-prose h2 {
  margin: 2.1em 0 0.6em;
  font-size: 1.45em;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--np-text);
}

.bl-prose h3 {
  margin: 1.7em 0 0.5em;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--np-text);
}

.bl-prose ul,
.bl-prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
}

.bl-prose li {
  margin: 0.45em 0;
  padding-left: 0.2em;
}

.bl-prose li::marker {
  color: var(--np-primary);
}

.bl-prose ol li::marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}

.bl-prose strong {
  font-weight: 600;
  color: var(--np-text);
}

.bl-prose a {
  color: var(--bl-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(143, 137, 255, 0.45);
  transition: text-decoration-color var(--bl-dur-fast) ease, color var(--bl-dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .bl-prose a:hover {
    color: #b3aeff;
    text-decoration-color: currentColor;
  }
}

.bl-prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84em;
  padding: 0.12em 0.38em;
  border-radius: 6px;
  background: var(--np-surface-2);
  border: 1px solid var(--np-border);
  color: #e6e8f2;
  overflow-wrap: anywhere;
}

.bl-code {
  margin: 1.6em 0;
  border: 1px solid var(--np-border);
  border-radius: 14px;
  background: var(--np-code-bg);
  overflow: hidden;
}

.bl-code figcaption {
  padding: 9px 16px;
  border-bottom: 1px solid var(--np-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-muted);
}

.bl-code pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.65;
  color: #e6e8f2;
  tab-size: 4;
}

.bl-code pre:focus-visible {
  outline-offset: -2px;
  border-radius: 0 0 14px 14px;
}

.bl-code code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
}

.bl-note {
  margin: 1.6em 0;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(99, 91, 255, 0.35);
  background: var(--np-primary-soft);
}

.bl-note p {
  margin: 0;
  font-size: 0.94em;
}

/* Pie del artículo: etiquetas y fuentes */
.bl-article__foot {
  display: grid;
  gap: var(--bl-space-6);
  margin-top: var(--bl-space-7);
  padding-top: var(--bl-space-6);
  border-top: 1px solid var(--np-border);
}

.bl-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--np-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--np-muted);
}

.bl-sources__title {
  font-size: 18px;
  font-weight: 600;
}

.bl-sources__note {
  margin: 4px 0 var(--bl-space-3);
  font-size: 14px;
  color: var(--np-muted);
}

.bl-sources__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.bl-sources__list li + li {
  border-top: 1px solid rgba(46, 51, 71, 0.6);
}

.bl-sources__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--bl-text-2);
  text-decoration: none;
  transition: color var(--bl-dur-fast) ease;
}

.bl-sources__list .bl-ico {
  width: 13px;
  height: 13px;
  color: var(--np-muted);
  transition: transform var(--bl-dur) var(--bl-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bl-sources__list a:hover {
    color: var(--bl-link);
  }

  .bl-sources__list a:hover .bl-ico {
    transform: translate(2px, -2px);
    color: var(--bl-link);
  }
}

/* Anterior / siguiente */
.bl-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bl-space-4);
  margin-top: var(--bl-space-7);
}

.bl-pager__link {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 20px;
  border: 1px solid var(--np-border);
  border-radius: var(--bl-radius);
  text-decoration: none;
  transition: border-color var(--bl-dur) var(--bl-ease-out), background-color var(--bl-dur) var(--bl-ease-out);
}

.bl-pager__link--newer {
  grid-column: 2;
  text-align: right;
}

.bl-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--np-muted);
}

.bl-pager__link--newer .bl-pager__dir {
  justify-content: flex-end;
}

.bl-pager__dir .bl-ico {
  width: 16px;
  height: 16px;
}

.bl-pager__title {
  font-weight: 600;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .bl-pager__link:hover {
    border-color: rgba(99, 91, 255, 0.55);
    background: var(--np-surface);
  }
}

/* Llamada final */
.bl-cta {
  margin-top: var(--bl-space-8);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 20px;
  border: 1px solid var(--np-border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 91, 255, 0.16), transparent 60%),
    var(--np-surface);
}

.bl-cta h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.bl-cta p {
  max-width: 52ch;
  margin: 10px 0 22px;
  color: var(--bl-text-2);
}

/* Barra de progreso de lectura (solo donde hay scroll-driven animations y
   el usuario no pide menos movimiento; si no, no aparece). */
.bl-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bl-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      z-index: 30;
      height: 2px;
      background: var(--np-primary);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: bl-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes bl-progress {
  to {
    transform: scaleX(1);
  }
}

/* Pie ------------------------------------------------------------------- */

.bl-foot {
  border-top: 1px solid var(--np-border);
  background: var(--np-surface);
}

.bl-foot__inner,
.bl-foot__bottom {
  max-width: calc(var(--bl-maxw) + 2 * var(--bl-pad));
  margin: 0 auto;
  padding-inline: var(--bl-pad);
}

.bl-foot__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 20px;
}

.bl-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 13.5px;
}

.bl-foot__nav a {
  display: inline-block;
  padding: 6px 0;
  color: var(--np-muted);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .bl-foot__nav a:hover {
    color: var(--np-text);
  }
}

.bl-foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 24px;
  border-top: 1px solid var(--np-border);
  font-size: 12.5px;
  color: var(--np-muted);
}

.bl-foot__beta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--np-border);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Movimiento reducido: sin desplazamientos; los cambios de color se quedan. */
@media (prefers-reduced-motion: reduce) {
  .bl-btn:active,
  .bl-featured:hover .bl-readmore .bl-ico,
  .bl-crumbs a:hover .bl-ico,
  .bl-sources__list a:hover .bl-ico {
    transform: none;
  }
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .bl-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .bl-featured__badge {
    order: -1;
    min-height: 140px;
  }

  .bl-month {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .bl-month__title {
    position: static;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .bl-main {
    padding-top: var(--bl-space-6);
  }

  .bl-nav__link,
  .bl-nav__login {
    display: none;
  }

  .bl-nav__cta .bl-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .bl-filter {
    display: flex;
  }

  /* Al partir línea, el punto separador quedaría huérfano al principio. */
  .bl-meta > * + *::before {
    display: none;
  }

  .bl-filter__tab {
    flex: 1 1 auto;
    justify-content: center;
  }

  .bl-item__inner::before {
    inset: 4px -8px;
  }

  .bl-article {
    font-size: 17px;
  }

  .bl-code {
    border-radius: 12px;
  }

  .bl-code pre {
    padding: 14px 16px;
    font-size: 13px;
  }

  .bl-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .bl-pager__link--newer {
    grid-column: auto;
    grid-row: 1;
  }
}

/* En móvil estrecho la cabecera se queda con la marca "//", «Blog» y el CTA
   (el enlace de la marca conserva su nombre accesible por aria-label). */
@media (max-width: 420px) {
  .bl-nav .bl-brand__name {
    display: none;
  }
}