/* deck.css · base compartilhada das aulas. Estilos específicos de cada aula ficam no próprio index.html. */

/* ========================================================
 Tokens · base compartilhada do programa
 ======================================================== */
:root {
  --c-canvas: #131313;
  --c-surface: #1C1C1C;
  --c-surface-2: #232323;
  --c-frame: #313131;
  --c-mint: #3CFFD0;
  --c-mint-deep: #309875;
  --c-flare: #EC1A6A;
  --c-violet: #5200FF;
  --c-violet-soft: #B89BFF;
  --c-yellow: #FFD53D;
  --c-white: #FFFFFF;
  --c-fg-1: #FFFFFF;
  --c-fg-2: #E9E9E9;
  --c-fg-3: #949494;
  --c-fg-4: #6B6B6B;
  --c-fg-inverse: #131313;

  --font-display: 'Archivo Black', Impact, sans-serif;
  --font-sans: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Newsreader', Georgia, serif;

  --slide-w: 1920px;
  --slide-h: 1080px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #000;
  color: var(--c-fg-1);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================
 Fullscreen stage com letterbox
 ======================================================== */
.deck-stage {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}

.slide-frame {
  position: relative;
  width: var(--slide-w);
  height: var(--slide-h);
  transform: scale(var(--scale, 1));
  transform-origin: center center;
  flex-shrink: 0;
  z-index: 1;
}

/* Camada de capa que vaza pra fora do frame (full-bleed em monitores wide) */
.cover-bleed {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #050505;
  /* Scrim à esquerda + imagem, ambos no viewport: a escuridão é contínua
     da letterbox ao frame, sem emenda em monitores wide */
  background-image:
    linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.78) 26%, rgba(5, 5, 5, 0.35) 46%, rgba(5, 5, 5, 0) 64%),
    url('assets/espaco-capa-voyager.jpg');
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, right center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
body.is-cover .cover-bleed {
  opacity: 1;
}

/* ========================================================
 Slide base — 1920×1080
 ======================================================== */
.slide {
  width: var(--slide-w);
  height: var(--slide-h);
  background: var(--c-canvas);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ========================================================
 Modo print — exporta PDF com todos os slides empilhados
 ======================================================== */
@media print {
  @page {
    size: 1920px 1080px;
    margin: 0;
  }

  html,
  body {
    width: 1920px;
    height: auto;
    overflow: visible !important;
  }

  .deck-stage {
    position: static;
    display: block;
    height: auto;
  }

  .slide-frame {
    transform: none !important;
    width: 1920px;
    height: auto;
  }

  .slide {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    page-break-after: always;
    break-after: page;
    margin-bottom: 0;
  }

  .slide:last-child {
    page-break-after: auto;
  }

  .deck-nav {
    display: none !important;
  }
}

/* ========================================================
 Nav bar — barra de navegação minimalista no rodapé
 ======================================================== */
.deck-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(60, 255, 208, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.deck-nav:hover {
  opacity: 1;
}

/* Hit area extendida pra cima — só revela com mouse próximo à barra */
.deck-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
}

.nav-btn {
  background: transparent;
  border: 1px solid var(--c-frame);
  color: var(--c-fg-3);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms;
  font-size: 14px;
  line-height: 1;
}

.nav-btn:hover {
  border-color: var(--c-mint);
  color: var(--c-mint);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-counter span {
  color: var(--c-mint);
  font-weight: 600;
}

.nav-dots {
  display: flex;
  gap: 4px;
}

.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-frame);
  cursor: pointer;
  transition: all 200ms;
}

.nav-dot.active {
  background: var(--c-mint);
  transform: scale(1.4);
}

.nav-dot.is-section {
  background: var(--c-violet-soft);
}

.nav-dot.is-section.active {
  background: var(--c-mint);
}

.nav-hint {
  color: var(--c-fg-4);
  font-size: 10px;
}

/* Chrome compartilhado */
.slide-chrome {
  position: absolute;
  top: 56px;
  left: 64px;
  right: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}

.slide-mark {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1;
}

.slide-mark .accent {
  color: var(--c-mint);
}

.meta-nano {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-3);
}

.slide-foot {
  position: absolute;
  bottom: 72px;
  left: 144px;
  right: 144px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}

.tag-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-mint);
  border: 1px solid var(--c-mint-deep);
  padding: 10px 16px;
  border-radius: 2px;
  background: rgba(60, 255, 208, 0.04);
}

.tag-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 10px var(--c-mint);
}

/* Utilitários de texto */
.kicker {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.kicker::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--c-mint);
}

.whisper {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin: 0;
}

/* ========================================================
 01 · COVER
 ======================================================== */
.slide-cover {
  background: transparent;
}

.cover-bg {
  position: absolute;
  top: 50%;
  right: -6%;
  width: 78%;
  height: 116%;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 1;
  /* Imagem já tem fade-to-black embutido; máscara reforça a fusão à esquerda */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 10%, black 36%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 10%, black 36%, black 100%);
}

.cover-overlay {
  /* O scrim agora vive na .cover-bleed (viewport), contínuo sem emenda.
     Mantido vazio para preservar a estrutura do markup. */
  display: none;
}

.cover-body {
  position: absolute;
  top: 50%;
  left: 144px;
  right: 144px;
  transform: translateY(-50%);
  z-index: 2;
}

.cover-body .cover-kicker {
  margin: 0 0 22px 0;
}

.cover-title {
  font-family: var(--font-display);
  font-size: 150px;
  line-height: 0.9;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.cover-title .accent {
  color: var(--c-mint);
}

.cover-deck {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.45;
  color: var(--c-fg-2);
  max-width: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
  margin-top: 30px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ========================================================
 02 · MAPA DO PROGRAMA · 2 aulas
 ======================================================== */
.program-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.program-head .whisper {
  margin-bottom: 20px;
}

.program-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
  color: var(--c-white);
}

.program-title .accent {
  color: var(--c-mint);
}

.program-grid {
  position: absolute;
  top: 380px;
  bottom: 216px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.program-card {
  border-radius: 24px;
  padding: 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.program-card.is-now {
  background: var(--c-mint);
  color: var(--c-fg-inverse);
}

.program-card.is-next {
  background: var(--c-surface);
  border: 1px solid var(--c-frame);
  color: var(--c-white);
}

.program-card .pc-tag {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0 0 24px 0;
}

.program-card.is-now .pc-tag {
  color: rgba(19, 19, 19, 0.7);
}

.program-card.is-next .pc-tag {
  color: var(--c-fg-3);
}

.program-card .pc-num {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.85;
  margin: 0 0 8px 0;
}

.program-card .pc-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

.program-card .pc-desc {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 16px 0;
}

.program-card.is-now .pc-desc {
  color: rgba(19, 19, 19, 0.85);
}

.program-card .pc-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.program-card .pc-bullets li {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.6px;
  line-height: 1.5;
}

.program-card .pc-bullets li::before {
  content: "→ ";
  font-weight: 700;
}

.program-card.is-now .pc-bullets li {
  color: rgba(19, 19, 19, 0.75);
}

.program-card.is-now .pc-bullets li::before {
  color: var(--c-fg-inverse);
}

.program-card.is-next .pc-bullets li {
  color: var(--c-fg-3);
}

.program-card.is-next .pc-bullets li::before {
  color: var(--c-mint);
}

.program-card .pc-time {
  position: absolute;
  top: 48px;
  right: 48px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.program-card.is-now .pc-time {
  color: rgba(19, 19, 19, 0.7);
}

.program-card.is-next .pc-time {
  color: var(--c-fg-3);
}

/* ========================================================
 03 · AGENDA — lista numerada
 ======================================================== */
.agenda-body {
  position: absolute;
  top: calc(50% - 30px);
  left: 64px;
  right: 64px;
  transform: translateY(-50%);
}

.agenda-head {
  margin-bottom: 48px;
}

.agenda-head .whisper {
  margin-bottom: 24px;
}

.agenda-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.agenda-title .accent {
  color: var(--c-mint);
}

.agenda-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  max-width: 1500px;
}

.agenda-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-frame);
}

.agenda-list .ag-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--c-mint);
}

