/* Identidade Digipower: vermelho do sistema (#DC2626 -> #991B1B), sidebar
   escura, Inter. Nao e a paleta da pagina de referencia: quem manda aqui e a
   marca do cliente. */

:root{
  --bg:#f4f4f2;
  --papel:#ffffff;
  --tinta:#15171c;
  --tinta-2:#4b5563;
  --tinta-3:#8b909a;
  --linha:#e4e4e0;
  --linha-forte:#d2d2cd;
  --escuro:#15171c;
  --vermelho:#dc2626;
  --vermelho-fundo:#991b1b;
  --vermelho-lavado:#fef2f2;
  --ambar:#f59e0b;
  --ambar-lavado:#fffbeb;
  --azul:#2563eb;
  --azul-lavado:#eff6ff;
  --r:10px;
  --sombra:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  --menu:290px;
  --fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tinta);
  font:16px/1.65 var(--fonte);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
b,strong{font-weight:650}

/* ----------------------------------------------------------------- topo */
.topo{
  position:sticky;top:0;z-index:40;background:var(--escuro);color:#fff;
  display:flex;align-items:center;gap:20px;padding:0 24px;height:60px;
}
.topo img{height:24px;display:block}
.topo .trilhas{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.topo .trilhas a{
  text-decoration:none;font-size:13px;font-weight:500;padding:6px 13px;border-radius:99px;
  color:#a6abb5;border:1px solid transparent;transition:.15s;
}
.topo .trilhas a:hover{color:#fff;border-color:#343941}
.topo .trilhas a[aria-current]{background:var(--vermelho);color:#fff}
.topo .trilhas .marca{font-size:13px;color:#a6abb5;letter-spacing:.02em}

/* ------------------------------------------------------------ progresso */
.progresso{
  position:sticky;top:60px;z-index:39;background:rgba(244,244,242,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linha);
  padding:9px 24px;display:flex;align-items:center;gap:14px;
}
.progresso .rotulo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);font-weight:600;white-space:nowrap}
.progresso .barra{flex:1;height:3px;background:var(--linha-forte);border-radius:99px;overflow:hidden}
.progresso .barra i{display:block;height:100%;width:0;background:var(--vermelho);border-radius:99px;transition:width .35s cubic-bezier(.22,1,.36,1)}
.progresso .pontos{display:flex;gap:5px}
.progresso .pontos span{width:7px;height:7px;border-radius:99px;background:var(--linha-forte)}
.progresso .pontos span.feito{background:var(--vermelho)}
.progresso .pontos span.aqui{background:var(--tinta);transform:scale(1.35)}

/* ------------------------------------------------------------- estrutura */
.corpo{display:grid;grid-template-columns:var(--menu) minmax(0,1fr);gap:0;align-items:start}
/* item de grid nasce com min-width:auto e cresce ate caber o conteudo. No
   mobile isso fazia a lista de blocos empurrar a pagina 48px pra direita. */
.corpo > *{min-width:0}

.menu{position:sticky;top:104px;padding:26px 18px 40px;max-height:calc(100vh - 104px);overflow-y:auto}
.menu h2{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 12px;font-weight:600}
.menu ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.menu button{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;
  background:none;border:0;padding:9px 11px;border-radius:8px;font:inherit;font-size:14px;
  color:var(--tinta-2);transition:.13s;line-height:1.3;
}
.menu button:hover{background:#ececeA;color:var(--tinta)}
.menu button[aria-current]{background:var(--escuro);color:#fff;font-weight:550}
.menu button[aria-current] .n{background:var(--vermelho);color:#fff;border-color:transparent}
.menu .n{
  flex:none;display:grid;place-items:center;width:23px;height:23px;border-radius:6px;
  border:1px solid var(--linha-forte);font-size:12px;font-weight:600;color:var(--tinta-3);background:var(--papel);
}
.menu .n.feito{background:var(--vermelho);border-color:transparent;color:#fff}
.menu .estrela{margin-left:auto;color:var(--vermelho);font-size:15px;line-height:1}
.menu button[aria-current] .estrela{color:#fff}

/* --------------------------------------------------------------- conteudo */
.folha{padding:34px 46px 40px;max-width:960px}
.olho{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho);font-weight:650;margin-bottom:10px}
h1{font-size:clamp(30px,4.2vw,44px);line-height:1.06;letter-spacing:-.025em;margin:0 0 12px;font-weight:700}
.sub{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);font-weight:600;margin:0 0 18px}
.selos{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px}
.selo{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:5px;background:var(--vermelho-lavado);color:var(--vermelho)}
.selo.cinza{background:#ececeA;color:var(--tinta-2)}
.intro{font-size:17.5px;line-height:1.6;color:var(--tinta-2);margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--linha)}
.regua{height:2px;width:44px;background:var(--vermelho);border-radius:2px;margin:0 0 22px}

.bloco-texto{margin:0 0 22px}
.bloco-texto p{margin:0 0 14px}

/* passos */
.passos{list-style:none;counter-reset:p;margin:0 0 26px;padding:0}
.passos li{counter-increment:p;position:relative;padding:0 0 20px 46px}
.passos li::before{
  content:counter(p);position:absolute;left:0;top:-1px;width:29px;height:29px;border-radius:8px;
  background:var(--escuro);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:650;
}
.passos li::after{content:'';position:absolute;left:14px;top:33px;bottom:4px;width:1px;background:var(--linha-forte)}
.passos li:last-child{padding-bottom:0}
.passos li:last-child::after{display:none}
.passos h4{margin:2px 0 5px;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.passos p{margin:0;color:var(--tinta-2);font-size:15.5px}

/* caixas */
.caixa{border-radius:var(--r);padding:16px 18px;margin:0 0 24px;border:1px solid;border-left-width:3px}
.caixa h5{margin:0 0 6px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.caixa p{margin:0;font-size:15.5px;line-height:1.6}
.caixa.atencao{background:var(--ambar-lavado);border-color:#fcd9a0;border-left-color:var(--ambar)}
.caixa.atencao h5{color:#a16207}
.caixa.dica{background:var(--azul-lavado);border-color:#c7dbfe;border-left-color:var(--azul)}
.caixa.dica h5{color:#1d4ed8}

/* tabela */
.tabela{width:100%;border-collapse:collapse;margin:0 0 26px;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;font-size:15px}
.tabela th{
  text-align:left;padding:11px 15px;background:#f7f7f5;border-bottom:1px solid var(--linha);
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);font-weight:650;
}
.tabela td{padding:11px 15px;border-bottom:1px solid var(--linha);color:var(--tinta-2)}
.tabela tr:last-child td{border-bottom:0}

/* print com marcacoes */
figure.print{margin:0 0 28px;padding-left:20px;margin-left:-20px}
/* overflow VISIVEL de proposito: a bolinha do numero fica fora da caixa, e com
   overflow:hidden ela era cortada rente a borda do print. O arredondamento sai
   na propria imagem. */
.moldura{
  position:relative;border:1px solid var(--linha-forte);border-radius:var(--r);
  background:var(--papel);box-shadow:var(--sombra);line-height:0;
}
.moldura img{width:100%;display:block;border-radius:calc(var(--r) - 1px)}
.alvo{position:absolute;border:2px solid var(--vermelho);border-radius:6px;pointer-events:none}
.alvo b{
  position:absolute;width:26px;height:26px;border-radius:99px;
  background:var(--vermelho);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700;line-height:1;
  /* anel branco: garante que a bolinha se descole do print, seja qual for o
     que estiver atras dela */
  box-shadow:0 0 0 2px #fff, 0 2px 7px rgba(0,0,0,.28);
}
/* quatro posicoes possiveis, sempre FORA da caixa. Quem escolhe e o
   posicionarBolinhas() no app.js, medindo o que ja esta na tela. */
.alvo.esq b{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.alvo.dir b{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.alvo.cima b{bottom:calc(100% + 7px);left:-3px}
.alvo.baixo b{top:calc(100% + 7px);left:-3px}
figcaption{font-size:14.5px;color:var(--tinta-2);margin-top:11px;line-height:1.55}
.legenda-alvos{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.legenda-alvos li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--tinta-2)}
.legenda-alvos i{
  flex:none;width:20px;height:20px;border-radius:99px;background:var(--vermelho);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;font-style:normal;margin-top:1px;
}

/* modo instrutor */
.instrutor{
  background:var(--escuro);color:#e7e9ec;border-radius:var(--r);padding:18px 20px;margin:0 0 28px;
}
.instrutor h5{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ff8a8a;font-weight:700}
.instrutor ul{margin:0 0 12px;padding-left:19px;font-size:15px;line-height:1.6}
.instrutor ul:last-child{margin-bottom:0}
.instrutor .rot{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b909a;font-weight:650;margin:0 0 5px}

/* rodape de navegacao */
.rodape{
  position:sticky;bottom:0;z-index:38;margin-top:44px;
  background:rgba(244,244,242,.94);backdrop-filter:blur(8px);border-top:1px solid var(--linha);
  display:flex;align-items:center;gap:14px;padding:12px 46px;
}
.rodape .meio{flex:1;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.rodape button{
  cursor:pointer;font:inherit;font-size:14.5px;font-weight:550;padding:9px 18px;border-radius:99px;
  border:1px solid var(--linha-forte);background:var(--papel);color:var(--tinta);transition:.15s;
}
.rodape button:hover:not(:disabled){border-color:var(--tinta-3)}
.rodape button:disabled{opacity:.34;cursor:default}
.rodape button.frente{background:var(--vermelho);border-color:transparent;color:#fff}
.rodape button.frente:hover{background:var(--vermelho-fundo)}
.rodape .concluir{background:var(--papel);color:var(--tinta-2)}
.rodape .concluir.feito{background:#dcfce7;border-color:#86efac;color:#15803d}

/* modo instrutor: aviso no topo */
.faixa-instrutor{
  background:var(--escuro);color:#fff;font-size:12.5px;padding:7px 24px;
  display:flex;gap:10px;align-items:center;letter-spacing:.02em;
}
.faixa-instrutor b{color:#ff8a8a}
.faixa-instrutor a{margin-left:auto;color:#a6abb5;font-size:12px}

@media (max-width:1000px){
  .corpo{grid-template-columns:1fr}
  .menu{position:static;max-height:none;border-bottom:1px solid var(--linha);padding:16px 20px;overflow:hidden}
  .menu ol{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .menu button{white-space:nowrap;width:auto}
  .folha{padding:26px 20px 0}
  /* os quatro itens do rodape nao cabem em 390px e o "Proximo" empurrava a
     pagina 28px. O titulo do meio e o que menos falta no celular. */
  .rodape{padding:10px 14px;gap:8px}
  .rodape .meio{display:none}
  .rodape button{padding:9px 13px;font-size:13.5px;white-space:nowrap}
  .rodape .concluir{overflow:hidden;text-overflow:ellipsis;max-width:44vw}
  .topo{flex-wrap:wrap;height:auto;padding:12px 20px;gap:12px}
  .topo .trilhas{margin-left:0;width:100%}
  .progresso{top:0;position:static}
}

/* print em tamanho real */
.moldura[data-abrir]{cursor:zoom-in}
.lupa{
  position:fixed;inset:0;z-index:90;background:rgba(21,23,28,.9);
  overflow:auto;padding:36px;cursor:zoom-out;
}
.lupa img{display:block;margin:0 auto;max-width:1440px;width:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lupa button{
  position:fixed;top:18px;right:22px;width:38px;height:38px;border-radius:99px;cursor:pointer;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;
}
.lupa button:hover{background:rgba(255,255,255,.26)}