/* =========================================================
   CASE — the long-form case study.

   Some projects fit in two paragraphs and three images.
   A product design case study does not: it has to show the
   evidence, the decisions taken because of it and what was
   left unproven. This file adds the pieces that need —
   figures, tables, personas, colour roles, a roadmap —
   without touching the components the rest of the site uses.

   Everything is prefixed .cs- so it can never collide with
   the .case-* classes already in pages.css.

   Components:
     .cs-sec            one numbered chapter
     .cs-thesis         the one-line argument of the project
     .cs-kpis           the four headline numbers
     .cs-legend/.cs-tag evidence vs. inference labelling
     .cs-note           a callout: method, limit or decision
     .cs-quote          a verbatim from a real customer
     .cs-table          data, always inside .cs-scroll
     .cs-sev            severity pill
     .cs-cards          personas, bets, levers
     .cs-swatches       colour roles with their contrast ratio
     .cs-ba             before / after, side by side
     .cs-roadmap        the waves
     .cs-frame          one board frame, full width
   ========================================================= */

/* ---------------------------------------------------------
   1. CHAPTER
   --------------------------------------------------------- */
.cs-sec {
  padding-block: clamp(3rem, 7vw, 7rem);
  border-top: 1px solid var(--line-soft);
}
.cs-sec:first-of-type { border-top: 0; }
.cs-sec[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.cs-sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: start;
  gap: var(--gutter);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.cs-sec__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.cs-sec__head h2 { font-size: var(--t-h3); line-height: var(--lh-snug); }
.cs-sec__head p {
  color: var(--fg-dim);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.22rem);
  margin: 0;
  max-width: 62ch;
}
.cs-sec__head p + p { margin-top: 1em; }
.cs-sec__head strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* Sub-heading inside a chapter */
.cs-h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem);
  margin-bottom: 1.1rem;
}
.cs-sec > .wrap > * + .cs-h3,
.cs-block + .cs-block { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------------------------------------------------------
   2. CHAPTER INDEX — the table of contents of the study
   --------------------------------------------------------- */
.cs-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cs-index a {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  background: var(--bg);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.cs-index a:hover { background: var(--bg-raised); color: var(--accent); }
.cs-index small {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  color: var(--fg-dim);
}

/* ---------------------------------------------------------
   3. THESIS — the argument, set big
   --------------------------------------------------------- */
.cs-thesis {
  font-size: clamp(1.6rem, 1rem + 2.9vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: var(--tr-tight);
  font-variation-settings: "wght" 400, "wdth" 96;
  max-width: 22ch;
}
/* Sin `color`: lo pone la regla de `em` en base.css, junto con la trama. */

/* ---------------------------------------------------------
   4. HEADLINE NUMBERS
   --------------------------------------------------------- */
.cs-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cs-kpis > div {
  background: var(--bg);
  padding: clamp(1.1rem, 2vw, 1.8rem);
  display: grid;
  align-content: start;
  gap: 0.5rem;
}
.cs-kpis b {
  display: block;
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
  font-variation-settings: "wght" 500, "wdth" 92;
  color: var(--accent);
}
.cs-kpis p { color: var(--fg-dim); margin: 0; font-size: 0.95rem; }
.cs-kpis small {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0.75;
}

/* ---------------------------------------------------------
   5. EVIDENCE LABELS
   Every claim in this study says where it comes from.
   --------------------------------------------------------- */
.cs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22em 0.7em;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  vertical-align: middle;
}
.cs-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cs-tag--fact   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cs-tag--infer  { color: var(--fg); border-color: var(--line); }
.cs-tag--infer::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.cs-tag--limit  { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 45%, transparent); }

.cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.cs-legend li { display: flex; align-items: center; gap: 0.6rem; color: var(--fg-dim); font-size: 0.92rem; }

/* ---------------------------------------------------------
   6. CALLOUT
   --------------------------------------------------------- */
.cs-note {
  border-left: 2px solid var(--accent);
  background: var(--bg-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-note h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 0.7rem;
}
.cs-note p { margin: 0; color: var(--fg-dim); max-width: 76ch; }
.cs-note p + p { margin-top: 0.8em; }
.cs-note strong { color: var(--fg); font-variation-settings: "wght" 500; }
.cs-note--warm { border-left-color: var(--accent-warm); }
.cs-note--warm h4 { color: var(--accent-warm); }

/* ---------------------------------------------------------
   7. VERBATIM
   --------------------------------------------------------- */
.cs-quotes { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.cs-quote {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 2rem);
  margin: 0;
}
/* A quote is somebody else talking, so it gets a cut of its own —
   opened up, not leaned over. The frame around it does the rest. */
.cs-quote p {
  font-variation-settings: "wght" 400, "wdth" 112;
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
  line-height: 1.34;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
  max-width: 60ch;
}
.cs-quote figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------------------------------------------------------
   8. TABLES
   Data is data: a table is the honest component for it.
   Always wrapped in .cs-scroll so a narrow screen scrolls
   the table, never the page.
   --------------------------------------------------------- */
.cs-scroll {
  overflow-x: auto;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.cs-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cs-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: clamp(0.86rem, 0.8rem + 0.2vw, 0.98rem);
}
.cs-table caption {
  text-align: left;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--line);
}
.cs-table th, .cs-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.cs-table thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 400;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.cs-table tbody th { font-variation-settings: "wght" 500; color: var(--fg); }
.cs-table td { color: var(--fg-dim); }
.cs-table tbody tr:last-child th,
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody tr:hover td,
.cs-table tbody tr:hover th { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.cs-table .num { font-family: var(--font-mono); white-space: nowrap; color: var(--fg); }
.cs-table .id  { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }

/* Severity */
.cs-sev {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 100px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-sev--crit { color: var(--accent-warm); }
.cs-sev--high { color: var(--accent); }
.cs-sev--mid  { color: var(--fg); opacity: 0.75; }
.cs-sev--low  { color: var(--fg-dim); }

/* An audit is a dated document. When a finding gets fixed the
   honest move is to stamp it, not to quietly rewrite the
   diagnosis into something flattering — the whole value of this
   piece is that the failing grades were published unedited. So
   the findings carry a status, and the fixed ones are filled in
   rather than outlined, to be findable among seventeen rows. */
.cs-sev--done {
  background: var(--accent);
  color: var(--selection-fg);
  border-color: var(--accent);
}
.cs-sev--open { color: var(--fg-dim); opacity: 0.8; }
.cs-tag--done {
  color: var(--selection-fg);
  background: var(--accent);
  border-color: var(--accent);
}
.cs-tag--done::before { background: currentColor; }

/* The update banner, and the list of what has been fixed since
   the audit was published. "Resolved" means nothing without a
   date, hence .cs-note__when. */
.cs-note--done { border-left-color: var(--accent); }
.cs-note--done h4 { color: var(--accent); }
.cs-note__when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 0.9rem;
}
.cs-fixed { display: grid; gap: 0.7rem; margin-top: 1.1rem; }
.cs-fixed li { color: var(--fg-dim); padding-left: 1.7rem; position: relative; }
.cs-fixed li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.cs-fixed strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* ---------------------------------------------------------
   9. CARDS — personas, design bets, levers
   --------------------------------------------------------- */
.cs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color var(--dur-s) var(--ease);
}
.cs-card:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.cs-card__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.cs-card h4 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); line-height: var(--lh-snug); }
.cs-card h4 span { display: block; color: var(--fg-dim); font-size: 0.72em; font-variation-settings: "wght" 400; margin-top: 0.2rem; }
.cs-card h5 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 400;
  margin-bottom: 0.4rem;
}
.cs-card ul { display: grid; gap: 0.4rem; }
.cs-card li { color: var(--fg-dim); font-size: 0.94rem; padding-left: 1rem; position: relative; }
.cs-card li::before { content: "—"; position: absolute; left: 0; opacity: 0.5; }
.cs-card p { margin: 0; color: var(--fg-dim); font-size: 0.94rem; }
.cs-card__rule {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.94rem;
}
.cs-card__rule b { color: var(--accent); display: block; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--tr-wide); text-transform: uppercase; margin-bottom: 0.35rem; font-weight: 400; }
.cs-card__foot {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0.75;
}