.agenda-list .ag-label {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-white);
}

.agenda-list .ag-time {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  text-align: right;
}

/* ========================================================
 04 · DIAGNÓSTICO — 2×2 grid de perfis
 ======================================================== */
.diag-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.diag-head .whisper {
  margin-bottom: 24px;
}

.diag-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.diag-title .accent {
  color: var(--c-mint);
}

.diag-grid {
  position: absolute;
  top: 400px;
  bottom: 120px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.diag-opt {
  border: 1px solid var(--c-frame);
  border-radius: 24px;
  padding: 28px 36px;
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 180ms ease, background 180ms ease;
}

.diag-opt:hover {
  border-color: var(--c-mint);
}

.diag-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.diag-opt .diag-num {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--c-mint);
  margin: 0;
}

.diag-icon {
  width: 36px;
  height: 36px;
  color: var(--c-mint);
  stroke-width: 1.5;
  flex-shrink: 0;
}

.diag-icon svg {
  width: 100%;
  height: 100%;
}

.diag-opt .diag-label {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 12px 0;
  color: var(--c-white);
}

.diag-opt .diag-desc {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-fg-3);
  margin: 0;
}

/* ========================================================
 SECTION HEADER — mint full-bleed
 ======================================================== */
.slide-section {
  background: var(--c-mint);
  color: var(--c-fg-inverse);
  display: grid;
  align-content: center;
  padding: 0 96px;
}

.section-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.section-shout {
  font-family: var(--font-display);
  font-size: 180px;
  line-height: 0.88;
  text-transform: uppercase;
  margin: 0 0 32px 0;
  color: var(--c-fg-inverse);
}

.section-whisper {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: rgba(19, 19, 19, 0.7);
  margin: 0;
}

/* ========================================================
 05 · MENTAL MODEL — split slide
 ======================================================== */
.slide-mental .mental-grid {
  position: absolute;
  top: 156px;
  bottom: 96px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mental-left,
.mental-right {
  padding: 0 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mental-right {
  background: rgba(60, 255, 208, 0.05);
  border-left: 1px solid var(--c-frame);
}

.mental-tag {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin: 0 0 28px 0;
}

.mental-left .mental-tag {
  color: var(--c-fg-3);
}

.mental-right .mental-tag {
  color: var(--c-mint);
}

.mental-stmt {
  font-family: var(--font-display);
  font-size: 92px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 32px 0;
}

.mental-left .mental-stmt {
  color: var(--c-fg-3);
  text-decoration: line-through;
  text-decoration-color: var(--c-flare);
  text-decoration-thickness: 4px;
}

.mental-right .mental-stmt {
  color: var(--c-white);
}

.mental-right .mental-stmt .accent {
  color: var(--c-mint);
}

.mental-desc {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 720px;
  margin: 0;
}

.mental-left .mental-desc {
  color: var(--c-fg-4);
}

.mental-right .mental-desc {
  color: var(--c-fg-2);
}

/* ========================================================
 06 · COMO ELA APRENDEU — 3 fases
 ======================================================== */
.training-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.training-head .whisper {
  margin-bottom: 20px;
}

.training-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.training-title .accent {
  color: var(--c-mint);
}

.training-grid {
  position: absolute;
  top: 400px;
  bottom: 156px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.training-step {
  background: var(--c-surface);
  border-radius: 20px;
  padding: 36px;
  border-top: 4px solid var(--c-mint);
  display: flex;
  flex-direction: column;
}

.training-step.is-1 {
  border-top-color: var(--c-mint);
}

.training-step.is-2 {
  border-top-color: var(--c-violet-soft);
}

.training-step.is-3 {
  border-top-color: var(--c-yellow);
}

.training-step .ts-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--c-mint);
  margin: 0 0 16px 0;
}

.training-step.is-2 .ts-num {
  color: var(--c-violet-soft);
}

.training-step.is-3 .ts-num {
  color: var(--c-yellow);
}

.training-step .ts-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 16px 0;
}

.training-step .ts-sub {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin: 0 0 24px 0;
}

.training-step .ts-desc {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-fg-2);
  margin: 0 0 18px 0;
}

.training-step .ts-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--c-fg-4);
  padding-top: 18px;
  border-top: 1px solid var(--c-frame);
}

.training-step .ts-meta strong {
  color: var(--c-mint);
  font-weight: 700;
}

.training-step.is-2 .ts-meta strong {
  color: var(--c-violet-soft);
}

.training-step.is-3 .ts-meta strong {
  color: var(--c-yellow);
}

/* ========================================================
 07 · TOKEN E CONTEXTO — slide visual
 ======================================================== */
.token-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.token-head .whisper {
  margin-bottom: 20px;
}

.token-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.token-title .accent {
  color: var(--c-mint);
}

.token-body {
  position: absolute;
  top: 380px;
  bottom: 120px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
}

.token-viz {
  background: var(--c-surface);
  border: 1px solid var(--c-frame);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.token-viz .tv-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin: 0;
}

.token-viz .tv-sentence {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-white);
}

.token-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tok-chip {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--c-canvas);
  border: 1px solid var(--c-mint-deep);
  color: var(--c-mint);
}

.tok-chip.is-violet {
  border-color: var(--c-violet-soft);
  color: var(--c-violet-soft);
}

.tok-chip.is-yellow {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}

.tok-chip.is-flare {
  border-color: var(--c-flare);
  color: var(--c-flare);
}

.tok-chip.is-quiet {
  border-color: var(--c-frame);
  color: var(--c-fg-3);
}

.token-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.token-point {
  padding-left: 28px;
  position: relative;
}

.token-point::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-mint);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
}

.token-point .tp-headline {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--c-mint);
  margin: 0 0 6px 0;
}

