/* =========================================================
   PLAY TO PILOT — KEYNOTE
   keynote.css — slide-specific components
   ========================================================= */

/* ---------------------------------------------------------
   CHROME — slide counter (bottom right), progress line (bottom)
   deliberately minimal: no menu, no toolbar
   --------------------------------------------------------- */
#deck-chrome{
  position: fixed;
  left:0; right:0; bottom: 34px;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#deck-progress-track{
  width: 340px; height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow:hidden;
}
#deck-progress-fill{
  height:100%;
  width: 0%;
  background: var(--yellow);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
#deck-counter{
  position: fixed;
  right: 48px; bottom: 40px;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--muted-2);
  pointer-events:none;
}
#deck-counter b{ color: var(--text); }

#deck-hint{
  position: fixed;
  left: 48px; bottom: 40px;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted-2);
  pointer-events:none;
  opacity: 0;
  transition: opacity .5s ease;
}
#deck-hint.is-visible{ opacity: .8; }

/* ---------------------------------------------------------
   COVER (slide 01)
   --------------------------------------------------------- */
.cover-brand{
  display:flex; align-items:baseline; gap:14px;
  font-family: var(--font-display); font-weight:800; font-size:24px;
  margin-bottom: 46px;
}
.cover-brand .dot{ color: var(--yellow); }
.cover-brand small{
  font-family: var(--font-mono); font-weight:500; font-size:14px;
  color: var(--muted-2); letter-spacing:.1em; text-transform:uppercase;
}
.cover-title{ font-size: 104px; line-height: 1.02; max-width: 18ch; }
.cover-title .accent{ color: var(--yellow); }
.cover-sub{ margin-top: 30px; font-size: 26px; color: var(--muted); max-width: 46ch; }

/* ---------------------------------------------------------
   FL STACK — altitude ladder (used in slide 04 / recap)
   --------------------------------------------------------- */
.fl-stack{
  display:flex; flex-direction:column-reverse;
  border:1px solid var(--line-strong); border-radius:10px; overflow:hidden;
  max-width: 640px;
}
.fl-stack-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 24px 30px;
  border-top: 2px solid var(--fl-accent, var(--yellow));
  background: var(--fl-accent-dim, var(--yellow-dim));
}
.fl-stack-row[data-accent="yellow"]{ --fl-accent: var(--yellow); --fl-accent-dim: var(--yellow-dim); }
.fl-stack-row[data-accent="cyan"]{ --fl-accent: var(--cyan); --fl-accent-dim: var(--cyan-dim); }
.fl-stack-row[data-accent="green"]{ --fl-accent: var(--green); --fl-accent-dim: var(--green-dim); }
.fl-stack-row[data-accent="red"]{ --fl-accent: var(--red); --fl-accent-dim: var(--red-dim); }
.fl-stack-code{ font-family: var(--font-mono); font-size:15px; color: var(--fl-accent); }
.fl-stack-name{ font-family: var(--font-display); font-weight:800; font-size:22px; margin-top:4px; }
.fl-stack-verb{ font-family: var(--font-mono); font-size:13px; color: var(--muted); text-align:right; max-width: 22ch; }

/* ---------------------------------------------------------
   MODULE HERO — single big module slide (05, 06, 07, 13)
   --------------------------------------------------------- */
