/* Páginas de caso /casos/<id>/ — .cso- (cuerpo) y .cso-next (siguiente caso). El hero usa el sistema .ph- del chrome. */
.cso { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.cso-shot { position: relative; margin: 0; border-radius: clamp(14px, 2vw, 26px); overflow: hidden; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 80px rgba(0, 0, 0, .45); aspect-ratio: 8 / 5; }
.cso-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cso-shot__cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; }
.cso-shot.is-pix .cso-shot__cv { opacity: 1; }
.cso-shot.is-done .cso-shot__cv { opacity: 0; transition: opacity .25s steps(2); }
.cso-shot__cap { position: absolute; left: 14px; bottom: 12px; padding: .3em .6em; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--lime); }

.cso-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; }
@media (min-width: 1100px) { .cso-top { grid-template-columns: minmax(0, 960px) minmax(14rem, 1fr); gap: clamp(2rem, 3vw, 3.5rem); } }
.cso-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--line); border-block: 1px solid var(--line); }
.cso-facts > div { background: var(--ink); padding: 1rem 1.1rem 1.1rem 0; display: grid; gap: .35rem; align-content: start; }
.cso-facts > div + div { padding-left: 1.1rem; }
.cso-facts dt { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cso-facts dd { margin: 0; font-size: var(--step-0); color: var(--paper); }

.cso-body { margin-top: clamp(2.5rem, 6vw, 5rem); display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.cso-block { display: grid; grid-template-columns: minmax(3.2rem, 9rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.cso-n { font-size: clamp(1.6rem, 1rem + 2.4vw, 3.2rem); line-height: 1; color: var(--accent); margin: 0; }
.cso-block:nth-child(2) .cso-n { color: var(--cobalt); } .cso-block:nth-child(3) .cso-n { color: var(--lime); }
.cso-h { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.2rem); line-height: .95; letter-spacing: -.04em; margin: 0 0 1.2rem; }
.cso-block__in p { color: var(--paper-2); font-size: var(--step-1); line-height: 1.45; max-width: 46ch; margin: 0 0 1rem; }
.cso-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 52ch; }
.cso-list li { position: relative; padding-left: 1.4em; color: var(--paper-2); font-size: var(--step-0); line-height: 1.5; }
.cso-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: .55em; height: .55em; background: var(--cobalt); }
.cso-ent { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cso-ent li { position: relative; padding-left: 1.4em; font-size: var(--step-1); color: var(--paper-2); }
.cso-ent li::before { content: ''; position: absolute; left: 0; top: .5em; width: .55em; height: .55em; background: var(--lime); }
.cso-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.cso-stat { padding: clamp(1rem, 2vw, 1.6rem); border-radius: var(--radius-l); background: rgba(21, 21, 26, .8); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: .6rem; align-content: start; }
.cso-stat__n { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.05; color: var(--lime); margin: 0; overflow-wrap: anywhere; }
.cso-stat__l { color: var(--paper-2); font-size: var(--step--1); margin: 0; }
.cso-block__in .cso-note[hidden] { display: none; }
.cso-block__in .cso-note { margin: 1.4rem 0 0; max-width: 60ch; color: var(--muted); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; text-transform: none; line-height: 1.5; }

.cso-next { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.cso-next__card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2.4rem); align-items: center; margin-top: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius-l); box-shadow: inset 0 0 0 1px var(--line-strong); background: rgba(21, 21, 26, .7); transition: box-shadow .5s var(--ease-out), transform .6s var(--ease-out); }
.cso-next__card:hover, .cso-next__card:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-4px); }
.cso-next__img { display: block; aspect-ratio: 8 / 5; border-radius: 12px; overflow: hidden; background: var(--ink-3); }
.cso-next__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.cso-next__card:hover img { transform: scale(1.06); }
.cso-next__txt { display: grid; gap: .5rem; min-width: 0; }
.cso-next__k { color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.cso-next__t { font-size: clamp(1.8rem, 1rem + 3.4vw, 4rem); line-height: .95; letter-spacing: -.04em; }
.cso-next__s { color: var(--paper-2); font-size: var(--step-0); }
.cso-next__arrow { font-size: clamp(1.6rem, 3vw, 3rem); color: var(--accent); transition: transform .5s var(--ease-out); }
.cso-next__card:hover .cso-next__arrow { transform: translateX(8px); }

@media (max-width: 759px) {
  .cso-block { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .cso-stats { grid-template-columns: minmax(0, 1fr); }
  .cso-next__card { grid-template-columns: minmax(0, 1fr); }
  .cso-next__arrow { display: none; }
  .cso-facts > div, .cso-facts > div + div { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cso-shot__cv { display: none; } }

@media (min-width: 1100px) { .cso-facts { grid-template-columns: minmax(0, 1fr); } .cso-facts > div, .cso-facts > div + div { padding-left: 0; } }