/* ==========================================================================
   ARTICLE.CSS · Blog (hub + artículos individuales)
   ==========================================================================
   - Resources hub (/recursos/)
   - Article layout (/recursos/[slug]/)
   - Tipografía de artículo, callouts, FAQ, sumario
   - Cards de artículos relacionados
   
   Cargado por: /recursos/index.html y los 22 artículos.
   ========================================================================== */

/* ============================================================
   RECURSOS · Sistema de blog (hub + artículo individual)
   ============================================================ */

/* === HUB de recursos === */
.resources-hero {
  background: var(--c-ink); color: var(--c-bone);
  padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 8vh, 100px);
  position: relative; overflow: hidden;
}
.resources-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(148, 250, 166, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask: radial-gradient(ellipse at 50% 50%, black, transparent 75%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, black, transparent 75%);
  pointer-events: none;
}
.resources-hero-content { max-width: 880px; position: relative; z-index: 2; }
.resources-hero h1 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(40px, 6vw, 80px); line-height: .98;
  letter-spacing: -.04em; color: var(--c-bone); margin: 24px 0 24px;
}
.resources-hero h1 .italic {
  color: var(--c-mint); font-style: italic; font-weight: 600;
  position: relative; display: inline-block;
}
.resources-hero h1 .italic::after {
  content: ''; position: absolute; inset: -10px -8px;
  background: var(--c-mint-glow); filter: blur(40px); z-index: -1; opacity: .5;
}
.resources-hero p.lede {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: var(--c-grey-100); max-width: 640px;
}
.resources-hero p.lede strong { color: var(--c-bone); font-weight: 600; }

/* Filtros de categoría */
.resources-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 24px var(--gutter);
  max-width: var(--container); margin: 0 auto;
  border-bottom: 1px solid rgba(3, 33, 40, .08);
}
.resources-filter {
  padding: 8px 16px;
  background: white;
  border: 1px solid rgba(3, 33, 40, .12);
  border-radius: 999px;
  font-family: var(--ff-mono); font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-grey-700); font-weight: 500;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.resources-filter:hover { border-color: var(--c-mint-deep); color: var(--c-ink); }
.resources-filter.active {
  background: var(--c-ink); color: var(--c-bone);
  border-color: var(--c-ink);
}

/* Grid de cards */
.resources-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) { .resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .resources-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card de artículo */
.resource-card {
  background: white;
  border: 1px solid rgba(3, 33, 40, .08);
  border-radius: 18px;
  padding: 26px 26px 24px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  text-decoration: none; color: inherit;
}
.resource-card::before {
  content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--c-mint-deep), var(--c-mint));
  transition: width .4s var(--ease-out);
}
.resource-card:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 208, 106, .22);
  box-shadow: 0 24px 48px -16px rgba(3, 33, 40, .12);
}
.resource-card:hover::before { width: 100%; }
.resource-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
  font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
}
.resource-card-meta .cat { color: var(--c-mint-deep); font-weight: 600; }
.resource-card-meta .read { color: var(--c-grey-500); font-weight: 500; }
.resource-card h3 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: 18.5px; line-height: 1.22;
  letter-spacing: -.025em; color: var(--c-ink);
  margin-bottom: 14px;
}
.resource-card p {
  font-size: 14px; line-height: 1.55; color: var(--c-grey-700);
  margin-bottom: 18px;
}
.resource-card-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(3, 33, 40, .06);
}
.resource-card-date {
  font-family: var(--ff-mono); font-size: 10.5px;
  color: var(--c-grey-500); letter-spacing: .04em; text-transform: uppercase;
}
.resource-card-arrow {
  color: var(--c-mint-deep);
  transition: transform .25s var(--ease-out);
}
.resource-card:hover .resource-card-arrow { transform: translateX(3px); }
.resource-card.is-hidden { display: none; }