/* ---------------------------------------------------------
   10. COLOUR ROLES
   A swatch is only useful next to the ratio that justifies it.
   --------------------------------------------------------- */
.cs-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cs-swatch i {
  display: block;
  height: clamp(56px, 8vw, 90px);
  background: var(--c);
}
.cs-swatch div { padding: 0.85rem 1rem; display: grid; gap: 0.3rem; }
.cs-swatch b { font-size: 0.98rem; }
.cs-swatch code {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.cs-swatch small { color: var(--fg-dim); font-size: 0.86rem; }

/* ---------------------------------------------------------
   11. BEFORE / AFTER
   --------------------------------------------------------- */
.cs-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-ba > div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
}
.cs-ba h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg-dim);
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.cs-ba--after h4 { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cs-ba ul { display: grid; gap: 0.7rem; }
.cs-ba li { color: var(--fg-dim); font-size: 0.96rem; padding-left: 1.1rem; position: relative; }
.cs-ba li::before { content: "·"; position: absolute; left: 0.25rem; }
.cs-ba strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* ---------------------------------------------------------
   12. ROADMAP
   --------------------------------------------------------- */
.cs-roadmap { display: grid; gap: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
.cs-wave {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr);
  gap: var(--gutter);
  padding-block: clamp(1.3rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.cs-wave__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}
.cs-wave h4 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); }
.cs-wave p { margin: 0; color: var(--fg-dim); }
.cs-wave p + p { margin-top: 0.7em; }
.cs-wave em { --em-wght: 500; }

