/* ────────────────────────────────────────────────────────────────
   HDD Slides — TED-style minimal, keynote-grade
   Principle: each slide has ONE idea, big and clean.
   Design system: modular scale 1.5x, semantic color palette, WCAG AA.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Palette (GitHub Dark) */
  --bg: #0d1117;
  --text: #c9d1d9;
  --heading: #f0f6fc;
  --panel: #161b22;
  --border: #30363d;

  /* Semantic colors
     accent  → emphasis, throughline, fragments, links
     green   → success, "what we know", layer 1 (pre-commit), Skills
     red     → danger, "skipped", "what gets enforced", icon ✗
     yellow  → warning, key lesson, layer 2 (CI), Harness Scripts
     purple  → layer 5 (PR approval), CLAUDE.md, Linear branding
     orange  → layer 6 (Session Stop), Claude branding
  */
  --accent: #58a6ff;
  --green:  #238636;
  --red:    #f85149;
  --yellow: #d29922;
  --purple: #8957e5;
  --orange: #bc4c00;

  /* WCAG AA-safe gray (was #8b949e — failed contrast on #0d1117) */
  --gray:   #a0adb8;

  /* Modular type scale (ratio 1.5) */
  --fs-xs:    0.667em;   /* footnotes, fine print */
  --fs-sm:    0.889em;   /* sub-body, captions */
  --fs-base:  1em;       /* body */
  --fs-md:    1.333em;   /* emphasis, secondary headlines */
  --fs-lg:    1.778em;   /* h2, large quotes */
  --fs-xl:    2.370em;   /* hero quotes, large numbers small */
  --fs-2xl:   3.160em;   /* title-main, big-number hero */
  --fs-3xl:   4.215em;   /* stat-hero numbers */

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-base:    1.55;
  --lh-relaxed: 1.75;

  /* Spacing (8px base, em-relative for slide scaling) */
  --sp-1: 0.25em;
  --sp-2: 0.5em;
  --sp-3: 0.75em;
  --sp-4: 1em;
  --sp-5: 1.25em;
  --sp-6: 1.5em;
  --sp-8: 2em;
  --sp-10: 2.5em;

  /* Layout */
  --content-max: 900px;
  --content-narrow: 720px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
}

/* ───────── Page background ───────── */

html,
body,
.reveal-viewport {
  background-color: var(--bg);
}

/* ───────── Base typography ───────── */

.reveal {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  color: var(--text);
  background: transparent;
}

.reveal h1, .reveal h2, .reveal h3 {
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--heading);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.reveal h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

.reveal code {
  color: var(--accent);
  background: rgba(88, 166, 255, 0.10);
  padding: 0.05em 0.4em;
  border-radius: var(--r-sm);
  font-size: 0.85em;
}

/* ───────── Color helpers (text) ───────── */

.accent { color: var(--accent); }
.green  { color: var(--green); }
.red    { color: var(--red); }
.yellow { color: var(--yellow); }
.purple { color: var(--purple); }
.muted  { color: var(--gray); }
.small  { font-size: var(--fs-sm); }

.footnote {
  color: var(--gray);
  font-size: var(--fs-xs);
  margin-top: var(--sp-6);
}

.section-title {
  color: var(--gray);
  font-weight: 400;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--sp-4);
}

/* Slide subtitle (under .problem-title) */
.slide-sub {
  text-align: center;
  font-size: var(--fs-sm);
  font-style: italic;
  margin: 0 0 var(--sp-4);
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   A — APERTURA
   ════════════════════════════════════════════════════════════════ */

.title-slide { text-align: center; }

.title-main {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.03em;
}

.title-sub {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}

/* Title QR (single legacy use — kept for back-compat) */
.qr-title {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-4);
  opacity: 0.6;
}
.qr-title svg { background: white; padding: 8px; border-radius: var(--r-md); }

/* Paired QRs on slide 1 */
.qr-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-10);
  margin-top: var(--sp-5);
}
.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.qr-code svg {
  background: white;
  padding: 8px;
  border-radius: var(--r-md);
  width: 140px;
  height: 140px;
}
.qr-label {
  font-size: var(--fs-xs);
  color: var(--heading);
  text-align: center;
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-snug);
}
.qr-label .small { font-size: 0.85em; font-weight: 400; }

/* Hook question + confess (slide 2 legacy, also used in slide 3) */
.hook-question {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--sp-4);
}
.hook-sub {
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}
.big-confess {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-top: var(--sp-3);
  line-height: var(--lh-tight);
}