.module-tag{
  font-family: var(--font-mono); font-size:16px; color: var(--muted-2); letter-spacing:.06em;
}
.module-name{ font-size: 76px; margin-top:14px; }
.module-verb{
  font-family: var(--font-mono); font-size:18px; letter-spacing:.05em; text-transform:uppercase;
  color: var(--muted); margin-top:10px;
}
.module-question{
  font-family: var(--font-display); font-weight:700; font-size:34px; margin-top:40px;
}
.module-desc{ margin-top:20px; }
.module-taglist{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.module-taglist li{
  font-family: var(--font-mono); font-size:15px; color: var(--text);
  background: var(--panel-2); border:1px solid var(--line-strong);
  padding: 10px 18px; border-radius: 22px;
}

/* ---------------------------------------------------------
   QUESTION CARD (slide 08)
   --------------------------------------------------------- */
.qcard{
  background: var(--panel); border:1px solid var(--line-strong); border-radius: 14px;
  padding: 44px 48px; max-width: 1400px;
}
.qcard-meta{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.qcard-id{
  font-family: var(--font-mono); font-size:16px; font-weight:700;
  color: var(--yellow); background: var(--yellow-dim);
  padding: 6px 14px; border-radius: 20px;
}
.qcard-path{ font-family: var(--font-mono); font-size:16px; color: var(--muted-2); }
.qcard-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.qcard-chips span{
  font-family: var(--font-mono); font-size:14px; color:var(--muted);
  border:1px solid var(--line-strong); padding:6px 14px; border-radius:20px;
}
.qcard-question{ font-family: var(--font-display); font-weight:700; font-size:32px; line-height:1.45; margin-bottom:34px; max-width: 62ch; }
.qcard-options{ display:flex; flex-direction:column; gap:12px; }
.qcard-options li{
  display:flex; align-items:center; gap:14px;
  padding: 18px 22px; border-radius:8px; border:1px solid var(--line-strong);
  font-family: var(--font-body); font-size:20px; color: var(--muted);
}
.qcard-options li.correct{
  color: var(--text); border-color: var(--green); background: var(--green-dim); font-weight:600;
}
.qcard-options li.correct svg{ width:22px; height:22px; color: var(--green); flex-shrink:0; }

/* ---------------------------------------------------------
   RECORD GRID — "Prontuário Técnico" (slide 09)
   --------------------------------------------------------- */
.record-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border:1px solid var(--line-strong); border-radius:12px; overflow:hidden;
}
.record-block{ background: var(--panel); padding: 30px 32px; border-top: 3px solid var(--rb-accent, var(--yellow)); }
.record-block[data-accent="yellow"]{ --rb-accent: var(--yellow); }
.record-block[data-accent="cyan"]{ --rb-accent: var(--cyan); }
.record-block[data-accent="green"]{ --rb-accent: var(--green); }
.record-block[data-accent="red"]{ --rb-accent: var(--red); }
.record-block h4{
  font-family: var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--rb-accent, var(--yellow)); margin-bottom:14px;
}
.record-block p{ font-family: var(--font-body); font-size:16px; line-height:1.6; color: var(--muted); }
.record-block ul{ display:flex; flex-direction:column; gap:6px; }
.record-block li{ font-size:15px; color: var(--muted); }
.record-block li b{ color: var(--text); font-weight:600; }

/* ---------------------------------------------------------
   COMPARISON TABLE (slide 10)
   --------------------------------------------------------- */
.compare-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background: var(--panel); border:1px solid var(--line-strong); border-radius:10px; overflow:hidden;
}
.compare-table th,.compare-table td{
  padding: 18px 20px; text-align:center; vertical-align:middle; font-size:16px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.compare-table th:last-child,.compare-table td:last-child{ border-right:0; }
.compare-table tr:last-child td{ border-bottom:0; }
.compare-table thead th{ background: var(--panel-2); font-family: var(--font-display); font-weight:700; font-size:17px; }
.compare-table thead th:first-child{ text-align:left; }
.compare-table tbody td:first-child{ text-align:left; font-weight:600; color:var(--text); }
.compare-table tbody td{ color: var(--muted); }
.compare-table th.c-yellow{ border-top:3px solid var(--yellow); }
.compare-table th.c-cyan{ border-top:3px solid var(--cyan); }
.compare-table th.c-green{ border-top:3px solid var(--green); }
.compare-table th.c-red{ border-top:3px solid var(--red); }
.yes{ color: var(--green); font-family: var(--font-mono); font-weight:700; }
.no{ color: var(--muted-2); font-family: var(--font-mono); }

/* ---------------------------------------------------------
   FIELD MAP — 56 fields as a visual cluster, not a table (slide 11)
   --------------------------------------------------------- */
.field-map{ display:flex; flex-direction:column; gap: 26px; }
.field-zone{ display:flex; align-items:flex-start; gap: 26px; }
.field-zone-label{
  min-width: 210px; font-family: var(--font-mono); font-size:15px;
  color: var(--fz-accent, var(--yellow)); letter-spacing:.04em; padding-top: 8px;
}
.field-zone-label b{ display:block; font-family: var(--font-display); font-size:20px; color: var(--text); margin-top:4px; }
.field-zone[data-accent="yellow"]{ --fz-accent: var(--yellow); }
.field-zone[data-accent="cyan"]{ --fz-accent: var(--cyan); }
.field-zone[data-accent="green"]{ --fz-accent: var(--green); }
.field-zone[data-accent="red"]{ --fz-accent: var(--red); }
.field-cloud{ display:flex; flex-wrap:wrap; gap:10px; flex:1; }
.field-cloud span{
  font-family: var(--font-mono); font-size:14px; color: var(--text);
  background: var(--fz-accent-dim, var(--panel-2)); border:1px solid var(--line-strong);
  padding: 8px 16px; border-radius:20px;
}
.field-zone[data-accent="yellow"] .field-cloud span{ background: var(--yellow-dim); }
.field-zone[data-accent="cyan"] .field-cloud span{ background: var(--cyan-dim); }
.field-zone[data-accent="green"] .field-cloud span{ background: var(--green-dim); }
.field-zone[data-accent="red"] .field-cloud span{ background: var(--red-dim); }

/* ---------------------------------------------------------
   CHECKLIST — SIKU unlock tiers (slide 14)
   --------------------------------------------------------- */
.checklist{ display:flex; flex-direction:column; gap: 0; max-width: 1300px; }
.checklist li{
  display:flex; align-items:flex-start; gap:22px;
  padding: 22px 0; border-bottom:1px solid var(--line);
}
.checklist li:last-child{ border-bottom:0; }
.check-mark{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; margin-top:4px;
  border:1px solid var(--green); color: var(--green);
  display:flex; align-items:center; justify-content:center;
}
.check-mark svg{ width:16px; height:16px; }
.checklist h4{ font-family: var(--font-display); font-size:22px; font-weight:700; }
.checklist p{ font-size:16px; color: var(--muted); margin-top:6px; max-width: 70ch; }
.checklist .unlocks{
  display:inline-block; margin-top:10px; font-family: var(--font-mono); font-size:13px;
  color: var(--yellow); letter-spacing:.03em;
}

/* ---------------------------------------------------------
   ROADMAP (slide 16)
   --------------------------------------------------------- */
.roadmap-track{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.roadmap-stage{ border-top: 3px solid var(--rm-accent, var(--yellow)); padding-top: 26px; }
.roadmap-stage[data-accent="yellow"]{ --rm-accent: var(--yellow); }
.roadmap-stage[data-accent="cyan"]{ --rm-accent: var(--cyan); }
.roadmap-stage[data-accent="red"]{ --rm-accent: var(--red); }
.roadmap-stage h4{
  font-family: var(--font-mono); font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--rm-accent); margin-bottom:14px;
}
.roadmap-stage p{ font-size:18px; color: var(--muted); line-height:1.6; }
.roadmap-stage ul{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.roadmap-stage li{ font-size:16px; color: var(--muted); padding-left:18px; position:relative; }
.roadmap-stage li::before{ content:"—"; position:absolute; left:0; color: var(--rm-accent); }

/* ---------------------------------------------------------
   ENDING (slide 17)
   --------------------------------------------------------- */
.ending-title{ font-size: 96px; }
.ending-sub{ margin-top: 26px; font-size: 24px; color: var(--muted); max-width: 56ch; }
.ending-ctas{ display:flex; gap:16px; margin-top: 46px; }
.ending-foot{
  margin-top: 90px; font-family: var(--font-mono); font-size:14px; color: var(--muted-2); letter-spacing:.08em;
}

/* generic vertical rhythm helpers */
.mt-1{ margin-top: 20px; } .mt-2{ margin-top: 36px; } .mt-3{ margin-top: 56px; }