.back-link {
  justify-content: flex-start;
  color: var(--dark-copy);
}
.back-link::before {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 12px 0 3px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg);
}

.case-hero, .case-catalog { padding-top: clamp(20px, 4vw, 48px); }
.case-heading { margin-block: 20px clamp(28px, 4vw, 52px); }
.case-heading h1 { max-width: 23ch; }
.case-heading .eyebrow { margin-bottom: 12px; }
.case-heading .lead { max-width: 60ch; margin-top: 16px; }

.metric-heading {
  margin-bottom: 14px;
  color: var(--dark-copy);
  font-size: 15px;
  letter-spacing: 0;
}
.impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--dark-line);
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 24px 24px 0;
}
.metric + .metric { padding-left: 24px; border-left: 1px solid var(--dark-line); }
.metric dd {
  order: -1;
  margin: 0;
  color: var(--lime);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.045em;
}
.metric dt { max-width: 38ch; color: var(--dark-copy); }

.case-details {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--column-gap);
}
.case-details p { margin-top: 14px; }
.case-source {
  padding: clamp(18px, 2.8vw, 32px);
  border: 1px solid var(--line);
  background: var(--mist);
}
.case-source h2 { font-size: clamp(20px, 2.3vw, 29px); }
.case-source a { font-weight: 650; overflow-wrap: anywhere; }
.case-source a:hover { text-decoration-thickness: 2px; }

/* Diagramas de flujo y contenido ampliado para los casos. */
.case-flow, .case-playbook { padding-block: clamp(42px, 7vw, 84px); }
.case-flow { background: var(--mist); }
.case-flow h2, .case-playbook h2 { max-width: 26ch; }
.section-intro { max-width: 68ch; margin: 14px 0 30px; color: var(--muted); }
.flow-graphic { margin: 28px 0 18px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); background: #fff; }
.flow-graphic svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow-graphic figcaption { margin-top: 14px; color: var(--muted); font-size: 14px; }
.flow-node { fill: #f2f6f4; stroke: #cad8d1; stroke-width: 1.5; }
.flow-node-accent { fill: #eaf2cc; stroke: #b4c77a; }
.flow-node-human { fill: #edf3f7; stroke: #b7cbd7; }
.flow-title { fill: #183c50; font: 650 16px/1.2 system-ui, sans-serif; }
.flow-copy { fill: #52616a; font: 14px/1.3 system-ui, sans-serif; }
.flow-arrow { stroke: #61805a; stroke-width: 2; fill: none; marker-end: url(#arrow); }
.flow-kicker { color: #536b54; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.flow-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: steps; }
.flow-steps li { counter-increment: steps; padding: 18px; border-top: 3px solid var(--lime); background: #fff; }
.flow-steps li::before { content: "0" counter(steps); display: block; margin-bottom: 12px; color: #536b54; font-size: 13px; font-weight: 700; }
.flow-steps strong { display: block; margin-bottom: 7px; color: var(--ink); }
.flow-steps span { color: var(--muted); font-size: 14px; }
.playbook-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 28px; }
.playbook-card { padding: 22px; border: 1px solid var(--line); }
.playbook-card h3 { margin: 0 0 10px; font-size: 19px; }
.playbook-card p { color: var(--muted); }
.source-download { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--line); background: white; }
.source-download::before { content: "PDF"; padding: 3px 6px; color: #fff; background: #183c50; font-size: 11px; letter-spacing: .08em; }
.case-disclaimer { margin-top: 26px; padding: 16px 20px; border-left: 3px solid #92a46b; background: #f4f6ee; color: #4d5b50; }

@media (max-width: 680px) {
  .case-details { grid-template-columns: 1fr; }
  .playbook-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 480px) {
  .impact { grid-template-columns: 1fr; }
  .metric { padding: 16px 0; }
  .metric + .metric { padding-left: 0; border-top: 1px solid var(--dark-line); border-left: 0; }
  .flow-graphic { overflow-x: auto; }
  .flow-graphic svg { min-width: 680px; }
  .flow-steps { grid-template-columns: 1fr; }
}