/* Guia ilustrado (04/10/2026): slides de cena, nomes das gestões, vídeo dentro da cena, presente e obrigado.
   Carregado depois do tema. As ilustrações seguem ilustracoes/ESTILO.md e pedem o fundo #F6F8FB.
   Regras: a cena ocupa o palco; o único texto é o nome da gestão que o Luiz fala em voz alta, como etiqueta no alto
   à esquerda, no instante em que ele o diz; e a palavra «Gestão» grande nos três momentos-âncora (as duas mãos,
   as três cadeiras e o fio). Nada desce abaixo da linha do rodapé (y 996). */

/* ---------- palco limpo, sem a grade, a espinha e os blocos do tema ---------- */
.slide.tipo-cena,.slide.tipo-cena.ato-2,.slide.tipo-presente,.slide.tipo-presente.ato-2{background-image:none;background-color:#F6F8FB}
.slide.tipo-cena::before,.slide.tipo-cena::after,.slide.tipo-presente::before,.slide.tipo-presente::after,
.tipo-cena .c::before,.tipo-cena .c::after,.tipo-presente .c::before,.tipo-presente .c::after{display:none!important}
.tipo-cena .c,.tipo-presente .c{padding:0!important;display:block}
.slide.tipo-cena.cena-homenagem.ativa{transition:opacity .5s ease,background-color 1.4s ease}
/* homenagem: o papel esquenta só quando o quadro «Obrigado, professor.» entra */
.slide.tipo-cena.cena-homenagem[data-passo-atual="1"]{background-color:#F5E7CF}
.slide.sem-anim{transition-property:opacity,visibility!important}

/* o que vive num intervalo de cliques */
[data-de]{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
[data-de].vivo{opacity:1;visibility:visible;transition:opacity .55s ease}

/* ---------- a cena ---------- */
/* a arte ocupa o palco inteiro, como foi aprovada; a cena que encosta no nome da gestão recebe um ajuste
   próprio (campo "ajuste" no slides.js: escala com a base do desenho fixa), calculado por ferramentas/ajusta-cenas.py */
.tipo-cena .arte{position:absolute;left:0;top:0;width:1920px;height:1080px;clip-path:inset(0 0 84px 0)}
.quadro-cena .fit{position:absolute;inset:0}
/* os quatro lado a lado */
.quadro-cena.com-mosaico .fit{left:120px;right:120px;top:56px;bottom:110px}
.quadro-cena{position:absolute;inset:0;transform:scale(1.012);transition:opacity .6s ease,visibility 0s linear .6s,transform .9s cubic-bezier(.2,.8,.2,1)}
.quadro-cena.vivo{transform:none;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.quadro-cena.morto{transform:scale(.988)}
.quadro-cena .zoom{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.45,.05,.2,1)}
.tipo-cena .camada{position:absolute;inset:0;width:100%;height:100%;display:block}
.tipo-cena .camada[data-passo]{transform:none;transition:opacity .6s ease}

/* ---------- o nome da gestão: uma etiqueta que se escreve da esquerda para a direita ---------- */
.tipo-cena .selos{position:absolute;left:120px;right:120px;top:38px;height:96px;z-index:5;pointer-events:none}
.selo-c{position:absolute;left:0;top:0;height:96px;display:flex;align-items:center;gap:20px;margin:0;white-space:nowrap;transition:opacity .2s ease,visibility 0s linear .2s}
.selo-c.vivo{transition:opacity .2s ease}
.selo-c .sq{flex:none;width:20px;height:20px;background:#2563EB;transform:scale(0) rotate(-45deg);transition:transform .5s cubic-bezier(.3,1.5,.5,1) .1s}
.selo-c.vivo .sq{transform:none}
.selo-c .tx{display:flex;align-items:baseline;gap:.24em;font:700 44px/1.2 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:-.012em;color:#1E3A5F;
  clip-path:inset(-30% 101% -30% 0);transition:clip-path .85s cubic-bezier(.65,0,.25,1)}
.selo-c.vivo .tx{clip-path:inset(-30% -2% -30% 0);transition-delay:.22s}
.selo-c .tx .g{font-weight:600;color:#374151}
.selo-c .tx b{font-weight:700}
/* antes e depois */
.selo-c.estilo-antes .sq{background:#9AA6BA}
.selo-c.estilo-antes .tx{color:#5E6878}
.selo-c.estilo-depois .tx{color:#2563EB}
/* âncora: a palavra «Gestão» grande, no lugar da cena que a explica, com um traço que se desenha embaixo */
.selo-c.estilo-ancora{height:auto;transform:translate(-50%,-50%)}
.selo-c.estilo-ancora .sq{display:none}
.selo-c.estilo-ancora .tx{font:800 108px/1 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:-.035em;color:#1E3A5F;padding-bottom:20px;
  background:linear-gradient(#2563EB,#2563EB) left bottom/0 12px no-repeat;transition:clip-path .85s cubic-bezier(.65,0,.25,1),background-size .7s cubic-bezier(.65,0,.25,1)}
.selo-c.estilo-ancora.vivo .tx{background-size:100% 12px;transition-delay:.22s,.9s}
.selo-c.estilo-ancora.estilo-fecho .tx{font-size:176px;padding-bottom:28px;background-size:0 16px}
.selo-c.estilo-ancora.estilo-fecho.vivo .tx{background-size:100% 16px}
body.sem-selos .tipo-cena .selos{display:none}

/* ---------- vídeo ou tela por cima da cena ---------- */
.tipo-cena .sobrepor{position:absolute;left:0;right:0;top:0;bottom:84px;padding-top:120px;z-index:4;display:flex;align-items:center;justify-content:center;background:rgba(246,248,251,.95)}
body:not(.apresentador) .tipo-cena .sobrepor:has(.quadro.faltando){display:none!important}
.sobrepor .quadro{position:relative;width:1420px;height:799px;margin:0;border-radius:20px;overflow:hidden;background:#fff;border:0;
  box-shadow:0 2px 0 #DCE6FB,0 34px 90px rgba(30,58,95,.20);transform:translateY(28px) scale(.97);transition:transform .8s cubic-bezier(.2,.8,.2,1);display:flex;align-items:center;justify-content:center}
.sobrepor.vivo .quadro{transform:none}
.sobrepor .quadro.e-video{background:#F6F8FB;box-shadow:none}
.sobrepor .quadro img,.sobrepor .quadro video{width:100%;height:100%;object-fit:contain;display:block}
.sobrepor .quadro.faltando{background:repeating-linear-gradient(135deg,#fff 0 22px,#F1F5FC 22px 44px);border:4px dashed #2563EB;box-shadow:none}

/* ---------- os quatro lado a lado: rótulo em aba, acima de cada cena ---------- */
.mosaico{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,680px);grid-auto-rows:auto;justify-content:center;align-content:center;gap:30px 60px}
.mosaico .cel{display:flex;flex-direction:column;gap:12px}
.mosaico .rot{display:flex;align-items:center;gap:14px;font:700 36px/1 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;color:#1E3A5F}
.mosaico .rot::before{content:"";width:16px;height:16px;background:#2563EB}
.mosaico .cel-arte{position:relative;width:680px;height:383px;border-radius:20px;overflow:hidden;background:#F6F8FB}
.mosaico .cel-arte::after{content:"";position:absolute;inset:0;border:3px solid #C9D3E3;border-radius:20px;pointer-events:none}
.mosaico .cel-arte img{position:absolute;inset:0;width:100%;height:100%;transform:scale(1.1)}
.quadro-cena.vivo .mosaico .cel{animation:cel-entra .7s cubic-bezier(.2,.8,.2,1) both}
.quadro-cena.vivo .mosaico .cel:nth-child(2){animation-delay:.12s}
.quadro-cena.vivo .mosaico .cel:nth-child(3){animation-delay:.24s}
.quadro-cena.vivo .mosaico .cel:nth-child(4){animation-delay:.36s}
@keyframes cel-entra{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.sem-anim .mosaico .cel,.tela-mini-in .mosaico .cel,body.impresso .mosaico .cel{animation:none!important}

/* ---------- o presente e o obrigado ---------- */
.tipo-presente .pres-txt{position:absolute;left:140px;top:0;bottom:96px;width:1020px;display:flex;flex-direction:column;justify-content:center}
.tipo-presente .sobre{font:700 30px/1 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#2563EB;margin:0 0 34px!important}
.tipo-presente .sobre::before{display:none}
.tipo-presente .titulo{font:800 150px/.94 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:-.025em;color:#0D1B2E;margin:0}
.tipo-presente .url{font:600 46px/1.2 "SF Mono",Menlo,monospace;letter-spacing:-.02em;color:#1A40B4;margin-top:56px!important;padding-top:28px;border-top:10px solid #1E3A5F;align-self:flex-start}
.tipo-presente .pres-logo{margin-top:64px!important;transform:none}
.tipo-presente .pres-logo img{height:96px;width:auto;mix-blend-mode:multiply;display:block}
.tipo-presente .pres-fim{position:absolute;left:140px;bottom:180px}
.tipo-presente .obrigado{font:800 230px/.9 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:-.025em;color:#1E3A5F;margin:0;
  transform:translateY(30px);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tipo-presente .pres-fim.vivo .obrigado{transform:none}
.tipo-presente .codigo{position:absolute;right:150px;top:200px;width:600px;height:600px;border-radius:28px;background:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 2px 0 #DCE6FB,0 30px 80px rgba(30,58,95,.16);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.tipo-presente .codigo img{width:88%;height:88%}
.tipo-presente .codigo.faltando{border:4px dashed #2563EB;box-shadow:none;background:repeating-linear-gradient(135deg,#fff 0 22px,#F1F5FC 22px 44px)}
/* sem QR, o telão não mostra o quadro de pendência; ele só aparece no apresentador */
body:not(.apresentador) .tipo-presente .codigo.faltando{visibility:hidden}
/* sem QR, o texto e o obrigado vão para o centro do palco */
body:not(.apresentador) .tipo-presente:has(.codigo.faltando) .url-peq{display:none}
body:not(.apresentador) .tipo-presente:has(.codigo.faltando) .pres-txt{left:0;right:0;width:auto;align-items:center;text-align:center}
body:not(.apresentador) .tipo-presente:has(.codigo.faltando) .url{align-self:center}
body:not(.apresentador) .tipo-presente:has(.codigo.faltando) .pres-logo img{margin:0 auto}
body:not(.apresentador) .tipo-presente:has(.codigo.faltando) .pres-fim{left:0;right:0;bottom:auto;top:0;height:996px;display:flex;align-items:center;justify-content:center}
.tipo-presente .url-peq{position:absolute;right:150px;top:672px;width:420px;text-align:center;font:600 25px/1.2 "SF Mono",Menlo,monospace;color:#1A40B4;margin:0}
/* no obrigado o QR sobe e encolhe para o canto, e continua na tela durante as perguntas */
.tipo-presente[data-passo-atual="2"] .codigo{transform:translate(90px,-60px) scale(.7)}

/* ---------- pontos de clique na moldura: quantos faltam neste slide ---------- */
#pontos{display:flex;align-items:center;gap:10px;margin:0 0 0 auto;padding:0;list-style:none}
#pontos li{width:14px;height:14px;border-radius:999px;border:3px solid #9AA6BA;transition:width .3s ease,background .3s ease,border-color .3s ease}
#pontos li.feito{background:#1E3A5F;border-color:#1E3A5F}
#pontos li.atual{width:42px;background:#2563EB;border-color:#2563EB}
#pontos+#contador{margin-left:28px}
/* no telão o rodapé fica só com os seis quadradinhos e os pontinhos: nomes de bloco e "x / 28" ficam para o apresentador */
body:not(.apresentador) #trilho li span,body:not(.apresentador) #trilho-rotulo,body:not(.apresentador) #contador{display:none!important}
/* segundo ato: a linha do rodapé fica azul, a chave virou */
body[data-ato="2"] #chrome{border-top-color:#2563EB}

/* ---------- janela do apresentador: o guia ---------- */
.ap-dir{display:flex;flex-direction:column;gap:16px;min-height:0}
.ap-guia{flex:none;background:#fff;border:2px solid #2563EB;border-radius:12px;padding:16px 22px 18px;box-shadow:0 6px 18px rgba(37,99,235,.10)}
.ap-guia small{display:block;font:700 13px/1.3 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:#2563EB;margin-bottom:8px}
.ap-guia .ap-muda{letter-spacing:.02em;text-transform:none;color:#B23A30;font-weight:700;margin-left:8px}
.ap-quando{margin:0;font:700 30px/1.3 var(--f-texto);color:#0D1B2E}
.ap-quando q{quotes:"«" "»";background:#FFF2B3;padding:0 6px;border-radius:4px}
.ap-mostra{margin:8px 0 0;font:500 19px/1.35 var(--f-texto);color:#5E6878}
.ap-notas{position:relative;flex:1;min-height:0}
.ap-notas .fala p{font-size:20px;line-height:1.5}
.ap-bat{flex:none;max-height:28%;overflow:auto;background:#fff;border:1px solid #D5DBE6;border-radius:10px;padding:12px 18px}
.ap-bat .bat-bloco+.bat-bloco{margin-top:10px;padding-top:10px;border-top:1px dashed #D5DBE6}
.ap-bat .bat-bloco>b{display:block;font:700 12px/1.3 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;color:#5E6878;margin-bottom:6px}
.ap-bat .batidas{font-size:20px;margin:0;padding:0;border:0}
#ap-onde{font-weight:700;color:#1E3A5F!important}
.ap-dica{margin:0 0 12px;font:500 17px/1.45 var(--f-texto);color:#374151;background:#F3F5F9;border-radius:8px;padding:8px 12px}
.ap-falta{color:#B23A30!important;font-weight:600}
.fala mark{border-radius:4px;padding:0 3px;color:inherit}
.fala mark.agora{background:#DCE6FB;box-shadow:inset 0 -3px 0 #2563EB}
.fala mark.prox{background:#FFE680;box-shadow:inset 0 -3px 0 #E0A400}
.fala p.passou{opacity:.38}
.nota-guia{border-bottom:1px dashed #D5DBE6;margin-bottom:14px;padding-bottom:12px}
.nota-guia small{display:block;font:700 12px/1.3 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;color:#2563EB;margin-bottom:4px}
.nota-guia .ap-quando{font-size:22px}
.nota-guia .ap-mostra{font-size:15px}

/* ---------- guia de palco impresso (index.html?impresso=1): largura de uma folha A4, letras para ler no púlpito ---------- */
body.impresso,html:has(body.impresso){overflow:auto;height:auto;background:#fff}
#impresso{page:guia;max-width:700px;margin:0 auto;padding:28px 0 60px;font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;color:#0D1B2E}
.imp-cab h1{font:800 34px/1 "Avenir Next","Helvetica Neue",Arial,sans-serif;letter-spacing:-.03em;margin:0 0 8px;color:#1E3A5F}
.imp-cab p{margin:0 0 6px;font-size:13px;color:#374151}
.imp-cab .imp-leg{color:#5E6878;font-size:13px;margin-bottom:14px}
.imp-check{border:2px solid #2563EB;border-radius:10px;padding:10px 14px 8px;margin:0 0 18px;font-size:13.5px;line-height:1.4}
.imp-check b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#2563EB;margin-bottom:4px}
.imp-check ol{margin:0;padding-left:20px}
.ficha{border-top:3px solid #1E3A5F;padding:10px 0 14px;break-inside:avoid;page-break-inside:avoid}
.ficha h2{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font:700 17px/1.2 "Avenir Next","Helvetica Neue",Arial,sans-serif}
.ficha h2 .n{font:700 26px/1 "DIN Condensed","Avenir Next Condensed",Arial,sans-serif;color:#2563EB;min-width:28px}
.ficha h2 .min{margin-left:auto;font:600 14px/1 "SF Mono",Menlo,monospace;color:#5E6878}
.ficha-corpo{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px}
.ficha-fotos{display:flex;flex-direction:column;gap:6px}
.ficha-mini .tela-mini{border:1px solid #D5DBE6;border-radius:5px;overflow:hidden}
.ficha-mini{position:relative}
.ficha-foto{position:absolute;left:0;top:0;width:210px;height:auto;border:1px solid #D5DBE6;border-radius:5px;background:#F6F8FB}
.cliques{list-style:none;margin:0 0 8px;padding:0}
.cliques li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding:4px 0 5px;border-bottom:1px solid #EEF1F6}
.cliques .t{grid-row:span 2;font:700 15px/1.45 "SF Mono",Menlo,monospace;color:#374151}
.cliques .q{font:700 17px/1.35 "Avenir Next","Helvetica Neue",Arial,sans-serif;color:#0D1B2E}
.cliques .m{font-size:14px;line-height:1.35;color:#374151}
.cliques li.sem-midia .q{text-decoration:line-through;color:#9AA6BA}
.cliques li.sem-midia .m{color:#B23A30;font-weight:700}
.imp-bat{margin:6px 0 0;font-size:15px;line-height:1.45;color:#0D1B2E}
.imp-bat b{color:#1E3A5F;margin-right:6px}
@page guia{size:A4 portrait;margin:12mm}
@media print{
  body.impresso #impresso{padding:0;max-width:none}
}
/* artes vivas em loop (data-ciclo no svg): no fim de cada volta esmaecem, voltam ao começo e reaparecem (deck.js, ciclo) */
.arte-viva{transition:opacity .6s ease}
.arte-viva.recomeca{opacity:0}