.token-point .tp-detail {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.45;
  color: var(--c-fg-2);
  font-weight: 300;
  margin: 0;
}

.token-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 18px;
  border: 1px solid var(--c-mint-deep);
  border-radius: 999px;
  background: rgba(60, 255, 208, 0.06);
  color: var(--c-mint);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.token-cta:hover {
  background: rgba(60, 255, 208, 0.14);
  transform: translateY(-1px);
}
.token-cta .tcta-arrow {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
}

/* Prompt Engineering — slide 10 */
.prompt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.prompt-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--c-fg-2);
  margin: 0 0 18px 0;
}
.prompt-table {
  display: grid;
  grid-template-columns: 120px 1.1fr 1.8fr;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.pt-row { display: contents; }
.pt-row > * {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-fg-2);
  display: flex;
  align-items: center;
}
.pt-row.pt-last > * { border-bottom: none; }
.pt-row.pt-head > * {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mint);
  background: rgba(60, 255, 208, 0.08);
  padding-top: 13px;
  padding-bottom: 13px;
}
.pt-row .pt-el {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-mint);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.pt-row .pt-ex {
  font-style: italic;
  color: var(--c-fg-2);
  font-size: 13px;
  opacity: 0.95;
}

/* Examples (right column) */
.ex-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.ex-card:last-child { margin-bottom: 0; }
.ex-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0 0 10px 0;
}
.ex-line {
  display: flex;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  padding: 4px 0;
}
.ex-line + .ex-line { padding-top: 6px; }
.ex-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  margin-top: 1px;
}
.ex-bad .ex-mark {
  background: rgba(236, 26, 106, 0.16);
  color: var(--c-flare);
  border: 1px solid var(--c-flare);
}
.ex-good .ex-mark {
  background: rgba(60, 255, 208, 0.16);
  color: var(--c-mint);
  border: 1px solid var(--c-mint-deep);
}
.ex-bad span:last-child { color: rgba(236, 26, 106, 0.85); }
.ex-good span:last-child { color: var(--c-fg-1); }
.ex-note {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--c-fg-3);
  font-style: italic;
  margin-left: 28px;
  margin-top: -2px;
}

.prompt-alert {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(236, 26, 106, 0.08);
  border: 1px solid rgba(236, 26, 106, 0.45);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.prompt-alert .pa-tag {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(236, 26, 106, 0.18);
  color: var(--c-flare);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prompt-alert .pa-tag svg { width: 18px; height: 18px; stroke-width: 2; }
.prompt-alert p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-fg-1);
  margin: 0;
  font-weight: 300;
}
.prompt-alert p b {
  color: var(--c-flare);
  font-weight: 700;
}

/* Advanced prompt techniques — slide 11 */
.techs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.tech-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tech-viz {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  aspect-ratio: 1 / 1;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.tech-viz svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tech-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-mint);
  margin: 0 0 6px 0;
}
.tech-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-fg-1);
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}
.tech-name .nm-sub {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-mint);
  letter-spacing: 0.06em;
  display: inline;
  margin-left: 6px;
  vertical-align: 3px;
}
.tech-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-fg-2);
  font-weight: 300;
  margin: 0;
}

/* Risks & limits — slide 12 */
.risks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.risk-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.risk-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-flare);
  margin: 0;
}
.risk-eyebrow.is-yellow { color: var(--c-yellow); }
.risk-section-title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--c-fg-1);
  margin: 0;
  letter-spacing: -0.01em;
}
.risk-section-title .accent-flare { color: var(--c-flare); }
.risk-section-title .accent-yellow { color: var(--c-yellow); }
.risk-intro {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-fg-2);
  margin: 0;
  font-weight: 300;
}
.risk-sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin: 4px 0 -4px 0;
}
.risk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.risk-list li {
  display: flex;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-fg-2);
  font-weight: 300;
  padding: 4px 0;
}
.risk-list li::before {
  content: "—";
  color: var(--c-flare);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.risk-list.is-yellow li::before { color: var(--c-yellow); }
.risk-list li b {
  color: var(--c-fg-1);
  font-weight: 700;
}
.risk-callout {
  margin-top: auto;
  padding: 14px 18px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.risk-callout .rc-tag {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.risk-callout .rc-tag svg { width: 18px; height: 18px; stroke-width: 2; }
.risk-callout p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  margin: 0;
  color: var(--c-fg-1);
  font-weight: 300;
}
.risk-callout p strong { font-weight: 700; }
.risk-callout--warn {
  background: rgba(236, 26, 106, 0.07);
  border: 1px solid rgba(236, 26, 106, 0.45);
}
.risk-callout--warn .rc-tag {
  background: rgba(236, 26, 106, 0.18);
  color: var(--c-flare);
}
.risk-callout--warn p strong { color: var(--c-flare); }
.risk-callout--tip {
  background: rgba(255, 213, 61, 0.06);
  border: 1px solid rgba(255, 213, 61, 0.45);
}
.risk-callout--tip .rc-tag {
  background: rgba(255, 213, 61, 0.18);
  color: var(--c-yellow);
}
.risk-callout--tip p strong { color: var(--c-yellow); }

/* Risk dossier — slide 12 redesign */
.risks-dossier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: stretch;
}
.dossier-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px 24px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  overflow: hidden;
}
.dossier-head {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  align-items: end;
  margin-top: 4px;
}
.dh-num {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.82;
  color: var(--c-flare);
  letter-spacing: -0.03em;
}
.dossier-page.is-tip .dh-num { color: var(--c-yellow); }
.dh-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}
.dh-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-fg-1);
  text-transform: uppercase;
}
.dh-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-fg-3);
  text-transform: uppercase;
}
.dossier-title {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 0.95;
  color: var(--c-fg-1);
  text-transform: uppercase;
  margin: -4px 0 0 0;
  letter-spacing: -0.01em;
}
.dossier-title .dt-dot {
  color: var(--c-flare);
}
.dossier-page.is-tip .dossier-title .dt-dot { color: var(--c-yellow); }

.dossier-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-fg-2);
  margin: 0;
  font-weight: 300;
}
.dossier-body em {
  font-style: normal;
  color: var(--c-flare);
  font-weight: 700;
}
.dossier-page.is-tip .dossier-body em { color: var(--c-yellow); }

.dossier-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 0 0;
}
.dossier-rule::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-flare);
  opacity: 0.7;
}
.dossier-page.is-tip .dossier-rule::before {
  background: var(--c-yellow);
}
.dossier-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.dossier-rule span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--c-fg-3);
  text-transform: uppercase;
}

.dossier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dossier-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-fg-2);
  font-weight: 300;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.dossier-list li:last-child { border-bottom: none; }
.dossier-list .dl-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-flare);
}
.dossier-page.is-tip .dossier-list .dl-mark { color: var(--c-yellow); }
.dossier-list li b {
  color: var(--c-fg-1);
  font-weight: 700;
}

