@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Tokens — Design System Quaerion
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --q-primary: #6D3BFF;
  --q-primary-hover: #5A2CE0;
  --q-primary-active: #4720B5;
  --q-deep: #2A0B45;
  --q-graphite: #15151E;
  --q-ice: #F8F7FF;
  --q-technical: #E8E6EF;
  --q-success: #10B981;

  --q-purple-50: #F5F2FF;  --q-purple-100: #EDE7FF; --q-purple-200: #D9CCFF;
  --q-purple-300: #BFA8FF; --q-purple-400: #9672FF; --q-purple-500: #6D3BFF;
  --q-purple-600: #5A2CE0; --q-purple-700: #4720B5; --q-purple-800: #351886;
  --q-purple-900: #240F5C;

  --q-neutral-0: #FFFFFF;  --q-neutral-25: #FCFBFF; --q-neutral-50: #F8F7FF;
  --q-neutral-100: #F1EFF7; --q-neutral-200: #E8E6EF; --q-neutral-300: #D5D2DE;
  --q-neutral-400: #AAA6B5; --q-neutral-500: #777381; --q-neutral-600: #5A5664;
  --q-neutral-700: #3D3947; --q-neutral-800: #27242F; --q-neutral-900: #15151E;
  --q-neutral-950: #0C0C12;

  --q-success-surface: #D1FAE5; --q-success-text: #065F46; --q-success-border: #A7F3D0;
  --q-warning-surface: #FEF3C7; --q-warning-text: #92400E; --q-warning-border: #FDE68A;
  --q-danger-surface: #FEE2E2;  --q-danger-text: #991B1B;  --q-danger-border: #FECACA;
  --q-info-surface: #EDE9FE;    --q-info-text: #4C1D95;    --q-info-border: #DDD6FE;

  --q-blue-technical: #38BDF8;
  --q-amber-alert: #F59E0B;
  --q-red-risk: #EF4444;

  --surface-page: var(--q-neutral-25);
  --surface-card: var(--q-neutral-0);
  --surface-sunken: var(--q-neutral-50);
  --surface-dark: var(--q-graphite);
  --surface-deep: var(--q-deep);
  --surface-soft-brand: var(--q-purple-50);

  --text-primary: var(--q-graphite);
  --text-muted: var(--q-neutral-500);
  --text-inverse: var(--q-neutral-0);
  --text-inverse-muted: var(--q-neutral-400);
  --text-brand: var(--q-primary);

  --border-default: var(--q-neutral-200);
  --border-strong: var(--q-neutral-300);
  --border-focus: var(--q-primary);

  --action-primary: var(--q-primary);
  --action-primary-hover: var(--q-primary-hover);
  --action-primary-active: var(--q-primary-active);

  --shadow-sm: 0 1px 2px rgba(21,21,30,.06);
  --shadow-structural: 0 14px 34px -10px rgba(21,21,30,.14);
  --shadow-md: 0 14px 34px -10px rgba(21,21,30,.14);
  --shadow-deep: 0 30px 80px -20px rgba(21,21,30,.28);
  --shadow-lg: 0 30px 80px -20px rgba(21,21,30,.28);
  --shadow-glow-sm: 0 0 40px rgba(109,59,255,.18);
  --shadow-glow-lg: 0 0 120px rgba(109,59,255,.24);

  --focus-ring: 0 0 0 3px rgba(109,59,255,.28);

  --font-sans: "Noto Sans", Arial, system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Altura real da barra fixa de leitura. Tudo que precisa ficar abaixo dela
     (padding da capa, âncoras do índice) parte daqui, para não haver número
     solto fora de sincronia com a barra. */
  --bar-h: 56px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;              /* 1rem === 1px de projeto no canvas de 1920 */
  -webkit-text-size-adjust: 100%;
  background: var(--q-neutral-950);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--q-neutral-950);
  color: var(--q-ice);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
img { max-width: 100%; }
a { color: var(--q-primary); }
a:hover { color: var(--q-primary-hover); }

svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* Cada <section> traz position/overflow no style inline vindo do deck original;
   inline vence seletor de classe, por isso o posicionamento precisa de
   !important em ambos os modos. */