/* Card destacado (primer artículo del mes) */
.resource-card--featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr;
  padding: 0;
  border: 1px solid rgba(79, 208, 106, .25);
  background: linear-gradient(135deg, white 0%, rgba(79, 208, 106, .04) 100%);
}
@media (min-width: 720px) {
  .resource-card--featured { grid-template-columns: 1.1fr 1fr; }
}
.resource-card--featured .resource-card-text {
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
}
.resource-card--featured .resource-card-visual {
  background: var(--c-ink);
  position: relative; overflow: hidden;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.resource-card--featured .resource-card-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(148, 250, 166, .08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.resource-card--featured h3 {
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  margin-bottom: 18px;
}
.resource-card--featured p { font-size: 15.5px; line-height: 1.6; }
.resource-card--featured .featured-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(79, 208, 106, .12);
  color: var(--c-mint-deep);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 14px; align-self: flex-start;
}

/* === ARTÍCULO INDIVIDUAL === */
.article-hero {
  background: var(--c-ink); color: var(--c-bone);
  padding: clamp(80px, 12vh, 130px) 0 clamp(40px, 6vh, 80px);
  position: relative; overflow: hidden;
}
.article-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(148, 250, 166, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask: radial-gradient(ellipse at 30% 40%, black, transparent 75%);
  -webkit-mask: radial-gradient(ellipse at 30% 40%, black, transparent 75%);
  pointer-events: none;
}
.article-hero-content { max-width: 820px; position: relative; z-index: 2; }
.article-hero .breadcrumb {
  margin-bottom: 24px; font-family: var(--ff-mono); font-size: 11px;
  color: var(--c-grey-300); letter-spacing: .04em;
}
.article-hero .breadcrumb a { color: var(--c-grey-100); transition: color .2s ease; }
.article-hero .breadcrumb a:hover { color: var(--c-mint); }
.article-hero .breadcrumb .sep { margin: 0 8px; opacity: .5; }
.article-cat {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(148, 250, 166, .12);
  border: 1px solid rgba(148, 250, 166, .25);
  color: var(--c-mint);
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 24px;
}
.article-hero h1 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.05;
  letter-spacing: -.035em; color: var(--c-bone); margin-bottom: 24px;
}
.article-hero h1 .italic {
  color: var(--c-mint); font-style: italic; font-weight: 600;
}
.article-hero p.lede {
  font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6;
  color: var(--c-grey-100); max-width: 720px; margin-bottom: 32px;
}
.article-hero p.lede strong { color: var(--c-bone); font-weight: 600; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(148, 250, 166, .12);
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--c-grey-300); letter-spacing: .04em;
}
.article-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.article-meta-item svg { color: var(--c-mint); }
.article-meta-item strong { color: var(--c-bone); font-weight: 600; }

/* Body del artículo · layout 2-col */
.article-body-wrap {
  background: var(--c-paper);
  padding: clamp(60px, 8vh, 100px) 0 clamp(60px, 8vh, 120px);
}
.article-body-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 48px;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
@media (min-width: 1024px) {
  .article-body-grid { grid-template-columns: 220px 1fr; gap: 64px; }
}

/* TOC sticky */
.article-toc {
  position: sticky; top: 100px;
  align-self: start;
  font-family: var(--ff-mono); font-size: 12px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.article-toc-title {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-grey-500); font-weight: 600;
  margin-bottom: 16px;
}
.article-toc ul { list-style: none; padding: 0; margin: 0; }
.article-toc li { margin-bottom: 10px; }
.article-toc a {
  color: var(--c-grey-700); text-decoration: none;
  display: block; padding: 4px 0 4px 12px;
  border-left: 2px solid rgba(3, 33, 40, .08);
  transition: color .2s ease, border-color .2s ease;
  line-height: 1.4; font-size: 12.5px;
}
.article-toc a:hover, .article-toc a.active {
  color: var(--c-mint-deep); border-left-color: var(--c-mint-deep);
}
@media (max-width: 1023px) { .article-toc { display: none; } }