.dossier-stamp {
  margin-top: auto;
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border: 1.5px dashed rgba(236, 26, 106, 0.55);
  border-radius: 10px;
  background: rgba(236, 26, 106, 0.05);
  align-items: center;
  position: relative;
}
.dossier-stamp.is-tip {
  border-color: rgba(255, 213, 61, 0.55);
  background: rgba(255, 213, 61, 0.05);
}
.dossier-stamp .ds-icon {
  flex-shrink: 0;
  font-size: 28px;
  line-height: 1;
}
.dossier-stamp .ds-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dossier-stamp .ds-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--c-flare);
  text-transform: uppercase;
}
.dossier-stamp.is-tip .ds-label { color: var(--c-yellow); }
.dossier-stamp .ds-text p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-fg-1);
  margin: 0;
  font-weight: 300;
}
.dossier-stamp .ds-text p b {
  color: var(--c-flare);
  font-weight: 700;
}
.dossier-stamp.is-tip .ds-text p b {
  color: var(--c-yellow);
}

/* ========================================================
 08 · ACERTA vs ERRA — 2 colunas
 ======================================================== */
.slide-compare .compare-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.compare-head .whisper {
  margin-bottom: 20px;
}

.compare-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.compare-title .mint {
  color: var(--c-mint);
}

.compare-title .flare {
  color: var(--c-flare);
}

.compare-grid {
  position: absolute;
  top: 340px;
  bottom: 120px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.compare-col {
  border-radius: 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.compare-col.is-mint {
  background: rgba(60, 255, 208, 0.06);
  border: 1px solid var(--c-mint);
}

.compare-col.is-flare {
  background: rgba(236, 26, 106, 0.06);
  border: 1px solid var(--c-flare);
}

.compare-col h3 {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0;
}

.compare-col.is-mint h3 {
  color: var(--c-mint);
}

.compare-col.is-flare h3 {
  color: var(--c-flare);
}

.compare-col .col-headline {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.compare-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compare-col ul li {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-white);
  padding-left: 28px;
  position: relative;
}

.compare-col.is-mint ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-mint);
  font-family: var(--font-mono);
  font-weight: 700;
}

.compare-col.is-flare ul li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-flare);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ========================================================
 10 · MAPA DO MERCADO — 5 cards
 ======================================================== */
.market-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.market-head .whisper {
  margin-bottom: 20px;
}

.market-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.market-title .accent {
  color: var(--c-mint);
}

.market-grid {
  position: absolute;
  top: 400px;
  bottom: 156px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.market-card {
  background: var(--c-surface);
  border: 1px solid var(--c-frame);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.market-card.is-claude {
  border-top: 4px solid #D97757;
}

.market-card.is-chatgpt {
  border-top: 4px solid #10A37F;
}

.market-card.is-gemini {
  border-top: 4px solid #4285F4;
}

.market-card.is-perplexity {
  border-top: 4px solid #1FB7C1;
}

.market-card.is-manus {
  border-top: 4px solid #A78BFA;
}

.market-card .mc-name {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.market-card .mc-maker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin: -12px 0 0 0;
}

.market-card .mc-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
}

.market-card.is-claude .mc-tag {
  background: rgba(217, 119, 87, 0.15);
  color: #D97757;
}

.market-card.is-chatgpt .mc-tag {
  background: rgba(16, 163, 127, 0.15);
  color: #10A37F;
}

.market-card.is-gemini .mc-tag {
  background: rgba(66, 133, 244, 0.15);
  color: #4285F4;
}

.market-card.is-perplexity .mc-tag {
  background: rgba(31, 183, 193, 0.15);
  color: #1FB7C1;
}

.market-card.is-manus .mc-tag {
  background: rgba(167, 139, 250, 0.15);
  color: #A78BFA;
}

.market-card .mc-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-fg-2);
  margin: 0;
}

.market-card .mc-strength {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid var(--c-frame);
  margin-top: auto;
}

.market-card .mc-strength strong {
  display: block;
  color: var(--c-white);
  margin-bottom: 4px;
}

/* ========================================================
 11–15 · PERFIL · slide individual de cada ferramenta
 ======================================================== */
.profile-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 904px;
}

.profile-left {
  padding: 156px 64px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-right {
  padding: 156px 64px 96px;
  background: var(--c-surface);
  border-left: 1px solid var(--c-frame);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.profile-left .p-tag {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin: 0 0 28px 0;
}

.profile-left .p-name {
  font-family: var(--font-display);
  font-size: 168px;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 20px 0;
}

.profile-left .p-maker {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin: 0 0 36px 0;
}

.profile-left .p-positioning {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.35;
  color: var(--c-fg-2);
  max-width: 600px;
}

.p-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-section h4 {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0;
}

.p-section.is-soft h4 {
  color: var(--c-violet-soft);
}

.p-section.is-warn h4 {
  color: var(--c-flare);
}

.p-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-section li {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-fg-1);
  padding-left: 22px;
  position: relative;
}

.p-section li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-mint);
  font-family: var(--font-mono);
}

.p-section.is-soft li::before {
  color: var(--c-violet-soft);
}

.p-section.is-warn li::before {
  content: "×";
  color: var(--c-flare);
}

.p-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--c-frame);
}

.p-stat .pv-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-fg-4);
  margin: 0;
}

.p-stat .pv-val {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--c-white);
  margin-top: 4px;
}

.p-stat .pv-val.mint {
  color: var(--c-mint);
}

/* Accent vertical bar pra cada ferramenta */
.slide-profile.is-claude .p-name {
  color: #D97757;
}

.slide-profile.is-chatgpt .p-name {
  color: #10A37F;
}

.slide-profile.is-gemini .p-name {
  color: #4285F4;
}

.slide-profile.is-perplexity .p-name {
  color: #1FB7C1;
}

.slide-profile.is-manus .p-name {
  color: #A78BFA;
}

.slide-profile.is-claude .profile-left .p-tag {
  color: #D97757;
}

.slide-profile.is-chatgpt .profile-left .p-tag {
  color: #10A37F;
}

.slide-profile.is-gemini .profile-left .p-tag {
  color: #4285F4;
}

.slide-profile.is-perplexity .profile-left .p-tag {
  color: #1FB7C1;
}

.slide-profile.is-manus .profile-left .p-tag {
  color: #A78BFA;
}

/* ========================================================
 17 · MATRIZ COMPARATIVA
 ======================================================== */
.matrix-head {
  position: absolute;
  top: 96px;
  left: 64px;
  right: 64px;
}

.matrix-head .whisper {
  margin-bottom: 14px;
}

.matrix-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.matrix-title .accent {
  color: var(--c-mint);
}

.matrix-table {
  position: absolute;
  top: 280px;
  bottom: 96px;
  left: 64px;
  right: 64px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--c-frame);
}

.matrix-table table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
}

.matrix-table th,
.matrix-table td {
  padding: 18px 20px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-fg-2);
  border-bottom: 1px solid var(--c-frame);
  border-right: 1px solid var(--c-frame);
}