/* ---------------------------------------------------------
   13. A BOARD FRAME
   The slides of the deck, shown as the artefact they are.
   --------------------------------------------------------- */
.cs-frame {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.cs-frame img { width: 100%; display: block; }
.cs-frame figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg);
}
.cs-frames-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.2vw, 2rem); align-items: start; }
.cs-frames-pair .cs-frame { margin-top: 0; }

/* ---------------------------------------------------------
   14. CHECKLIST — what still has to be validated
   --------------------------------------------------------- */
.cs-check { display: grid; gap: 0.8rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 78ch; }
.cs-check li {
  padding-left: 2rem;
  position: relative;
  color: var(--fg-dim);
}
.cs-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 12px; height: 12px;
  border: 1px solid var(--accent);
  border-radius: 3px;
}
.cs-check strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* ---------------------------------------------------------
   15. RESULT NUMBERS — the estimate, clearly framed
   --------------------------------------------------------- */
.cs-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
  padding-block: clamp(1.8rem, 3.5vw, 3rem);
}
.cs-outcomes b {
  display: block;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
  font-variation-settings: "wght" 500, "wdth" 92;
  margin-bottom: 0.6rem;
}
.cs-outcomes p { margin: 0; color: var(--fg-dim); font-size: 0.95rem; }

/* ---------------------------------------------------------
   16. THE TWO HALVES OF A PRODUCT PROJECT

   A product case is two jobs stapled together: the research
   that decides what to build, and the interface that builds
   it. Read as one continuous scroll the second half ends up
   buried, so the page splits them and lets the reader pick.

   Without JavaScript nothing is hidden — both halves stack in
   order under their own headings. Panels only start hiding
   once the script has taken over.
   --------------------------------------------------------- */
