/* A palestra em modo apresentação. O palco tem 1920 por 1080 px de desenho e se ajusta a qualquer tela (palestra.js
   calcula a escala; sobra preto em volta). As medidas e as cores são as do site (css/tokens.css do site novo);
   a menor letra tem 40 px de desenho (20 pt, como no PowerPoint). */
@font-face { font-family: 'Stack Sans Notch'; font-weight: 300; src: url('fontes/StackSansNotch-Light.ttf'); }
@font-face { font-family: 'Stack Sans Notch'; font-weight: 400; src: url('fontes/StackSansNotch-Regular.ttf'); }
@font-face { font-family: 'Stack Sans Notch'; font-weight: 500; src: url('fontes/StackSansNotch-Medium.ttf'); }
@font-face { font-family: 'Stack Sans Notch'; font-weight: 600; src: url('fontes/StackSansNotch-SemiBold.ttf'); }
@font-face { font-family: 'Stack Sans Text'; font-weight: 300; src: url('fontes/StackSansText-Light.ttf'); }
@font-face { font-family: 'Stack Sans Text'; font-weight: 400; src: url('fontes/StackSansText-Regular.ttf'); }
@font-face { font-family: 'Stack Sans Text'; font-weight: 500; src: url('fontes/StackSansText-Medium.ttf'); }
@font-face { font-family: 'Stack Sans Text'; font-weight: 600; src: url('fontes/StackSansText-SemiBold.ttf'); }

:root {
  --tinta: #323038; --grafite: #4E4E54; --medio: #6E6E74; --suave: #55545B; --claro: #BFBFBF; --linha: #CFCFCF;
  --apagado: #A4A4AB; --quase: #F2F2F2; --branco: #FFFFFF; --vermelho: #E92B31;
  --titulo: 'Stack Sans Notch', 'Stack Sans Text', Arial, sans-serif; --texto: 'Stack Sans Text', Arial, sans-serif;
  --sombra: 0 6px 26px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
  --entra: 500ms; --cresce: 650ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: default; }
body.sem-cursor { cursor: none; }
#palco { position: absolute; overflow: hidden; background: var(--branco); }
#cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#camada { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; color: var(--tinta); font: 400 40px/1.25 var(--texto); }

/* o branco das lâminas sem mapa e o véu atrás do texto que fica sobre o mapa */
#limpo { position: absolute; inset: 0; background: var(--branco); opacity: 0; transition: opacity 700ms ease; }
#limpo.on { opacity: 1; }
#veu { position: absolute; left: 0; top: 0; width: 1920px; height: var(--veu, 0px); background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 100%); opacity: 0; transition: opacity 600ms ease; }
#veu.on { opacity: 1; }
#assinatura { position: absolute; left: 1572px; top: 44px; height: 36px; opacity: 0; transition: opacity 500ms; }
#assinatura.on { opacity: 1; }

/* as lâminas: só a da vez aparece; o que entra por clique tem data-de (e sai com data-ate) */
.lamina { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s 600ms; }
.lamina.atual { opacity: 1; visibility: visible; transition: opacity 600ms ease 150ms, visibility 0s; }
.lamina .x { position: absolute; }
.passo { opacity: 0; transform: translateY(14px); transition: opacity var(--entra) ease, transform var(--entra) ease; }
.passo.on { opacity: 1; transform: none; }
/* o bloco que cresce a partir de um ponto (a parada, o fator, o bloco) e volta para ele */
.cresce { opacity: 0; transform: scale(.03); transition: transform var(--cresce) cubic-bezier(.2, .75, .2, 1), opacity 350ms ease; }
.cresce.on { opacity: 1; transform: none; }
.cresce:not(.on) { transition: transform 450ms cubic-bezier(.6, 0, .8, .4), opacity 450ms ease 50ms; }

/* os textos */
.rotulo { font: 500 40px/1.2 var(--texto); color: var(--medio); }
.t1 { font: 600 76px/1.08 var(--titulo); letter-spacing: -.5px; }
.t2 { font: 600 64px/1.1 var(--titulo); letter-spacing: -.3px; }
.t3 { font: 600 56px/1.1 var(--titulo); }
.t4 { font: 600 48px/1.12 var(--titulo); }
.corpo { font: 400 44px/1.3 var(--texto); color: var(--suave); }
.peq { font: 400 40px/1.25 var(--texto); color: var(--suave); }
em { font-style: italic; }