.matrix-table tr:last-child td {
  border-bottom: 0;
}

.matrix-table td:last-child,
.matrix-table th:last-child {
  border-right: 0;
}

.matrix-table th {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  background: var(--c-canvas);
}

.matrix-table td.tool-name {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--c-white);
  line-height: 1;
}

.matrix-table td.tool-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--c-fg-4);
  margin-top: 4px;
  font-weight: 500;
}

.matrix-table .cell-mint {
  color: var(--c-mint);
  font-weight: 700;
}

.matrix-table .cell-dim {
  color: var(--c-fg-4);
}

/* ========================================================
 DEMO SLIDE
 ======================================================== */
.slide-demo {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(60, 255, 208, 0.15), transparent 50%),
    var(--c-canvas);
}

.demo-body {
  position: absolute;
  top: calc(50% - 30px);
  left: 64px;
  right: 64px;
  transform: translateY(-50%);
  text-align: center;
}

.demo-tag {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0 0 32px 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.demo-tag::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--c-mint);
  border-radius: 50%;
  box-shadow: 0 0 16px var(--c-mint);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 16px var(--c-mint);
  }

  50% {
    box-shadow: 0 0 32px var(--c-mint);
  }
}

.demo-title {
  font-family: var(--font-display);
  font-size: 130px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 32px 0;
}

.demo-title .accent {
  color: var(--c-mint);
}

.demo-deck {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--c-fg-2);
  max-width: none;
  white-space: nowrap;
  margin: 0 auto 32px;
}
.demo-prompts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.demo-prompt {
  display: inline-block;
  background: var(--c-surface);
  border: 1px solid var(--c-mint-deep);
  border-radius: 12px;
  padding: 20px 32px;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-mint);
  letter-spacing: 0.5px;
  max-width: 1400px;
}

/* ========================================================
 SÍNTESE — 3 cards
 ======================================================== */
.synth-head {
  position: absolute;
  top: 120px;
  left: 64px;
  right: 64px;
}

.synth-head .whisper {
  margin-bottom: 20px;
}

.synth-title {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.synth-title .accent {
  color: var(--c-mint);
}

.synth-grid {
  position: absolute;
  top: 400px;
  bottom: 156px;
  left: 64px;
  right: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.synth-card {
  padding: 36px 34px;
  border-radius: 24px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
}

.synth-card.is-mint {
  background: var(--c-mint);
  color: var(--c-fg-inverse);
}

.synth-card.is-violet {
  background: var(--c-violet);
  color: var(--c-white);
}

.synth-card.is-yellow {
  background: var(--c-yellow);
  color: var(--c-fg-inverse);
}

.synth-card .sc-num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0;
}

.synth-card.is-mint .sc-num {
  color: rgba(19, 19, 19, 0.7);
}

.synth-card.is-violet .sc-num {
  color: rgba(255, 255, 255, 0.75);
}

.synth-card.is-yellow .sc-num {
  color: rgba(19, 19, 19, 0.7);
}

.synth-card .sc-headline {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
  min-height: 84px;
}

.synth-card .sc-desc {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.synth-card.is-mint .sc-desc {
  color: rgba(19, 19, 19, 0.85);
}

.synth-card.is-yellow .sc-desc {
  color: rgba(19, 19, 19, 0.85);
}

/* synth tags row — recap chips at bottom of each synth card */
.synth-card .sc-tags {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(19, 19, 19, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.synth-card.is-violet .sc-tags {
  border-top-color: rgba(255, 255, 255, 0.25);
}
.synth-card .sc-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(19, 19, 19, 0.3);
  color: rgba(19, 19, 19, 0.78);
  font-weight: 600;
}
.synth-card.is-violet .sc-tags span {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.88);
}

/* Review & best practices — slide 23 (new) */
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: stretch;
}
.review-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.review-col .errors-list { flex: 1; }
.review-col .errors-list li { flex: 1; align-items: center; }
.review-col .dodont-table { flex: 1; }
.mantra-callout.review-mantra {
  margin-top: 40px;
  justify-content: center;
  text-align: center;
}
.mantra-callout.review-mantra p { text-align: center; }
.review-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-flare);
  margin: 0;
  text-transform: uppercase;
}
.review-col.is-do .review-tag { color: var(--c-mint); }
.review-section-title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--c-fg-1);
  margin: -2px 0 6px 0;
  letter-spacing: -0.01em;
}
.review-section-title .acc-flare { color: var(--c-flare); }
.review-section-title .acc-mint { color: var(--c-mint); }

/* Errors list */
.errors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.errors-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 18px;
  background: rgba(236, 26, 106, 0.05);
  border: 1px solid rgba(236, 26, 106, 0.25);
  border-radius: 10px;
}
.err-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-flare);
  padding-top: 2px;
}
.err-text {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--c-fg-1);
  font-weight: 300;
}
.err-text b { color: var(--c-flare); font-weight: 700; }

.mantra-callout {
  margin-top: 6px;
  padding: 14px 18px;
  background: rgba(60, 255, 208, 0.06);
  border: 1px solid var(--c-mint-deep);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mantra-callout .mc-icon {
  flex-shrink: 0;
  font-size: 22px;
}
.mantra-callout p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-fg-1);
  margin: 0;
  font-weight: 300;
}
.mantra-callout p strong {
  color: var(--c-mint);
  font-weight: 700;
}

/* Do/Dont comparison table */
.dodont-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.dodont-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.dodont-head .dh-cell {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dodont-head .dh-do {
  background: rgba(60, 255, 208, 0.10);
  color: var(--c-mint);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.dodont-head .dh-dont {
  background: rgba(236, 26, 106, 0.10);
  color: var(--c-flare);
}
.dodont-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dodont-row:last-child { border-bottom: none; }
.dodont-cell {
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-fg-2);
  font-weight: 300;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dodont-row .dc-do { border-right: 1px solid rgba(255, 255, 255, 0.06); }
.dc-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.dc-do .dc-icon {
  background: rgba(60, 255, 208, 0.16);
  color: var(--c-mint);
  border: 1px solid var(--c-mint-deep);
}
.dc-dont .dc-icon {
  background: rgba(236, 26, 106, 0.16);
  color: var(--c-flare);
  border: 1px solid var(--c-flare);
}

/* ========================================================
 TEASER AULA 2
 ======================================================== */
.slide-teaser {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(82, 0, 255, 0.15), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(60, 255, 208, 0.10), transparent 50%),
    var(--c-canvas);
}

.teaser-body {
  position: absolute;
  top: 50%;
  left: 64px;
  right: 64px;
  transform: translateY(-50%);
}

.teaser-tag {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0 0 36px 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.teaser-tag::before {
  content: "→";
  color: var(--c-mint);
}

.teaser-title {
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 36px 0;
}

.teaser-title .accent {
  color: var(--c-mint);
}

.teaser-deck {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1.35;
  color: var(--c-fg-2);
  max-width: 1300px;
  margin: 0 0 48px 0;
}

.teaser-bullets {
  display: flex;
  gap: 40px;
}

.teaser-bullet {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-2);
  padding: 12px 20px;
  border: 1px solid var(--c-mint-deep);
  border-radius: 4px;
  background: rgba(60, 255, 208, 0.04);
}

.teaser-bullet .accent {
  color: var(--c-mint);
}

/* ============================================================
 ╭─────────────────────────────────────────────────────────╮
 │  PADRÃO AVENTURA LAB · sistema unificado                │
 │  progress · reveal · divider · toc · cards · pills      │
 ╰─────────────────────────────────────────────────────────╯
 ============================================================ */

/* ── 1. PROGRESS BAR — fina no topo ──
 Avanço do deck: barra mint que cresce conforme navega. */
.deck-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--c-mint);
  width: 0;
  z-index: 200;
  transition: width 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── 2. REVEAL escalonado — versão cirúrgica ──
 Substitui a animação anterior (60+ seletores) por algo simples
 e elegante: filhos diretos de containers principais escalam em 5 passos. */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.slide .slide-main>*,