/* Big question / echo (slide 3 + 21) */
.big-question, .big-question-echo {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--heading);
  max-width: 1000px;
  margin: 0 auto;
}
.big-question-tail {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin-top: var(--sp-5);
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════════
   Unified quote system (.tk-quote)
   Used in: slide 4 (throughline), 8 (harness), 20 (key lesson)
   ════════════════════════════════════════════════════════════════ */

.tk-quote {
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--heading);
  border-left: 4px solid var(--accent);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6);
  text-align: left;
  max-width: var(--content-max);
  margin: var(--sp-4) auto;
  font-weight: 400;
  background: rgba(88, 166, 255, 0.03);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tk-quote--throughline { font-size: var(--fs-lg); }
.tk-quote--harness     { font-size: var(--fs-md); }
.tk-quote--key         {
  font-size: var(--fs-md);
  border-left-color: var(--yellow);
  background: rgba(210, 153, 34, 0.04);
}

/* Legacy classes — kept as aliases pointing to same tokens */
.throughline {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-style: italic;
  border-left: 4px solid var(--accent);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6);
  text-align: left;
  max-width: var(--content-max);
  margin: var(--sp-4) auto;
  color: var(--heading);
  background: rgba(88, 166, 255, 0.03);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 400;
}
.throughline-sub {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  text-align: center;
}

.harness-quote {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--heading);
  border-left: 4px solid var(--accent);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6);
  text-align: left;
  max-width: var(--content-max);
  margin: var(--sp-4) auto;
  font-weight: 400;
  background: rgba(88, 166, 255, 0.03);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.key-lesson-quote {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--heading);
  border-left: 4px solid var(--yellow);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-6);
  text-align: left;
  max-width: var(--content-max);
  margin: var(--sp-4) auto;
  font-weight: 400;
  background: rgba(210, 153, 34, 0.04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.key-lesson-sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-align: center;
  margin-top: var(--sp-6);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.analogy-line {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--accent);
  margin-top: var(--sp-4);
}

/* ════════════════════════════════════════════════════════════════
   B — POR QUÉ IMPORTA
   ════════════════════════════════════════════════════════════════ */

.problem-title {
  font-size: var(--fs-xl);
  text-align: center;
  margin-bottom: var(--sp-4);
  color: var(--heading);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

/* Slide 5 — gap table (look-and-feel from docs/slides/) */
.gap-table-clean {
  margin: 0 auto;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.gap-table-clean th,
.gap-table-clean td {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid #21262d;
}
.gap-table-clean th {
  background: var(--panel);
  color: var(--heading);
  font-weight: 700;
}
.gap-table-clean th.green  { color: var(--green); }
.gap-table-clean th.yellow { color: var(--yellow); }
.gap-table-clean th.red    { color: var(--red); }

/* Slide 6 — big number ($7,600 vs $80) */
.big-number {
  text-align: center;
  margin: var(--sp-2) 0;
}
.big-number .num {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  display: block;
  letter-spacing: -0.05em;
}
.big-number .num-label {
  font-size: var(--fs-sm);
  color: var(--gray);
  margin: var(--sp-2) 0;
}
.big-number .num-sub {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.big-number-comparison {
  font-size: var(--fs-md);
  margin-top: var(--sp-4);
  color: var(--text);
}

/* Slide 7 — three reasons */
.three-reasons {
  list-style: none;
  text-align: center;
  font-size: var(--fs-md);
  margin: var(--sp-4) auto;
  padding: 0;
}
.three-reasons li {
  margin: var(--sp-3) 0;
  font-weight: 700;
  color: var(--heading);
}

/* ════════════════════════════════════════════════════════════════
   C — CONCEPTOS
   ════════════════════════════════════════════════════════════════ */

.big-def {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  text-align: center;
  margin: var(--sp-4) auto;
  max-width: var(--content-max);
  color: var(--heading);
  font-weight: 400;
}

/* Slide 9 — six layers stack (compact: 6 rows must fit in one viewport) */
.layers-stack {
  max-width: var(--content-narrow);
  margin: var(--sp-2) auto;
  font-size: var(--fs-sm);
}
.layer-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--panel);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0;
  text-align: left;
}
.layer-no {
  display: inline-flex;
  width: 1.7em;
  height: 1.7em;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
  font-size: 0.9em;
}
.layer-1 .layer-no { background: var(--green); }
.layer-2 .layer-no { background: var(--yellow); color: var(--bg); }
.layer-3 .layer-no { background: var(--accent); color: var(--bg); }
.layer-4 .layer-no { background: var(--gray);   color: var(--bg); }
.layer-5 .layer-no { background: var(--purple); }
.layer-6 .layer-no { background: var(--orange); }
.layer-label { font-weight: 600; color: var(--heading); }

/* Slide 10 — three systems arch */
.arch-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin: var(--sp-4) 0;
  flex-wrap: wrap;
}
.arch-node {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-6);
  min-width: 150px;
  text-align: center;
}
.arch-node strong {
  display: block;
  color: var(--heading);
  font-size: var(--fs-md);
}
.arch-label {
  display: block;
  color: var(--gray);
  font-size: var(--fs-sm);
  margin-top: var(--sp-1);
}
.arch-purple { border-color: #5e6ad2; }
.arch-dark   { border-color: var(--heading); }
.arch-orange { border-color: #d97757; }
.arch-edge {
  font-size: var(--fs-md);
  color: var(--gray);
}

/* Slide 11 — restaurant analogy (componentes en metáfora) */
.restaurant-analogy {
  list-style: none;
  text-align: left;
  font-size: var(--fs-base);
  max-width: var(--content-narrow);
  margin: var(--sp-4) auto;
  padding: 0;
  line-height: var(--lh-relaxed);
}
.restaurant-analogy li {
  margin: var(--sp-3) 0;
  color: var(--heading);
}
.restaurant-analogy strong {
  font-weight: 700;
}
.restaurant-caption {
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  margin-top: var(--sp-6);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}

/* Slide 12 — system components diagram (compact: 4 rows + arrows must fit one viewport) */
.system-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin: var(--sp-1) auto;
  font-size: var(--fs-xs);
}
.system-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.system-box {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
}
.system-box strong {
  color: var(--heading);
  font-size: var(--fs-md);
  display: block;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.system-label {
  color: var(--gray);
  font-size: 0.7em;
  margin-top: 0.2em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.system-you     { border-color: var(--accent); }
.system-you strong { color: var(--accent); }
.system-skill   { border-color: var(--green); }
.system-skill strong { color: var(--green); }
.system-rules   { border-color: var(--purple); }
.system-rules strong { color: var(--purple); }
.system-scripts { border-color: var(--yellow); }
.system-scripts strong { color: var(--yellow); }
.system-hooks   { border-color: var(--red); }
.system-hooks strong { color: var(--red); }
.system-ext-linear { border-color: #5e6ad2; }
.system-ext-linear strong { color: #5e6ad2; }
.system-ext-github { border-color: var(--heading); }
.system-ext-ci     { border-color: var(--yellow); }
.system-ext-ci strong { color: var(--yellow); }
.system-arrow {
  color: var(--gray);
  font-size: var(--fs-sm);
  line-height: 1;
}

/* Slide 13 — key message (clímax pre-demos) */
.key-message {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  border: none;
  padding: 0;
  margin: var(--sp-2) auto;
  max-width: var(--content-max);
}
.key-message-sub {
  font-size: var(--fs-md);
  margin-top: var(--sp-6);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   D — DEMOS
   ════════════════════════════════════════════════════════════════ */

.demo-tag {
  color: var(--accent);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-1);
}
.demo-title {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
  color: var(--heading);
}
.demo-sub {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-6);
}
.demo-cmd {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-6);
  display: inline-block;
  margin: 0 auto;
  font-size: var(--fs-base);
}
.demo-cmd code { font-size: 1em; }

/* Slide 17 — stat hero (rediseñado de .recap-grid) */
.stat-eyebrow {
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.stat-hero {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-10);
  margin: var(--sp-4) 0;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
.stat-hero-item {
  text-align: center;
  flex: 1;
}
.stat-hero-num {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--heading);
  letter-spacing: -0.05em;
}
.stat-hero-label {
  display: block;
  color: var(--text);
  font-size: var(--fs-sm);
  margin-top: var(--sp-3);
  line-height: var(--lh-snug);
}
.stat-hero-label .muted {
  font-size: 0.85em;
}
.stat-hero-punch {
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 600;
  margin-top: var(--sp-8);
  line-height: var(--lh-snug);
  color: var(--heading);
}

/* Legacy .recap-grid (kept for back-compat if any slide still uses it) */
.recap-grid {
  display: flex;
  justify-content: center;
  gap: var(--sp-10);
  margin: var(--sp-6) 0;
}
.recap-item { text-align: center; }
.recap-num {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--heading);
}
.recap-label {
  display: block;
  color: var(--gray);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════════
   E — LECCIONES + CIERRE
   ════════════════════════════════════════════════════════════════ */

/* Slide 18 — Before vs After comparison */
.comparison {
  display: flex;
  gap: var(--sp-6);
  justify-content: center;
  align-items: stretch;
  margin: var(--sp-2) auto;
  max-width: 920px;
}
.comparison-col {
  flex: 1;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid #21262d;
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
}
.comparison-col-bad  { border-top: 3px solid var(--red); }
.comparison-col-good { border-top: 3px solid var(--green); }
.comparison-col h3 {
  margin: 0 0 var(--sp-3) 0;
  font-size: var(--fs-md);
  text-transform: none;
  letter-spacing: 0;
}
.comp-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--heading);
}
.comp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  border: 1.5px solid;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.9em;
  line-height: 1;
}
.comp-icon-red   { color: var(--red);   border-color: var(--red); }
.comp-icon-green { color: var(--green); border-color: var(--green); }

/* Slide 19 — three lessons cards */
.lessons-three {
  display: flex;
  gap: var(--sp-6);
  margin: var(--sp-4) 0;
  justify-content: center;
}
.lesson-card {
  flex: 1;
  max-width: 280px;
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-top: 3px solid var(--accent);
}
.lesson-no {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  line-height: 1;
}
.lesson-text {
  font-size: var(--fs-base);
  margin: var(--sp-2) 0;
  color: var(--heading);
  line-height: var(--lh-snug);
}
.lesson-why {
  font-size: var(--fs-sm);
  font-style: italic;
}

/* Slide 21 — re-anchor answer */
.answer {
  font-size: var(--fs-md);
  margin-top: var(--sp-6);
  text-align: center;
  line-height: var(--lh-snug);
  color: var(--heading);
}

/* Slide 20 — future paint */
.reveal .future-negations {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: var(--sp-4) auto var(--sp-5);
  width: fit-content;
  max-width: var(--content-narrow);
  text-align: left;
}
.reveal .future-negations li {
  list-style: none;
  list-style-type: none;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--muted);
  margin: var(--sp-3) 0;
  opacity: 0.85;
}
.reveal .future-negations li::marker {
  content: none;
}
.reveal .future-negations li::before {
  content: "✕";
  color: #e06c75;
  font-weight: 700;
  margin-right: var(--sp-2);
  display: inline-block;
}
.future-finale-isolated {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--heading);
  line-height: var(--lh-base);
  margin: var(--sp-5) auto var(--sp-4);
  max-width: var(--content-narrow);
}
.bonus-line {
  font-size: var(--fs-sm);
  text-align: center;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border-radius: var(--r-md);
  display: inline-block;
}
.future-bridge {
  font-size: var(--fs-md);
  text-align: center;
  margin: var(--sp-4) 0;
  color: var(--text);
}

.reveal .big-steps-three {
  list-style: none;
  list-style-type: none;
  counter-reset: step;
  text-align: left;
  max-width: var(--content-narrow);
  margin: var(--sp-4) auto;
  padding: 0;
}
.reveal .big-steps-three li {
  list-style: none;
  list-style-type: none;
  counter-increment: step;
  margin: var(--sp-3) 0;
  font-size: var(--fs-base);
  padding-left: var(--sp-8);
  position: relative;
  line-height: var(--lh-base);
}
.reveal .big-steps-three li::marker {
  content: none;
}
.big-steps-three li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  height: 1.4em;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.promise-line {
  font-size: var(--fs-lg);
  text-align: center;
  margin-top: var(--sp-5);
  font-weight: 700;
}

/* Slide 21 — final */
.final-slide { text-align: center; }
.final-thanks {
  font-size: var(--fs-3xl);
  font-weight: 700;
  margin-bottom: var(--sp-1);
  color: var(--heading);
}
.final-message {
  font-size: var(--fs-md);
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--text);
}
.qr-final {
  display: flex;
  justify-content: center;
  margin: var(--sp-3) 0;
}
.qr-final svg { background: white; padding: 12px; border-radius: var(--r-lg); }
.final-repo { margin: var(--sp-4) 0 var(--sp-2); }
.final-repo code {
  font-size: var(--fs-base);
  padding: var(--sp-2) var(--sp-4);
}

/* ════════════════════════════════════════════════════════════════
   F — JOURNEY · slide "¿Y cómo expertIA lo está haciendo hoy?"
   Swimlane vertical: 4 zonas (Linear · GitHub · Harness · Linear)
   Diseño compacto: todo debe caber en un viewport sin scroll.
   ════════════════════════════════════════════════════════════════ */

/* Título: tamaño cercano al section-title del resto del deck,
   pero conservando peso bold porque es la pregunta del slide. */
.journey-title {
  font-size: var(--fs-base);
  text-align: center;
  margin: 0 0 var(--sp-2);
  color: var(--heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

/* Escala global del swimlane: ~42% del tamaño base.
   Con 8 cards + 5 zonas + explain lines, todo debe seguir
   cabiendo en un viewport 16:9 sin scroll. */
.journey-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
  font-size: 0.42em;
}

.journey-zone {
  width: 100%;
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
}
.journey-zone--linear {
  border-left: 4px solid #5e6ad2;
  background: linear-gradient(90deg, rgba(94, 106, 210, 0.12), var(--panel) 35%);
}
.journey-zone--agent {
  border-left: 4px solid #22d3ee;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), var(--panel) 35%);
}
.journey-zone--github {
  border-left: 4px solid var(--gray);
}
.journey-zone--harness {
  border-left: 4px solid var(--orange);
  background: linear-gradient(90deg, rgba(188, 76, 0, 0.10), var(--panel) 35%);
}

/* Chip top-right: etiqueta de dominio legible desde el fondo del
   auditorio, en una esquina donde no compite con los stages. */
.journey-zone-label {
  position: absolute;
  top: 0.35em;
  right: 0.6em;
  padding: 0.15em 0.7em;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gray);
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  z-index: 2;
}
.journey-zone--linear  .journey-zone-label {
  color: #aab6ff;
  background: rgba(94, 106, 210, 0.18);
}
.journey-zone--agent .journey-zone-label {
  color: #67e8f9;
  background: rgba(34, 211, 238, 0.18);
}
.journey-zone--harness .journey-zone-label {
  color: #e5996b;
  background: rgba(188, 76, 0, 0.18);
}
.journey-zone--github .journey-zone-label {
  background: rgba(160, 173, 184, 0.10);
}

.journey-stage {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0;
}
.journey-stage + .journey-stage {
  border-top: 1px dashed var(--border);
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
}

.journey-stage-no {
  display: inline-flex;
  width: 1.5em;
  height: 1.5em;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1;
}
.journey-no-0 { background: #5e6ad2; }                          /* Linear · ticket */
.journey-no-1 { background: #22d3ee; color: var(--bg); }        /* Agente · build */
.journey-no-2 { background: var(--green); }                     /* GitHub · pre-commit */
.journey-no-3 { background: var(--yellow); color: var(--bg); }  /* GitHub · CI */
.journey-no-4 { background: var(--accent); color: var(--bg); }  /* Harness · gates */
.journey-no-5 { background: var(--gray);   color: var(--bg); }  /* Harness · webhook */
/* Step 6 en rojo: semánticamente es la gate humana que BLOQUEA.
   También evita ambigüedad visual con los bordes violeta de Linear. */
.journey-no-6 { background: var(--red); }                       /* Harness · PR approval */
.journey-no-7 { background: var(--orange); }                    /* Linear · session stop */

.journey-stage-body { flex: 1; text-align: left; }
.journey-stage-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--heading);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}
.journey-stage-title .stage-meta {
  font-weight: 400;
  color: var(--gray);
  margin-left: var(--sp-2);
  font-size: 0.9em;
}
/* Línea explicativa en lenguaje plano, dirigida al público que ve
   el slide desde el fondo del auditorio. Va entre el título (técnico)
   y los tags (jerga). Pesa más visualmente que los tags. */
.journey-stage-explain {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.3;
  margin: 0.2em 0 0.1em;
}

.journey-stage-desc {
  color: var(--gray);
  font-size: var(--fs-xs);
  margin-top: 0.15em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: var(--lh-snug);
}

/* Conector vertical entre zonas: línea punteada que refuerza
   visualmente la continuidad del flujo (reemplaza la flecha ↓ tímida). */
.journey-connector {
  width: 2px;
  height: 1em;
  margin: 0 auto;
  background-image: linear-gradient(to bottom, var(--gray) 50%, transparent 50%);
  background-size: 2px 4px;
  background-repeat: repeat-y;
  opacity: 0.85;
}

/* Caption del loop: panel sutil que crea contraste vs el hashtag del fondo. */
.journey-loop-caption {
  margin: var(--sp-2) auto 0;
  padding: var(--sp-1) var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.04em;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: fit-content;
  max-width: 80%;
}
.journey-loop-caption .accent { font-weight: 600; }