/* Body del artículo · tipografía rica */
.article-body {
  max-width: 720px;
  font-family: var(--ff-sans);
  font-size: 17px; line-height: 1.7; color: var(--c-grey-700);
}
.article-body > * + * { margin-top: 1.4em; }
.article-body h2 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2;
  letter-spacing: -.025em; color: var(--c-ink);
  margin-top: 2.5em; margin-bottom: .6em;
  scroll-margin-top: 100px;
}
.article-body h2 .italic { color: var(--c-mint-deep); font-style: italic; font-weight: 600; }
.article-body h3 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: 21px; line-height: 1.25;
  letter-spacing: -.02em; color: var(--c-ink);
  margin-top: 2em; margin-bottom: .5em;
  scroll-margin-top: 100px;
}
.article-body h4 {
  font-family: var(--ff-sans); font-weight: 600;
  font-size: 17px; line-height: 1.3;
  color: var(--c-ink); margin-top: 1.6em; margin-bottom: .4em;
}
.article-body p strong { color: var(--c-ink); font-weight: 600; }
.article-body p { color: var(--c-grey-700); }
.article-body a {
  color: var(--c-mint-deep); font-weight: 500;
  border-bottom: 1px solid rgba(79, 208, 106, .35);
  transition: border-color .2s ease, color .2s ease;
}
.article-body a:hover { border-color: var(--c-mint-deep); color: var(--c-ink); }
.article-body ul, .article-body ol {
  padding-left: 24px; margin: 1em 0;
}
.article-body li { margin-bottom: 8px; line-height: 1.65; }
.article-body li::marker { color: var(--c-mint-deep); }
.article-body blockquote {
  border-left: 4px solid var(--c-mint-deep);
  padding: 8px 24px; margin: 2em 0;
  background: rgba(79, 208, 106, .05);
  border-radius: 0 12px 12px 0;
  font-size: 17px; line-height: 1.6; color: var(--c-ink);
  font-style: italic;
}
.article-body blockquote p:first-child { margin-top: 0; }
.article-body blockquote p:last-child { margin-bottom: 0; }

/* Tablas */
.article-body .table-wrap { overflow-x: auto; margin: 1.6em 0; border-radius: 12px; border: 1px solid rgba(3, 33, 40, .08); }
.article-body table {
  width: 100%; border-collapse: collapse;
  font-family: var(--ff-sans); font-size: 14.5px;
  background: white;
}
.article-body th {
  background: rgba(3, 33, 40, .04);
  font-weight: 600; color: var(--c-ink);
  text-align: left; padding: 12px 14px;
  font-family: var(--ff-mono); font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(3, 33, 40, .08);
}
.article-body td {
  padding: 12px 14px; line-height: 1.5;
  border-bottom: 1px solid rgba(3, 33, 40, .05);
  color: var(--c-grey-700);
}
.article-body td strong { color: var(--c-ink); }
.article-body tr:last-child td { border-bottom: 0; }

/* Code y mono */
.article-body code {
  font-family: var(--ff-mono); font-size: .9em;
  background: rgba(3, 33, 40, .06);
  padding: 2px 6px; border-radius: 4px;
  color: var(--c-ink);
}

/* Box destacado / callout */
.article-callout {
  background: linear-gradient(135deg, rgba(79, 208, 106, .08), rgba(79, 208, 106, .03));
  border: 1px solid rgba(79, 208, 106, .2);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 1.8em 0;
  font-size: 15.5px; line-height: 1.6;
}
.article-callout-label {
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-mint-deep); margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.article-callout-label::before {
  content: ''; width: 6px; height: 6px; background: var(--c-mint-deep);
  border-radius: 50%; box-shadow: 0 0 6px var(--c-mint-deep);
}
.article-callout p:first-child { margin-top: 0; }
.article-callout p:last-child { margin-bottom: 0; }