.slide .cover-body>*,
.slide .divider-body>* {
  opacity: 0;
}

.slide.active .slide-main>*,
.slide.active .cover-body>*,
.slide.active .divider-body>* {
  animation: riseIn 340ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.slide.active .slide-main>*:nth-child(1),
.slide.active .cover-body>*:nth-child(1),
.slide.active .divider-body>*:nth-child(1) {
  animation-delay: 40ms;
}

.slide.active .slide-main>*:nth-child(2),
.slide.active .cover-body>*:nth-child(2),
.slide.active .divider-body>*:nth-child(2) {
  animation-delay: 110ms;
}

.slide.active .slide-main>*:nth-child(3),
.slide.active .cover-body>*:nth-child(3),
.slide.active .divider-body>*:nth-child(3) {
  animation-delay: 180ms;
}

.slide.active .slide-main>*:nth-child(4),
.slide.active .divider-body>*:nth-child(4) {
  animation-delay: 250ms;
}

.slide.active .slide-main>*:nth-child(5) {
  animation-delay: 320ms;
}

@media print {

  .slide .slide-main>*,
  .slide .cover-body>*,
  .slide .divider-body>* {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ── 3. SLIDE-DIVIDER — substituto pros sections mint full-bleed ──
 Em vez de cobrir tudo com mint (impactante mas pesado), divider
 escuro com número grande mint + block-rail mostrando progresso. */
.slide-divider {
  background: var(--c-mint);
}

.divider-body {
  position: absolute;
  top: 50%;
  left: 144px;
  right: 144px;
  transform: translateY(-50%);
}

.divider-num {
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 0.8;
  color: var(--c-fg-inverse);
  letter-spacing: 2px;
}

.divider-title {
  font-family: var(--font-display);
  font-size: 92px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--c-fg-inverse);
  margin-top: 8px;
}

.divider-deck {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  color: rgba(19, 19, 19, 0.72);
  margin-top: 22px;
  max-width: 70ch;
}

/* Ponto de acento sobre o verde: pop em flare (sobrescreve o mint inline) */
.slide-divider .divider-title .accent {
  color: var(--c-flare) !important;
}

/* Block-rail invertido para o fundo mint */
.slide-divider .block-rail .seg {
  background: rgba(19, 19, 19, 0.06);
  border-color: rgba(19, 19, 19, 0.18);
}
.slide-divider .block-rail .seg .sn {
  color: rgba(19, 19, 19, 0.5);
}
.slide-divider .block-rail .seg .sl {
  color: rgba(19, 19, 19, 0.78);
}
.slide-divider .block-rail .seg.on {
  background: var(--c-fg-inverse);
  border-color: var(--c-fg-inverse);
}
.slide-divider .block-rail .seg.on .sn {
  color: rgba(255, 255, 255, 0.5);
}
.slide-divider .block-rail .seg.on .sl {
  color: var(--c-mint);
}
.slide-divider .block-rail .seg.done {
  border-color: rgba(19, 19, 19, 0.3);
}
.slide-divider .block-rail .seg.done .sl {
  color: rgba(19, 19, 19, 0.6);
}

/* ── 4. BLOCK-RAIL — barra de progresso entre blocos ──
 Mostra os N blocos da agenda; ".on" destaca o atual em mint. */
.block-rail {
  display: grid;
  grid-template-columns: repeat(var(--rail-cols, 3), 1fr);
  gap: 6px;
  margin-top: 46px;
  max-width: 900px;
}

.block-rail .seg {
  padding: 13px 17px;
  border-radius: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-frame);
}

.block-rail .seg .sn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--c-fg-4);
  display: block;
}

.block-rail .seg .sl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-fg-3);
  margin-top: 4px;
}

.block-rail .seg.on {
  background: var(--c-mint);
  border-color: var(--c-mint);
}

.block-rail .seg.on .sn {
  color: rgba(19, 19, 19, 0.55);
}

.block-rail .seg.on .sl {
  color: var(--c-canvas);
}

.block-rail .seg.done {
  border-color: var(--c-mint-deep);
}

.block-rail .seg.done .sl {
  color: var(--c-fg-2);
}

/* ── 5. TOC — índice ilustrado com ícones ──
 Para slides de agenda/sumário. Cada item: número + ícone + título + descrição. */
.toc {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  list-style: none;
  padding: 0;
}

.toc li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 30px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-surface-2);
}

.toc li:last-child {
  border-bottom: none;
}

.toc .tn {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--c-fg-4);
  letter-spacing: 1px;
}

.toc li.on .tn {
  color: var(--c-mint);
}

.toc .th {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-white);
  letter-spacing: 0.4px;
}

.toc .td {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-fg-3);
  margin-top: 8px;
}

.toc-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.toc-row .ic {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 255, 208, 0.14);
  border: 1px solid var(--c-mint-deep);
  color: var(--c-mint);
  flex-shrink: 0;
  transition: all 200ms;
}

.toc li.on .ic {
  background: rgba(60, 255, 208, 0.14);
  border-color: var(--c-mint-deep);
  color: var(--c-mint);
}

.toc-row .ic svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

/* ── 5b. SISTEMA AVENTURA · estrutura padronizada de slide ──
 Esses utilitários (.slide-chrome, .slide-main, .kicker, .title,
 .lead, .sbody) compõem qualquer slide novo no padrão Aventura.
 Margens 144px, kicker mint com traço, title display 76px. */
.slide-chrome {
  position: absolute;
  top: 72px;
  left: 144px;
  right: 144px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
}

.slide-main {
  position: absolute;
  top: 138px;
  left: 144px;
  right: 144px;
  bottom: 150px;
  display: flex;
  flex-direction: column;
}