.cs-parts {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.cs-parts__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 1.1rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cs-parts__btn {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  text-align: left;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.8rem);
  background: var(--bg);
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
/* The half being read is marked with a rule in the accent
   colour along its top edge. */
.cs-parts__btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-m) var(--ease);
}
.cs-parts__btn:hover,
.cs-parts__btn[aria-selected="true"] { background: var(--bg-raised); }
.cs-parts__btn[aria-selected="true"]::before { transform: scaleX(1); }
.cs-parts__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.cs-parts__n {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cs-parts__btn[aria-selected="true"] .cs-parts__n { color: var(--accent); }
.cs-parts__t {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.cs-parts__d { color: var(--fg-dim); font-size: 0.92rem; max-width: 46ch; }

/* A half that is not the one asked for leaves the document
   entirely rather than being pushed out of sight. */
.cs-part[hidden] { display: none; }
.cs-part { animation: partIn var(--dur-m) var(--ease) both; }
@keyframes partIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Only shown when the switcher is not running: then both
   halves print one after the other and need a divider. */
.cs-part__label { padding-top: clamp(2rem, 4vw, 3rem); }
.js-parts .cs-part__label { display: none; }

/* ---------------------------------------------------------
   17. UI BOARDS — the artefacts of the interface half

   Each board is one Figma or FigJam frame with the note that
   says what it is for. They come in three shapes — wide (a
   canvas), tall (a flow) and phone (the mockup) — and each
   gets the width that keeps it readable rather than the width
   of the column.
   --------------------------------------------------------- */
.cs-board { border-top: 1px solid var(--line-soft); padding-block: clamp(2.4rem, 5vw, 4.5rem); }
.cs-board:first-of-type { border-top: 0; padding-top: 0; }
.cs-board[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.cs-board__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: start;
  gap: var(--gutter);
}
.cs-board__head h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
.cs-board__head p { color: var(--fg-dim); margin: 0; max-width: 62ch; }
.cs-board__head p + p { margin-top: 1em; }
.cs-board__head strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* Where the board lives, set as the coordinates it is */
.cs-board__file {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cs-board__file b { color: var(--accent); font-weight: 400; }

/* A board is a screenshot of a canvas, so it keeps the raised
   panel behind it: the frame edge stays visible even where the
   capture itself is almost black. */
.cs-frame--board img { background: var(--bg-raised); }
.cs-frame--tall  { max-width: 660px; margin-inline: auto; }
.cs-frame--phone { max-width: 340px; margin-inline: auto; }
.cs-frame--phone img { background: #000; }

/* ---------------------------------------------------------
   18. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1180px) {
  .cs-board__head { grid-template-columns: 1fr; gap: 1.2rem; }
  .cs-sec__head { grid-template-columns: 1fr; gap: 1.2rem; }
  .cs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .cs-wave { grid-template-columns: 1fr; gap: 0.8rem; }
}

@media (max-width: 900px) {
  .cs-ba { grid-template-columns: 1fr; }
  .cs-frames-pair { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cs-parts__nav { grid-template-columns: 1fr; }
  .cs-parts__btn::before { inset: 0 auto 0 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .cs-parts__btn[aria-selected="true"]::before { transform: scaleY(1); }
}

@media (max-width: 620px) {
  .cs-kpis { grid-template-columns: 1fr; }
  .cs-outcomes { grid-template-columns: 1fr; }
  .cs-thesis { max-width: none; }
}

/* The tables are the one thing worth keeping on paper. */
@media print {
  .cs-scroll { overflow: visible; border: 0; }
  .cs-table { min-width: 0; font-size: 9pt; }
  .cs-frame { break-inside: avoid; }
  /* Paper has no switcher, so it gets the whole project: both
     halves printed in order, with the labels back. */
  .cs-parts__nav { display: none; }
  .cs-part[hidden] { display: block !important; }
  .cs-part { animation: none; }
  .js-parts .cs-part__label { display: block; }
}

/* ---------------------------------------------------------
   17. CASE BLOCKS INSIDE A WORK-PAGE BODY
   A few pages are laid out with .proj-body from work.css —
   a sticky heading on the left, the text on the right — and
   still want a swatch row, a table or a note. Dropped in as
   they are, grid auto-placement squeezes them into whichever
   column is free next and they come out half width. These
   blocks are evidence, not commentary: they span the whole
   body and let the heading keep its column.
   --------------------------------------------------------- */
.proj-body > .cs-swatches,
.proj-body > .cs-scroll,
.proj-body > .cs-note,
.proj-body > .cs-cards,
.proj-body > .cs-fig,
.proj-body > .cs-kpis { grid-column: 1 / -1; }

/* And when one of them stands on its own between two chapters —the
   note about the QR on the business card sits between the flip and
   «Tres puntos que ya sabes leer»— it only carries space above it.
   .proj-body pays for its own gap underneath, so a block that comes
   before one has to pay for the gap in front of the heading, or the
   note butts straight into it. */
.cs-note + .proj-body,
.cs-note + .proj-figs,
.cs-frame + .proj-body { margin-top: clamp(3rem, 6vw, 5rem); }

/* =========================================================
   COMPONENTES DE CASE STUDY LARGO
   Figuras vectoriales, bloques insight/solución, hallazgos de
   auditoría, guiones de investigación y tablas filtrables.
   Los usan GAME · Estudio integrado e Iron District.
   ========================================================= */

/* --- Figuras vectoriales del estudio ------------------- */
.cs-fig {
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
}
.cs-fig__scroll {
  overflow-x: auto;
  padding: clamp(1rem, 2.2vw, 1.8rem);
  -webkit-overflow-scrolling: touch;
}
.cs-fig__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-fig svg {
  display: block;
  width: 100%;
  min-width: 660px;
  height: auto;
  color: var(--fg);
  /* Paleta del estudio traducida a los tokens del sitio. Solo
     vive dentro de la figura, así que no toca nada más. */
  --accent:      var(--c-ux);
  --accent-soft: color-mix(in srgb, var(--c-ux) 15%, transparent);
  --ok:          #7ee0a8;
  --ok-soft:     color-mix(in srgb, #7ee0a8 15%, transparent);
  --gold:        #f0c04b;
  --gold-soft:   color-mix(in srgb, #f0c04b 15%, transparent);
  --warn:        #f0c04b;
  --crit:        #ff7a5c;
  --crit-soft:   color-mix(in srgb, #ff7a5c 15%, transparent);
  --paper:       var(--bg);
  --surface:     var(--bg-raised);
  --surface-2:   color-mix(in srgb, var(--fg) 8%, transparent);
}
[data-theme="light"] .cs-fig svg {
  --ok:        #0a6c4b;
  --ok-soft:   color-mix(in srgb, #0a6c4b 14%, transparent);
  --gold:      #8a5a00;
  --gold-soft: color-mix(in srgb, #8a5a00 14%, transparent);
  --warn:      #8a5a00;
  --crit:      #b3001f;
  --crit-soft: color-mix(in srgb, #b3001f 12%, transparent);
}
/* Las figuras vienen de informes con su propia tipografía. El CSS gana a
   los atributos de presentación del SVG, así que una sola regla las alinea
   con las dos familias del sitio sin tocar el marcado de cada figura. */
.cs-fig svg text,
.cs-fig svg tspan { font-family: var(--font-sans); }
.cs-fig svg [font-family*="Mono"],
.cs-fig svg [font-family*="mono"] { font-family: var(--font-mono); }

.cs-fig figcaption {
  border-top: 1px solid var(--line);
  padding: 0.85rem clamp(1rem, 2.2vw, 1.8rem);
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cs-fig figcaption b { color: var(--fg); font-variation-settings: "wght" 500; }

/* --- Insight ▸ solución -------------------------------- */
.cs-ins {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
}
.cs-ins__row { display: grid; grid-template-columns: 1fr 1fr; }
.cs-ins__cell { padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.cs-ins__cell + .cs-ins__cell { border-left: 1px solid var(--line); }
.cs-ins__lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.cs-ins__cell--i .cs-ins__lbl { color: var(--accent-warm); }
.cs-ins__cell--s .cs-ins__lbl { color: var(--accent); }
.cs-ins p { margin: 0; color: var(--fg-dim); }
.cs-ins strong { color: var(--fg); font-variation-settings: "wght" 500; }
.cs-ins__foot {
  border-top: 1px solid var(--line);
  padding: 0.7rem clamp(1.1rem, 2.2vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-dim);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.cs-ins__foot b { color: var(--fg); font-weight: 400; }
@media (max-width: 720px) {
  .cs-ins__row { grid-template-columns: 1fr; }
  .cs-ins__cell + .cs-ins__cell { border-left: 0; border-top: 1px solid var(--line); }
}

/* --- Hallazgo de auditoría CRO ------------------------- */
.cs-finds { display: grid; gap: 0.9rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.cs-find {
  border: 1px solid var(--line);
  border-left: 3px solid var(--fg-dim);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.6rem);
}
.cs-find--alta { border-left-color: var(--accent-warm); }
.cs-find--media { border-left-color: var(--accent); }
.cs-find--ok { border-left-color: var(--accent); }
.cs-find__top { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.cs-find__title { font-variation-settings: "wght" 500; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.24rem); line-height: var(--lh-snug); }
.cs-find p { margin: 0.35rem 0 0; color: var(--fg-dim); }
.cs-find__fix {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  color: var(--fg-dim);
  font-size: 0.95rem;
}
.cs-find__fix b { color: var(--accent); font-variation-settings: "wght" 500; }
.cs-find__ev {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-dim);
  line-height: 1.7;
}
.cs-find__ev b { color: var(--fg); font-weight: 400; }
.cs-find strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* --- Guion de entrevista ------------------------------- */
.cs-script {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
}
.cs-script__blk { padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.6rem); }
.cs-script__blk + .cs-script__blk { border-top: 1px solid var(--line); }
.cs-script__blk h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 0.7rem;
}
.cs-script ul { display: grid; gap: 0.55rem; }
.cs-script li { color: var(--fg-dim); padding-left: 1.1rem; position: relative; font-size: 0.96rem; }
.cs-script li::before { content: "—"; position: absolute; left: 0; opacity: 0.45; }
.cs-script em { color: var(--fg-dim); opacity: 0.75; font-style: normal; font-size: 0.9em; }

/* --- Ficha de participante ----------------------------- */
.cs-card__meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-dim);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.cs-card__q {
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  color: var(--fg);
  font-size: 0.96rem;
  line-height: 1.5;
}

/* --- Cifra grande -------------------------------------- */
.cs-big {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  flex-wrap: wrap;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.cs-big b {
  font-size: clamp(3rem, 1.4rem + 6vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: var(--tr-tight);
  font-variation-settings: "wght" 600, "wdth" 110;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cs-big p { margin: 0; color: var(--fg-dim); max-width: 40ch; }
.cs-big strong { color: var(--fg); font-variation-settings: "wght" 500; }

/* --- Especificación tipográfica ------------------------ */
.cs-type {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 0 clamp(1.1rem, 2.2vw, 1.6rem);
}
.cs-type__row {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 2vw, 1.8rem);
  flex-wrap: wrap;
  padding: 0.9rem 0;
}
.cs-type__row + .cs-type__row { border-top: 1px solid var(--line); }
.cs-type__spec {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-dim);
  min-width: 15rem;
}
.cs-type__demo { line-height: 1.2; }

/* --- Filtros de la tabla priorizada -------------------- */
.cs-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.cs-fbtn {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: color var(--dur-xs) var(--ease), border-color var(--dur-xs) var(--ease), background var(--dur-xs) var(--ease);
}
.cs-fbtn:hover { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 32%, transparent); }
.cs-fbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--c-on-tag); }
.cs-fbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Barras de impacto en tabla ------------------------ */
.cs-imp { display: inline-flex; gap: 3px; }
.cs-imp i { width: 6px; height: 14px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 14%, transparent); display: inline-block; }
.cs-imp--h i:nth-child(-n+3) { background: var(--accent-warm); }
.cs-imp--m i:nth-child(-n+2) { background: var(--accent); }
.cs-imp--l i:nth-child(-n+1) { background: var(--fg-dim); }

/* --- Puntuación del benchmark -------------------------- */
.cs-sc {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
}
.cs-sc--3 { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.cs-sc--2 { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
.cs-sc--1 { background: color-mix(in srgb, var(--accent-warm) 18%, transparent); color: var(--accent-warm); }

/* --- Escalones de tarifa ------------------------------- */
.cs-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: clamp(1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cs-tier--flag { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.cs-tier__nm {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cs-tier--flag .cs-tier__nm { color: var(--accent); }
.cs-tier__pr {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  font-variation-settings: "wght" 600, "wdth" 108;
  font-variant-numeric: tabular-nums;
}
.cs-tier__pr small {
  font-size: 0.42em;
  color: var(--fg-dim);
  letter-spacing: 0;
  font-variation-settings: "wght" 400;
}
.cs-tier ul { display: grid; gap: 0.4rem; margin-top: 0.2rem; }
.cs-tier li { color: var(--fg-dim); font-size: 0.92rem; padding-left: 1rem; position: relative; }
.cs-tier li::before { content: "·"; position: absolute; left: 0.25rem; }
.cs-tier li b { color: var(--fg); font-variation-settings: "wght" 500; }

/* --- Mazo de tarjetas del card sorting ----------------- */
.cs-deck { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.cs-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.32rem 0.55rem;
  line-height: 1.3;
}
.cs-chip--hi {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cs-chip--out { text-decoration: line-through; opacity: 0.5; }

/* --- Matriz de impacto y esfuerzo ---------------------- */
.cs-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-quad { background: var(--bg-raised); padding: clamp(1rem, 2vw, 1.4rem); }
.cs-quad h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 0.8rem;
  color: var(--fg-dim);
}
.cs-quad--do h4 { color: var(--accent); }
.cs-quad--plan h4 { color: var(--fg); }
.cs-quad--drop h4 { color: var(--accent-warm); }
.cs-quad ul { display: grid; gap: 0.4rem; }
.cs-quad li { color: var(--fg-dim); font-size: 0.94rem; padding-left: 1rem; position: relative; }
.cs-quad li::before { content: "—"; position: absolute; left: 0; opacity: 0.45; }
.cs-matrix__axis {
  grid-column: 1 / -1;
  background: var(--bg-raised);
  display: flex;
  justify-content: space-between;
  padding: 0.6rem clamp(1rem, 2vw, 1.4rem);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--fg-dim);
}
@media (max-width: 620px) { .cs-matrix { grid-template-columns: 1fr; } }

/* --- Lista de fuentes ---------------------------------- */
.cs-src {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.1rem 1.6rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cs-src li { list-style: none; border-bottom: 1px solid var(--line-soft); padding: 0.55rem 0; }
.cs-src a { color: var(--fg-dim); font-size: 0.9rem; text-decoration: none; }
.cs-src a:hover { color: var(--accent); }

/* --- Definiciones dentro de una ficha de arquetipo ----- */
.cs-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; margin-top: 0.9rem; }
.cs-dl dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.15rem;
}
.cs-dl dd { margin: 0; color: var(--fg-dim); font-size: 0.94rem; }

/* ---------------------------------------------------------
   19. PROTOTIPO EN VÍDEO Y CAPTURAS LARGAS

   Dos piezas que pide un caso de producto y que hasta ahora no
   existían en el archivo.

   .cs-video — el prototipo grabado. Hereda el marco de .cs-frame
   (fondo, filete, radio y pie en monoespaciada) porque es el mismo
   tipo de objeto: un artefacto del proyecto enseñado como lo que
   es. La diferencia está en el reproductor, que reserva su alto
   con aspect-ratio para que la página no dé un salto cuando el
   vídeo termina de cargar.

   .cs-shot — algunas pantallas de Figma miden siete mil píxeles de
   alto: son el scroll entero de una vista, no una captura. Meterlas
   enteras en la página aplasta todo lo demás. Se les da una ventana
   con alto máximo y scroll propio, de modo que se leen dentro de su
   marco sin secuestrar la lectura.
   --------------------------------------------------------- */
.cs-video {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.cs-video video {
  width: 100%;
  display: block;
  background: #000;
  aspect-ratio: var(--ar, 16 / 9);
}
.cs-video figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg);
}

/* El de móvil es un teléfono: se le deja su proporción y un ancho
   que no lo convierta en un póster. */
.cs-video--phone { max-width: 300px; margin-inline: auto; }
.cs-video--phone video { --ar: 220 / 464; }

/* Los dos prototipos, uno al lado del otro, cuando hay sitio. */
.cs-videos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: start;
}
.cs-videos > .cs-video { margin-top: 0; }
@media (max-width: 860px) {
  .cs-videos { grid-template-columns: 1fr; }
  .cs-videos > .cs-video + .cs-video { margin-top: clamp(1rem, 2.2vw, 2rem); }
}

/* --- La ventana para las capturas de scroll largo -------- */
.cs-shot__win {
  max-height: min(72vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-raised);
}
.cs-shot__win:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cs-shot__win img { width: 100%; display: block; }