/* CTA inline al final del artículo */
.article-cta {
  margin: 3.5em 0 2em;
  padding: 36px 32px;
  background: var(--c-ink); color: var(--c-bone);
  border-radius: 18px;
  position: relative; overflow: hidden;
}
.article-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-mint), var(--c-mint-deep));
}
.article-cta-eyebrow {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-mint); margin-bottom: 12px;
}
.article-cta h3 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  letter-spacing: -.025em; color: var(--c-bone);
  margin-bottom: 12px;
}
.article-cta h3 .italic { color: var(--c-mint); font-style: italic; font-weight: 600; }
.article-cta p {
  font-size: 15px; line-height: 1.55; color: var(--c-grey-100);
  margin-bottom: 20px; max-width: 520px;
}
.article-cta .btn { display: inline-flex; }

/* Cards relacionadas al final */
.article-related {
  background: white;
  padding: clamp(60px, 8vh, 100px) 0;
  border-top: 1px solid rgba(3, 33, 40, .06);
}
.article-related-head {
  max-width: var(--container); margin: 0 auto 32px;
  padding: 0 var(--gutter);
}
.article-related-head .eyebrow { margin-bottom: 14px; }
.article-related-head h2 {
  font-family: var(--ff-sans); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05;
  letter-spacing: -.03em; color: var(--c-ink);
}
.article-related-head h2 .italic { color: var(--c-mint-deep); font-style: italic; font-weight: 600; }
.article-related-grid {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 720px) { .article-related-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mobile: ajustes */
@media (max-width: 640px) {
  .resource-card { padding: 22px 22px 20px; }
  .article-body { font-size: 16px; }
  .article-cta { padding: 28px 24px; }
}


/* === FIX responsive móvil: evitar desbordamiento horizontal (tablas anchas en grid) ===
   Causa: .article-body es un item de grid con min-width:auto por defecto, así que la
   columna no encogía por debajo del ancho mínimo de la tabla y desbordaba toda la página.
   Solución: permitir que la columna encoja (min-width:0) para que el overflow-x:auto del
   .table-wrap contenga la tabla con scroll horizontal propio, y que el texto largo parta. */
.article-body-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .article-body-grid { grid-template-columns: 220px minmax(0, 1fr); }
}
.article-body, .article-toc { min-width: 0; }
.article-body { overflow-wrap: break-word; word-wrap: break-word; }
.article-body .table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.article-body table { min-width: 0; }
.article-body th, .article-body td { overflow-wrap: break-word; word-break: normal; }
.article-hero-content, .article-hero h1, .article-hero p.lede { max-width: 100%; overflow-wrap: break-word; }
@media (max-width: 1023px) {
  .article-body-wrap { overflow-x: clip; }
}
/* ============================================================
   NEXOO · Componentes prácticos para artículos (2ª generación)
   Reutilizables, on-brand (Hanken Grotesk, ink/mint/paper),
   cero monospace, responsive. Se usan dentro de .article-body.
   ============================================================ */

/* Corrección de marca: las etiquetas pequeñas del artículo pasan
   de JetBrains Mono a Hanken Grotesk (principio "cero monospace"). */
.article-meta, .article-toc-title, .breadcrumb, .article-cat,
.article-cta-eyebrow, .resource-card-meta .cat, .resource-card-meta .read,
.resource-card-date, .eyebrow {
  font-family: var(--ff-sans) !important;
  letter-spacing: .04em;
}

/* 1 · DATO DESTACADO (citable en SEO/GEO) */
.nx-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:1.8em 0; }
.nx-stat { background:#fff; border:1px solid rgba(3,33,40,.08); border-radius:16px; padding:20px 16px; text-align:center; }
.nx-stat .n { font-size:clamp(30px,5vw,38px); font-weight:800; letter-spacing:-.03em; color:var(--c-ink); line-height:1; }
.nx-stat .n span { color:var(--c-mint-deep); }
.nx-stat .l { font-size:13.5px; color:var(--c-grey-500); margin-top:8px; line-height:1.4; }

/* 2 · PASOS NUMERADOS */
.nx-steps { display:flex; flex-direction:column; gap:14px; margin:1.8em 0; }
.nx-step { display:flex; gap:16px; background:#fff; border:1px solid rgba(3,33,40,.08); border-radius:14px; padding:18px; }
.nx-step .num { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--c-mint); color:var(--c-ink); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
.nx-step h4 { margin:2px 0 4px; font-size:16.5px; color:var(--c-ink); font-weight:700; }
.nx-step p { margin:0; font-size:15.5px; color:var(--c-grey-700); }

/* 3 · CHECKLIST PRÁCTICA */
.nx-check { background:var(--c-bone); border:1px solid rgba(79,208,106,.3); border-radius:16px; padding:22px 24px; margin:1.8em 0; }
.nx-check h4 { margin:0 0 14px; font-size:16px; color:var(--c-ink); font-weight:800; }
.nx-check ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.nx-check li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--c-ink); }
.nx-check li svg { flex:0 0 auto; margin-top:2px; color:var(--c-mint-deep); }

