/* Casos de éxito (muestra del 7 oct 2026): filas a sangre, foto y texto alternos,
   como las etapas de Qué hacemos (`.stg`). Portada (`.cx--home`) y /casos-de-exito/. */
.cx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.cx__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; border-bottom: 1px solid var(--line) }
.cx__i[hidden] { display: none }
.cx__ph { position: relative; overflow: hidden; background: var(--bone-3) }
.cx__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* Por defecto, foto a la izquierda y texto alineado con el contenedor por la derecha. */
.cx__txt { display: flex; flex-direction: column; justify-content: center;
  padding: 72px max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))) 72px 72px }
.cx__i--der .cx__ph { order: 2 }
.cx__i--der .cx__txt { padding: 72px 72px 72px max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad))) }
.cx__k { font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--brand); margin-bottom: 14px }
.cx__h { font-size: 2.25rem; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; max-width: 20ch; color: var(--ink) }
.cx__c { font-size: var(--t-sm); color: var(--ink-3); padding-top: 14px }
.cx__d { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-2); padding-top: 22px; max-width: 48ch; text-wrap: pretty }
/* Cifras: antes tachado y pequeño, después grande en marino. */
.cx__ms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 30px 0 0; max-width: 560px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0 }
.cx__m { min-width: 0 }
.cx__m + .cx__m { border-left: 1px solid var(--line); padding-left: 32px }
.cx__m dt { font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 8px }
.cx__m dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px }
.cx__m b { font-size: 2rem; line-height: 1.05; letter-spacing: -.03em; font-weight: var(--w-semibold); color: var(--brand) }
.cx__m b small { font-size: var(--t-xs); letter-spacing: 0; font-weight: 400; color: var(--ink-3); margin-right: 2px }
.cx__m--txt b { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.25 }
.cx__a { font-size: var(--t-base); color: var(--ink-3); text-decoration-thickness: 1px }
.cx__q { margin: 28px 0 0; padding-left: 20px; border-left: 2px solid var(--brand); max-width: 48ch }
.cx__q p { font-size: var(--t-base); line-height: 1.55; color: var(--ink); font-style: italic }
.cx__go { padding-top: 22px }
.cx__go .link { padding-top: 0 }
.cx__go .link i, .cx__all .btn i { font-style: normal; display: inline-block; transition: translate .3s cubic-bezier(.16,1,.3,1) }
.cx__go .link:hover i, .cx__go .link:focus-visible i, .cx__all .btn:hover i { translate: 4px 0 }
.cx__all { padding-top: var(--sp-block); padding-bottom: var(--sp-section) }

/* Página: el caso completo, en tres partes rotuladas. */
.cx__part { padding-top: 24px; max-width: 52ch }
.cx__pk { font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--ink); margin-bottom: 6px }
.cx__part p { font-size: var(--t-base); line-height: 1.55; color: var(--ink-2) }
.cx__hz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px }
.cx__hz li { position: relative; padding-left: 14px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2) }
.cx__hz li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--brand) }
.cx__pz { font-size: var(--t-xs); color: var(--ink-3); margin-top: 10px }
.cx--page .cx__i { min-height: 640px; scroll-margin-top: 80px }

@media (prefers-reduced-motion: reduce) { .cx__go .link i, .cx__all .btn i { transition: none } }
@media (min-width: 901px) and (max-width: 1200px) {
  .cx__h { font-size: 1.875rem }
  .cx__txt, .cx__i--der .cx__txt { padding-block: 56px }
  .cx__i:not(.cx__i--der) .cx__txt { padding-left: 48px }
  .cx__i--der .cx__txt { padding-right: 48px }
  .cx__hz { grid-template-columns: 1fr }
}
@media (max-width: 900px) {
  .cx__i, .cx__i--der { display: flex; flex-direction: column; min-height: 0 }
  .cx--page .cx__i { min-height: 0 }
  .cx__i--der .cx__ph { order: 0 }
  .cx__ph { height: 220px }
  .cx__txt, .cx__i--der .cx__txt { padding: 32px var(--pad) 44px }
  .cx__k { font-size: var(--t-xs); margin-bottom: 8px }
  .cx__h { font-size: 1.625rem }
  .cx__d { font-size: var(--t-base); padding-top: 14px }
  .cx__ms { gap: 0 16px; margin-top: 22px; padding: 16px 0 }
  .cx__m + .cx__m { padding-left: 16px }
  .cx__m b { font-size: 1.5rem }
  .cx__m--txt b { font-size: 1.0625rem }
  .cx__q { margin-top: 22px }
  .cx__q p { font-size: var(--t-sm) }
  .cx__hz { grid-template-columns: 1fr }
  .cx__all .btn { width: 100%; justify-content: center; min-height: 56px }
}

/* Cifras del resultado (8 oct 2026, decisión del usuario): las mismas en la portada y en
   /casos-de-exito/. Cifra grande y su explicación debajo, dos por fila, sin tachados ni flechas:
   el punto de partida va en la explicación. Antes estaban solo en la página. */
.cxf__ms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px }
.cxf__m { margin: 0 }
.cxf__m b { display: block; margin-top: -2px; font-size: 1.875rem; line-height: 1; letter-spacing: -.03em; font-weight: var(--w-semibold); color: var(--brand) }
.cxf__m span { display: block; margin-top: 6px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3) }
@media (max-width: 900px) { .cxf__m b { font-size: 1.5rem } }