/* BASOLS · case.css — plantilla de case story (single-stories.php) */

.b-ch { padding: 56px var(--b-g) 0; }
.b-ch__crumb { color: var(--b-sig); }
.b-ch__t { margin: 28px 0 0; max-width: 18ch; font: 400 clamp(40px, 5.6vw, 80px)/1 var(--b-font-display); letter-spacing: -.028em; }

/* KPIs grandes */
.b-kpb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--b-ink); }
.b-kpb > div { display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 32px 0; border-bottom: 1px solid var(--b-hair); }
.b-kpb > div + div { padding-left: 28px; border-left: 1px solid var(--b-hair); }
.b-kpb__v { font-size: clamp(56px, 6.6vw, 96px); line-height: .9; letter-spacing: -.033em; }
.b-kpb .b-mono { color: var(--b-ink-3); line-height: 1.4; }

/* Ficha (dl) */
.b-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 40px var(--b-g) 0; background: var(--b-ink); color: var(--b-bg); }
.b-facts > div { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-left: 1px solid var(--b-line-inv); }
.b-facts > div:first-child { border-left: 0; }
.b-facts dt { color: var(--b-ink-inv); }
.b-facts dd { margin: 0; font: 500 15px/1.4 var(--b-font-sans); }
.b-facts + .b-sec { border-top: 0; }

/* Cuerpo: texto alineado con la columna del título */
.b-indent { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.b-indent > * { grid-column: 2; }
.b-rt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.b-rq { position: sticky; top: calc(var(--b-admin) + var(--b-nav-h) + 40px); display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 3px solid var(--b-sig); }
.b-rq .b-mono { color: var(--b-sig); }
.b-rq__q { margin: 0; font: 300 clamp(26px, 2.6vw, 34px)/1.15 var(--b-font-display); letter-spacing: -.02em; color: var(--b-ink); }

/* Stack */
.b-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b-chips .b-tag { padding: 10px 14px; border: 1px solid var(--b-hair-2); }

/* Siguiente caso */
.b-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding: 40px 0; border-top: 1px solid var(--b-ink); border-bottom: 1px solid var(--b-ink); color: var(--b-ink); text-decoration: none; }
.b-next .b-mono { color: var(--b-ink-3); }
.b-next__t { margin: 14px 0 0; font: 400 clamp(30px, 3.4vw, 48px)/1.05 var(--b-font-display); letter-spacing: -.025em; }
.b-next .b-arrow { width: 28px; height: 28px; fill: var(--b-ink); }
.b-next:hover .b-arrow { transform: rotate(-45deg); fill: var(--b-sig); }
.b-next__all { margin-top: 28px; }

@media (max-width: 1024px) {
  .b-kpb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-kpb > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .b-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-facts > div { border-left: 0; border-top: 1px solid var(--b-line-inv); }
  .b-facts > div:nth-child(-n+2) { border-top: 0; }
  .b-facts > div:nth-child(even) { border-left: 1px solid var(--b-line-inv); }
  .b-rt { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .b-rq { position: static; order: -1; }
  .b-indent { grid-template-columns: minmax(0, 1fr); }
  .b-indent > * { grid-column: 1; }
}
@media (max-width: 600px) {
  .b-ch { padding-top: 40px; }
  .b-kpb { grid-template-columns: minmax(0, 1fr); }
  .b-kpb > div + div { padding-left: 0; border-left: 0; }
  .b-facts { grid-template-columns: minmax(0, 1fr); }
  .b-facts > div:nth-child(even) { border-left: 0; }
  .b-facts > div:nth-child(2) { border-top: 1px solid var(--b-line-inv); }
}


/* ── Solución: línea de pasos (repeater solution_steps) ────────────────── */
.b-vj { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--b-ink); }
.b-vj__s { position: relative; display: grid; grid-template-columns: 48px minmax(0, 4fr) minmax(0, 8fr); gap: 0 40px; padding: 40px 0; border-bottom: 1px solid var(--b-hair); }
.b-vj__r { position: relative; }
.b-vj__r::before { content: ""; position: absolute; left: 10px; top: -40px; bottom: -41px; width: 1px; background: var(--b-ink); }
.b-vj__s:first-child .b-vj__r::before { top: 10px; }
.b-vj__s.is-last .b-vj__r::before { bottom: auto; height: 50px; }
.b-vj__s:only-child .b-vj__r::before { display: none; }
.b-vj__r i { position: absolute; left: 3px; top: 4px; display: block; width: 15px; height: 15px; box-sizing: border-box; background: var(--b-bg); border: 1px solid var(--b-ink); }
.b-vj__s:first-child .b-vj__r i { background: var(--b-ink); }
.b-vj__s.is-last .b-vj__r i { background: var(--b-sig); border-color: var(--b-sig); }
.b-vj__h { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.b-vj__k { color: var(--b-ink-3); }
.b-vj__n { font: 300 88px/.9 var(--b-font-display); letter-spacing: -.033em; color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
.b-vj__s.is-last .b-vj__n { color: var(--b-sig); }
.b-vj__name { font: 500 26px/1.15 var(--b-font-display); letter-spacing: -.014em; color: var(--b-ink); }
.b-vj__role { color: var(--b-sig); }
.b-vj__t { margin: 0 0 16px; font: 400 30px/1.12 var(--b-font-display); letter-spacing: -.019em; color: var(--b-ink); }
.b-vj__p p, .b-vj__p ul, .b-vj__p ol { margin: 0 0 1em; font: 400 17px/1.75 var(--b-font-sans); color: #262B2D; }
.b-vj__p ul, .b-vj__p ol { padding-left: 1.2em; }
.b-vj__p li { margin-bottom: .3em; }
.b-vj__p > :last-child { margin-bottom: 0; }
.b-vj__p a { color: var(--b-ink); text-underline-offset: 3px; }
.b-vj__note { margin: 20px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--b-sig); font: 400 15px/1.65 var(--b-font-sans); color: var(--b-ink-2); }

@media (max-width: 1024px) {
  .b-vj__s { grid-template-columns: 32px minmax(0, 1fr); gap: 0 24px; }
  .b-vj__h { grid-column: 2; margin-bottom: 24px; }
  .b-vj__b { grid-column: 2; }
  .b-vj__r { grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
  .b-vj__s { grid-template-columns: 24px minmax(0, 1fr); gap: 0 16px; padding: 32px 0; }
  .b-vj__r::before { left: 7px; top: -32px; bottom: -33px; }
  .b-vj__s:first-child .b-vj__r::before { top: 10px; }
  .b-vj__r i { left: 0; }
  .b-vj__n { font-size: 64px; }
  .b-vj__name { font-size: 22px; }
  .b-vj__t { font-size: 24px; }
  .b-vj__p p, .b-vj__p ul, .b-vj__p ol { font-size: 16px; }
}