/* 4 · COMPARATIVA CON PUNTUACIÓN VISUAL (usa .table-wrap existente) */
.nx-dots { display:inline-flex; gap:4px; }
.nx-dots i { width:9px; height:9px; border-radius:50%; background:var(--c-mint-deep); display:inline-block; }
.nx-dots i.off { background:rgba(3,33,40,.14); }

/* 5 · CAJA PLANTILLA / RECURSO */
.nx-tpl { border:1.5px solid var(--c-ink); border-radius:16px; overflow:hidden; margin:1.8em 0; }
.nx-tpl .top { background:var(--c-ink); color:var(--c-bone); padding:12px 18px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.nx-tpl .top svg { color:var(--c-mint); flex:0 0 auto; }
.nx-tpl .in { padding:6px 20px; background:#fff; }
.nx-tpl .in .row { padding:12px 0; border-bottom:1px dashed rgba(3,33,40,.1); font-size:15.5px; }
.nx-tpl .in .row:last-child { border-bottom:0; }
.nx-tpl .in b { color:var(--c-ink); }

/* 6 · PROS / CONTRAS */
.nx-pc { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:1.8em 0; }
.nx-pc .col { border-radius:14px; padding:18px; border:1px solid rgba(3,33,40,.08); background:#fff; }
.nx-pc .col.good { background:rgba(148,250,166,.1); border-color:rgba(79,208,106,.32); }
.nx-pc .col.bad { background:rgba(3,33,40,.03); }
.nx-pc h5 { margin:0 0 12px; font-size:14px; font-weight:800; color:var(--c-ink); }
.nx-pc ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.nx-pc li { font-size:15px; padding-left:20px; position:relative; color:var(--c-grey-700); }
.nx-pc .good li:before { content:"+"; position:absolute; left:0; color:var(--c-mint-deep); font-weight:800; }
.nx-pc .bad li:before { content:"\2013"; position:absolute; left:0; color:var(--c-grey-500); font-weight:800; }

/* 7 · CITA DESTACADA */
.nx-quote { border-left:3px solid var(--c-mint-deep); padding:4px 0 4px 22px; margin:1.6em 0; font-size:clamp(18px,2.4vw,21px); line-height:1.45; color:var(--c-ink); font-weight:600; font-style:italic; }

/* 8 · AYUDA A DECIDIR */
.nx-decide { background:var(--c-ink); color:var(--c-bone); border-radius:18px; padding:26px; margin:1.8em 0; }
.nx-decide h4 { margin:0 0 14px; color:#fff; font-size:18px; font-weight:800; }
.nx-decide .opt { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid rgba(148,250,166,.15); }
.nx-decide .opt:first-of-type { border-top:0; }
.nx-decide .tag { flex:0 0 auto; background:var(--c-mint); color:var(--c-ink); font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.nx-decide .opt p { margin:0; font-size:15px; color:var(--c-grey-100); }
.nx-decide .opt p b { color:#fff; }

/* Responsive */
@media (max-width:560px){
  .nx-stats { grid-template-columns:1fr; }
  .nx-pc { grid-template-columns:1fr; }
}

/* Remap: cero monospace en artículos (principio de marca) */
:root{ --ff-mono: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; }