/* ============================================================
   pc.css — "Palavras do Coração" mini-app (Parte 2)
   Palco 430×932 nativo; tudo posicionado em px absolutos.
   ============================================================ */

/* ─── Overlay ───
   Pinta o gradiente único do app mapeado 0→100% na altura do palco —
   IDÊNTICO à rampa pintada no #book-viewer na mesma região
   (paintAppBackground alinha a rampa ao rect do palco), então não há emenda.
   ⚠️ Não usar transparent: a página do livro montada POR BAIXO do overlay
   vazava (a "sombra" no canto sup. esquerdo do print do Gilson, 2026-07-16). */
#pc-overlay {
  position: absolute; inset: 0; z-index: 200; overflow: hidden;
  background: linear-gradient(180deg, #f9efc6 0%, #ffa8aa 100%);
}

/* ─── Animações de entrada (classes adicionadas via JS com delay) ─── */
.pc-fade  { opacity: 0; transition: opacity .5s var(--ease-out, cubic-bezier(.22,.61,.36,1)); }
.pc-fade.pc-in { opacity: 1; }

.pc-slide-up { opacity: 0; transform: translateY(28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pc-slide-up.pc-in { opacity: 1; transform: none; }

.pc-slide-down { opacity: 0; transform: translateY(-28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pc-slide-down.pc-in { opacity: 1; transform: none; }

/* Entradas laterais para personagens e balões */
.pc-enter-left  { opacity: 0; transform: translateX(-40px);
  transition: opacity .45s ease, transform .45s ease; }
.pc-enter-left.pc-in  { opacity: 1; transform: none; }
.pc-enter-right { opacity: 0; transform: translateX(40px);
  transition: opacity .45s ease, transform .45s ease; }
.pc-enter-right.pc-in { opacity: 1; transform: none; }

/* Entrada LENTA da esquerda com leve overshoot (balão-botão da PC4) */
.pc-enter-slow-left { opacity: 0; transform: translateX(-110px);
  transition: opacity .7s ease, transform .85s cubic-bezier(.34,1.56,.64,1); }
.pc-enter-slow-left.pc-in { opacity: 1; transform: none; }

/* Slide lateral (tarja e botão) */
.pc-slide-left {
  transition: left .5s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.pc-slide-right {
  transition: left .5s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}

/* ─── Coração ─── */
.pc-heart {
  position: absolute;
  transition: opacity .35s ease, left .4s ease, top .4s ease, width .4s ease, height .4s ease;
}

/* Revelar coração de cima para baixo (PC4) */
@keyframes pcRevealTop {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0   0% 0); }
}
.pc-heart-reveal {
  animation: pcRevealTop var(--pc-reveal-dur, 4s) ease forwards;
}

/* Pop de entrada dos balões — SEM fade (só escala) */
@keyframes pcPop {
  0%   { transform: scale(.55); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.pc-pop { animation: pcPop .34s cubic-bezier(.2,.8,.3,1.25); }

/* Flutuação bem suave dos balões clicáveis (aplicada após o pop). Amplitude
   baixa (4px) de propósito: o alvo fica praticamente parado p/ a criança clicar. */
@keyframes pcFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.pc-float { animation: pcFloat 3.2s ease-in-out infinite; }

/* Flutuação dos balões do Game — curva REAL da timeline do Figma (bal_Amigo/
   bal_Gordo, trecho 59→93.5%): bob vertical de -10px com balanço horizontal
   de ±2px, suave. --fdelay dessincroniza os balões. Amplitude baixa de
   propósito: o alvo fica quase parado p/ a criança clicar. */
@keyframes gameFloat2 {
  0%   { translate: 0 0; }
  13%  { translate: -1.9px -1.6px; }
  25%  { translate: -0.7px -4.4px; }
  37%  { translate: 1.9px -7.8px; }
  50%  { translate: -0.2px -10px; }
  63%  { translate: -1.9px -8.2px; }
  75%  { translate: 0px -5px; }
  88%  { translate: 1.9px -2.4px; }
  100% { translate: 0 0; }
}
.game-float2 {
  animation: gameFloat2 2.6s ease-in-out infinite;
  animation-delay: var(--fdelay, 0s);
}

/* Entrada dos balões do Game — coreografia real do Figma (get_motion_context):
   arco vindo do canto de BAIXO do lado oposto, com antecipação (afasta antes
   de vir), fade-in perceptível e escala .6→1. Espelhada para o outro lado. */
@keyframes gameBalInR {           /* entra vindo da DIREITA-baixo */
  0%   { opacity: 0; translate: 400px 250px;  scale: 0.6; }
  4%   { opacity: 0; }
  9%   { translate: 486px 304px; }
  18%  { translate: 543px 339px; }              /* antecipação (vai mais longe) */
  27%  { translate: 513px 321px; opacity: .7; }
  36%  { translate: 424px 265px; opacity: 1; scale: 0.8; }
  45%  { translate: 314px 196px; }
  54%  { translate: 208px 130px; }
  63%  { translate: 121px 76px; }
  72%  { translate: 58px 36px;  scale: 1; }
  81%  { translate: 18px 12px; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes gameBalInL {           /* espelho: entra vindo da ESQUERDA-baixo */
  0%   { opacity: 0; translate: -400px 250px;  scale: 0.6; }
  4%   { opacity: 0; }
  9%   { translate: -486px 304px; }
  18%  { translate: -543px 339px; }
  27%  { translate: -513px 321px; opacity: .7; }
  36%  { translate: -424px 265px; opacity: 1; scale: 0.8; }
  45%  { translate: -314px 196px; }
  54%  { translate: -208px 130px; }
  63%  { translate: -121px 76px; }
  72%  { translate: -58px 36px;  scale: 1; }
  81%  { translate: -18px 12px; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.game-bal-in-right { animation: gameBalInR 1.15s linear both; }
.game-bal-in-left  { animation: gameBalInL 1.15s linear both; }

/* Fio branco delimitando a área de ação (Figma Box_outline) — junto com o
   fundo contínuo no backdrop, cria a ilusão de peça única em qualquer tela */
.game-box-outline {
  position: absolute;
  border: 3px solid #fff;
  border-radius: 39px;
  opacity: .65;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

/* Barra de score (PNG pronto) e coração conquistado */
.game-score-bar { z-index: 10; }
.game-heart-win { position: absolute; }

/* Coração viajante da recompensa (Figma Frame 3 coração_Transf):
   nasce GIGANTE (10.16×) e encolhe pro slot com overshoot */
.game-heart-travel {
  z-index: 230;
  pointer-events: none;
  transform-origin: center center;
}
@keyframes gameHeartBirth {
  0%   { opacity: .3; transform: scale(10.16); }
  100% { opacity: 1; transform: scale(1); }
}
.game-heart-birth { animation: gameHeartBirth .25s cubic-bezier(.45,1.45,.8,1) both; }

/* Pedro floresce do centro ao receber o coração (Frame 3.json: opacity 0→1
   em 658ms; scale .3→1 começa ~170ms depois e dura 669ms) */
@keyframes gamePedroBloom {
  0%   { opacity: 0; transform: scale(.3); }
  20%  { transform: scale(.3); }
  78%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
.game-pedro-bloom { animation: gamePedroBloom .85s cubic-bezier(.5,0,.5,1) both; }

/* Selo do Fael comemora o acerto (Figma: -25° → +31° → 0) */
@keyframes gameFaelWiggle {
  0%   { rotate: 0deg; }
  30%  { rotate: -25deg; }
  66%  { rotate: 31deg; }
  100% { rotate: 0deg; }
}
.game-fael-wiggle { animation: gameFaelWiggle .66s cubic-bezier(.5,0,.5,1); }

/* Onda de brilho nos 6 corações na conquista final (Frame 9.json — cada
   coração pisca em sequência, direita→esquerda). Fidelidade ao protótipo
   (Gilson, 2026-07-17): o flash é GIGANTE e translúcido — escala real do
   Figma é ~9.98× (quase 10×), ficando quase invisível (opacity cai a 0,
   com uma "respirada" a 36%) bem no pico do tamanho, antes de encolher
   de volta ao normal opaco. z-index alto durante o flash pra cobrir
   header/Pedro, como no protótipo. */
@keyframes gameHeartFlash {
  0%   { transform: scale(1); opacity: 1; }
  18%  { transform: scale(1); opacity: 1; }
  23%  { transform: scale(9.98); opacity: 0; }
  27%  { transform: scale(9.98); opacity: .36; }
  32%  { transform: scale(9.5); opacity: 0; }
  47%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.game-heart-flash { animation: gameHeartFlash 1.3s cubic-bezier(.5,0,.5,1) both; z-index: 60; }

/* Dedo guiado do tutorial — coreografia real do Figma (bt_dedo): entra de
   fora (esquerda-baixo), chega entre os balões, deriva à direita (paradinha
   didática "olho um, olho o outro"), vai ao balão certo e dá o pulso de toque */
@keyframes gameHandIn {
  0%   { opacity: 0; translate: -740px 200px; scale: 1; }
  2%   { opacity: 0; }
  21%  { opacity: 1; translate: -420px 114px; }
  35%  { translate: -130px 35px; }
  49%  { translate: 0px 0px; }
  60%  { translate: 8px 0px; }
  69%  { translate: 29px 0px; }               /* paradinha entre os dois */
  77%  { translate: -43px -2px; scale: 1; }   /* vai até o Amigo */
  88%  { translate: -43px -2px; scale: 1.2; } /* pulso de toque */
  100% { opacity: 1; translate: -43px -2px; scale: 1; }
}
.game-hand-in { animation: gameHandIn 2.6s linear both; }

/* Overlay do Game: fade rápido (Figma "sombra" ~64ms; arredondado p/ 150ms) */
.pc-card-shade.game-shade-fast { transition-duration: .15s; }

/* Entrada da narração do tutorial — timeline real (frame 2.json do Gilson,
   node 1233:6241): desce ~108px enquanto faz fade rápido (opacity completa
   aos 37% do percurso), 600ms, ease(.05,.4,.5,1) */
@keyframes gameNarracaoIn {
  0%   { opacity: 0; translate: 0 -108px; }
  37%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
.game-narracao-in { animation: gameNarracaoIn .6s cubic-bezier(.05,.4,.5,1) both; }

/* Impacto no coração ao ser machucado/curado (mostra a "pancada") */
@keyframes pcImpact {
  0%   { transform: scale(1)   rotate(0); }
  22%  { transform: scale(.85) rotate(-2.5deg); }
  55%  { transform: scale(1.06) rotate(1.5deg); }
  100% { transform: scale(1)   rotate(0); }
}
.pc-heart-impact { animation: pcImpact .45s cubic-bezier(.36,.07,.19,.97); transform-origin: center center; }

/* Cura — efeito suave (bloom) ao curar (fase das palavras positivas) */
@keyframes pcHeal {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.pc-heart-heal { animation: pcHeal .5s ease-out; transform-origin: center center; }

/* ─── PC4 — cura final (cross-dissolve do coração + balão com máscara) ─── */
/* cora_A (sólido) surge sobre cora_B (tracejado); opacidade controlada via JS */
.pc-cora-solid { opacity: 0; }

/* Bloom final (frame 39 do print): respiro sutil ao completar a cura */
@keyframes pcCoraBloom {
  0%   { filter: blur(0);     transform: scale(1); }
  45%  { filter: blur(2.5px); transform: scale(1.025); }
  100% { filter: blur(0);     transform: scale(1); }
}
.pc-cora-bloom { animation: pcCoraBloom .5s ease-in-out; transform-origin: center center; }

/* Coração curado: batimento (lub-dub) com glow vermelho, em loop, delicado.
   Não-linear (duas batidas + repouso) e amplitude pequena. */
@keyframes pcHeartGlowPulse {
  0%   { transform: scale(1);     filter: drop-shadow(0 0 5px rgba(216,30,44,.40)); }
  9%   { transform: scale(1.028); filter: drop-shadow(0 0 12px rgba(216,30,44,.78)); }
  18%  { transform: scale(1.002); filter: drop-shadow(0 0 6px rgba(216,30,44,.45)); }
  27%  { transform: scale(1.018); filter: drop-shadow(0 0 9px rgba(216,30,44,.58)); }
  40%  { transform: scale(1);     filter: drop-shadow(0 0 5px rgba(216,30,44,.40)); }
  100% { transform: scale(1);     filter: drop-shadow(0 0 5px rgba(216,30,44,.40)); }
}
.pc-heart-glow-pulse {
  animation: pcHeartGlowPulse 1.5s ease-in-out infinite;
  transform-origin: center center;
}

/* Balões de regra da PC4 (entram com pc-pop, alternando os lados) */
.pc-rule-balloon { position: absolute; transform-origin: center; }

/* Balão de conclusão: 2 camadas sobrepostas (acionado embaixo, ativ por cima).
   A máscara (clip-path) da camada de cima recua esq→dir revelando a de baixo. */
.pc-conclu-wrap { position: absolute; }
.pc-conclu-wrap img { left: 0; top: 0; width: 100%; height: 100%; }
.pc-conclu-bottom { z-index: 1; }
.pc-conclu-top    { z-index: 2; clip-path: inset(0 0 0 0); }

/* Glow "toque aqui" no balão ativ (indicador funcional, antes do clique) */
@keyframes pcConcluCta {
  0%,100% { filter: drop-shadow(0 4px 6px rgba(40,4,55,.25)); }
  50%     { filter: drop-shadow(0 0 11px rgba(255,187,0,.9)); }
}
.pc-conclu-cta { animation: pcConcluCta 1.6s ease-in-out infinite; }

/* Pulsação do coração (PC5) */
@keyframes pcHeartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.07); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.05); }
  70%     { transform: scale(1); }
}
.pc-heart-pulse {
  animation: pcHeartbeat 1.3s ease-in-out infinite;
  transform-origin: center center;
}

/* ─── Balões ─── */
.pc-balloon {
  position: absolute;
  cursor: pointer;
  transition: opacity .3s ease, transform .15s ease;
  transform-origin: center;
}
.pc-balloon:active { transform: scale(.94); }
.pc-balloon.pc-clicked {
  cursor: default;
  pointer-events: none;
  opacity: .55;
}

/* ─── Texto sobre o coração ─── */
.pc-on-heart {
  position: absolute;
  color: #ffefe3;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 22px;        /* corpo 22 — cabe melhor dentro do coração */
  line-height: 1.18;
  text-align: center;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.pc-on-heart.pc-visible { opacity: 1; }

/* ─── Texto fora do coração (PC5 abaixo) ─── */
.pc-txt-below {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 20px;        /* Figma: corpo 20 */
  line-height: 1.1;
  text-align: center;
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.pc-txt-below.pc-visible { opacity: 1; }

/* ─── Dica "Toque nos balões" ─── */
.pc-hint {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  /* corpo aumentado 50% (12px → 18px) a pedido do Gilson (2026-07-27): no
     Figma era 12, mas em uso real ficou pequeno demais pra instrução — e
     navegação foi a nota mais baixa da pesquisa de validação. Opacidade
     subiu junto (.8 → .9) porque em corpo maior o cinza-claro pesava menos
     do que o esperado sobre o fundo. */
  font-size: 18px;
  margin: 0;
  opacity: .9;
  /* a caixa foi alargada junto (ver pos(hint,…) em pc.js) pra caber o corpo
     maior sem quebrar linha; centralizar aqui mantém o texto no meio do
     palco independentemente da largura exata que a fonte ocupar */
  text-align: center;
}

/* ─── Tarja rosa ─── */
.pc-tarja {
  position: absolute;
  height: 58px;
  background: #E45D6B;                 /* Figma: bt_interação */
  display: flex;
  align-items: center;
  border-radius: 0 29px 29px 0;        /* cantos direitos arredondados */
  border: 1px solid #fff;
  border-left: none;                   /* lado esquerdo sai da borda */
  box-shadow: 0 3px 8px rgba(40,4,55,.22);
}
.pc-tarja-text {
  color: #fff;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  padding: 0 70px 0 22px;
  flex: 1;
}

/* ─── Botão "Iniciar" (PC1) ─── */
.pc-btn-iniciar {
  cursor: pointer;
  transition: transform .15s ease, opacity .5s ease;
}
.pc-btn-iniciar:active { transform: scale(.95); }

/* ─── Botão de avançar (seta) ─── */
.pc-btn-next {
  position: absolute;
  cursor: pointer;
  transition: transform .15s ease;
}
.pc-btn-next:active { transform: scale(.94); }

/* ─── Hamburguer (PC) ─── */
.pc-hamburger {
  position: absolute;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 45px; height: 45px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
}
.pc-hamburger span {
  display: block; width: 26px; height: 3px;
  background: var(--c-roxo, #6B0584);
  border-radius: 2px;
}

/* ─── Cabeçalho roxo (App_cora_final_6) ─── */
.pc-header-roxo {
  position: absolute;
  left: 0; top: 0; right: 0;
  background: var(--c-roxo, #6B0584);
}

/* ─── Caixa bege (App_cora_final_6, node Box_bege 400:3666) ─── */
.pc-box-bege {
  position: absolute;
  background: var(--c-bege, #FFDFC7);
  border: 1px solid var(--c-roxo, #6B0584);
  border-radius: 11px;
  box-shadow: 2px 2px 2.25px rgba(0,0,0,.25);
  overflow: hidden;
}
.pc-box-bege-text {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 18px;        /* Figma: corpo 18 */
  line-height: 1.3;
  margin: 0;
}

/* ─── Ícones sociais (App_cora_final_6) ─── */
.pc-social-icon {
  position: absolute;
  cursor: pointer;
  transition: transform .15s ease, opacity .3s ease;
}
.pc-social-icon:active { transform: scale(.9); }

/* ─── Miniatura do vídeo ─── */
.pc-miniatura {
  position: absolute;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}
.pc-miniatura img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.pc-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pc-play-btn::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--c-roxo, #6B0584);
  margin-left: 4px;
}

/* ============================================================
   Game "Palavras que Curam" — telas 4/5/6
   ============================================================ */

/* Header persistente do Game (Fael + "Você conquistou" + barra de corações) —
   Figma Frame 2/4/5/6/7/8/9 (mesmo header em Tutorial + 5 rodadas). Coords
   convertidas do canvas Figma 1080×1920 por escala única (430/1080=.3981),
   ancoradas no topo (mesmo referencial do frame de origem). */
.game-header-fael {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 12;
}
.game-header-fael img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-header-label {
  position: absolute;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 800;
  color: var(--c-roxo, #6B0584);
  margin: 0;
  z-index: 12;
}
.game-hearts-pill {
  position: absolute;
  background: var(--c-roxo, #6B0584);
  border-radius: 999px;
  z-index: 10;
}
.game-hearts-bar {
  position: absolute;
  display: flex;
  z-index: 11;
}
.game-heart {
  position: absolute;
  z-index: 12;
  transform-origin: center center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.game-heart img { width: 100%; height: 100%; display: block; }

/* Pedro — wrapper crossfade (tamanho/posição sempre via pos() no JS,
   proporcional ao Figma: Pedro é ~58% da largura do palco) */
.game-pedro-wrap {
  position: absolute;
}
.game-pedro-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .35s ease;
  pointer-events: none;
}
/* logo Turminha no header do Game (canto sup. direito) */
.game-header-logo { object-fit: contain; z-index: 12; }

/* Balões do game */
.game-balloon {
  position: absolute;
  width: 152px;
  border-radius: 20px;
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: gameBalloonFloat 2.6s ease-in-out infinite;
  box-shadow: 0 6px 18px rgba(0,0,0,.13);
  transition: opacity .35s ease;
}
.game-balloon.cure {
  background: #E3F9EC;
  color: #1A5E33;
  border: 2.5px solid #6FCF97;
}
.game-balloon.hurt {
  background: #F2F2F2;
  color: #555;
  border: 2.5px solid #C8C8C8;
}
.game-balloon.locked { pointer-events: none; }
.game-balloon.shaking { animation: gameBalloonShake .38s ease !important; }

@keyframes gameBalloonFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes gameBalloonShake {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  38%  { transform: translateX(7px); }
  58%  { transform: translateX(-4px); }
  78%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* Cartão de incentivo */
.game-incentive-card {
  position: absolute;
  right: -200px;
  top: 56px;
  width: 162px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 12px;
  z-index: 220;
  box-shadow: 0 8px 24px rgba(107,5,132,.22);
  border: 2px solid #FEC900;
  pointer-events: none;
}
.game-incentive-card .card-icon {
  font-size: 26px;
  text-align: center;
  display: block;
  margin-bottom: 8px;
}
.game-incentive-card .card-text {
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-roxo-txt, #730099);
  line-height: 1.35;
  text-align: center;
  margin: 0;
  white-space: pre-line;
}

/* Overlay de carregamento no envio do certificado (D34): cobre a tela
   inteira, acima de tudo (300 > qualquer outro elemento da tela), enquanto
   o backend gera o certificado + envia o e-mail (~15-20s). */
.pc-cert-loading-overlay {
  position: absolute; inset: 0; z-index: 300;
  background: rgba(0,0,0,.72);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.pc-cert-loading-overlay.pc-in { opacity: 1; pointer-events: auto; }
.pc-cert-spinner {
  width: 64px; height: 64px;
  animation: pcCertSpin .9s linear infinite;
}
@keyframes pcCertSpin { to { transform: rotate(360deg); } }
.pc-cert-loading-text {
  color: #fff; font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700; font-size: 18px; line-height: 1.3; text-align: center;
  width: 280px; margin: 0;
}

/* Overlay-bloqueante dos cartões (ESPEC §10.1): escurece o palco (50%)
   e intercepta TODOS os cliques por baixo enquanto o card narra. */
.pc-card-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 215;            /* acima de navbar/botões (≤50), abaixo do card (220) */
  pointer-events: auto;
}
.pc-card-shade.pc-in { opacity: 1; }

/* Card unificado = PNG pronto (personagem + balão), nas coords do Figma.
   Entrada: desliza da ESQUERDA para a direita com fade e um leve overshoot
   (passa um pouco do ponto e volta ao lugar) — princípio de animação. O áudio
   só toca depois que o card se acomoda (controlado no JS). */
.pc-inc-card {
  z-index: 220;
  opacity: 0;
  transform: translateX(-90px);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  pointer-events: none;    /* o card é aviso, não botão (§2) */
}
.pc-inc-card.pc-in { opacity: 1; transform: translateX(0); }

/* Cards internos do Game (Aurinha/Leleco/Trapi) — tempos EXATOS do Frame
   3.json/ESTILO_Frame 3.css do Gilson: ENTRA em 852ms com pop (scale 0→1 +
   gira 60°→0 + sobe 20px, ease(.15,.85,.3,1)); SAI deslizando p/ a direita
   (+120px) por 1.72s com antecipação (ease(.7,0,.5,-.7)) e o fade só nos
   últimos ~630ms. Gatilho da saída = fim do áudio (JS). */
.game-card {
  position: absolute;
  z-index: 220;
  opacity: 0;
  transform: scale(0) rotate(60deg) translateY(20px);
  transform-origin: center center;
  transition: transform .85s cubic-bezier(.15,.85,.3,1), opacity .25s ease;
  pointer-events: none;
}
.game-card.pc-in { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
.game-card.game-card-out {
  transition: transform 1.72s cubic-bezier(.7,0,.5,-0.7), opacity .63s cubic-bezier(.5,0,.5,1) 1.09s;
  transform: translateX(120px);
  opacity: 0;
}

/* Botão "Vamos brincar!" — nasce DENTRO do card do Lapisteco depois da
   narração (nascimento condicional, D32): fade + leve crescimento. */
.pc-vamos-btn {
  z-index: 221;
  opacity: 0;
  transform: scale(.7);
  transform-origin: center center;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.pc-vamos-btn.pc-in { opacity: 1; transform: scale(1); }

/* Botão principal redesenhado (Layout - PC5.json node 1117:1846) — pílula
   roxa com texto (não mais imagem), bounce de mola na entrada aproximado
   por overshoot cúbico. */
.pc-vamos-brincar-v2 {
  position: absolute; z-index: 221; box-sizing: border-box;
  background: #6B0584; border: 3px solid #fff; border-radius: 50px;
  box-shadow: 0 7px 3.3px rgba(0,0,0,.53);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transform: scale(.6) translateY(20px);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.pc-vamos-brincar-v2.pc-in { opacity: 1; transform: scale(1) translateY(0); }
.pc-vamos-brincar-v2 p {
  margin: 0; font-family: 'DynaPuff', var(--font-base, 'Nunito', sans-serif);
  font-weight: 700; font-size: 24px; line-height: 1.15; color: #fff; text-align: center;
}

/* v3 (2026-07-27) — mesma animação de nascimento do v2, mas o visual inteiro
   (moldura, texto em curva, ícone e sombra) vem pronto no próprio SVG, então
   aqui não há background/borda/sombra: só posição, cursor e a transição.
   O .pc-vamos-brincar-v2 acima fica como referência do desenho anterior. */
.pc-vamos-brincar-v3 {
  position: absolute; z-index: 221; cursor: pointer;
  opacity: 0; transform: scale(.6) translateY(20px);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.pc-vamos-brincar-v3.pc-in { opacity: 1; transform: scale(1) translateY(0); }

/* Botão "Compartilhar" (D34) — arte pronta do Gilson (texto+ícones já
   desenhados, sem animação); só as 2 zonas clicáveis invisíveis por cima
   (copiar link / WhatsApp) e o toast de confirmação são deste CSS. */
.pc-share-btn { position: absolute; z-index: 30; }
.pc-share-zone {
  position: absolute; background: transparent; border: none; padding: 0;
  cursor: pointer;
}
.pc-share-toast {
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  background: #6B0584; color: #fff;
  font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 700; font-size: 12px;
  padding: 6px 12px; border-radius: 20px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.pc-share-toast.pc-in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 3 opções secundárias (assistir vídeo / reler história / repetir dinâmica)
   — assets prontos (Bt_video/bt_CBC/bt_PC.svg), fade + leve subida ao entrar. */
.pc-ponte-secondary {
  position: absolute; z-index: 221; cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: transform .3s cubic-bezier(.15,.85,.3,1), opacity .3s ease;
}
.pc-ponte-secondary.pc-ponte-secondary-in { opacity: 1; transform: translateY(0); }

/* Botão-ponte e botões do game */
.game-ponte-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 693px;
  width: 228px;
  height: 50px;
  background: #FEC900;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #3A007A;
  box-shadow: 0 6px 18px rgba(107,5,132,.28);
  -webkit-tap-highlight-color: transparent;
}
.game-ponte-btn:active { transform: translateX(-50%) scale(.96); }

/* Conquista */
.game-confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
  pointer-events: none;
  z-index: 50;
  top: -20px;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg);    opacity: 1; }
  100% { transform: translateY(820px) rotate(600deg); opacity: 0; }
}
.game-cta-primary {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 730px;
  width: 256px;
  height: 52px;
  background: #FEC900;
  border: none;
  border-radius: 26px;
  cursor: pointer;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #3A007A;
  box-shadow: 0 6px 18px rgba(107,5,132,.28);
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-tap-highlight-color: transparent;
}
.game-cta-primary:active { transform: translateX(-50%) scale(.96); }
.game-cta-skip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 800px;
  background: none;
  border: none;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0;
  transition: opacity .5s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* Botão secundário da conquista ("Jogar de novo") — geometria/estilo reais
   do Figma (2026-07-17): contorno BRANCO fino sobre a foto, sem
   preenchimento — não é mais o botão roxo sólido (imagem SVG antiga). */
.game-btn-secondary {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9.829px 23.067px 10.762px 22.933px;
  background: transparent;
  border: 1.638px solid #fff;
  border-radius: 43.68px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 19.657px;
  line-height: 110%;
  color: #fff;
  opacity: 0;
  transition: opacity .5s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.game-btn-secondary:active { transform: scale(.96); }

/* Tela-ponte pós-conquista (Figma Frame 12) — foto de fundo do Pedro na
   escola + card roxo (headline) + card rosa (texto da mãe) + CTA + rodapé */
/* imagem real É mais larga que o palco (524×932 vs 430×932) e entra
   deslocada -8px à esquerda, indo até -94px no pan — por isso NÃO usa
   object-fit:cover (que recorta/escala diferente do Figma); tamanho e
   posição fixos batendo com o node do Figma, o pan anima só o transform
   (JS já parte de translateX(-8px) até translateX(-94px)) */
.game-ponte-bg {
  position: absolute; left: 0; top: -3.64px;
  width: 524px; height: 939px;
}
/* Card_Conclusao é montado de 3 objetos independentes no Figma (não uma
   caixa única): o avatar fica colado no canto sup-esq do wrapper (0,0) e
   "estoura" por cima/fora do box_roxo, que começa deslocado (5.21,28)
   dentro do MESMO wrapper — extraído via MCP Figma, 2026-07-18. */
.game-ponte-card-header { position: absolute; }
.game-ponte-box-roxo {
  position: absolute;
  left: 5.21px; top: 28px; width: 320.79px; height: 87.826px;
  background: var(--c-roxo, #6B0584);
  border: 1.861px solid #FB0;
  border-radius: 12.653px;
  box-shadow: 0 0 5px 1px rgba(255,44,44,.5);
  box-sizing: border-box;
}
.game-ponte-card-header p {
  position: absolute;
  left: 95.27px; top: 42.08px; width: 221.055px; height: 59.171px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Grandstander', var(--font-base, 'Nunito', sans-serif);
  font-size: 21.584px;
  line-height: 110%;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0;
}
.game-ponte-fael-badge {
  position: absolute;
  left: 0; top: 0; width: 85.594px; height: 85.594px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 1;
}
.game-ponte-fael-badge img { width: 100%; height: 100%; object-fit: cover; }
.game-ponte-card-mae {
  position: absolute;
  background: var(--c-rosa, #E45D6B);
  /* borda/glow reais do Figma: 1.93px amarelo fino + glow VERMELHO suave */
  border: 1.93px solid #FB0;
  border-radius: 13px;
  box-shadow: 0 0 5px 1px rgba(255,44,44,.45);
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.game-ponte-card-mae p {
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0;
}
.game-ponte-bottom-row {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Mãozinha guiada do tutorial (Tela 2) — indicador de comportamento */
.game-hand {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

/* Partícula de luz — encadeamento causal coração→Pedro (ESPEC §5, passo 4c) */
.game-particle {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  opacity: 1;
  transition: opacity .3s ease;
}

/* Vídeo da conquista (Pedro feliz pulando.mp4) — MESMA caixa exata pra onde
   a foto da escola cresce (Frame 11/12 do Figma: 13,193,404×718 raio35),
   pro crossfade foto→vídeo não dar "pulo" de enquadramento (Gilson,
   2026-07-17: "a imagem cresce até um tamanho determinado porque em
   seguida há um crossfade pro vídeo" — os elementos têm o tamanho preciso
   um do outro). */
.game-video-wrap {
  position: absolute;
  left: 13px; top: 193px; width: 404px; height: 718px;
  border-radius: 35px; overflow: hidden;
  background: #000;
  opacity: 0;
  transition: opacity .5s ease;
}
.game-video-wrap.pc-in { opacity: 1; }
.game-video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Fallback obrigatório (ESPEC §7.2) — autoplay com áudio bloqueado pelo navegador */
.game-sound-fallback {
  position: absolute;
  left: 50%; bottom: 70px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.62);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 11px 20px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  z-index: 30;
}


/* Tremor genérico de erro (§10.4) — aplicável a qualquer balão do Game/tutorial */
.shaking { animation: gameBalloonShake .38s ease !important; }

/* ============================================================
   Tela 1 (Contexto) — animações de entrada extraídas do Figma via
   get_motion_context (Frame 1, node 1227:1106, timeline de 2.562s).
   Valores/curvas preservados como o Figma devolveu — só o botão
   "Vamos brincar!" foi desacoplado dessa timeline: no Figma ele entra
   aos ~57%-100% (~1,5s-2,6s), mas por decisão do Gilson ele continua
   condicionado ao FIM da narração real (não à timeline do Figma),
   então ganhou uma animação própria (mesma forma: desliza da direita
   com bounce) disparada por JS, não por autoplay no load.
   ================================================================ */
@keyframes pcT1TituloOpacity {
  0%      { animation-timing-function: cubic-bezier(.5,0,.5,1); opacity: 0; }
  15.614% { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes pcT1TituloTranslate {
  0%      { animation-timing-function: cubic-bezier(.05,.4,.5,1); translate: 0 -180px; }
  23.421% { translate: 0 0; }
  100%    { translate: 0 0; }
}
.pc-t1-titulo { animation: pcT1TituloOpacity 2.562s linear, pcT1TituloTranslate 2.562s linear; }

@keyframes pcT1NarracaoOpacity {
  0%      { opacity: 0; }
  30.135% { animation-timing-function: cubic-bezier(.5,0,.5,1); opacity: 0; }
  37.989% { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes pcT1NarracaoTranslate {
  0%      { translate: 0 -30px; }
  30.135% { animation-timing-function: cubic-bezier(.24,.08,.5,1); translate: 0 -30px; }
  49.77%  { translate: 0 0; }
  100%    { translate: 0 0; }
}
.pc-t1-narracao { animation: pcT1NarracaoOpacity 2.562s linear, pcT1NarracaoTranslate 2.562s linear; }

@keyframes pcT1ImgOpacity {
  0%      { animation-timing-function: cubic-bezier(.5,0,.5,1); opacity: 0; }
  19.518% { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes pcT1ImgTranslate {
  0%      { translate: 40px -80px; }
  3.904%  { translate: 36.13px -59.618px; }
  7.807%  { translate: 21.468px -46.212px; }
  11.711% { translate: -1.468px -35.659px; }
  15.614% { translate: -16.13px -26.895px; }
  19.518% { translate: -20px -19.479px; }
  23.421% { translate: -18.71px -13.209px; }
  27.325% { translate: -13.823px -8.013px; }
  31.228% { translate: -6.177px -3.927px; }
  35.132% { translate: -1.29px -1.116px; }
  39.035% { translate: 0 0; }
  100%    { translate: 0 0; }
}
.pc-t1-imgwrap { animation: pcT1ImgOpacity 2.562s linear, pcT1ImgTranslate 2.562s linear; }

/* Botão "Vamos brincar!" — parado (fora da tela, à direita) até a classe
   .pc-t1-btn-in ser adicionada via JS (no fim da narração real). Mesma
   forma/easing (bounce) do Figma, só o GATILHO é diferente (áudio, não
   timeline autoplay). */
.pc-t1-btn { opacity: 0; translate: 260px 0; }
@keyframes pcT1BtnReveal {
  0%   { opacity: .24; translate: 260px 0; }
  100% { opacity: 1;   translate: 0 0; }
}
.pc-t1-btn.pc-t1-btn-in {
  animation: pcT1BtnReveal .65s cubic-bezier(.67,1.684,.336,.828) forwards;
}

/* ============================================================
   Tela de Captura/Certificado (ESPEC §7.4, MASTER §6/§7)
   ============================================================ */
/* Frame 14 real (2026-07-18): não tem mais preview ao vivo em canvas —
   cartão com Fael+Aurinha-Ursinha passeando (loop infinito, imagem
   única já pré-composta pelo Gilson) + 2 balões com fala independente,
   cada camada com sua PRÓPRIA curva de easing (proposital — dá sensação
   de profundidade/paralaxe entre balão e personagem, confirmado pelo
   Gilson). Geometria e keyframes extraídos do Frame 14.json. */
.cert-hero-card {
  position: absolute;
  overflow: hidden;
  border: 2.641px solid #fff;
  border-radius: 30.806px;
  background: linear-gradient(to bottom, #ff9383, rgba(255,224,147,.38));
  box-shadow: 0 8px 24px rgba(107,5,132,.28);
}
.cert-carousel-chars {
  position: absolute; left: 0; top: 108.73px;
  width: 833.535px; height: 338.196px;
  animation: certCharsPan 12.021s infinite;
}
.cert-carousel-chars img { width: 100%; height: 100%; display: block; }
.cert-carousel-balloons {
  position: absolute; left: 0; top: 70px;
  width: 566.839px; height: 141.71px;
  display: flex; gap: 117.065px; align-items: flex-start;
  animation: certBalloonsPan 12.021s infinite;
}
.cert-balloon {
  position: relative; flex-shrink: 0;
  background-repeat: no-repeat; background-size: 100% 100%;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
/* padding-bottom reserva a área do rabinho do balão (fora do corpo
   redondo), pra centralizar o texto de verdade no corpo, não na caixa
   total (que inclui o rabinho) — ajustado visualmente, 2026-07-18 */
.cert-balloon-1 { width: 177.797px; height: 117.944px; background-image: url('../assets/game/balao1_certificado.svg'); padding: 6px 18px 26px 18px; }
.cert-balloon-2 { width: 271.977px; height: 141.71px; background-image: url('../assets/game/balao2_certificado.svg'); padding: 8px 30px 30px 24px; }
.cert-balloon p {
  margin: 0;
  font-family: 'Grandstander', var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 14.083px;
  line-height: 1.1;
  text-align: center;
  color: #000;
}
.cert-balloon-1 p { width: 141.71px; }
.cert-balloon-2 p { width: 214.765px; }

@keyframes certCharsPan {
  0%      { transform: translateX(4.56px);    animation-timing-function: cubic-bezier(.357,-.067,.582,1.102); }
  21.046% { transform: translateX(-12.73px);  animation-timing-function: cubic-bezier(.363,-.133,.561,1.282); }
  41.820% { transform: translateX(19.119px);  animation-timing-function: cubic-bezier(.399,-.077,.575,1.109); }
  49.917% { transform: translateX(-428.587px);animation-timing-function: cubic-bezier(.410,-.088,.585,1.095); }
  71.054% { transform: translateX(-390px);    animation-timing-function: cubic-bezier(.157,-.183,.715,1.388); }
  91.780% { transform: translateX(-424.947px);animation-timing-function: cubic-bezier(.157,-.183,.715,1.388); }
  99.825% { transform: translateX(4.56px); }
  100%    { transform: translateX(4.56px); }
}
@keyframes certBalloonsPan {
  0%      { transform: translateX(215.327px); animation-timing-function: cubic-bezier(.7,-.4,.4,1.4); }
  21.046% { transform: translateX(203.885px); animation-timing-function: cubic-bezier(.704,-.313,.382,1.273); }
  41.820% { transform: translateX(216.208px); animation-timing-function: cubic-bezier(.7,-.4,.4,1.4); }
  49.917% { transform: translateX(-211.562px);animation-timing-function: cubic-bezier(.42,0,.58,1); }
  71.054% { transform: translateX(-195.719px);animation-timing-function: cubic-bezier(.697,-.266,.357,1.290); }
  91.780% { transform: translateX(-211.562px);animation-timing-function: cubic-bezier(.697,-.266,.357,1.290); }
  99.825% { transform: translateX(215.327px); }
  100%    { transform: translateX(215.327px); }
}

.cert-intro-text {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  margin: 0;
}

.cert-form { position: absolute; }
.cert-field { position: absolute; }
.cert-field label {
  display: block;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-roxo-txt, #730099);
  margin: 0 0 3px;
}
.cert-field input[type="text"],
.cert-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 2px solid #e5d4ee;
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  color: var(--c-roxo-txt, #730099);
  outline: none;
  background: #fff;
}
.cert-field input:focus { border-color: var(--c-roxo, #6B0584); }
.cert-field input.cert-input-error { border-color: #ef4444; }
.cert-counter {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #b39ab8; font-family: var(--font-base, 'Nunito', sans-serif);
  pointer-events: none;
}
.cert-field-wrap { position: relative; }

.cert-genero-row { display: flex; gap: 8px; }
.cert-genero-btn {
  flex: 1;
  padding: 9px 6px;
  border: 2px solid #e5d4ee;
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--c-roxo-txt, #730099);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cert-genero-btn.selected { background: var(--c-roxo, #6B0584); color: #fff; border-color: var(--c-roxo, #6B0584); }
.cert-genero-btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cert-genero-btn img { height: 22px; width: auto; }

.cert-consent-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 11px; color: var(--c-roxo-txt, #730099); line-height: 1.35;
}
.cert-consent-row input { margin-top: 2px; flex-shrink: 0; }

.cert-error-msg {
  color: #ef4444; font-size: 11px; font-family: var(--font-base, 'Nunito', sans-serif);
  min-height: 14px; margin-top: 2px;
}
.cert-error-global {
  position: absolute;
  color: #ef4444; font-size: 12px; font-family: var(--font-base, 'Nunito', sans-serif);
  text-align: center; font-weight: 700;
}
/* Variante da tela de Confirmação: ancorada pela BASE (o JS define
   `bottom`, não `top`) para crescer pra cima e nunca ficar por baixo do
   botão de envio — ver comentário em pc.js. Altura automática: mensagem
   de 2 linhas aparece inteira. O fundo só existe quando há texto, senão
   ficaria uma caixinha branca vazia no layout normal. */
.cert-error-review { height: auto; z-index: 5; margin: 0; }
.cert-error-review:not(:empty) {
  background: rgba(255,255,255,.94);
  padding: 5px 10px; border-radius: 8px; line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  box-sizing: border-box;
}

.cert-submit-btn {
  position: absolute;
  left: 113px; top: 794px;
  width: 205px; height: auto;
  background: transparent; border: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cert-submit-btn img { width: 100%; display: block; }
.cert-submit-btn:active { transform: scale(.97); }
.cert-submit-btn[disabled] { opacity: .55; cursor: default; }
.cert-submit-btn.loading { opacity: .75; cursor: wait; }

/* ============================================================
   Tela de Confirmação — carrossel de revisão (Figma "Confirmação" /
   "Confirmação 1", 2026-07-18): 2 cards (Story vertical / A4 impressão),
   ambos com o certificado renderizado com dados REAIS do usuário (não
   placeholder). O envio real (POST) acontece aqui, não mais na Captura —
   decisão confirmada com o Gilson.
   ============================================================ */
.cert-review-carousel { position: absolute; overflow: visible; }
.cert-review-track {
  display: flex; gap: 8px; padding-left: 20px; height: 100%;
  transition: transform .5s cubic-bezier(.3,-.05,.7,-.5);
}
.cert-review-card {
  position: relative; flex-shrink: 0;
  width: 390px; height: 600px; border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #6B0584 0%, #FFA3A7 50%, #FFEDA4 100%);
  opacity: .3; transition: opacity .5s cubic-bezier(.3,-.05,.7,-.5);
}
.cert-review-card.is-active { opacity: 1; }
.cert-review-title {
  position: absolute;
  margin: 0;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700; font-size: 20px; line-height: 1.2;
  color: #fff; text-align: center;
}
.cert-review-title-story { left: 16.575px; top: 15px; width: 356.85px; }
.cert-review-title-print { left: 195px; top: 30px; width: 370px; transform: translateX(-50%); }
.cert-review-preview {
  position: absolute; background: #fff; box-sizing: border-box;
}
.cert-review-preview canvas { display: block; width: 100%; height: 100%; }
.cert-review-preview-story {
  left: 48.98px; top: 76px; width: 292px; height: 512px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.cert-review-preview-print {
  left: 10px; top: 151px; width: 370px; height: 262px;
  box-shadow: 0 1px 7px 7px rgba(0,0,0,.25);
}
/* layout ajustado (2026-07-18, node 1499:4822): setas agora sobrepõem os
   cantos inferiores do card (z-index acima dele), asset bt_setas.svg do
   Gilson (círculo coral + chevron — "next" aponta pra direita por
   natureza do asset, "prev" espelha via scaleX) */
.cert-review-arrow {
  position: absolute; z-index: 5;
  width: 35px; height: 35px; padding: 0; border: none; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .2s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.cert-review-arrow img { width: 100%; height: 100%; display: block; }
.cert-review-arrow-prev img { transform: scaleX(-1); }
.cert-review-arrow.is-disabled { opacity: .3; pointer-events: none; }
.cert-review-dados-label {
  position: absolute; margin: 0;
  font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 900;
  font-size: 12px; color: #6B0584; text-align: center;
}
/* dados EMPILHADOS numa coluna única centralizada (era 2 colunas lado a
   lado) — corrige colisão/estouro quando nome ou e-mail são longos
   (situação real de uso não considerada na 1ª versão) */
.cert-review-dados-col { position: absolute; text-align: center; }
.cert-review-dados-col p {
  margin: 0 0 2px; font-family: var(--font-base, 'Nunito', sans-serif); color: #000;
}
.cert-review-dados-col p:nth-child(1),
.cert-review-dados-col p:nth-child(3) { font-size: 12px; font-weight: 400; }
.cert-review-dados-col p:nth-child(2),
.cert-review-dados-col p:nth-child(4) { font-size: 14px; font-weight: 900; margin-bottom: 6px; }
.cert-review-submit-btn {
  position: absolute; left: 50%; top: 768px; transform: translateX(-50%);
  width: 195px; height: 40px;
  background: #6B0584; border: 2.365px solid #FB0; border-radius: 40.213px;
  font-family: 'DynaPuff', var(--font-base, 'Nunito', sans-serif); font-weight: 700;
  font-size: 14px; color: #FB0; text-align: center; cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-tap-highlight-color: transparent;
}
.cert-review-submit-btn.loading { opacity: .7; cursor: wait; }
.cert-review-voltar {
  position: absolute; display: block;
  font-family: 'DynaPuff', var(--font-base, 'Nunito', sans-serif); font-weight: 500;
  font-size: 14px; color: #6B0584; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* v2 (2026-07-27) — o "Voltar" virou arte pronta (bt_voltar.svg), então aqui
   não há tipografia nenhuma: só posição e área de toque. */
.cert-review-voltar-v2 {
  position: absolute; display: block; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cert-review-footer {
  position: absolute; display: flex; flex-direction: column; align-items: center;
}
.cert-review-footer img { width: 60.809px; height: 52.716px; }
.cert-review-footer p {
  margin: 4px 0 0; font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 500;
  font-size: 9.575px; color: #000; text-align: center;
}

/* ============================================================
   Tela de agradecimento final (Figma "Frame Final", node 1375:246) —
   redesenhada pelo Gilson em 2026-07-18: card Transmídia subiu pro topo
   (visível de cara — a mãe é quem segura o celular nesse momento, não
   mais atrás de nenhum gate de "vídeo terminou"), rodapé virou 2 colunas
   (logo à esquerda, redes+site à direita). Vídeo real embutido via
   iframe do YouTube (precisa carregar DENTRO do app, não nova aba).
   ============================================================ */

/* Card "Transmídia" — peça pronta (Card_transmidia.svg já traz fundo,
   borda, sombra, texto e selo embutidos) + pulso de atenção (Frame
   final.json, node 1386:1151, loop de 12.021s: encolhe a 80%/opacidade
   50% nos primeiros ~150ms, volta ao normal em ~630ms, segura o resto
   do loop). Reaproveitado nas Rotas A/B/C (D33 §12.1). */
@keyframes transmidiaCardPulse {
  0%      { opacity: 1;  transform: scale(1); }
  0.241%  { transform: scale(1); animation-timing-function: cubic-bezier(.15,.85,.3,1); }
  0.283%  { opacity: 1;          animation-timing-function: cubic-bezier(.15,.85,.3,1); }
  0.657%  { opacity: .5; transform: scale(.8); }
  1.198%  { opacity: .5; transform: scale(.8); animation-timing-function: cubic-bezier(.3,0,.5,1); }
  4.817%  { opacity: 1; }
  5.233%  { transform: scale(1); }
  100%    { opacity: 1;  transform: scale(1); }
}
.cert-final-transmidia-card {
  position: absolute; z-index: 2; display: block;
}
.cert-final-transmidia-card-pulse {
  animation: transmidiaCardPulse 12.021s linear infinite;
}
/* entrada única (Rota A, App_cora_final_6.json node 1502:1329) — sem
   pulso contínuo, só um pop-in suave quando a tela carrega */
@keyframes transmidiaCardEnter {
  0%   { opacity: 0; transform: scale(.6) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.cert-final-transmidia-card-enter {
  opacity: 0;
  animation: transmidiaCardEnter .78s cubic-bezier(.15,.52,.5,1) forwards;
}

.cert-final-bg-slider {
  position: absolute; left: -6px; top: 285px; width: 448px; height: 289px;
  background: linear-gradient(180deg, #6B0584 0%, #FFC07F 100%);
  z-index: 0;
}
.cert-final-ribbon {
  position: absolute; z-index: 1; left: 0; top: 0; width: 430px; height: 285px;
  background: linear-gradient(180deg, #FB0 0%, #FDBD7F 100%);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 51px;
  box-sizing: border-box;
  font-family: 'DynaPuff', var(--font-base, 'Nunito', sans-serif); font-weight: 700;
  font-size: 24px; color: #6B0584; text-align: center; line-height: 1.2;
}
.cert-final-subtitle {
  position: absolute; z-index: 1; left: 0; top: 301px; width: 430px; margin: 0;
  font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 700;
  font-size: 18px; color: #fff; text-align: center;
}
.cert-final-video {
  position: absolute; z-index: 1; left: 9px; top: 329px;
  width: 412.974px; height: 233.131px; border-radius: 8.881px; overflow: hidden;
  cursor: pointer; background: #000;
}
.cert-final-video-thumb, .cert-final-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: none; display: block; }
.cert-final-video-play { position: absolute; left: 140.99px; top: 51.07px; width: 132.107px; height: 132.107px; pointer-events: none; }
.cert-final-paragraph {
  position: absolute; left: 21px; top: 580px; width: 378px; margin: 0;
  font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 400; font-size: 16px;
  line-height: 1.25; color: #6B0584; text-align: center;
}
.cert-final-paragraph b { font-weight: 800; }

/* rodapé — 2 colunas lado a lado (redesenho 2026-07-18) */
.cert-final-footer {
  position: absolute; left: 29px; top: 803px; width: 132px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cert-final-footer img { width: 90px; height: 78px; }
.cert-final-footer p {
  margin: 0; font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 500;
  font-size: 9.575px; color: #000; text-align: center; width: 78px;
}
.cert-final-social-label {
  position: absolute; left: 201px; top: 815px; width: 196px; margin: 0;
  font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 400; font-size: 12px;
  color: #6B0584; text-align: center;
}
.cert-final-social-label b { font-weight: 900; }
.cert-final-social-row {
  /* 4 ícones (WhatsApp removido, 2026-07-20), recentralizado sob o label */
  position: absolute; left: 232px; top: 853px;
  display: flex; align-items: center; gap: 11px;
}
.cert-final-social-row a { display: block; width: 25px; height: 25px; flex-shrink: 0; }
.cert-final-social-row img { width: 100%; height: 100%; display: block; }
.cert-final-site-link-v2 {
  position: absolute; left: 299.5px; top: 901px; transform: translateX(-50%);
  font-family: var(--font-base, 'Nunito', sans-serif); font-weight: 400; font-size: 12px;
  color: #6B0584; text-decoration: none; white-space: nowrap;
}

.cert-legal-footer {
  position: absolute;
  left: 234.5px; top: 879px; width: 373px;
  transform: translateX(-50%);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-size: 10px; line-height: 1.3;
  text-align: center;
  color: #6B0584;
  margin: 0;
}