/* ==========================================================================
   Template HTML — AWS Fórum Executivo Brasil 2026 | Setor Público
   Baseado em Template_AWS_FORUM EXECUTIVO PS_MODELO_APRESENTACAO.pptx

   Cada slide é um palco fixo de 1920 x 1080 px (16:9), escalado pelo deck.js
   para caber na janela. Todas as medidas abaixo estão em px desse palco
   (1 pt do PowerPoint = 2 px aqui).
   ========================================================================== */

:root {
  /* Cores extraídas das imagens do template */
  --azul-noite: #000b48;   /* fundo escuro do cabeçalho / capa */
  --azul-medio: #004483;
  --azul-texto: #0073bb;   /* destaque legível sobre branco */
  --ciano: #00b7fa;        /* brilho do gradiente — só para formas, não para texto sobre branco */
  --ciano-claro: #9fe3ff;  /* destaque legível sobre fundo escuro */
  --tinta: #0f1b2d;        /* texto corrido */
  --tinta-suave: #4a5a70;
  --papel: #ffffff;
  --papel-tinto: #eef5fb;  /* fundo de cards */

  /* Amazon Ember é a fonte do evento; se não estiver instalada cai em Aptos (fonte do pptx) */
  --fonte: "Amazon Ember", "Aptos", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Red Hat Mono", Menlo, Consolas, monospace;

  /* Geometria do slide de conteúdo (medida na imagem do template) */
  --cabecalho: 217px;      /* altura da faixa superior */
  --rodape: 74px;          /* altura da faixa inferior */
  --margem: 144px;         /* margem lateral usada no pptx */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Palco e escala
   -------------------------------------------------------------------------- */

#deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  --k: 1; /* fator de escala, definido pelo deck.js */
}

.frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1920px * var(--k));
  height: calc(1080px * var(--k));
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.frame.ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--k));
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--papel) center / cover no-repeat;
  color: var(--tinta);
  font-size: 34px;
  line-height: 1.35;
}

/* Antes do JS montar os frames (ou sem JS), mostra os slides empilhados */
#deck > .slide { position: relative; transform: none; margin: 0 auto 24px; }

.slide .notas { display: none; }

/* Revelação passo a passo */
.fragmento { opacity: 0; transition: opacity 0.3s ease; }
.fragmento.visivel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .frame, .frame.ativo, .fragmento { transition: none; }
}

/* --------------------------------------------------------------------------
   Tipografia comum
   -------------------------------------------------------------------------- */

.slide h1, .slide h2, .slide h3, .slide p, .slide ul, .slide ol { margin: 0; }

.slide h2 {
  font-size: 56px;          /* 28 pt no pptx */
  line-height: 1.12;
  font-weight: 700;
  color: var(--azul-noite);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.slide h3 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--azul-noite);
}

.slide .chapeu {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-texto);
  margin-bottom: 14px;
}

.slide strong { font-weight: 700; color: var(--azul-noite); }
.slide a { color: var(--azul-texto); }
.slide .suave { color: var(--tinta-suave); }
.slide .pequeno { font-size: 26px; }

/* --------------------------------------------------------------------------
   Layout: CAPA  (imagem 1 do pptx)
   -------------------------------------------------------------------------- */

.slide.capa { background-image: url("bg-capa.png"); background-color: var(--azul-noite); color: #fff; }

/* Bloco opcional com o título da palestra, alinhado ao logotipo do evento */
.capa .palestra {
  position: absolute;
  left: 244px;
  top: 676px;
  width: 1180px;
}
.capa .palestra h1 {
  font-size: 54px;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.capa .palestra p {
  margin-top: 22px;
  font-size: 30px;
  color: #d7f1ff;
}
.capa .palestra p b { color: #fff; }

/* --------------------------------------------------------------------------
   Layout: CONTEÚDO  (imagem 2 do pptx — cabeçalho + área branca + rodapé)
   -------------------------------------------------------------------------- */

.slide.conteudo {
  background-image: url("bg-conteudo.png");
  display: flex;
  flex-direction: column;
  padding: calc(var(--cabecalho) + 64px) var(--margem) calc(var(--rodape) + 48px);
}

.conteudo > header { margin-bottom: 40px; flex: none; }
.conteudo > .corpo { flex: 1; min-height: 0; }

/* Texto simples — reproduz a caixa de texto do pptx (metade esquerda) */
.corpo.texto { max-width: 1100px; }
.corpo.texto p + p { margin-top: 0.7em; }

/* Rodapé injetado pelo deck.js (texto vem de data-rodape no #deck) */
.slide .rodape {
  position: absolute;
  right: var(--margem);
  bottom: 0;
  height: var(--rodape);
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.78);
}
.slide .rodape .num { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Listas */
.slide ul.lista, .slide ol.lista { list-style: none; padding: 0; }
.lista > li { position: relative; padding-left: 48px; }
.lista > li + li { margin-top: 22px; }
ul.lista > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.48em;
  border-radius: 50%;
  border: 5px solid var(--ciano);
  box-sizing: content-box;
  width: 8px;
  height: 8px;
}
.lista li .suave { display: block; font-size: 28px; margin-top: 4px; }

/* Agenda numerada */
ol.agenda { list-style: none; padding: 0; counter-reset: item; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 72px; }
ol.agenda > li { counter-increment: item; display: flex; align-items: center; gap: 28px; font-weight: 600; color: var(--azul-noite); }
ol.agenda > li::before {
  content: counter(item, decimal-leading-zero);
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--azul-noite), var(--azul-texto));
}

/* Colunas */
.colunas { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 72px; align-items: start; }
.colunas.centro { align-items: center; }
.colunas h3 { margin-bottom: 18px; }

/* Espaço para imagem / diagrama / print de tela */
.imagem {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 26px;
  color: var(--tinta-suave);
  background: var(--papel-tinto);
  border: 3px dashed #b9d3e8;
}
.imagem:has(img, svg, video) { border: 0; background: none; }
.imagem img, .imagem video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 36px; height: 100%; }
.card {
  background: var(--papel-tinto);
  border-radius: 24px;
  padding: 40px 40px 44px;
  font-size: 28px;
  line-height: 1.4;
}
.card .icone {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--azul-noite), var(--azul-texto));
}
.card h3 { font-size: 34px; margin-bottom: 14px; }

/* Números em destaque */
.numeros { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 56px; align-content: center; height: 100%; }
.numero b {
  display: block;
  font-size: 132px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--azul-texto); /* fallback */
  background: linear-gradient(100deg, var(--azul-noite) 0%, var(--azul-texto) 70%, var(--ciano) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 8px;
}
.numero span { display: block; margin-top: 16px; font-size: 30px; color: var(--tinta); max-width: 440px; }
.numero small { display: block; margin-top: 10px; font-size: 22px; color: var(--tinta-suave); }

/* Etapas / linha do tempo */
.etapas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 40px; counter-reset: etapa; align-content: center; height: 100%; }
.etapas > li { counter-increment: etapa; position: relative; font-size: 27px; line-height: 1.4; }
.etapas > li::before {
  content: counter(etapa);
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin-bottom: 28px;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--azul-noite), var(--azul-texto));
  position: relative;
  z-index: 1;
}
.etapas > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 84px;
  right: -40px;
  height: 4px;
  background: #cfe3f3;
}
.etapas h3 { font-size: 32px; margin-bottom: 10px; }

