/* Modo apresentação — a mesma aplicação, preparada para projeção.
 *
 * Esconde a navegação de trabalho, amplia a escala e coloca a tela atual
 * dentro da sequência do pitch. Nenhuma tela nova: é o próprio sistema,
 * o que evita a distância entre "o que eu mostrei" e "o que existe".
 */

body.modo-apresentacao .topbar { display: none; }

/* `zoom` amplia tudo de uma vez, incluindo o SVG do organograma — o CSS do
   projeto usa px fixos, então mexer só na fonte não escalaria o desenho. */
body.modo-apresentacao .wrap {
  max-width: 1320px;
  zoom: 1.12;
  padding-top: 26px;
  padding-bottom: 120px;
}

/* --- cabeçalho da tela ------------------------------------------------ */

.pitch-cabecalho {
  background: var(--ink);
  color: #fff;
  padding: 20px 40px 22px;
  text-align: center;
}
.pitch-passo {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 6px;
}
.pitch-titulo {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
}
.pitch-subtitulo {
  font-size: 14.5px;
  opacity: .78;
  margin-top: 6px;
}

/* --- rodapé de navegação ---------------------------------------------- */

.pitch-rodape {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 28px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px -10px rgba(20, 38, 33, .35);
  z-index: 20;
}
.pitch-btn {
  display: inline-block;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: all .12s ease;
}
.pitch-btn:hover { border-color: var(--teal); color: var(--teal); }
.pitch-btn.destaque {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.pitch-btn.destaque:hover { background: #0a544d; color: #fff; }

.pitch-central {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.pitch-tela-cheia {
  background: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s ease;
}
.pitch-tela-cheia:hover { border-color: var(--teal); color: var(--teal); }

.pitch-sair button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.pitch-sair button:hover { color: var(--flag); }

/* --- tela cheia ------------------------------------------------------- */
/*
 * A API de tela cheia cobre a janela inteira, mas o estado se perde a cada
 * navegação — é assim que o navegador funciona. Para o organograma, onde a
 * narração roda sem trocar de página, ela segura a apresentação inteira.
 * Para percorrer as cinco telas sem perder a tela cheia, o F11 do navegador
 * é o caminho, porque é estado do próprio navegador e sobrevive à navegação.
 */
body.em-tela-cheia { background: var(--paper); }
body.em-tela-cheia .wrap { max-width: 1500px; }
body.em-tela-cheia .pitch-cabecalho { padding: 26px 40px 28px; }
body.em-tela-cheia .pitch-titulo { font-size: 31px; }

/* Numa projeção o conteúdo respira mais; fora dela, nada muda. */
body.modo-apresentacao h1 { font-size: 30px; }
body.modo-apresentacao .lede { max-width: 76ch; }
body.modo-apresentacao .card { padding: 24px 26px; }

/* O rodapé fixo não pode cobrir o fim da página em telas baixas. */
@media (max-height: 720px) {
  body.modo-apresentacao .wrap { zoom: 1; }
}