/*
 * Afín · páginas de casos v2 (casos/*.html y casos/en/*.html), sobre inicio.v2.css.
 * Mismo lenguaje que la landing: etiquetas en DM Sans, cursiva solo en el titular principal,
 * pasos como línea de tiempo en vez de números grandes, y nada de iconos en cuadraditos.
 */
.crumbs { background: var(--forest); color: var(--fmuted); font-size: 13.5px; }
.crumbs .wrap { padding-block: 14px 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fink); }

.case-hero { background: var(--forest); color: var(--fink); padding-block: 40px 88px; }
.case-hero .kicker { color: var(--bright); }
.case-hero h1 { margin: 12px 0 0; max-width: 20ch; font: 700 clamp(36px, 5vw, 64px)/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.case-hero h1 em { font-style: italic; font-weight: 400; color: var(--bright); }
.case-hero p { margin: 24px 0 28px; max-width: 58ch; font-size: 18px; line-height: 1.6; color: #b9d3c0; }
.case-hero .link { color: var(--fink); border-color: #3b6a47; }

.kicker { font: 600 14px var(--body); color: var(--green-d); }
.case h2 { margin: 10px 0 0; max-width: 24ch; font: 700 clamp(28px, 3.4vw, 44px)/1.08 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.case .lead { margin-top: 18px; max-width: 60ch; }

.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--ink); }
.pain-card { padding: 22px 28px 8px 0; }
.pain-card + .pain-card { padding-left: 28px; border-left: 1px solid var(--line); }
.pain-card h3 { margin: 0 0 10px; font: 700 20px/1.25 var(--display); }
.pain-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }

.timeline.tl3 { grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.timeline.tl3 span { max-width: 36ch; }

.scenario { padding-block: 88px; }
.scenario .kicker { color: var(--bright); }
.scenario blockquote { margin: 18px 0 0; max-width: 30ch; font: italic 400 clamp(26px, 3.2vw, 40px)/1.25 var(--display); color: var(--fink); text-wrap: balance; }
.scenario .scenario-meta { margin: 22px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: #b9d3c0; }

.case-cta { padding-block: 80px; }
.case-cta h2 { color: var(--fink); }
.case-cta p { margin: 16px 0 26px; font-size: 17px; color: #b9d3c0; }

.more { padding-block: 40px 56px; }
.more .more-cases { margin-top: 0; }

/* índice de casos */
.cat { margin-top: 56px; }
.cat:first-of-type { margin-top: 0; }
.cat h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 18px; }
.case-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.case-list a { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 24px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.case-list a:nth-child(3n+2), .case-list a:nth-child(3n) { padding-left: 26px; border-left: 1px solid var(--line); }
.case-list b { font: 700 21px/1.2 var(--display); }
.case-list span { font-size: 15px; line-height: 1.55; color: var(--ink2); }
.case-list i { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--green-d); }
.case-list a:hover b { color: var(--green-d); }

@media (max-width: 960px) {
  .pain-grid, .case-list { grid-template-columns: 1fr; }
  .pain-card, .pain-card + .pain-card { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .case-list a, .case-list a:nth-child(3n+2), .case-list a:nth-child(3n) { padding-left: 0; border-left: 0; }
  .timeline.tl3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .timeline.tl3 { grid-template-columns: 1fr; }
  .case-hero { padding-block: 28px 64px; }
}