/* Código / terminal */
pre.codigo {
  margin: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  padding: 40px 44px;
  background: var(--azul-noite);
  color: #e6f1ff;
  font-family: var(--fonte-mono);
  font-size: 27px;
  line-height: 1.55;
  white-space: pre-wrap;
  tab-size: 2;
}
pre.codigo .c { color: #7f9cc4; }          /* comentário */
pre.codigo .p { color: var(--ciano); }     /* prompt */
pre.codigo .s { color: #ffd68a; }          /* string / valor */
pre.codigo .k { color: var(--ciano-claro); font-weight: 700; } /* palavra-chave */

/* --------------------------------------------------------------------------
   Layout: ESCURO  (divisor de seção e citação — gradiente recriado em CSS)
   -------------------------------------------------------------------------- */

.slide.escuro {
  color: #fff;
  background:
    radial-gradient(ellipse 48% 46% at 50% 106%, #00b7fa 0%, rgba(0, 183, 250, 0.5) 45%, rgba(0, 183, 250, 0) 100%),
    radial-gradient(ellipse 95% 100% at 50% 110%, #0079bd 0%, #004483 50%, var(--azul-noite) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 244px 120px;
}
.escuro h2 { color: #fff; font-size: 96px; line-height: 1.05; max-width: 1300px; }
.escuro .chapeu { color: var(--ciano-claro); font-size: 28px; margin-bottom: 26px; }
.escuro .sub { margin-top: 30px; font-size: 36px; color: #d7f1ff; max-width: 1100px; }
.escuro strong { color: #fff; }

.escuro.secao .numero-secao {
  font-size: 200px;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 3px rgba(159, 227, 255, 0.75);
  margin-bottom: 36px;
}

.escuro.citacao blockquote {
  margin: 0;
  font-size: 64px;
  line-height: 1.2;
  font-weight: 600;
  max-width: 1400px;
  text-wrap: balance;
}
.escuro.citacao blockquote::before {
  content: "\201C";
  display: block;
  font-size: 180px;
  line-height: 0.7;
  height: 90px;
  color: var(--ciano-claro);
}
.escuro.citacao cite { display: block; margin-top: 44px; font-style: normal; font-size: 30px; color: #d7f1ff; }
.escuro.citacao cite b { color: #fff; }

/* --------------------------------------------------------------------------
   Layout: ENCERRAMENTO  (imagem 3 do pptx — logotipo + patrocinadores)
   -------------------------------------------------------------------------- */

.slide.encerramento { background-image: url("bg-encerramento.png"); background-color: var(--azul-noite); }

/* Contato (slide "Obrigado") */
.contato { display: grid; grid-template-columns: 1fr 360px; gap: 96px; align-items: center; height: 100%; }
.contato .quem b { display: block; font-size: 44px; color: var(--azul-noite); }
.contato .quem span { display: block; margin-top: 6px; color: var(--tinta-suave); }
.contato .canais { margin-top: 40px; list-style: none; padding: 0; font-size: 30px; }
.contato .canais li + li { margin-top: 14px; }
.contato .canais b { display: inline-block; min-width: 170px; color: var(--azul-texto); font-weight: 700; }
.contato .qr { aspect-ratio: 1; min-height: 0; height: auto; }

/* --------------------------------------------------------------------------
   Visão geral (tecla O)
   -------------------------------------------------------------------------- */

body.geral #deck {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(var(--colunas, 4), max-content);
  gap: 24px;
  padding: 24px;
  justify-content: center;
  align-content: start;
  background: #0a0f1f;
}
body.geral .frame {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: none;
  cursor: pointer;
  border-radius: 6px;
  outline: 3px solid transparent;
  outline-offset: 3px;
}
body.geral .frame:hover { outline-color: rgba(255, 255, 255, 0.35); }
body.geral .frame.ativo { outline-color: var(--ciano); }
body.geral .fragmento { opacity: 1; }

/* --------------------------------------------------------------------------
   Barra de progresso, tela preta e ajuda
   -------------------------------------------------------------------------- */

#progresso {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--ciano);
  transition: width 0.25s ease;
  z-index: 5;
}
body.geral #progresso, body.apresentador #progresso { display: none; }

#apagao { position: fixed; inset: 0; background: #000; z-index: 20; display: none; }
body.apagado #apagao { display: block; }

#ajuda {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  background: rgba(0, 5, 30, 0.82);
  color: #fff;
  font-size: 17px;
}
body.ajuda #ajuda { display: grid; }
#ajuda div { background: #0a1550; border-radius: 16px; padding: 28px 36px; max-width: 92vw; }
#ajuda h4 { margin: 0 0 14px; font-size: 20px; }
#ajuda table { border-collapse: collapse; }
#ajuda td { padding: 5px 0; vertical-align: top; }
#ajuda td:first-child { padding-right: 28px; white-space: nowrap; color: var(--ciano-claro); font-family: var(--fonte-mono); font-size: 15px; }

/* --------------------------------------------------------------------------
   Modo apresentador (tecla P abre a janela)
   -------------------------------------------------------------------------- */

body.apresentador { background: #0a0f1f; color: #fff; }
body.apresentador #deck { display: none; }

#pv {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  font-size: 16px;
}
#pv .rotulo { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8fa6c9; margin-bottom: 8px; }
#pv .quadro { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; }
#pv .quadro .slide { transform: scale(var(--k)); }
#pv .quadro .fragmento { opacity: 0.35; }
#pv .quadro .fragmento.visivel { opacity: 1; }
#pv-lado { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
#pv-relogio { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
#pv-relogio .tempo { font-size: 44px; font-weight: 700; }
#pv-relogio .hora { font-size: 22px; color: #8fa6c9; }
#pv-relogio .pos { font-size: 22px; color: #8fa6c9; }
#pv-notas {
  grid-column: 1 / -1;
  overflow: auto;
  background: #111a36;
  border-radius: 10px;
  padding: 20px 26px;
  font-size: 22px;
  line-height: 1.5;
}
#pv-notas p { margin: 0 0 0.6em; }
#pv-notas ul { margin: 0 0 0.6em; padding-left: 1.2em; }
#pv-notas .vazio { color: #6d82a6; }

/* --------------------------------------------------------------------------
   Impressão / exportar PDF  (Ctrl/Cmd + P → "Salvar como PDF", sem margens)
   -------------------------------------------------------------------------- */

@page { size: 1920px 1080px; margin: 0; }

@media print {
  html, body { height: auto; background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #deck { position: static; overflow: visible; display: block; padding: 0; }
  .frame, body.geral .frame {
    position: relative;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    transform: none;
    opacity: 1;
    visibility: visible;
    outline: 0;
    border-radius: 0;
    break-after: page;
    break-inside: avoid;
  }
  .slide { transform: none; }
  .fragmento { opacity: 1; }
  #progresso, #apagao, #ajuda, #pv { display: none !important; }
}