/* Enquanto o JS não decidiu o modo, nada pisca. */
html:not(.mode-deck):not(.mode-flow) .stage { visibility: hidden; }

.q-cta { font-family: var(--font-sans); }
.q-cta:hover { background: rgba(109,59,255,.32) !important; box-shadow: 0 0 42px rgba(109,59,255,.4) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODO APRESENTAÇÃO — canvas 16:9 escalado, um slide por tela
   ═══════════════════════════════════════════════════════════════════════════ */
.mode-deck, .mode-deck body { height: 100%; overflow: hidden; }
.mode-deck .stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--q-neutral-950);
}
.mode-deck .canvas {
  position: relative;
  width: 1920px; height: 1080px;
  flex: none;
  transform: scale(var(--scale, 1));
  transform-origin: center center;
}
.mode-deck .slide {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 1920px !important; height: 1080px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(2.5%);
  transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1), visibility 0s linear .34s;
}
.mode-deck .slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.mode-deck .slide.is-before { transform: translateX(-2.5%); }

.mode-deck .topbar, .mode-deck .to-top { display: none; }

/* Aproveitamento do espaço no canvas de 1920. Vários slides centram a faixa de
   cards com margens automáticas, o que deixa uma sobra grande de ar acima e
   abaixo. Aqui a faixa passa a ocupar a altura disponível — mantendo uma
   margem de respiro — e cada card centraliza o próprio conteúdo, para crescer
   sem ficar com o texto encostado no topo. */
/* `min-height` em vez de esticar: só levanta o card que está baixo demais e
   nunca encolhe os que já são altos — esticar até o fim transformava o card
   num painel com o texto perdido no meio de muito ar. */
.mode-deck .slide .fill-mid > * { min-height: 25rem; }
.mode-deck .slide .fill-mid-equilibra { margin-bottom: 0 !important; }
.mode-deck .slide .fill-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO LEITURA — os mesmos slides, refluídos em documento rolável
   ═══════════════════════════════════════════════════════════════════════════ */
.mode-flow {
  /* Um único knob controla toda a escala do conteúdo do slide. */
  font-size: clamp(12.6px, 3.35vw, 16px);
  scroll-behavior: smooth;
}
.mode-flow body { background: var(--q-neutral-950); }
.mode-flow .stage { display: block; }
.mode-flow .canvas { position: static; width: 100%; height: auto; transform: none; }

.mode-flow .slide {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  scroll-margin-top: calc(var(--bar-h) + 14px);
}
.mode-flow .slide-inner {
  height: auto !important;
  min-height: 0 !important;
  padding: 34px 18px 40px !important;
}
/* A capa é a única que nasce colada na barra: precisa do respiro embutido. */
.mode-flow .slide:first-child .slide-inner { padding-top: calc(var(--bar-h) + 38px + var(--safe-t)) !important; }
.mode-flow .slide:last-child  .slide-inner { padding-bottom: calc(88px + var(--safe-b)) !important; }

/* --- refluxo de layout ---------------------------------------------------- */

/* Toda grade vira coluna única; a partir de 720px volta a duas colunas. */
.mode-flow .slide .rf-grid { grid-template-columns: 1fr !important; }
.mode-flow .slide [style*="grid-template-rows"] { grid-template-rows: none !important; }

/* Linhas de layout (cronograma, gates, cards lado a lado) empilham. */
.mode-flow .slide .rf-row { flex-direction: column !important; align-items: stretch !important; }
.mode-flow .slide .rf-row > * { width: auto !important; flex: none !important; }
.mode-flow .slide .rf-arrow { display: none !important; }

/* Cabeçalhos e rodapés do slide (logo à esquerda, rótulo à direita) são flex
   space-between de dois filhos: em tela estreita precisam quebrar em vez de
   se sobrepor. */
.mode-flow .slide [style*="justify-content:space-between"] {
  flex-wrap: wrap !important;
  row-gap: 10px !important;
}
.mode-flow .slide img { height: auto !important; max-height: 26px; flex: none; }

/* Faixas-pílula ("TECNOLOGIA + DADOS + INTELIGÊNCIA…") são inline-flex de uma
   linha só: sem quebra elas passam da borda e são cortadas pelo overflow do
   slide. */
.mode-flow .slide [style*="display:inline-flex"] {
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

/* Anotações que flutuavam sobre o canvas voltam ao fluxo, acima do seu bloco. */
.mode-flow .slide .rf-float {
  position: static !important;
  inset: auto !important;
  align-items: flex-start !important;
  margin: 0 0 10px !important;
}

/* O slide-inner é uma coluna flex: nada deve esticar para preencher altura. */
.mode-flow .slide-inner > * { flex: none !important; }
.mode-flow .slide [style*="height:100%"] { height: auto !important; }
.mode-flow .slide [style*="min-height"] { min-height: 0 !important; }
.mode-flow .slide [style*="max-width"] { max-width: none !important; }
.mode-flow .slide [style*="white-space:nowrap"] { white-space: normal !important; }

/* --- tipografia ----------------------------------------------------------- */
/* A escala do deck (82/52/17px) é compacta demais para escalar linearmente até
   390px de tela: os títulos ficariam gigantes ou o corpo ilegível. Estas regras
   comprimem só o topo da escala, mantendo o corpo em rem. */
/* A entrelinha de 1.02–1.06 do deck é feita para 82px; em ~32px na tela do
   celular ela fecha demais as linhas. */
.mode-flow .slide h1 { font-size: clamp(30px, 8.4vw, 54px) !important; line-height: 1.14 !important; letter-spacing: -.02em !important; }
.mode-flow .slide h2 { font-size: clamp(25px, 6.4vw, 40px) !important; line-height: 1.16 !important; }
.mode-flow .slide h3 { font-size: clamp(20px, 4.6vw, 28px) !important; line-height: 1.22 !important; }

/* --- enquadramento das quebras -------------------------------------------
   Caber na caixa não basta: a quebra precisa fazer sentido para quem lê.
   `balance` iguala o comprimento das linhas em títulos e blocos curtos;
   `pretty` evita a última linha com uma palavra órfã no corpo de texto.
   (O modo apresentação fica de fora: lá as quebras são as do deck aprovado.) */
.mode-flow .slide h1,
.mode-flow .slide h2,
.mode-flow .slide h3,
.mode-flow .slide .t-xl,
.mode-flow .slide .t-lg,
.mode-flow .slide .rf-strip { text-wrap: balance; }
.mode-flow .slide p,
.mode-flow .slide li { text-wrap: pretty; }

/* Faixas de afirmação voltam a ser texto: como inline-flex, quem quebrava eram
   os itens, deixando os separadores soltos e o espaçamento irregular. */
.mode-flow .slide .rf-strip {
  display: block !important;
  text-align: center;
  border-radius: 18px !important;
  line-height: 1.55 !important;
}

/* Piso de respiro entre rótulo e descrição. */
.mode-flow .slide .sp-mt { margin-top: 7px !important; }
.mode-flow .slide .sp-mb { margin-bottom: 7px !important; }
.mode-flow .slide .t-xl { font-size: clamp(30px, 8vw, 48px) !important; line-height: 1.05 !important; }
.mode-flow .slide .t-lg { font-size: clamp(21px, 5vw, 30px) !important; }
.mode-flow .slide .t-sm { font-size: clamp(11.5px, 3.1vw, 14px) !important; }
.mode-flow .slide .t-label { text-wrap: balance; }

/* O botão é inline-flex de dois itens (texto + seta). Deixá-lo quebrar joga a
   seta sozinha para a linha de baixo; o texto quebra internamente.
   Precisa do seletor com `button` para vencer a regra genérica de inline-flex
   acima, que tem a mesma quantidade de classes. */
.mode-flow .slide button.q-cta { flex-wrap: nowrap !important; }

/* --- só celular (abaixo do breakpoint de tablet) -------------------------- */
/* Quebras alternativas do título da capa. Padrão = as do deck original. */
.br-m { display: none; }

@media (max-width: 719px) {
  .mode-flow .br-m { display: inline; }
  .mode-flow .br-d { display: none; }

  /* O logo já está fixo na barra do topo o tempo todo; repeti-lo dentro do
     slide só rouba altura da primeira dobra. */
  .mode-flow .slide img { display: none !important; }

  /* Capa: sai o cabeçalho (logo + "PROPOSTA · DESENVOLVIMENTO TECNOLÓGICO").
     A pílula "MVP V1 · MONITORAMENTO DA ÁGUA" continua, é ela que dá o tom. */
  .mode-flow .slide[data-index="0"] .slide-inner > div:first-child { display: none !important; }
  /* Ritmo vertical. Os vãos originais (3–24px) eram gutters entre colunas de um
     canvas de 1920; empilhados viram o espaço entre um card e o próximo, e a
     irregularidade fica evidente. Um valor único cria ritmo. */
  .mode-flow .slide .rf-grid,
  .mode-flow .slide .rf-row { gap: 16px !important; }

  /* Piso de folga interna e de separação entre blocos do slide. */
  .mode-flow .slide .pf-y { padding-top: 16px !important; padding-bottom: 16px !important; }
  .mode-flow .slide .pf-x { padding-left: 18px !important; padding-right: 18px !important; }
  .mode-flow .slide-inner > .sp-mt-lg { margin-top: 24px !important; }

  /* Rótulo da fase vira sobrelinha + nome, sem o separador: empilhado, "FASE 2 •"
     sozinho numa linha é toco com símbolo pendurado. */
  .mode-flow .slide .ph-sep { display: none !important; }
  .mode-flow .slide .ph-n {
    display: block;
    font-size: .8em;
    opacity: .6;
    letter-spacing: .18em;
    margin-bottom: 3px;
  }
  .mode-flow .slide .ph-t { display: block; }

  /* Fases do roadmap: número acima do texto. Lado a lado, o número come 72px
     dos 237 disponíveis e o nome da fase não cabe — estourava o cartão. */
  .mode-flow .slide .rf-numrow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .mode-flow .slide .rf-numrow > * { width: auto !important; flex: none !important; }

  /* "Modelos de entrega": prazo e forma de pagamento na mesma linha, com o
     distintivo à direita. O DOM continua em ordem de leitura; quem reposiciona
     é o grid, e por isso os três cartões ficam com a mesma estrutura. */
  .mode-flow .md-card {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
  }
  .mode-flow .md-card > .md-head { grid-column: 1; grid-row: 1; }
  .mode-flow .md-card > .md-badge {
    grid-column: 2; grid-row: 1;
    justify-self: end;
    align-self: center !important;
    margin-top: 0 !important;
  }
  .mode-flow .md-card > :not(.md-head):not(.md-badge) { grid-column: 1 / -1; }
  /* "23 dias · À VISTA" já diz que é o mais rápido. */
  .mode-flow .md-fast { display: none !important; }

  /* Quadros de nota empilham: lado a lado, nenhuma das duas colunas tem largura
     suficiente para quebrar bem. Empilhado, o rótulo volta a caber numa linha. */
  .mode-flow .slide .rf-note {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
  }
  .mode-flow .slide .rf-note > * { width: auto !important; }
  .mode-flow .slide .rf-note > :not(p) { white-space: nowrap !important; }

  /* Sem o cabeçalho, a pílula passa a ser o primeiro elemento — ela precisa de
     respiro claro abaixo da barra, não encostar nela. */
  .mode-flow .slide[data-index="0"] .slide-inner { padding-top: calc(var(--bar-h) + 34px + var(--safe-t)) !important; }
}

/* --- telas muito estreitas (abaixo de ~340px) ----------------------------- */
@media (max-width: 339px) {
  /* O distintivo não cabe ao lado do prazo: "ENTRADA 60%" quebrava dentro da
     própria pílula. Volta a ficar abaixo. */
  .mode-flow .md-card { display: flex !important; }
  .mode-flow .md-card > .md-badge { justify-self: auto; margin-top: 10px !important; }
}
@media (max-width: 719px) {
  /* Cada linha da faixa carrega um termo com o seu separador ("TECNOLOGIA +"),
     em vez de deixar o símbolo pendurado numa linha qualquer. */
  .mode-flow .slide .rf-strip-itens {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .mode-flow .slide .strip-item { white-space: nowrap; }
}

/* --- tablet / telas largas em retrato ------------------------------------- */
@media (min-width: 720px) {
  .mode-flow .slide-inner { padding: 56px 48px 60px !important; }
  .mode-flow .slide:first-child .slide-inner { padding-top: calc(96px + var(--safe-t)) !important; }
  .mode-flow .slide .rf-grid-3,
  .mode-flow .slide .rf-grid-4,
  .mode-flow .slide .rf-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1000px) {
  .mode-flow .canvas { max-width: 1120px; margin: 0 auto; }
  .mode-flow .slide-inner { padding: 72px 64px 76px !important; }
  .mode-flow .slide .rf-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
  /* As linhas de layout continuam empilhadas mesmo aqui: seus filhos perderam
     o flex-grow original (flex:4 1 0, flex:5 1 0 …) ao serem empilhados, e
     devolver só a direção faria os cards assumirem a largura de conteúdo e
     estourarem a tela — foi o que quebrou o iPad Pro em retrato. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Barra de leitura
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + var(--safe-t)) 14px 10px;
  background: rgba(12,12,18,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.topbar-logo { height: 22px; width: auto; flex: none; }
.topbar-title {
  flex: 1; min-width: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,247,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-idx {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(109,59,255,.5); background: rgba(109,59,255,.16);
  color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.topbar-idx svg { width: 16px; height: 16px; }
.topbar-pos { font-variant-numeric: tabular-nums; color: rgba(248,247,255,.72); }
.topbar-pos b { color: #fff; }
.topbar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(255,255,255,.08); }
.topbar-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6D3BFF, #9B7CFF); transition: width .15s linear; }

.to-top {
  position: fixed; right: 14px; bottom: calc(16px + var(--safe-b)); z-index: 39;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); background: rgba(21,21,30,.84);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .22s, transform .22s;
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Barra de apresentação
   ═══════════════════════════════════════════════════════════════════════════ */
.deckbar {
  position: fixed; z-index: 40;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + var(--safe-b));
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(21,21,30,.8);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.7);
  opacity: .28;
  transition: opacity .3s;
}
.deckbar:hover, .deckbar:focus-within, .deckbar.is-awake { opacity: 1; }
.mode-flow .deckbar { display: none; }

.dk-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dk-btn:hover { background: rgba(255,255,255,.1); }
.dk-btn svg { width: 18px; height: 18px; }

.dk-pos {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 0 14px; height: 38px; border-radius: 999px;
  border: 0; background: transparent; color: rgba(248,247,255,.6);
  font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
  align-items: center;
}
.dk-pos:hover { background: rgba(255,255,255,.08); }
.dk-pos b { color: #fff; font-size: 14px; }
.dk-pos em {
  font-style: normal; font-weight: 700; font-size: 12px;
  color: rgba(248,247,255,.55);
  margin-left: 8px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.16);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) { .dk-pos em { display: none; } }

.deckbar-progress { position: absolute; left: 16px; right: 16px; bottom: -6px; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; }
.deckbar-progress i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #6D3BFF, #9B7CFF); transition: width .3s cubic-bezier(.16,1,.3,1); }

/* ═══════════════════════════════════════════════════════════════════════════
   Trilho de slides — só no modo apresentação, em tela larga
   ═══════════════════════════════════════════════════════════════════════════ */
.rail { display: none; }

@media (min-width: 1100px) {
  .mode-deck .rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 45;
    width: 208px;
    display: flex; flex-direction: column;
    background: rgba(10, 10, 16, .94);
    border-right: 1px solid rgba(255, 255, 255, .08);
  }
  /* o palco desconta o trilho para o slide não ficar centralizado atrás dele */
  .mode-deck .stage { left: 208px; }
  /* a barrinha de navegação passa a morar no rodapé do painel */
  .mode-deck .deckbar { left: 104px; opacity: 1; }
  .mode-deck .deckbar .dk-pos em { display: none; }
}

.rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px 74px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.rail-item {
  display: block; width: 100%; padding: 0; border: 0;
  background: transparent; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rail-shot {
  display: block; position: relative; overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--q-neutral-950);
  transition: border-color .18s, box-shadow .18s;
}
/* O preview é o próprio slide, reduzido. Precisa vencer as regras de
   `.mode-deck .slide`, que o escondem e o posicionam sobre o palco. */
.rail-shot > .slide {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 1920px !important; height: 1080px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(var(--rail-scale)) !important;
  transform-origin: top left !important;
  transition: none !important;
  pointer-events: none;
}
.rail-name {
  display: block;
  margin-top: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  line-height: 1.3;
  color: rgba(248, 247, 255, .48);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-item:hover .rail-shot { border-color: rgba(255, 255, 255, .3); }
.rail-item:hover .rail-name { color: rgba(248, 247, 255, .75); }
.rail-item.is-active .rail-shot {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px rgba(109, 59, 255, .4);
}
.rail-item.is-active .rail-name { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   Índice
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(8,8,14,.62); backdrop-filter: blur(3px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0 } }

.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  display: flex; flex-direction: column;
  background: #15151E;
  border-left: 1px solid rgba(255,255,255,.1);
  box-shadow: -30px 0 80px -20px rgba(0,0,0,.7);
  animation: slidein .28s cubic-bezier(.16,1,.3,1);
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}
@keyframes slidein { from { transform: translateX(100%) } }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--q-purple-300);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.drawer-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.drawer-x svg { width: 16px; height: 16px; }

.drawer-list { flex: 1; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.idx-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 11px 12px; margin: 0; border: 0; border-radius: 10px;
  background: transparent; color: rgba(248,247,255,.82);
  font-family: var(--font-sans); font-size: 15px; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.idx-item:hover { background: rgba(255,255,255,.06); }
.idx-item.is-active { background: rgba(109,59,255,.16); color: #fff; }
.idx-item.is-active .idx-num { color: var(--q-primary); }
.idx-num { flex: none; width: 24px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: rgba(248,247,255,.4); font-variant-numeric: tabular-nums; }
.idx-label { flex: 1; min-width: 0; font-weight: 600; }

.drawer-foot { padding: 16px 18px calc(18px + var(--safe-b)); border-top: 1px solid rgba(255,255,255,.1); }
.drawer-foot-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(248,247,255,.42); margin-bottom: 10px; }
.modes { display: flex; gap: 6px; }
.mode-btn {
  flex: 1; padding: 9px 6px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: rgba(248,247,255,.72);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mode-btn.is-on { background: rgba(109,59,255,.22); border-color: rgba(109,59,255,.6); color: #fff; }
.drawer-hint { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: rgba(248,247,255,.42); }

/* ═══════════════════════════════════════════════════════════════════════════
   Barra de rolagem
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet e desktop: presente, porém discreta e sem moldura sólida. */
@media (min-width: 720px) {
  html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); background-clip: content-box; }
}

/* Celular: sem barra e sem largura reservada — a tela é toda do conteúdo. A
   posição fica por conta do contador e da barra de progresso do topo, mais o
   indicador flutuante abaixo, que só aparece enquanto se rola. */
@media (max-width: 719px) {
  html { scrollbar-width: none; }
  ::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

.scrollspot {
  position: fixed;
  right: 3px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  z-index: 38;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.scrollspot.is-on { opacity: 1; }
.mode-deck .scrollspot { display: none; }
@media (min-width: 720px) { .scrollspot { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .mode-flow { scroll-behavior: auto; }
}

/* ========================================================
   REGRAS DE IMPRESSÃO / PDF LANDSCAPE (10 SLIDES 16:9 PERFEITOS)
   ======================================================== */
@media print {
  @page {
    size: 1920px 1080px;
    margin: 0;
  }
  
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  html, html.mode-deck, html.mode-flow, body, .mode-deck body, .mode-flow body {
    width: 1920px !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
    background: #0B1120 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .rail, .topbar, .deckbar, .drawer, .scrollspot, .to-top {
    display: none !important;
  }
  
  .stage, .mode-deck .stage, .mode-flow .stage {
    position: static !important;
    display: block !important;
    width: 1920px !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    inset: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
  }
  
  .canvas, .mode-deck .canvas, .mode-flow .canvas {
    position: static !important;
    display: block !important;
    width: 1920px !important;
    height: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
  }
  
  .slide, .mode-deck .slide, .mode-flow .slide {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 1920px !important;
    height: 1080px !important;
    min-height: 1080px !important;
    max-height: 1080px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  .slide-inner {
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4rem 5.5rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
}