/* os cartões, como os do site (branco, com sombra e a régua escura no alto) */
.cartao { background: var(--branco); box-shadow: var(--sombra); border-top: 6px solid var(--tinta); padding: 32px 40px 30px; }
.cartao.fino { border-top-width: 0; padding: 18px 40px; }
.coluna { position: absolute; left: 1000px; width: 880px; top: 110px; height: 930px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.coluna .cartao { flex: none; }
.item b { display: block; font: 500 40px/1.22 var(--texto); color: var(--tinta); }
.item span { display: block; font: 400 40px/1.22 var(--texto); color: var(--medio); }
ul.lista { margin: 0; padding: 0; list-style: none; }
ul.lista li { position: relative; padding-left: 44px; margin-top: 14px; font: 400 40px/1.22 var(--texto); color: var(--suave); }
ul.lista li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 14px; height: 14px; background: var(--grafite); }
ul.lista-fase li::before { display: none; }

/* os fios dos cartões até o lugar do mapa */
svg.fios { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; pointer-events: none; }
svg.fios g { opacity: 0; transition: opacity 400ms ease 250ms; }
svg.fios g.on { opacity: 1; }
svg.fios line { stroke: var(--tinta); stroke-width: 3; }
svg.fios circle { fill: var(--branco); stroke: var(--tinta); stroke-width: 4; }

/* os rótulos do mapa (posicionados a cada quadro pela projeção da cena) */
#rotulos > * { position: absolute; left: 0; top: 0; will-change: transform; opacity: 0; transition: opacity 400ms ease; }
#rotulos > .on { opacity: 1; }
.r-parada { width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; background: var(--branco); border: 3px solid var(--apagado); color: var(--medio); font: 500 40px/1 var(--titulo); }
.r-parada.da-fase { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.r-parada.aberta { box-shadow: 0 0 0 6px var(--branco), 0 0 0 14px var(--vermelho); }
.r-marcador { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: var(--vermelho); box-shadow: 0 0 0 5px var(--branco); }
.r-gov { width: 80px; height: 80px; margin: -40px 0 0 -40px; display: grid; place-items: center; background: var(--medio); color: var(--branco); font: 600 48px/1 var(--titulo); }
.r-gov.ativo { background: var(--tinta); }
.r-fase { padding: 6px 20px; background: var(--branco); box-shadow: var(--sombra); font: 600 44px/1.1 var(--titulo); white-space: nowrap; }
.r-fase i { font-style: normal; font-weight: 300; margin-right: 12px; }

/* a tela escura e o índice */
[hidden] { display: none !important; }
#breu { position: fixed; inset: 0; background: #000; z-index: 20; }
#indice { position: fixed; inset: 0; z-index: 30; background: rgba(20, 20, 24, .82); display: grid; place-items: center; font-family: var(--texto); }
.indice-caixa { width: min(1100px, 92vw); max-height: 90vh; display: flex; flex-direction: column; background: var(--branco); color: var(--tinta); box-shadow: var(--sombra); }
.indice-topo { padding: 22px 28px 12px; border-bottom: 1px solid var(--linha); }
.indice-topo h2 { margin: 0 0 12px; font: 600 28px/1.1 var(--titulo); }
.versoes { display: flex; gap: 8px; }
.versoes button { font: 500 18px/1 var(--texto); padding: 10px 16px; border: 2px solid var(--tinta); background: var(--branco); color: var(--tinta); cursor: pointer; }
.versoes button.on { background: var(--tinta); color: var(--branco); }
.atalhos { margin: 12px 0 0; font-size: 15px; color: var(--medio); }
.indice-lista { margin: 0; padding: 8px 0; overflow: auto; list-style: none; columns: 2; column-gap: 0; }
.indice-lista li button { width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 8px 28px; border: 0; background: none; font: 400 17px/1.3 var(--texto); color: var(--tinta); cursor: pointer; break-inside: avoid; }
.indice-lista li button:hover, .indice-lista li button:focus-visible { background: var(--quase); }
.indice-lista li.atual button { font-weight: 600; }
.indice-lista b { flex: none; width: 2em; font-weight: 600; }
.indice-lista small { margin-left: auto; padding: 1px 6px; font-size: 12px; border: 1px solid var(--medio); color: var(--medio); }
.indice-lista small.base { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }