/* =========================================================================
   trilha.css — o Passo a Pino (passo-a-pino.html)
   -------------------------------------------------------------------------
   Herda do style.css os tokens, o cabeçalho, o .btn, o .destaque e o fundo.
   Aqui fica o que é só dele: o mapa em zigue-zague, os nós, o balão da
   lição, o painel e o mascote.

   O CAMINHO É A ESTRELA DA PÁGINA, e o resto fala baixo: a cabeça é uma
   linha, o painel é um quadro só (e não uma pilha de cartões iguais), o
   futuro é uma faixa e um número. Os nomes das lições moram no balão que
   abre ao tocar a bolinha, e não escritos ao lado de cada uma.

   TODA CLASSE TEM O PREFIXO pp- (Passo a Pino). O jogo.css já tem .trilha
   (a trilha das medalhas), e nome genérico, cedo ou tarde, colide.

   O VERDE-ÁGUA DO LED (--pp-led) é a cor do PROGRESSO — lição feita, linha
   andada, XP —, em qualquer paleta: é o LED da marca, o do ícone da aba e
   do mascote. O azul da paleta fica para o que se clica agora (a da vez).

   Os nós têm o relevo de botão embaixo (que afunda ao apertar) e um brilho
   em cima: é o que diz, sem palavra, que a bolinha é para tocar.

   Sumário
     1. Cores e página
     2. A cabeça e a grade
     3. A unidade: a faixa e o futuro
     4. O caminho e os nós
     5. O balão da lição
     6. O painel
     7. O mascote
     8. Tela estreita
     9. A lição: o topo, a pergunta e o pé
    10. Os exercícios: opções, pares e a figura
    11. O fim da lição e o diálogo de sair
    12. O movimento entre um momento e outro
   ========================================================================= */


/* =========================================================================
   1. CORES E PÁGINA
   ========================================================================= */
.pagina-trilha {
  --pp-led: #2dd4bf;
  --pp-led-fundo: #0f766e;     /* o relevo embaixo do nó feito */
  --pp-led-tinta: #04342c;     /* o ✓ em cima do verde-água */
  --pp-led-texto: #0f766e;     /* o verde-água como LETRA: #2dd4bf sobre branco dá 1,8:1 */
  --pp-vez: var(--ac-500);
  --pp-vez-fundo: var(--ac-600);
  --pp-trancada: var(--bg-suave);
  --pp-trancada-fundo: var(--borda-forte);
  --pp-brilho: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 52%);
  --pp-ambar: #f59e0b;           /* o erro: âmbar, e não vermelho — errar faz parte */
  --pp-ambar-texto: #b45309;
}
.pagina-trilha [hidden] { display: none !important; }

.pp-pagina { padding: clamp(26px, 4.5vw, 48px) 0 72px; }
/* O caminho é uma coluna, e o painel anda junto dele: com o zoom afastado
   (o --max cresce, style.css) o painel ia parar na beira direita, longe do
   mapa. Aqui a página fica nos 1200 px de sempre, no meio. */
.pp-pagina > .container { max-width: min(var(--max), 1200px); }


/* =========================================================================
   2. A CABEÇA E A GRADE
   ========================================================================= */
.pp-cabeca { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 3.5vw, 36px); }
.pp-cabeca__mascote { flex: 0 0 auto; width: clamp(58px, 6.5vw, 76px); }
.pp-cabeca__mascote svg { display: block; width: 100%; height: auto; }
.pp-cabeca h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 2.85rem); line-height: 1.05; letter-spacing: -.035em; }
/* O degradê do .destaque só pinta dentro da caixa (a lição do "g" da capa). */
.pp-cabeca h1 .destaque { padding-bottom: .16em; margin-bottom: -.16em; }
.pp-cabeca__frase { margin: 6px 0 0; color: var(--texto-medio); font-size: 1.02rem; }

.pp-grade { display: grid; gap: 30px; align-items: start; }
@media (min-width: 980px) {
  .pp-grade { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
  .pp-painel { position: sticky; top: 92px; }
}
.pp-mapa { min-width: 0; max-width: 620px; width: 100%; margin-inline: auto; }


/* =========================================================================
   3. A UNIDADE: A FAIXA E O FUTURO
   ========================================================================= */
.pp-unidade__faixa {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 16px 16px 22px; border-radius: var(--raio);
  background: var(--pp-vez); color: #fff;
  box-shadow: 0 5px 0 var(--pp-vez-fundo);
}
.pp-unidade__titulo { flex: 1; min-width: 0; }
.pp-unidade__num { margin: 0; font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .72); }
.pp-unidade__nome { margin: 1px 0 0; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; }

.pp-unidade__andamento { display: flex; align-items: center; gap: 10px; }
.pp-unidade__conta { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .95rem; }
.pp-unidade__barra { width: 76px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.pp-unidade__barra i { display: block; height: 100%; border-radius: inherit; background: var(--pp-led); }

.pp-unidade__ficha {
  display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  transition: background-color var(--rapido), border-color var(--rapido);
}
.pp-unidade__ficha svg { width: 21px; height: 21px; }
.pp-unidade__ficha:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); }
.pp-unidade__ficha:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.pp-unidade--trancada .pp-unidade__faixa { background: var(--bg-suave); color: var(--texto-medio); box-shadow: 0 5px 0 var(--borda-forte); }
.pp-unidade--trancada .pp-unidade__nome { color: var(--texto-medio); }
/* O resto da faixa era branco sobre o azul, e no fundo claro sumia. */
.pp-unidade--trancada .pp-unidade__num { color: var(--texto-suave); }
.pp-unidade--trancada .pp-unidade__barra { background: var(--borda-forte); }
.pp-unidade--trancada .pp-unidade__ficha { color: var(--texto-medio); border-color: var(--borda-forte); }
.pp-unidade--trancada .pp-unidade__ficha:hover { background: var(--bg-elevado); border-color: var(--texto-suave); }
.pp-unidade--trancada .pp-unidade__ficha:focus-visible { outline-color: var(--ac-texto); }

/* O futuro: a próxima unidade, trancada, e o resto num número. */
.pp-futura {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--raio);
  border: 2px dashed var(--borda-forte); color: var(--texto-medio);
}
.pp-futura__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-suave); color: var(--texto-suave); }
.pp-futura__icone svg { width: 18px; height: 18px; }
.pp-futura__texto { flex: 1; min-width: 0; font-weight: 700; color: var(--texto); }
.pp-futura__num { display: block; font-size: .84rem; font-weight: 600; color: var(--texto-suave); }
.pp-futura__selo { padding: 4px 11px; border-radius: 99px; background: var(--bg-suave); color: var(--texto-suave); font-size: .8rem; font-weight: 700; }
.pp-futuro { margin: 14px 0 0; text-align: center; color: var(--texto-suave); font-size: .9rem; }


/* =========================================================================
   4. O CAMINHO E OS NÓS
   -------------------------------------------------------------------------
   O trilha.js põe cada nó (left/top no centro dele) e desenha a linha no
   <svg> de trás; a altura do caminho vem do número de nós.
   ========================================================================= */
/* 44 px em cima: com a primeira lição sendo a da vez, o "Começar" encostava
   na faixa da unidade. */
.pp-caminho { position: relative; width: min(420px, 100%); margin: 44px auto 34px; }
.pp-caminho__linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pp-caminho__resto,
.pp-caminho__andado { fill: none; stroke-linecap: round; stroke-dasharray: 1 12; }
.pp-caminho__resto { stroke: var(--borda-forte); stroke-width: 5; }
.pp-caminho__andado { stroke: var(--pp-led); stroke-width: 6; }

.pp-caminho__lista { list-style: none; margin: 0; padding: 0; }
.pp-no { position: absolute; width: 0; height: 0; }
.pp-no--aberto { z-index: 4; }

.pp-no__botao {
  position: absolute; left: -32px; top: -32px; width: 64px; height: 64px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background-image: var(--pp-brilho);
  cursor: pointer; font: inherit;
  transition: transform var(--rapido), box-shadow var(--rapido);
}
.pp-no__botao svg { width: 27px; height: 27px; }
.pp-no__botao:focus-visible { outline: 3px solid var(--ac-300); outline-offset: 5px; }
.pp-no__botao:active, .pp-no--aberto .pp-no__botao { transform: translateY(4px); }

.pp-no--feita .pp-no__botao { background-color: var(--pp-led); color: var(--pp-led-tinta); box-shadow: 0 6px 0 var(--pp-led-fundo); }
.pp-no--feita .pp-no__botao:active, .pp-no--feita.pp-no--aberto .pp-no__botao { box-shadow: 0 2px 0 var(--pp-led-fundo); }

.pp-no--davez .pp-no__botao {
  left: -38px; top: -38px; width: 76px; height: 76px;
  background-color: var(--pp-vez); color: #fff; box-shadow: 0 7px 0 var(--pp-vez-fundo);
}
.pp-no--davez .pp-no__botao svg { width: 31px; height: 31px; margin-left: 3px; }
.pp-no--davez .pp-no__botao:active, .pp-no--davez.pp-no--aberto .pp-no__botao { box-shadow: 0 3px 0 var(--pp-vez-fundo); }
/* A DA VEZ É O PRÓPRIO BOTÃO VIVO, e não um enfeite em volta dele. Houve um
   anel que crescia e sumia, e depois um arco de "corrente" girando; o
   usuário achou os dois feios — círculo em volta é enfeite, e o que chama
   o toque é o botão se mexer. Hoje, a cada 3,2 s, um reflexo de luz passa
   na diagonal pela superfície e o botão dá um pulinho: sobe, com o relevo
   embaixo esticando (a base fica no chão), e quica uma vez. O reflexo é o
   ::after do botão, recortado pelo overflow dele; a sombra do relevo não é
   recortada. O pulo usa a propriedade `translate`, e não `transform`, para
   não brigar com o afundar do :active. */
.pp-no--davez .pp-no__botao { overflow: hidden; }
.pp-no--davez .pp-no__botao::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .42) 47%, rgba(255, 255, 255, .12) 55%, transparent 70%);
  transform: translateX(-130%);
}

.pp-no--trancada .pp-no__botao { background-color: var(--pp-trancada); background-image: none; color: var(--texto-suave); box-shadow: 0 6px 0 var(--pp-trancada-fundo); }
.pp-no--trancada .pp-no__botao:active, .pp-no--trancada.pp-no--aberto .pp-no__botao { box-shadow: 0 2px 0 var(--pp-trancada-fundo); }

.pp-no--projeto .pp-no__botao { border-radius: 20px; }
.pp-no--projeto.pp-no--trancada .pp-no__botao { color: color-mix(in srgb, var(--ambar) 75%, var(--texto-suave)); }

/* O "Começar" em cima da da vez: as cores invertidas do tema, para
   destacar nos dois. */
.pp-no__balao {
  /* --balao-x: o trilha.js afasta o balão do nó de cima nas curvas fechadas. */
  position: absolute; left: var(--balao-x, 0px); top: -84px; transform: translateX(-50%);
  padding: 6px 13px; border-radius: 10px; white-space: nowrap;
  background: var(--texto); color: var(--bg); font-size: .82rem; font-weight: 800; letter-spacing: .01em;
  pointer-events: none;
}
.pp-no__balao::after {
  content: ''; position: absolute; left: calc(50% - var(--balao-x, 0px)); bottom: -5px; width: 11px; height: 11px;
  background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; z-index: -1;
}
.pp-no--aberto .pp-no__balao { display: none; }
/* Sem espaço em cima (celular, a da vez na beira): ao lado do nó, na altura
   dele, com a seta apontando para ele. */
.pp-no--balao-esq .pp-no__balao,
.pp-no--balao-dir .pp-no__balao { top: -16px; transform: none; }
.pp-no--balao-esq .pp-no__balao { left: auto; right: 50px; }
.pp-no--balao-dir .pp-no__balao { left: 50px; }
.pp-no--balao-esq .pp-no__balao::after,
.pp-no--balao-dir .pp-no__balao::after { top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }
.pp-no--balao-esq .pp-no__balao::after { left: auto; right: -5px; }
.pp-no--balao-dir .pp-no__balao::after { left: -5px; }

/* O mascote do lado de dentro da curva: com o nó à direita do meio, à
   esquerda dele; nos outros, à direita. */
.pp-no__mascote { position: absolute; top: -40px; left: 58px; width: 64px; pointer-events: none; }
.pp-no--direita .pp-no__mascote { left: auto; right: 58px; }
.pp-no__mascote svg { display: block; width: 100%; height: auto; }


/* =========================================================================
   5. O BALÃO DA LIÇÃO
   -------------------------------------------------------------------------
   Abre embaixo da bolinha tocada; o trilha.js põe a posição e a da seta.
   ========================================================================= */
.pp-balao {
  position: absolute; z-index: 5;
  padding: 16px 18px 18px; border-radius: 18px;
  background: var(--bg-elevado); border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-3);
}
.pp-balao__seta {
  position: absolute; top: -8px; width: 15px; height: 15px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-left: 1px solid var(--borda-forte); border-top: 1px solid var(--borda-forte); border-radius: 3px 0 0 0;
}
.pp-balao__rotulo { margin: 0; font-size: .82rem; font-weight: 700; color: var(--pp-led-texto); }
.pp-balao--trancada .pp-balao__rotulo { color: var(--texto-suave); }
.pp-balao--davez .pp-balao__rotulo { color: var(--ac-texto); }
.pp-balao__nome { margin: 2px 0 14px; font-size: 1.08rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--texto); }
.pp-balao__acao { width: 100%; justify-content: center; }
.pp-balao__trava { margin: -6px 0 0; color: var(--texto-medio); font-size: .92rem; }
.pp-balao__nota { margin: 10px 0 0; color: var(--texto-medio); font-size: .86rem; text-align: center; }


/* =========================================================================
   6. O PAINEL
   -------------------------------------------------------------------------
   Um quadro só, com duas partes: o XP e o revisar. O apagar fica fora, em
   letra pequena: é um direito de quem divide o computador, não um destaque.
   ========================================================================= */
.pp-painel { display: grid; gap: 12px; }
.pp-quadro {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--bg-elevado); box-shadow: var(--sombra-1);
}
.pp-quadro > section { padding: 18px 20px; }
.pp-quadro > section + section { border-top: 1px solid var(--borda); }
.pp-quadro__titulo { margin: 0; font-size: .9rem; font-weight: 600; color: var(--texto-medio); }

.pp-xp__valor { margin: 2px 0 0; font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.pp-xp__valor small { font-size: 1.05rem; font-weight: 800; letter-spacing: 0; color: var(--pp-led-texto); }
.pp-xp__total { margin: 2px 0 0; color: var(--texto-suave); font-size: .88rem; font-variant-numeric: tabular-nums; }

.pp-praticar__motivo { margin: 3px 0 14px; color: var(--texto-medio); font-size: .92rem; }
.pp-praticar__botao { width: 100%; justify-content: center; }
.pp-praticar__botao:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

/* A conta, no alto do quadro: só quando há o que dizer dela (quem entrou
   mora no cabeçalho, style.css, conta-menu). */
.pp-conta__estado { margin: 4px 0 0; color: var(--texto-suave); font-size: .82rem; }
.pp-conta__estado--falhou { color: var(--erro, #e5484d); }
.pp-conta__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pp-conta__link {
  padding: 0; border: 0; background: none; color: var(--texto-suave);
  font: inherit; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pp-conta__link:hover { color: var(--texto); }
.pp-conta__levar { margin-top: 12px; padding: 12px; border-radius: var(--raio-sm); background: var(--bg-suave); font-size: .88rem; }
.pp-conta__levar p { margin: 0 0 10px; color: var(--texto-medio); }
/* O X da janela de entrar (o do jogo mora no jogo.css, que esta página não carrega). */
.pp-conta-fechar {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: transparent; color: var(--texto-suave); cursor: pointer;
}
.pp-conta-fechar:hover { color: var(--texto); border-color: var(--borda-forte); }
.pp-conta-fechar svg { width: 15px; height: 15px; }

.pp-apagar {
  justify-self: start; margin: 0 4px; padding: 0; border: 0; background: none;
  color: var(--texto-suave); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pp-apagar:hover { color: var(--texto); }


/* =========================================================================
   7. O MASCOTE
   -------------------------------------------------------------------------
   O desenho é do mascote.js; aqui só o movimento, e só para quem não pediu
   menos movimento.
   ========================================================================= */
.pp-mascote { overflow: visible; }
.pp-m-olhos { transform-box: fill-box; transform-origin: center; }
.pp-m-corpo { transform-box: fill-box; transform-origin: 50% 100%; }
/* O brilho respira de TAMANHO, e não de opacidade: a opacidade de .16 é a
   do próprio desenho, e animá-la a deixava cheia — um disco, e não luz. */
.pp-m-brilho { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .pp-mascote--parado .pp-m-olhos { animation: ppPiscar 5.2s infinite; }
  .pp-mascote--acerto .pp-m-brilho { animation: ppBrilho 1.6s ease-in-out infinite; }
  .pp-mascote--erro .pp-m-faisca { animation: ppMauContato 1.1s steps(1) infinite; }
  .pp-mascote--comemora .pp-m-corpo { animation: ppPulo .9s cubic-bezier(.34, 1.4, .5, 1) infinite alternate; }
  .pp-no--davez .pp-no__botao { animation: ppConvite 3.2s ease-in-out infinite; }
  .pp-no--davez .pp-no__botao::after { animation: ppReflexo 3.2s ease-in-out infinite; }
  /* Aberto ou apertado, o botão para: o pulo brigaria com o afundar. */
  .pp-no--davez .pp-no__botao:active, .pp-no--davez.pp-no--aberto .pp-no__botao,
  .pp-no--davez.pp-no--aberto .pp-no__botao::after { animation: none; }
  .pp-no__balao { animation: ppFlutua 1.9s ease-in-out infinite; }
  .pp-balao { animation: ppAbre .16s ease-out; }
}
@keyframes ppPiscar { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes ppBrilho { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.05); } }
@keyframes ppMauContato { 0%, 40%, 60% { opacity: 1; } 30%, 50%, 80% { opacity: 0; } }
@keyframes ppPulo { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes ppConvite {
  0%, 50%, 100% { translate: 0 0;    box-shadow: 0 7px 0 var(--pp-vez-fundo); }
  60%           { translate: 0 -7px; box-shadow: 0 14px 0 var(--pp-vez-fundo); }
  70%           { translate: 0 0;    box-shadow: 0 7px 0 var(--pp-vez-fundo); }
  77%           { translate: 0 -3px; box-shadow: 0 10px 0 var(--pp-vez-fundo); }
  84%           { translate: 0 0;    box-shadow: 0 7px 0 var(--pp-vez-fundo); }
}
@keyframes ppReflexo { 0%, 6% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
/* O "Começar" sobe e desce de leve; o translateX é o que o centra. */
@keyframes ppFlutua { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@keyframes ppAbre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* =========================================================================
   8. TELA ESTREITA
   -------------------------------------------------------------------------
   O Passo a Pino é para computador, mas o mapa não pode quebrar num
   celular: o painel desce, o zigue-zague estreita (o trilha.js mede) e o
   mascote da da vez sai — no estreito ele cairia em cima da linha.
   ========================================================================= */
@media (max-width: 560px) {
  .pp-no__mascote { display: none; }
  .pp-unidade__faixa { padding-left: 18px; gap: 12px; }
  .pp-unidade__barra { width: 48px; }
  .pp-unidade__nome { font-size: 1.15rem; }
}


/* =========================================================================
   9. A LIÇÃO: O TOPO, A PERGUNTA E O PÉ
   -------------------------------------------------------------------------
   Durante a lição o resto do site some (body.pp-em-licao): a tela é a
   pergunta e o pé. O pé é uma faixa de ponta a ponta, que vira verde ou
   âmbar depois do Verificar.
   ========================================================================= */
.pp-em-licao .topo,
.pp-em-licao .rodape,
.pp-em-licao #telaMapa { display: none; }

/* O overflow-x corta o cabo que entra na placa pela esquerda: ele nasce fora
   do desenho, e no celular empurraria a página para o lado. */
.pp-licao {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto; overflow-x: clip;
}
.pp-l-topo, .pp-l-palco { width: min(780px, 100% - 32px); margin-inline: auto; }

.pp-l-topo { display: flex; align-items: center; gap: 16px; padding: 22px 0 8px; }
.pp-l-sair, .pp-l-som {
  display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--texto-suave); cursor: pointer;
  transition: color var(--rapido), background-color var(--rapido);
}
.pp-l-sair svg, .pp-l-som svg { width: 24px; height: 24px; }
.pp-l-sair:hover, .pp-l-som:hover { color: var(--texto); background: var(--bg-suave); }
.pp-l-sair:focus-visible, .pp-l-som:focus-visible { outline: 3px solid var(--ac-300); outline-offset: 2px; }
.pp-l-som__risco { display: none; }
.pp-l-som--mudo .pp-l-som__ondas { display: none; }
.pp-l-som--mudo .pp-l-som__risco { display: inline; }

.pp-l-barra { flex: 1; height: 16px; border-radius: 99px; background: var(--bg-suave); overflow: hidden; }
.pp-l-barra i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--pp-led) linear-gradient(180deg, rgba(255, 255, 255, .35) 0 32%, transparent 32%);
  background-size: 100% 100%;
  transition: width .45s cubic-bezier(.3, .9, .3, 1);
}

/* Tudo pelo meio da tela: a pergunta, as opções, os pares e a figura. */
.pp-l-palco { padding: clamp(18px, 5vh, 54px) 0 32px; text-align: center; }
.pp-l-instrucao { margin: 0 0 6px; color: var(--texto-suave); font-size: .95rem; font-weight: 600; }
.pp-l-pergunta { margin: 0; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.22; letter-spacing: -.02em; }
.pp-l-pergunta:focus { outline: none; }
.pp-l-area { margin-top: clamp(20px, 3.5vh, 32px); }


/* ---- A tela dividida (E4): a bancada à esquerda, a pergunta à direita ----
   O quadro da bancada nunca sai do painel (mover um iframe o recarrega);
   o código é uma aba POR CIMA dele, para o quadro não mudar de tamanho. */
.pp-licao [hidden] { display: none !important; }
.pp-licao--dividida .pp-l-palco {
  width: min(1180px, 100% - 32px);
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: 28px; align-items: start; padding-top: clamp(12px, 3vh, 32px);
}
.pp-l-painel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid var(--borda-forte); border-radius: 18px; background: var(--bg-elevado);
}
.pp-l-quadro { position: relative; height: min(64vh, 580px); min-height: 300px; }
.pp-l-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.pp-l-quadro__espera { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--texto-suave); font-weight: 600; }

.pp-l-abas { display: flex; gap: 4px; height: 46px; padding: 6px 8px 0; border-bottom: 2px solid var(--borda-forte); }
.pp-l-aba {
  padding: 0 16px; border: 0; border-radius: 10px 10px 0 0; background: none; cursor: pointer;
  color: var(--texto-suave); font: inherit; font-size: .92rem; font-weight: 700;
}
.pp-l-aba:hover { color: var(--texto); background: var(--bg-suave); }
.pp-l-aba[aria-selected="true"] { color: var(--texto); background: var(--bg-suave); box-shadow: inset 0 -3px 0 var(--ac-400); }
.pp-l-aba:focus-visible { outline: 3px solid var(--ac-300); outline-offset: -3px; }

/* O código: sempre escuro, como o editor do laboratório. */
.pp-l-codigo {
  margin: 0; padding: 14px 18px; overflow: auto; text-align: left; tab-size: 2;
  background: #0f172a; color: #e2e8f0; font: 500 .95rem/1.6 'JetBrains Mono', Consolas, monospace;
}
.pp-l-painel:not(.pp-l-painel--so-codigo) .pp-l-codigo { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; }
.pp-l-painel--so-codigo .pp-l-codigo { max-height: min(62vh, 560px); }
.pp-l-codigo:focus-visible { outline: 3px solid var(--ac-300); outline-offset: -3px; }
.pp-c-com { color: #94a3b8; }
.pp-opcao__texto--codigo { font-family: 'JetBrains Mono', Consolas, monospace; font-size: .95rem; }
.pp-c-chave { color: #5eead4; }
.pp-c-num { color: #fbbf24; }

/* O gesto do exercício com bancada, embaixo da pergunta. */
.pp-gesto { max-width: 420px; margin: 4px auto 0; color: var(--texto-medio); font-size: .96rem; line-height: 1.5; }

/* O pé fica grudado embaixo: com a figura da placa a pergunta passa da
   altura da tela, e a faixa do resultado não pode ficar fora dela. */
.pp-l-pe { position: sticky; bottom: 0; z-index: 2; border-top: 2px solid var(--borda); background: var(--bg); transition: background-color var(--suave), border-color var(--suave); }
.pp-l-pe__dentro {
  width: min(780px, 100% - 32px); margin-inline: auto; min-height: 112px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
}
.pp-l-retorno { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pp-l-retorno__mascote { flex: 0 0 auto; width: 66px; }
.pp-l-retorno__mascote svg { display: block; width: 100%; height: auto; }
.pp-l-retorno__texto strong { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.pp-l-retorno__texto span { display: block; margin-top: 2px; color: var(--texto); font-size: .98rem; line-height: 1.45; }
.pp-l-acao { flex: 0 0 auto; min-width: 190px; justify-content: center; }

.pp-l-pe--certo { background: color-mix(in srgb, var(--pp-led) 14%, var(--bg)); border-top-color: color-mix(in srgb, var(--pp-led) 55%, transparent); }
.pp-l-pe--certo .pp-l-retorno__texto strong { color: var(--pp-led-texto); }
.pp-l-pe--certo .pp-l-acao { background: var(--pp-led); color: var(--pp-led-tinta); box-shadow: none; }
.pp-l-pe--errado { background: color-mix(in srgb, var(--pp-ambar) 13%, var(--bg)); border-top-color: color-mix(in srgb, var(--pp-ambar) 55%, transparent); }
.pp-l-pe--errado .pp-l-retorno__texto strong { color: var(--pp-ambar-texto); }
.pp-l-pe--errado .pp-l-acao { background: var(--pp-ambar); color: #3b2600; box-shadow: none; }


/* =========================================================================
   10. OS EXERCÍCIOS: OPÇÕES, PARES E A FIGURA
   -------------------------------------------------------------------------
   As opções são botões com relevo embaixo (o mesmo dos nós do mapa), a
   tecla do atalho à esquerda. Escolhida em azul; depois do Verificar, a
   certa em verde-água e a errada em âmbar.
   ========================================================================= */
.pp-opcoes { display: grid; gap: 12px; max-width: 640px; margin-inline: auto; }
.pp-opcoes--vf { grid-template-columns: 1fr 1fr; max-width: 520px; }

.pp-opcao, .pp-par {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--borda-forte); border-bottom-width: 5px;
  background: var(--bg-elevado); color: var(--texto);
  font: inherit; font-size: 1.02rem; font-weight: 600; line-height: 1.35; text-align: left;
  transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.pp-opcao:hover:not(:disabled), .pp-par:hover:not(:disabled) { background: var(--bg-suave); }
.pp-opcao:active:not(:disabled), .pp-par:active:not(:disabled) { transform: translateY(2px); }
.pp-opcao:focus-visible, .pp-par:focus-visible { outline: 3px solid var(--ac-300); outline-offset: 2px; }
.pp-opcao:disabled, .pp-par:disabled { cursor: default; }

.pp-opcao__tecla {
  display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  border: 2px solid var(--borda-forte); color: var(--texto-suave); font-size: .82rem; font-weight: 800;
}
.pp-opcoes--vf .pp-opcao { justify-content: center; padding-block: 20px; font-size: 1.08rem; }

.pp-opcao--escolhida, .pp-par--marcado {
  border-color: var(--ac-400); background: color-mix(in srgb, var(--ac-400) 16%, var(--bg-elevado));
}
.pp-opcao--escolhida .pp-opcao__tecla { border-color: var(--ac-400); color: var(--ac-texto); }
.pp-opcao--certa { border-color: var(--pp-led); background: color-mix(in srgb, var(--pp-led) 15%, var(--bg-elevado)); }
.pp-opcao--certa .pp-opcao__tecla { border-color: var(--pp-led); color: var(--pp-led-texto); }
.pp-opcao--errada { border-color: var(--pp-ambar); background: color-mix(in srgb, var(--pp-ambar) 13%, var(--bg-elevado)); }
.pp-opcao--errada .pp-opcao__tecla { border-color: var(--pp-ambar); color: var(--pp-ambar-texto); }

/* ---- Os exercícios de código (completar, ordenar, escrever) ----
   O código é sempre escuro, como o editor do laboratório, nos dois temas.
   A lacuna é uma caixinha tracejada que fica cheia (azul) com a ficha, e
   verde-água ou âmbar depois do Verificar. */
.pp-cod {
  max-width: 640px; margin: 0 auto 14px; padding: 14px 18px; border-radius: 14px; overflow-x: auto;
  background: #0f172a; color: #e2e8f0; text-align: left; white-space: pre; tab-size: 2;
  font: 500 .95rem/1.75 'JetBrains Mono', Consolas, monospace;
}
.pp-cod--antes { margin-bottom: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.pp-cod--depois { margin-top: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.pp-cod__lacuna, .pp-cod__entrada {
  min-width: 7ch; margin: 0 2px; padding: 1px 8px; border: 2px dashed #64748b; border-radius: 8px;
  background: #1e293b; color: #fde68a; font: inherit; line-height: 1.45; vertical-align: baseline;
}
.pp-cod__lacuna { cursor: pointer; }
.pp-cod__lacuna:disabled { cursor: default; }
.pp-cod__lacuna--cheia { border-style: solid; border-color: #60a5fa; }
.pp-cod__lacuna--certa, .pp-cod__entrada--certa { border-style: solid; border-color: var(--pp-led); color: #99f6e4; }
.pp-cod__lacuna--errada, .pp-cod__entrada--errada { border-style: solid; border-color: var(--pp-ambar); }
.pp-cod__entrada { width: min(34ch, 100%); }
.pp-cod__lacuna:focus-visible, .pp-cod__entrada:focus { outline: 3px solid var(--ac-300); outline-offset: 2px; border-style: solid; }

.pp-fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px; margin-inline: auto; }
.pp-ficha { width: auto; padding: 10px 14px; }
.pp-ficha__texto { font: 600 .98rem 'JetBrains Mono', Consolas, monospace; }
.pp-ficha--usada { opacity: .38; }

.pp-linhas { display: grid; gap: 8px; max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.pp-linha { display: flex; align-items: stretch; gap: 6px; }
.pp-linha__texto {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; cursor: grab; text-align: left; white-space: pre;
  border: 2px solid var(--borda-forte); border-bottom-width: 4px; background: var(--bg-elevado); color: var(--texto);
  font: 600 .95rem 'JetBrains Mono', Consolas, monospace; overflow-x: auto;
}
.pp-linha__texto:disabled { cursor: default; }
.pp-linha__mover {
  flex: 0 0 auto; width: 40px; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--borda-forte); background: var(--bg-elevado); color: var(--texto-medio); font-size: .9rem;
}
.pp-linha__mover:hover:not(:disabled) { background: var(--bg-suave); color: var(--texto); }
.pp-linha__mover:disabled { opacity: .35; cursor: default; }
.pp-linha__texto:focus-visible, .pp-linha__mover:focus-visible { outline: 3px solid var(--ac-300); outline-offset: 2px; }
.pp-linhas--certa .pp-linha__texto { border-color: var(--pp-led); }
.pp-linhas--errada .pp-linha__texto { border-color: var(--pp-ambar); }

/* Entre as colunas fica o vão dos fios: cada par ligado ganha um jumper. */
.pp-pares { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; gap: 12px 0; max-width: 700px; margin-inline: auto; }
.pp-pares__coluna { display: grid; gap: 12px; align-content: start; }
.pp-pares__coluna + .pp-pares__coluna { grid-column: 3; }
.pp-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pp-fio__corrente { opacity: 0; stroke-dasharray: .02 .07; }
.pp-pares--corrente .pp-fio__corrente { opacity: .9; }
.pp-par { justify-content: center; text-align: center; min-height: 64px; }
.pp-par--feito {
  border-color: color-mix(in srgb, var(--pp-fio, var(--pp-led)) 70%, var(--borda));
  background: color-mix(in srgb, var(--pp-fio, var(--pp-led)) 10%, var(--bg-elevado)); color: var(--texto-medio);
}
.pp-par--trocado { border-color: var(--pp-ambar); }

.pp-figura { max-width: 600px; margin-inline: auto; }
/* A altura manda: a placa inteira cabe na tela junto da pergunta e do pé. */
.pp-figura__svg { display: block; margin-inline: auto; width: auto; max-width: 100%; height: auto; max-height: 48vh; overflow: visible; }
.pp-regiao { cursor: pointer; outline: none; }
.pp-regiao__area {
  fill: color-mix(in srgb, var(--ac-300) 6%, transparent);
  stroke: var(--ac-300); stroke-width: 2.5; stroke-dasharray: 6 5;
  /* O traço em pixels da tela: o resistor e o LED são figuras pequenas,
     mostradas umas quatro vezes maiores, e o contorno engrossava junto. */
  vector-effect: non-scaling-stroke;
  transition: fill var(--rapido), stroke var(--rapido);
}
.pp-regiao:hover .pp-regiao__area { fill: color-mix(in srgb, var(--ac-300) 22%, transparent); }
.pp-regiao:focus-visible .pp-regiao__area { stroke: #ffffff; stroke-width: 4; stroke-dasharray: none; }
.pp-regiao--escolhida .pp-regiao__area { fill: color-mix(in srgb, var(--ac-400) 34%, transparent); stroke: var(--ac-300); stroke-width: 4; stroke-dasharray: none; }
.pp-regiao--certa .pp-regiao__area { fill: color-mix(in srgb, var(--pp-led) 34%, transparent); stroke: var(--pp-led); stroke-width: 4; stroke-dasharray: none; }
.pp-regiao--errada .pp-regiao__area { fill: color-mix(in srgb, var(--pp-ambar) 30%, transparent); stroke: var(--pp-ambar); stroke-width: 4; stroke-dasharray: none; }


/* ---- A reação do acerto (reacoes.js) ----
   O desenho é o estado FINAL (o cabo encaixado, o LED aceso); o movimento,
   lá embaixo, só para quem não pediu menos, parte de longe e chega nele. */
.pp-reacao { pointer-events: none; }
.pp-opcoes--resolvida { grid-template-columns: 1fr; max-width: 640px; }
.pp-opcoes--resolvida .pp-opcao:not(.pp-opcao--certa) { display: none; }
.pp-figura--resolvida .pp-regiao:not(.pp-regiao--certa) { display: none; }
.pp-opcoes--vf.pp-opcoes--resolvida { max-width: 300px; }
.pp-r-onda { opacity: 0; }
.pp-r-vez { opacity: .6; }

.pp-cena {
  max-width: 400px; margin: 22px auto 0; padding: 10px 14px; border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--pp-led) 45%, var(--borda)); background: var(--bg-elevado);
  scroll-margin-bottom: 150px;
}
.pp-cena__svg { display: block; width: 100%; height: auto; max-height: 30vh; overflow: visible; }
/* As cenas com a placa inteira precisam de mais altura para os detalhes aparecerem. */
.pp-cena[data-cena="placa-liga"], .pp-cena[data-cena="tres-gnd"] { max-width: 480px; }
.pp-cena[data-cena="placa-liga"] .pp-cena__svg, .pp-cena[data-cena="tres-gnd"] .pp-cena__svg { max-height: 36vh; }
.pp-cena__texto { fill: var(--texto); font-family: inherit; }
.pp-cena__fio { stroke: var(--texto-suave); }
.pp-cena__guia { stroke: var(--borda-forte); fill: none; }

/* =========================================================================
   11. O FIM DA LIÇÃO E O DIÁLOGO DE SAIR
   ========================================================================= */
.pp-fim {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px 16px; text-align: center;
}
.pp-fim__mascote { width: 150px; }
.pp-fim__mascote svg { display: block; width: 100%; height: auto; }
.pp-fim__titulo { margin: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.03em; }
.pp-fim__titulo:focus { outline: none; }

.pp-fim__numeros { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 6px 0 0; }
.pp-fim__numero {
  min-width: 118px; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--borda-forte); background: var(--bg-elevado);
}
.pp-fim__numero dt { padding: 5px 10px; background: var(--borda-forte); color: var(--texto); font-size: .82rem; font-weight: 800; }
.pp-fim__numero dd { margin: 0; padding: 12px 10px 14px; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-fim__numero--xp { border-color: var(--pp-led); }
.pp-fim__numero--xp dt { background: var(--pp-led); color: var(--pp-led-tinta); }
.pp-fim__numero--xp dd { color: var(--pp-led-texto); }

.pp-fim__novos { max-width: 560px; color: var(--texto-medio); font-size: .92rem; }
.pp-fim__novos p { margin: 0 0 8px; }
.pp-fim__novos ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pp-fim__novos li { padding: 6px 12px; border-radius: 99px; background: var(--bg-elevado); border: 1px solid var(--borda-forte); color: var(--texto); font-size: .86rem; font-weight: 600; }
.pp-fim__continuar { min-width: 220px; justify-content: center; margin-top: 8px; }

.pp-fim__confete { position: absolute; inset: 0; pointer-events: none; }
.pp-fim__confete i {
  position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 2px;
}
@keyframes ppConfete {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to   { transform: translate(var(--lado), 92vh) rotate(var(--giro)); opacity: 0; }
}

.pp-dialogo {
  width: min(420px, 100% - 32px); padding: 26px 26px 22px; border-radius: 20px;
  border: 1px solid var(--borda-forte); background: var(--bg-elevado); color: var(--texto);
  box-shadow: var(--sombra-4);
}
.pp-dialogo::backdrop { background: rgba(4, 8, 16, .62); }
.pp-dialogo h2 { margin: 0 0 6px; font-size: 1.3rem; }
.pp-dialogo p { margin: 0 0 20px; color: var(--texto-medio); }
.pp-dialogo__botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-dialogo__botoes .btn { flex: 1; justify-content: center; }
.pp-btn--neutro { background: none; color: var(--texto); border: 2px solid var(--borda-forte); box-shadow: none; }
.pp-btn--neutro:hover { background: var(--bg-suave); color: var(--texto); box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  .pp-par--trocado { animation: ppTremer .38s ease-in-out; }

  /* As reações do acerto. O atraso de cada uma vem do desenho (--atraso):
     primeiro o cabo encaixa, depois a placa liga. */
  .pp-r-entra { animation: ppREntra .8s cubic-bezier(.2, .75, .3, 1) var(--atraso, 0s) both; }
  .pp-r-acende, .pp-r-aperta, .pp-r-onda, .pp-r-salta { transform-box: fill-box; transform-origin: center; }
  .pp-r-acende { animation: ppRAcende .5s ease-out var(--atraso, 0s) both; }
  .pp-r-pisca { animation: ppRPisca 1s steps(1) var(--atraso, 0s) infinite both; }
  .pp-r-pisca-rapido { animation: ppRPisca .28s steps(1) var(--atraso, 0s) 4 both; }
  .pp-r-aperta { animation: ppRAperta .5s ease var(--atraso, .1s) both; }
  .pp-r-onda { animation: ppROnda .7s ease-out .15s both; }
  .pp-r-vez { animation: ppRVez 1.2s ease var(--atraso, 0s) both; }
  .pp-r-corre { animation: ppRCorre .9s linear var(--atraso, 0s) infinite; }
  .pp-r-pulsa { animation: ppRPulsa 1.4s ease-in-out infinite; }
  .pp-r-salta { animation: ppRSalta .45s cubic-bezier(.3, 1.6, .5, 1) var(--atraso, 0s) both; }
  .pp-r-viaja { animation: ppRViaja .8s ease-in-out var(--atraso, 0s) both; }
  .pp-r-escreve { animation: ppREscreve 1s steps(23) .2s both; }
  .pp-r-desenha { stroke-dasharray: 1; animation: ppRDesenha 1.6s linear .2s both; }
  .pp-cena { animation: ppCenaEntra .35s ease-out both; }
  /* Os fios dos pares: cada um se estende ao nascer, e a corrente corre no acerto. */
  .pp-fio__borda, .pp-fio__linha { stroke-dasharray: 1; animation: ppRDesenha .45s ease-out both; }
  .pp-pares--corrente .pp-fio__corrente { animation: ppRCorreFio 1.1s linear infinite; }
  /* O trilha-licao.js nem cria o confete com menos movimento; isto é a rede. */
  .pp-fim__confete i { animation: ppConfete 1.7s cubic-bezier(.2, .6, .4, 1) forwards; }
}
@keyframes ppREntra {
  0%   { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; }
  30%  { opacity: 1; }
  78%  { transform: translate(calc(var(--dx, 0px) * -.04), calc(var(--dy, 0px) * -.04)); }
  100% { transform: none; }
}
@keyframes ppRAcende { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ppRPisca { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes ppRAperta { 0%, 100% { transform: none; } 35% { transform: scale(.8); } }
@keyframes ppROnda { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
@keyframes ppRVez { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .6; } }
@keyframes ppRCorre { to { stroke-dashoffset: -16; } }
@keyframes ppRCorreFio { to { stroke-dashoffset: -.09; } }
@keyframes ppRPulsa { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ppRSalta { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes ppRViaja { 0% { transform: translate(var(--dx, 0px), 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: none; } }
@keyframes ppREscreve { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ppRDesenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ppCenaEntra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ppTremer { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (max-width: 640px) {
  .pp-l-pe__dentro { flex-direction: column; align-items: stretch; gap: 14px; }
  .pp-l-acao { width: 100%; }
  .pp-l-retorno__mascote { width: 52px; }
  .pp-opcoes--vf { grid-template-columns: 1fr; }
  .pp-pares { grid-template-columns: 1fr 44px 1fr; }
}

/* Tela estreita: a bancada em cima, a pergunta embaixo. */
@media (max-width: 900px) {
  .pp-licao--dividida .pp-l-palco { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pp-l-quadro { height: 340px; }
}


/* =========================================================================
   12. O MOVIMENTO ENTRE UM MOMENTO E OUTRO
   -------------------------------------------------------------------------
   As reações da seção 10 são o prêmio do acerto; isto aqui é a costura: a
   lição que sobe ao abrir, a pergunta seguinte que entra pela direita, a
   opção que sacode no erro e dá um pulinho no acerto, a faixa que sobe com
   o mascote, a barra que brilha ao andar, o fim que conta o XP e o mapa
   que destrava a próxima lição.

   TUDO É SÓ DESENHO. O estado já mudou quando a animação começa (o JS põe
   a classe DEPOIS de mudar), então o clique, o teclado e as baterias nunca
   esperam por ela. O desenho parado é o estado final, como nas reações:
   com menos movimento nada daqui roda, e cada tela aparece pronta — o
   cadeado que some já nasce invisível, o trecho novo da linha já nasce
   inteiro.
   ========================================================================= */

/* O brilho que corre pela barra quando ela anda. */
.pp-l-barra i { position: relative; }
.pp-l-barra i::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
}

/* O cadeado por cima da lição que acabou de abrir: some no começo da festa. */
.pp-no__cadeado {
  position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; z-index: 1;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none; opacity: 0;
  background-color: var(--pp-trancada); color: var(--texto-suave); box-shadow: 0 7px 0 var(--pp-trancada-fundo);
}
.pp-no__cadeado svg { width: 27px; height: 27px; }
/* A onda em volta da lição que acabou de ser feita. */
.pp-no--acabou::before {
  content: ''; position: absolute; left: -32px; top: -32px; width: 64px; height: 64px;
  border-radius: 50%; border: 3px solid var(--pp-led); opacity: 0; pointer-events: none;
}
/* O trecho novo da linha: a máscara desenha do nó feito até o seguinte. */
.pp-caminho__mascara { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* ---- As telas ---- */
  .pp-licao--chega { animation: ppChega .38s cubic-bezier(.2, .8, .3, 1); }
  .pp-pagina--volta { animation: ppVolta .4s ease-out; }
  .pp-l-entra { animation: ppEntraDaDireita .34s cubic-bezier(.2, .8, .3, 1); }
  .pp-l-surge { animation: ppSurge .32s ease-out; }

  /* ---- A resposta ---- */
  .pp-opcao--escolhida.pp-opcao--certa { animation: ppAcertou .5s cubic-bezier(.3, 1.5, .5, 1); }
  .pp-opcao--errada { animation: ppTremer .4s ease-in-out; }
  .pp-regiao--errada .pp-regiao__area { animation: ppRegiaoErra .7s steps(1); }

  /* ---- A faixa: o mascote salta, o texto sobe, e no acerto o Continuar faísca ---- */
  .pp-l-pe--certo .pp-l-retorno__mascote,
  .pp-l-pe--errado .pp-l-retorno__mascote { animation: ppMascoteSalta .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .pp-l-pe--certo .pp-l-retorno__texto,
  .pp-l-pe--errado .pp-l-retorno__texto { animation: ppTextoSobe .32s ease-out .08s both; }
  .pp-l-pe--certo .pp-l-acao { animation: ppFaisca .75s ease-out .12s; }
  .pp-l-barra--avanca i::after { animation: ppBrilhoBarra .8s ease-out .2s; }

  /* ---- O fim: o mascote entra, e o resto em fila ---- */
  .pp-fim__mascote { animation: ppFimMascote .6s cubic-bezier(.3, 1.5, .5, 1) both; }
  .pp-fim__titulo { animation: ppTextoSobe .4s ease-out .2s both; }
  .pp-fim__numero { animation: ppSalta .42s cubic-bezier(.3, 1.6, .5, 1) both; }
  .pp-fim__numero:nth-child(1) { animation-delay: .4s; }
  .pp-fim__numero:nth-child(2) { animation-delay: .55s; }
  .pp-fim__numero:nth-child(3) { animation-delay: .7s; }
  .pp-fim__novos { animation: ppTextoSobe .4s ease-out .9s both; }
  /* backwards, e não both: preso no fim, o transform da animação anularia o
     levantar do .btn ao passar o mouse. */
  .pp-fim__continuar { animation: ppTextoSobe .4s ease-out 1s backwards; }

  /* ---- O mapa, de volta de uma lição feita pela primeira vez ----
     .3 s: o nó feito ganha o ✓ e a onda; .7 s: a linha anda até o
     seguinte; 1.3 s: o cadeado deste sacode e some; 1.7 s: o "Começar" e
     o mascote chegam, e só então ele começa a chamar. */
  .pp-no--acabou .pp-no__botao { animation: ppNoFeito .6s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
  .pp-no--acabou .pp-no__botao svg path { stroke-dasharray: 1; animation: ppRDesenha .4s ease-out .55s both; }
  .pp-no--acabou::before { animation: ppROnda .8s ease-out .45s both; }
  .pp-caminho__mascara { animation: ppRDesenha .7s ease-in-out .7s both; }
  .pp-unidade--festa .pp-unidade__barra i { animation: ppBarraCresce .8s cubic-bezier(.3, .9, .3, 1) .7s both; }
  .pp-no__cadeado { animation: ppCadeado .7s ease-in 1.2s both; }
  .pp-no--destrava .pp-no__botao,
  .pp-no--destrava .pp-no__botao::after { animation-delay: 2.2s; }
  .pp-no--destrava .pp-no__balao { animation: ppBalaoChega .3s cubic-bezier(.3, 1.6, .5, 1) 1.7s both, ppFlutua 1.9s ease-in-out 2s infinite; }
  .pp-no--destrava .pp-no__mascote { animation: ppSalta .45s cubic-bezier(.3, 1.6, .5, 1) 1.8s both; }
}
@keyframes ppChega { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ppVolta { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ppEntraDaDireita { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: none; } }
@keyframes ppSurge { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ppAcertou { 0% { transform: none; } 40% { transform: scale(1.045); } 100% { transform: none; } }
@keyframes ppRegiaoErra { 0%, 30%, 60%, 100% { opacity: 1; } 15%, 45% { opacity: .2; } }
@keyframes ppMascoteSalta { from { opacity: 0; transform: translateY(16px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ppTextoSobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ppFaisca {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-led) 75%, transparent); }
  to   { box-shadow: 0 0 0 18px color-mix(in srgb, var(--pp-led) 0%, transparent); }
}
@keyframes ppBrilhoBarra { from { opacity: 1; transform: translateX(-100%); } to { opacity: 0; transform: translateX(100%); } }
@keyframes ppFimMascote { from { opacity: 0; transform: translateY(40px) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes ppSalta { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ppNoFeito {
  0%   { scale: 1; background-color: var(--pp-vez); box-shadow: 0 7px 0 var(--pp-vez-fundo); }
  45%  { scale: 1.16; }
  100% { scale: 1; }
}
@keyframes ppBarraCresce { from { width: var(--antes, 0%); } }
@keyframes ppCadeado {
  0%        { opacity: 1; transform: none; }
  12%, 36%  { opacity: 1; transform: rotate(-12deg); }
  24%       { opacity: 1; transform: rotate(12deg); }
  48%       { opacity: 1; transform: rotate(0); }
  100%      { opacity: 0; transform: scale(1.5); }
}
@keyframes ppBalaoChega { from { opacity: 0; transform: translate(-50%, 8px) scale(.6); } to { opacity: 1; transform: translate(-50%, 0); } }

/* O balão ao lado do nó (celular) flutua só na vertical: o ppFlutua leva o
   translateX(-50%) que o centra em cima, e ao lado ele não é centrado. */
@media (prefers-reduced-motion: no-preference) {
  .pp-no--balao-esq .pp-no__balao,
  .pp-no--balao-dir .pp-no__balao { animation: ppFlutuaLado 1.9s ease-in-out infinite; }
  .pp-no--destrava.pp-no--balao-esq .pp-no__balao,
  .pp-no--destrava.pp-no--balao-dir .pp-no__balao { animation: ppSalta .3s cubic-bezier(.3, 1.6, .5, 1) 1.7s both, ppFlutuaLado 1.9s ease-in-out 2s infinite; }
}
@keyframes ppFlutuaLado { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }

/* =========================================================================
   O CELULAR (12/10/2026): o alvo de toque com 44 px (conferir-celular)
   ========================================================================= */
@media (max-width: 720px), (pointer: coarse) {
  .pp-unidade__ficha, .pp-l-sair, .pp-l-som { width: 44px; height: 44px; }
  .pp-apagar { min-height: 44px; }
}