/* Kicker — eyebrow do slide: traço mint + número + texto muted */
.kicker {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--c-mint);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.kicker::before {
  content: "";
  width: 38px;
  height: 2px;
  background: var(--c-mint);
}

.kicker .muted {
  color: var(--c-fg-3);
}

/* Title — display unificado */
.title {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  letter-spacing: 0.5px;
}

.title .accent {
  color: var(--c-mint);
}

/* Sbody — corpo flex que cresce e centraliza conteúdo */
.sbody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sbody> :first-child {
  margin-top: 0;
}

/* Lead — texto introdutório abaixo do título */
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.45;
  color: var(--c-fg-2);
  max-width: 115ch;
  margin: 18px 0 0 0;
}

/* Slide-foot padrão Aventura (144px lateral, 72px bottom) */
.slide-foot.aventura {
  bottom: 72px;
  left: 144px;
  right: 144px;
}

/* ── 6. UTILITY · cards system ──
 Sistema unificado de cards (rotulado por cor temática) pra reuso
 em qualquer slide. Variants substituem cards específicos. */
.cards {
  display: grid;
  gap: 22px;
  margin-top: 28px;
}

.cards.g2 {
  grid-template-columns: 1fr 1fr;
}

.cards.g3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.cards.g4 {
  grid-template-columns: repeat(4, 1fr);
}

.cards.g5 {
  grid-template-columns: repeat(5, 1fr);
}

.cards-card {
  background: var(--c-surface);
  border: 1px solid var(--c-frame);
  border-radius: 18px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cards-card .ck {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-3);
  margin-bottom: 2px;
}

.cards-card h3 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--c-white);
  font-weight: 400;
  letter-spacing: 0.4px;
}

.cards-card p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.42;
  color: var(--c-fg-3);
}

.cards-card p b,
.cards-card p strong {
  color: var(--c-fg-2);
  font-weight: 600;
}

.cards-card .ic {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-frame);
  color: var(--c-fg-2);
  margin-bottom: 6px;
}

.cards-card .ic svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}

.cards-card--mint {
  background: rgba(60, 255, 208, 0.06);
  border-color: var(--c-mint-deep);
}

.cards-card--mint .ck {
  color: var(--c-mint);
}

.cards-card--mint .ic {
  background: rgba(60, 255, 208, 0.14);
  border-color: var(--c-mint-deep);
  color: var(--c-mint);
}

.cards-card--violet {
  background: rgba(82, 0, 255, 0.10);
  border-color: var(--c-violet);
}

.cards-card--violet .ck {
  color: var(--c-violet-soft);
}

.cards-card--violet .ic {
  background: rgba(82, 0, 255, 0.20);
  border-color: var(--c-violet);
  color: var(--c-violet-soft);
}

.cards-card--flare {
  background: rgba(236, 26, 106, 0.08);
  border-color: var(--c-flare);
}

.cards-card--flare .ck {
  color: var(--c-flare);
}

.cards-card--flare .ic {
  background: rgba(236, 26, 106, 0.16);
  border-color: var(--c-flare);
  color: var(--c-flare);
}

.cards-card--blue {
  --c-blue: #4DA3FF;
  background: rgba(77, 163, 255, 0.07);
  border-color: #4DA3FF;
}

.cards-card--blue .ck {
  color: #4DA3FF;
}

.cards-card--blue .ic {
  background: rgba(77, 163, 255, 0.16);
  border-color: #4DA3FF;
  color: #4DA3FF;
}

.cards-card--yellow {
  background: rgba(255, 213, 61, 0.08);
  border-color: var(--c-yellow);
}

.cards-card--yellow .ck {
  color: var(--c-yellow);
}

.cards-card--yellow .ic {
  background: rgba(255, 213, 61, 0.16);
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}

/* tall variant — cards mais altos pra conteúdo denso */
.cards.tall .cards-card {
  padding: 40px 36px;
  gap: 14px;
}

/* Insight callout — caixa horizontal pra analogias e takeaways */
.insight-callout {
  margin-top: 22px;
  padding: 22px 32px;
  background: rgba(60, 255, 208, 0.06);
  border: 1px solid var(--c-mint-deep);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.insight-callout .ic-tag {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(60, 255, 208, 0.16);
  color: var(--c-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.insight-callout .ic-tag svg { width: 22px; height: 22px; stroke-width: 1.8; }
.insight-callout p {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.45;
  color: var(--c-fg-1);
  margin: 0;
}
.insight-callout p b { color: var(--c-mint); font-weight: 700; }
.insight-callout p .em-violet { color: var(--c-violet-soft); font-weight: 700; }
.insight-callout p .em-flare { color: var(--c-flare); font-weight: 700; }

/* LLM mental model — slide 07 */
.llm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.llm-left {
  display: flex;
  flex-direction: column;
}
.llm-left .insight-callout {
  margin-top: auto;
}
.llm-intro {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.5;
  color: var(--c-fg-1);
  margin: 0 0 18px 0;
  font-weight: 300;
}
.llm-intro b { font-weight: 700; color: var(--c-fg-1); }
.llm-intro em {
  font-style: italic;
  color: var(--c-mint);
  font-family: var(--font-serif);
  font-weight: 400;
}
.llm-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--c-mint);
  margin: 0 0 22px 0;
  text-transform: uppercase;
}
.llm-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.llm-steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
}
.llm-steps .n {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--c-mint);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.llm-steps h4 {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--c-fg-1);
}
.llm-steps p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
  color: var(--c-fg-2);
}

/* Training timeline — slide 08 */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 56px;
}
/* Horizontal track behind the nodes */
.timeline::before {
  content: '';
  position: absolute;
  top: 95px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-mint) 0%,
    var(--c-mint) 18%,
    var(--c-violet-soft) 50%,
    var(--c-yellow) 82%,
    var(--c-yellow) 100%);
  opacity: 0.55;
  z-index: 0;
}
.timeline::after {
  content: '';
  position: absolute;
  top: 86px;
  left: 5%;
  right: 5%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(60,255,208,0.18) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.tl-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tl-node {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px auto;
  background: #0c1425;
  border: 2px solid var(--c-mint);
  box-shadow:
    0 0 0 6px rgba(12, 20, 37, 1),
    0 0 26px rgba(60, 255, 208, 0.35);
  transition: transform 0.3s ease;
}
.tl-node::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(60, 255, 208, 0.35);
  animation: tlPulse 4s ease-in-out infinite;
}
@keyframes tlPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 0.2; }
}
.tl-num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--c-mint);
  line-height: 1;
  letter-spacing: 0.02em;
}
.tl-stage--violet .tl-node {
  border-color: var(--c-violet-soft);
  box-shadow:
    0 0 0 6px rgba(12, 20, 37, 1),
    0 0 26px rgba(184, 155, 255, 0.4);
}
.tl-stage--violet .tl-node::after {
  border-color: rgba(184, 155, 255, 0.4);
}
.tl-stage--violet .tl-num { color: var(--c-violet-soft); }
.tl-stage--yellow .tl-node {
  border-color: var(--c-yellow);
  box-shadow:
    0 0 0 6px rgba(12, 20, 37, 1),
    0 0 26px rgba(255, 213, 61, 0.38);
}
.tl-stage--yellow .tl-node::after {
  border-color: rgba(255, 213, 61, 0.4);
}
.tl-stage--yellow .tl-num { color: var(--c-yellow); }
.tl-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0 0 14px 0;
  text-align: center;
}
.tl-stage--violet .tl-label { color: var(--c-violet-soft); }
.tl-stage--yellow .tl-label { color: var(--c-yellow); }
.tl-title {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.02;
  color: var(--c-fg-1);
  margin: 0 0 12px 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.tl-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--c-fg-2);
  text-align: center;
  margin: 0 0 18px 0;
  line-height: 1.3;
}
.tl-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-fg-2);
  margin: 0 0 22px 0;
  text-align: center;
  font-weight: 300;
  min-height: 4.5em;
}
.tl-result {
  border-top: 1px solid rgba(60, 255, 208, 0.25);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.tl-stage--violet .tl-result { border-top-color: rgba(184, 155, 255, 0.3); }
.tl-stage--yellow .tl-result { border-top-color: rgba(255, 213, 61, 0.3); }
.tl-rk {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-mint);
}
.tl-stage--violet .tl-rk { color: var(--c-violet-soft); }
.tl-stage--yellow .tl-rk { color: var(--c-yellow); }
.tl-rt {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-fg-2);
  font-weight: 300;
}

