/* blog.css — hub /blog/ y artículos /blog/<slug>
   Reusa cs-nav, cs-prose, cs-faq, cs-back, cs-cta y lp-footer (casos.css/styles.css).
   Aquí: encabezado editorial, grid del hub, byline y relacionados. */

/* ============ HUB ============ */
.blog-hub{padding:56px 0 72px;background:var(--color-canvas,#fff)}
.blog-hub__wrap{max-width:1120px}
.blog-hub__breadcrumb{
  font-size:13px;color:var(--color-body,#5b616b);margin-bottom:28px;
}
.blog-hub__breadcrumb a{color:var(--color-body,#5b616b);text-decoration:none}
.blog-hub__breadcrumb a:hover{color:var(--color-brand,#1E50FA)}
.blog-hub__breadcrumb span[aria-hidden]{opacity:.5;margin:0 4px}
.blog-hub__head{
  max-width:720px;padding-bottom:40px;margin-bottom:44px;
  border-bottom:1px solid var(--color-hairline,#DEE1E6);
}
.blog-hub__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.02em;font-size:clamp(32px,5vw,48px);line-height:1.06;
  color:var(--color-ink,#0A0B0D);margin:0 0 16px;
}
.blog-hub__intro{
  font-size:18px;line-height:1.6;color:var(--color-body,#5b616b);margin:0;max-width:60ch;
}

.blog-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
}
@media (max-width:720px){.blog-grid{grid-template-columns:1fr}}

.blog-card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--color-hairline,#DEE1E6);border-radius:24px;
  text-decoration:none;background:#fff;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.blog-card:hover{
  box-shadow:0 12px 32px rgba(10,11,13,.07);transform:translateY(-2px);
  border-color:#cdd2d9;
}
.blog-card__media{
  display:block;position:relative;aspect-ratio:16/9;background:#0A0B0D;overflow:hidden;
}
.blog-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92);transition:transform .35s ease;
}
.blog-card:hover .blog-card__media img{transform:scale(1.035)}
.blog-card__body{
  display:flex;flex-direction:column;flex:1;padding:24px 28px 26px;
}
.blog-card__cat{
  font-family:var(--font-mono,"JetBrains Mono"),monospace;font-weight:500;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-brand,#1E50FA);margin-bottom:14px;
}
.blog-card__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.015em;font-size:22px;line-height:1.2;
  color:var(--color-ink,#0A0B0D);margin:0 0 12px;
}
.blog-card__excerpt{
  font-size:15px;line-height:1.6;color:var(--color-body,#5b616b);margin:0 0 22px;
}
.blog-card__meta{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono,"JetBrains Mono"),monospace;font-weight:500;
  font-size:12px;color:var(--color-body,#5b616b);
}
.blog-card__meta span[aria-hidden]{opacity:.45}
.blog-card__arrow{
  margin-left:auto;display:inline-flex;color:var(--color-ink,#0A0B0D);
  transition:transform .2s ease;
}
.blog-card:hover .blog-card__arrow{transform:translateX(3px)}
.blog-card__arrow svg{width:18px;height:18px}

/* ============ ARTÍCULO ============ */
.bp{padding:0 0 8px;background:var(--color-canvas,#fff)}
.bp__wrap{max-width:720px}

/* ---- Hero fotográfico (portada editorial) ---- */
.bp-hero{
  position:relative;overflow:hidden;background:#0A0B0D;color:#fff;
  min-height:clamp(400px,54vh,560px);display:flex;
}
.bp-hero__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.62;filter:saturate(.95);
}
.bp-hero__tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,.58) 0%,rgba(10,11,13,.34) 34%,rgba(10,11,13,.92) 100%);
}
.bp-hero__wrap{
  position:relative;max-width:760px;width:100%;
  display:flex;flex-direction:column;
  padding-top:34px;padding-bottom:48px;
}
.bp-hero__breadcrumb{margin-bottom:auto}
.bp-hero__breadcrumb,.bp-hero__breadcrumb a{color:rgba(255,255,255,.72)}
.bp-hero__breadcrumb a:hover{color:#fff}
.bp-hero__breadcrumb span[aria-hidden]{opacity:.5;margin:0 4px}

.bp__breadcrumb{font-size:13px;text-decoration:none}
.bp__breadcrumb a{text-decoration:none}

.bp__kicker{
  display:inline-block;font-family:var(--font-mono,"JetBrains Mono"),monospace;
  font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#85B7EB;margin-bottom:16px;margin-top:40px;
}
.bp__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.025em;font-size:clamp(30px,4.8vw,46px);line-height:1.06;
  color:#fff;margin:0 0 18px;max-width:20ch;
}
.bp__lead{
  font-size:19px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 22px;max-width:60ch;
}
.bp__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono,"JetBrains Mono"),monospace;font-weight:500;
  font-size:12.5px;color:rgba(255,255,255,.66);
}
.bp__meta span[aria-hidden]{opacity:.45}

.bp__body{padding-top:48px}
.bp__body h2{font-size:clamp(21px,2.6vw,26px);margin-top:42px}
.bp__body h3{font-size:18px;margin-top:28px}
.bp__body a{
  color:var(--color-brand,#1E50FA);text-decoration:underline;text-underline-offset:2px;
}
.bp__body a.cs-back{text-decoration:none}

/* ============ RELACIONADOS ============ */
.bp__related{
  max-width:720px;margin:8px auto 0;padding:40px 0 8px;
  border-top:1px solid var(--color-hairline,#DEE1E6);
}
.bp__related-label{
  font-family:var(--font-mono,"JetBrains Mono"),monospace;font-weight:500;
  font-size:12px;letter-spacing:.04em;color:var(--color-body,#5b616b);margin:0 0 20px;
}
.bp__related-list{display:grid;gap:14px}
.bp__related-item{
  display:flex;align-items:baseline;gap:12px;text-decoration:none;
  color:var(--color-ink,#0A0B0D);font-size:16px;line-height:1.4;
}
.bp__related-item:hover .bp__related-title{color:var(--color-brand,#1E50FA)}
.bp__related-item svg{width:15px;height:15px;flex:none;position:relative;top:2px;color:var(--color-brand,#1E50FA)}
.bp__related-title{transition:color .15s ease}

/* ============ BENCHMARKS CITADOS (bp-stats) ============
   Bloque de cifras con fuente. Existe para dos cosas a la vez: darle al lector
   una referencia dura y darle al motor de IA un fragmento citable (estadística
   + fuente es la táctica que más sube la visibilidad segun el paper de Princeton).
   Mono en los números por sistema; azul solo en el número, nunca en el fondo. */
.bp-stats{
  margin:36px 0;padding:28px;border:1px solid var(--color-hairline,#DEE1E6);
  border-radius:24px;background:var(--color-soft,#F7F7F7);
}
.bp-stats__label{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-body,#5b616b);
  margin:0 0 20px;
}
.bp-stats__grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.bp-stats__grid{grid-template-columns:1fr 1fr}}
.bp-stats__num{
  display:block;font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;
  font-variant-numeric:tabular-nums;font-size:clamp(28px,4vw,36px);line-height:1;
  letter-spacing:-.02em;color:var(--color-brand,#1E50FA);margin-bottom:8px;
}
.bp-stats__txt{margin:0;font-size:15px;line-height:1.55;color:var(--color-ink,#0A0B0D)}
.bp-stats__src{
  display:block;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--color-body,#5b616b);
}
.bp-stats__src a{color:var(--color-body,#5b616b);text-decoration:underline;text-underline-offset:2px}
.bp-stats__src a:hover{color:var(--color-brand,#1E50FA)}

/* ── Diagramas de concepto (SVG inline, sin dependencias) ──────────────
   Un diagrama de flujo con los tokens del sistema: banda oscura editorial,
   azul de marca solo en el nodo que importa, mono en etiquetas técnicas.
   Se escribe a mano en vez de Mermaid por CDN: ~1MB de JS de terceros no
   se justifica en un sitio cuyo objetivo es velocidad de indexación. */
.bp-diag{
  margin:36px 0;padding:26px 24px 20px;border-radius:24px;
  background:var(--color-ink,#0A0B0D);border:1px solid #26292f;
}
.bp-diag__label{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 18px;
}
.bp-diag__svg{display:block;width:100%;height:auto;overflow:visible}
.bp-diag__note{
  margin:16px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.62);
}
.bp-diag__note b{color:#fff;font-weight:500}

/* ============================================================
   RECURSOS (/recursos/)
   Hero sin fotografía: el término manda y la definición es el
   objeto de la página. La respuesta directa va en .rc-def porque
   es lo que Google levanta como fragmento destacado y lo que un
   modelo de IA cita literal, así que se le da superficie propia.
   ============================================================ */

/* ---- Hero de término ---- */
.rc-hero{
  position:relative;background:var(--color-ink,#0A0B0D);color:#fff;
  border-bottom:1px solid #1e2126;
}
.rc-hero__wrap{
  max-width:760px;width:100%;display:flex;flex-direction:column;
  padding-top:30px;padding-bottom:44px;
}
.rc-hero .bp__breadcrumb,.rc-hero .bp__breadcrumb a{color:rgba(255,255,255,.7)}
.rc-hero .bp__breadcrumb a:hover{color:#fff}
.rc-hero .bp__breadcrumb span[aria-hidden]{opacity:.5;margin:0 4px}
.rc-hero .bp__kicker{margin-top:34px}
.rc-hero .bp__title{margin-bottom:24px}

/* La definición canónica: el fragmento respondible */
.rc-def{
  border-left:2px solid var(--color-brand,#1E50FA);
  padding:2px 0 2px 20px;margin:0 0 26px;max-width:64ch;
}
.rc-def__label{
  display:block;font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-brand,#1E50FA);margin-bottom:8px;
}
.rc-def__text{font-size:19px;line-height:1.6;color:rgba(255,255,255,.9);margin:0}

/* ---- Hub A-Z ---- */
.rc-hub__hero{
  background:var(--color-ink,#0A0B0D);color:#fff;padding:30px 0 52px;
}
.rc-hub__hero .bp__breadcrumb,.rc-hub__hero .bp__breadcrumb a{color:rgba(255,255,255,.7)}
.rc-hub__hero .bp__breadcrumb span[aria-hidden]{opacity:.5;margin:0 4px}
.rc-hub__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.025em;font-size:clamp(32px,5vw,50px);line-height:1.05;
  margin:38px 0 18px;max-width:18ch;
}
.rc-hub__intro{
  font-size:18px;line-height:1.6;color:rgba(255,255,255,.78);margin:0;max-width:62ch;
}
.rc-hub__stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:36px}
.rc-stat{display:flex;flex-direction:column;gap:4px}
.rc-stat__num{
  font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;
  font-variant-numeric:tabular-nums;font-size:26px;line-height:1;color:#fff;
}
.rc-stat__lbl{
  font-size:12.5px;color:rgba(255,255,255,.58);
}

.rc-hub__body{padding:44px 0 24px}

/* Índice alfabético */
.rc-index{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-bottom:30px;margin-bottom:8px;border-bottom:1px solid var(--color-hairline,#DEE1E6);
  position:sticky;top:0;background:var(--color-canvas,#fff);z-index:2;padding-top:14px;
}
.rc-index a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 9px;border-radius:100px;
  border:1px solid var(--color-hairline,#DEE1E6);
  font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;font-size:13px;
  color:var(--color-ink,#0A0B0D);text-decoration:none;transition:.16s ease;
}
.rc-index a:hover{border-color:var(--color-brand,#1E50FA);color:var(--color-brand,#1E50FA)}

/* Grupos por letra */
.rc-group{padding-top:38px;scroll-margin-top:70px}
.rc-group__letter{
  font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;
  font-size:13px;letter-spacing:.1em;color:var(--color-brand,#1E50FA);
  margin:0 0 14px;
}
.rc-group__list{display:grid;grid-template-columns:1fr;gap:0}
.rc-item{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  align-items:center;column-gap:14px;
  padding:18px 4px;border-top:1px solid var(--color-hairline,#DEE1E6);
  text-decoration:none;transition:.16s ease;
}
.rc-item__term{grid-column:1;grid-row:1}
.rc-item__def{grid-column:1;grid-row:2}
.rc-item__go{grid-column:2;grid-row:1 / span 2}
.rc-item:last-child{border-bottom:1px solid var(--color-hairline,#DEE1E6)}
.rc-item:hover{background:var(--color-canvas-soft,#F7F7F7);padding-left:12px;padding-right:12px}
.rc-item__term{
  display:block;font-size:18px;line-height:1.3;color:var(--color-ink,#0A0B0D);
  margin-bottom:3px;
}
.rc-item__def{display:block;font-size:14.5px;line-height:1.5;color:var(--color-body,#5b616b)}
.rc-item__go{width:18px;height:18px;color:var(--color-hairline,#DEE1E6);flex:none}
.rc-item:hover .rc-item__go{color:var(--color-brand,#1E50FA)}

@media(min-width:720px){
  .rc-group__list{grid-template-columns:1fr 1fr;column-gap:28px}
  .rc-item{grid-column:span 1}
}
@media(max-width:640px){
  .rc-hub__stats{gap:22px}
  .rc-def{padding-left:16px}
  .rc-def__text{font-size:17px}
  .rc-index{gap:6px}
}

/* Hero del hub con la retícula de conceptos de fondo: la sección no queda
   siendo solo texto y el gesto (un término iluminado entre cientos) es el
   mismo argumento de la página. */
.rc-hub__hero{position:relative;overflow:hidden}
.rc-hub__bg{
  position:absolute;inset:0;background:url('/images/og-recursos.jpg') center/cover no-repeat;
  opacity:.55;
}
.rc-hub__tint{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,11,13,.96) 0%,rgba(10,11,13,.86) 46%,rgba(10,11,13,.5) 100%);
}
.rc-hub__inner{position:relative}
@media(max-width:720px){
  .rc-hub__tint{background:linear-gradient(180deg,rgba(10,11,13,.88) 0%,rgba(10,11,13,.94) 60%)}
}


/* ---- Buscador del hub: el índice deja de ser una lista y pasa a ser útil ---- */
.rc-search{
  display:flex;align-items:center;gap:12px;flex:1 1 260px;
  border:1px solid var(--color-hairline,#DEE1E6);border-radius:100px;
  padding:0 18px;height:44px;background:var(--color-canvas,#fff);
}
.rc-search:focus-within{border-color:var(--color-brand,#1E50FA)}
.rc-search svg{width:17px;height:17px;color:var(--color-body,#5b616b);flex:none}
.rc-search input{
  flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:15px;
  color:var(--color-ink,#0A0B0D);min-width:0;
}
.rc-search input::placeholder{color:var(--color-body,#5b616b)}
.rc-search__count{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:12px;
  color:var(--color-brand,#1E50FA);white-space:nowrap;
}
.rc-empty{
  padding:44px 0;text-align:center;font-size:15px;color:var(--color-body,#5b616b);
}

/* ---- Calculadoras ---- */
.rc-tools{padding:52px 0 8px}
.rc-tools__label{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand,#1E50FA);margin:0 0 8px;
}
.rc-tools__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.02em;font-size:clamp(22px,3vw,28px);line-height:1.15;
  color:var(--color-ink,#0A0B0D);margin:0 0 6px;
}
.rc-tools__sub{font-size:15.5px;line-height:1.6;color:var(--color-body,#5b616b);margin:0 0 24px;max-width:60ch}
.rc-tools__grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.rc-tools__grid{grid-template-columns:1fr 1fr}}
.rc-tool{
  display:flex;align-items:center;gap:14px;padding:20px 22px;
  border:1px solid var(--color-hairline,#DEE1E6);border-radius:24px;
  text-decoration:none;transition:.16s ease;background:var(--color-canvas,#fff);
}
.rc-tool:hover{border-color:var(--color-brand,#1E50FA);transform:translateY(-1px)}
.rc-tool__body{flex:1;min-width:0}
.rc-tool__name{display:block;font-size:16.5px;color:var(--color-ink,#0A0B0D);margin-bottom:3px}
.rc-tool__txt{display:block;font-size:14px;line-height:1.5;color:var(--color-body,#5b616b)}
.rc-tool__go{width:18px;height:18px;color:var(--color-hairline,#DEE1E6);flex:none}
.rc-tool:hover .rc-tool__go{color:var(--color-brand,#1E50FA)}

/* La calculadora dentro de un concepto: banda oscura, mono en cifras, azul escaso */
.rc-calc{
  margin:38px 0;padding:28px 26px 24px;border-radius:24px;
  background:var(--color-ink,#0A0B0D);border:1px solid #26292f;
}
.rc-calc__kicker{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand,#1E50FA);margin:0 0 8px;
}
.rc-calc__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.02em;font-size:clamp(19px,2.4vw,23px);line-height:1.2;
  color:#fff;margin:0 0 22px;
}
.rc-calc__grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:680px){.rc-calc__grid{grid-template-columns:1fr 1fr;gap:34px}}
.rc-calc__fields{display:flex;flex-direction:column;gap:14px}
.rc-calc__field{display:block}
.rc-calc__lbl{display:block;font-size:13px;line-height:1.4;color:rgba(255,255,255,.66);margin-bottom:6px}
.rc-calc__input{
  display:flex;align-items:center;gap:8px;
  border:1px solid #3a3f47;border-radius:12px;padding:0 14px;height:44px;
  background:rgba(255,255,255,.04);transition:.16s ease;
}
.rc-calc__input:focus-within{border-color:var(--color-brand,#1E50FA);background:rgba(30,80,250,.08)}
.rc-calc__input input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;
  font-variant-numeric:tabular-nums;font-size:16px;color:#fff;
}
.rc-calc__input input::-webkit-outer-spin-button,
.rc-calc__input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rc-calc__input input[type=number]{-moz-appearance:textfield}
.rc-calc__suf{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:13px;
  color:rgba(255,255,255,.5);flex:none;
}
.rc-calc__outs{display:flex;flex-direction:column;gap:18px;justify-content:center}
.rc-calc__out{display:flex;flex-direction:column;gap:4px}
.rc-calc__val{
  font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;
  font-variant-numeric:tabular-nums;font-size:24px;line-height:1;color:#fff;
}
.rc-calc__out--main .rc-calc__val{font-size:clamp(32px,4.4vw,40px);color:var(--color-brand,#1E50FA)}
.rc-calc__cap{font-size:13px;line-height:1.45;color:rgba(255,255,255,.62)}
.rc-calc__note{
  margin:22px 0 0;padding-top:18px;border-top:1px solid #26292f;
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.62);
}

/* ---- Bloque de servicio: el puente del concepto a lo que hacemos ---- */
.rc-service{
  margin:44px 0 8px;padding:28px 26px;border-radius:24px;
  border:1px solid var(--color-hairline,#DEE1E6);background:var(--color-canvas-soft,#F7F7F7);
}
.rc-service__kicker{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand,#1E50FA);margin:0 0 8px;
}
.rc-service__title{
  font-family:var(--font-display,Inter),system-ui,sans-serif;font-weight:400;
  letter-spacing:-.02em;font-size:clamp(19px,2.4vw,23px);line-height:1.2;
  color:var(--color-ink,#0A0B0D);margin:0 0 10px;
}
.bp__body .rc-service__title{margin-top:0}
.rc-service__txt{font-size:15.5px;line-height:1.6;color:var(--color-body,#5b616b);margin:0 0 18px;max-width:62ch}
.rc-service__proof{
  display:flex;align-items:baseline;gap:12px;padding:16px 0;
  border-top:1px solid var(--color-hairline,#DEE1E6);
  border-bottom:1px solid var(--color-hairline,#DEE1E6);margin-bottom:18px;
}
.rc-service__num{
  font-family:var(--font-mono,ui-monospace),monospace;font-weight:500;
  font-variant-numeric:tabular-nums;font-size:28px;line-height:1;
  color:var(--color-ink,#0A0B0D);flex:none;
}
.rc-service__lbl{font-size:14px;line-height:1.5;color:var(--color-body,#5b616b)}
.rc-service__link{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;
  border-radius:100px;background:var(--color-brand,#1E50FA);color:#fff;
  font-size:15px;text-decoration:none;transition:.16s ease;
}
.bp__body a.rc-service__link{text-decoration:none;color:#fff}
.rc-service__link:hover{transform:translateY(-1px)}
.rc-service__link svg{width:17px;height:17px}
.rc-tools--plant{padding-top:44px}
.rc-tool__meta{
  display:block;margin-top:6px;font-family:var(--font-mono,ui-monospace),monospace;
  font-size:11.5px;color:var(--color-brand,#1E50FA);
}

/* ============================================================
   CAPA DE CONVERSIÓN EN ARTÍCULOS (Paso 36)
   Los artículos con más impresiones convierten dentro del cuerpo,
   no solo en el CTA final: auditoría GEO embebida (bp-audit),
   banda de CTA intermedio (bp-cta) y microcopy reductor de
   ansiedad bajo los botones (bp-reassure).
   ============================================================ */

/* ---- Auditoría GEO embebida en el artículo ---- */
.bp-audit{
  margin:40px 0;padding:30px 26px;border-radius:24px;
  background:var(--color-ink,#0A0B0D);border:1px solid #26292f;
}
.cs-prose .bp-audit__kicker{
  font-family:var(--font-mono,ui-monospace),monospace;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-brand,#1E50FA);margin:0 0 12px;
}
.cs-prose .bp-audit h3{
  font-family:var(--font-display,Inter),sans-serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(22px,3vw,28px);line-height:1.15;color:#fff;margin:0 0 10px;
}
.cs-prose .bp-audit__intro{
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);margin:0;max-width:56ch;
}
.bp-audit .tal-diag{max-width:none}
@media (max-width:560px){.bp-audit{padding:22px 16px}}

/* ---- CTA intermedio dentro del cuerpo ---- */
.bp-cta{
  margin:40px 0;padding:32px 28px;border-radius:24px;
  background:var(--color-ink,#0A0B0D);border:1px solid #26292f;
}
.cs-prose .bp-cta h3{
  font-family:var(--font-display,Inter),sans-serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(22px,3vw,28px);line-height:1.15;color:#fff;margin:0 0 10px;
}
.cs-prose .bp-cta__txt{
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);margin:0 0 22px;max-width:56ch;
}
.bp-cta__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bp-cta__btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--color-brand,#1E50FA);color:#fff;font-size:15px;font-weight:500;
  padding:14px 26px;border-radius:100px;text-decoration:none;
  transition:transform .18s ease,background .18s ease;
}
.bp-cta__btn:hover{transform:translateY(-2px);background:#1a46dd;color:#fff}
.bp-cta__btn svg{width:17px;height:17px}
.cs-prose .bp-cta__alt{color:rgba(255,255,255,.78);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.cs-prose .bp-cta__alt:hover{color:#fff}
@media (max-width:560px){.bp-cta{padding:24px 18px}}

/* ---- Microcopy bajo un botón de CTA (fondo oscuro) ---- */
.bp-reassure{
  margin:14px auto 0;font-size:13px;color:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.bp-reassure svg{width:14px;height:14px;color:var(--color-semantic-up,#05B169);flex:none}
.bp-reassure--left{justify-content:flex-start;margin-left:0}

/* Fix: .cs-prose p (casos.css) le gana en especificidad a .bp-diag__label
   y .bp-diag__note y los pintaba del color del fondo oscuro (invisibles).
   Se re-declaran con el scope de prose. */
.cs-prose .bp-diag__label{color:rgba(255,255,255,.5)}
.cs-prose .bp-diag__note{color:rgba(255,255,255,.62)}
.cs-prose .bp-diag__note b{color:#fff}