/* grid 2x2 — pra slides com 4 cards grandes */
.cards.g2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
}

/* ── BRAND CARDS — variant especial pra showcase de ferramentas ──
   Card ocupa toda a célula com hero icon, tag, nome grande e descrição.
   Cor da marca aplicada em borda superior + ícone chip + texto da tag. */
.brand-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-frame);
  border-radius: 22px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 8px 28px;
  overflow: hidden;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.brand-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-c, var(--c-mint));
}
.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(60, 255, 208, 0.15),
    0 20px 44px -18px rgba(0, 0, 0, 0.7);
}
.brand-card .b-ic {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-bg, rgba(255,255,255,0.05));
  border: 1.5px solid var(--brand-c, var(--c-frame));
  color: var(--brand-c, var(--c-fg-2));
  align-self: start;
  margin-top: 4px;
}
.brand-card .b-ic svg { width: 44px; height: 44px; stroke-width: 1.5; }
.brand-card .b-ic img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Variant pra logos oficiais coloridos (preserva identidade da marca) */
.brand-card .b-ic.is-brand-asset {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.brand-card .b-tag {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand-c, var(--c-fg-3));
  margin: 0;
  align-self: end;
}
.brand-card .b-name {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}
.brand-card .b-desc {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.45;
  color: var(--c-fg-2);
  margin: 18px 0 0 0;
}
.brand-card .b-desc b { color: var(--c-white); font-weight: 600; }
.brand-card .b-meta {
  grid-column: 1 / -1;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-fg-4);
}
.brand-card .b-meta strong { color: var(--brand-c); font-weight: 700; }

/* paletas por marca — usa cores do design system */
.brand-card.is-blue {
  --brand-c: #4DA3FF;
  --brand-bg: rgba(77, 163, 255, 0.12);
}
.brand-card.is-violet {
  --brand-c: var(--c-violet-soft);
  --brand-bg: rgba(184, 155, 255, 0.14);
}
.brand-card.is-flare {
  --brand-c: var(--c-flare);
  --brand-bg: rgba(236, 26, 106, 0.14);
}
.brand-card.is-yellow {
  --brand-c: var(--c-yellow);
  --brand-bg: rgba(255, 213, 61, 0.14);
}

/* lista interna com setas (→ mint) */
.cards-card ul.bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.cards-card ul.bullets li {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-fg-2);
  padding-left: 24px;
  position: relative;
}

.cards-card ul.bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-mint);
  font-family: var(--font-mono);
  font-weight: 700;
}

.cards-card--flare ul.bullets li::before {
  content: "×";
  color: var(--c-flare);
}

.cards-card--solid ul.bullets li::before {
  color: rgba(19, 19, 19, 0.85);
}

.cards-card--solid ul.bullets li {
  color: rgba(19, 19, 19, 0.82);
}

.cards-card--solid {
  background: var(--c-mint);
  border-color: var(--c-mint);
}

.cards-card--solid .ck {
  color: rgba(19, 19, 19, 0.6);
}

.cards-card--solid h3 {
  color: var(--c-canvas);
}

.cards-card--solid p {
  color: rgba(19, 19, 19, 0.78);
}

.cards-card--solid p b {
  color: var(--c-canvas);
}

.cards-card--solid .ic {
  background: rgba(19, 19, 19, 0.12);
  border-color: rgba(19, 19, 19, 0.22);
  color: var(--c-canvas);
}

/* ── 7. PILLS — etiquetas mono ──
 Para uso em listas e tabelas (positivo/negativo/neutro/atenção). */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill--green {
  background: rgba(60, 255, 208, 0.14);
  color: var(--c-mint);
}

.pill--red {
  background: rgba(236, 26, 106, 0.16);
  color: var(--c-flare);
}

.pill--amber {
  background: rgba(255, 213, 61, 0.15);
  color: var(--c-yellow);
}

.pill--neutral {
  background: rgba(255, 255, 255, 0.07);
  color: var(--c-fg-2);
}

/* ── 8. KEYBINDING refinada nos hovers ──
 Hover refinado e suave (substitui a versão anterior). */
.market-card,
.diag-opt,
.synth-card,
.training-step,
.cards-card {
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 280ms ease,
    box-shadow 280ms ease;
}

.market-card:hover,
.diag-opt:hover,
.training-step:hover,
.cards-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(60, 255, 208, 0.15),
    0 18px 40px -16px rgba(0, 0, 0, 0.6);
}

/* Agenda hover: mantida do polish anterior */
.agenda-list li,
.toc li {
  transition: padding-left 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-bottom-color 320ms ease;
}

.toc li:hover {
  padding-left: 14px;
}

.toc li:hover .th {
  color: var(--c-mint);
  transition: color 320ms ease;
}

/* ── 9. NAV polish (mantido) ── */
.nav-dot {
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 200ms ease, box-shadow 200ms ease;
}

.nav-dot:hover {
  transform: scale(1.6);
  background: var(--c-mint);
}

.nav-dot.active {
  box-shadow: 0 0 0 3px rgba(60, 255, 208, 0.15);
}

.nav-counter {
  font-variant-numeric: tabular-nums;
}

/* ── 10. SELECTION + scrollbar + reduced motion ── */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
}

::selection {
  background: rgba(60, 255, 208, 0.25);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {

  .slide,
  .slide.active *,
  .market-card,
  .diag-opt,
  .cards-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

.deck-stage {
  isolation: isolate;
}