/* Interação de toque: cada gesto responde na hora (cor, escala, vibração curta), sem nada em loop.
   Movimentos de 120 a 600 ms, uma vez por gesto (Manual Cap. 12). Com "reduzir movimento", só o estado muda. */

html { -webkit-tap-highlight-color: transparent; }

/* ── Toque que responde: botões afundam e soltam uma onda ── */
.botao, .opcao-tech, .passos-voltar, .lp-dica-lado, .rolagem-passos button { position: relative; overflow: hidden; touch-action: manipulation; }
.botao, .opcao-tech, .lp-dica-lado { transition: transform 140ms var(--ease-suave, ease), background-color 160ms, color 160ms, border-color 160ms, box-shadow 160ms; }
.botao:active, .opcao-tech:active, .lp-dica-lado:active, .passos-voltar:active { transform: scale(0.965); }
.onda { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.22; transform: scale(0); animation: onda 620ms var(--ease-suave, ease-out) forwards; }
@keyframes onda { to { transform: scale(1); opacity: 0; } }

/* ── "Cinco sinais": cada linha vira um toque ── */
.planilha li.sinal { cursor: pointer; transition: background-color 260ms var(--ease-suave, ease); -webkit-user-select: none; user-select: none; }
.planilha li.sinal:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: -3px; }
.planilha li.sinal::before { transition: background-color 260ms var(--ease-suave, ease), color 260ms; }
.planilha li.sinal.marcado { background: color-mix(in srgb, var(--cor-terracota) 7%, var(--cor-superficie)); }
.planilha li.sinal.marcado::before { content: "✓"; background: var(--cor-terracota); color: var(--cor-superficie); font-size: 15px; font-weight: 700; animation: pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.planilha li.sinal.marcado .chip { background: var(--cor-terracota); color: var(--cor-superficie); }
@keyframes pop { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }
.planilha-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--linha); background: var(--container); min-height: 68px; }
.placar-texto { margin: 0; font-size: 14px; color: var(--cor-grafite); font-weight: 600; }
.placar-texto b { color: var(--cor-terracota); font-variant-numeric: tabular-nums; }
.placar-cta { animation: sobe-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.placar-cta[hidden] { display: none; }
@keyframes sobe-pop { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: none; } }

/* ── Tela de exemplo no celular: tocar na divergência abre a trilha dela ── */
.app-dica { display: none; margin: 0; font-size: 13px; color: var(--cor-grafite); }
.app tr.marcada { cursor: pointer; }
.app tr.marcada:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: -3px; }
@media (max-width: 899px) {
  .app-dica { display: block; }
  .app.aberto .app-dica { display: none; }
  .lp-abertura .app.aberto .app-painel { display: grid; animation: painel-abre 560ms var(--ease-suave, ease-out) both; }
  .app.aberto .passos-trilha li { animation: trilha-entra 460ms var(--ease-suave, ease-out) both; }
  .app.aberto .passos-trilha li:nth-child(2) { animation-delay: 120ms; }
  .app.aberto .passos-trilha li:nth-child(3) { animation-delay: 240ms; }
  .app.aberto .passos-trilha li:nth-child(4) { animation-delay: 360ms; }
  .app tr.marcada td:last-child { position: relative; }
}
@keyframes painel-abre { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes trilha-entra { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ── CTA que acompanha o polegar (só celular): aparece depois do topo e some quando a conversa chega ── */
.cta-fixo { display: none; }
@media (max-width: 899px) {
  .cta-fixo {
    display: flex; align-items: center; justify-content: center; gap: 10px; position: fixed; z-index: 35;
    left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); min-height: 56px; padding: 0 20px;
    border-radius: 999px; background: var(--cor-primaria); color: var(--cor-superficie);
    font: 600 16px/1.2 var(--texto); text-decoration: none; text-align: center;
    box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--cor-tinta) 70%, transparent);
    transform: translateY(160%); opacity: 0; pointer-events: none;
    transition: transform 600ms var(--ease-suave, ease-out), opacity 400ms var(--ease-suave, ease-out);
  }
  .cta-fixo.visivel { transform: none; opacity: 1; pointer-events: auto; }
  .cta-fixo:active { transform: scale(0.97); }
  .cta-fixo .ic { width: 20px; height: 20px; flex: none; }
  .rodape { padding-bottom: 96px; }
}

/* ── Pedido enviado: pequena comemoração (uma vez) ── */
.enviado.celebra .icone-grande { animation: pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.enviado.celebra .icone-grande .ic path:last-of-type { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tracar 600ms 250ms var(--ease-suave, ease-out) forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
.enviado.celebra .protocolo { animation: sobe-pop 600ms 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.enviado.celebra .passos-trilha li { animation: trilha-entra 500ms var(--ease-suave, ease-out) both; }
.enviado.celebra .passos-trilha li:nth-child(1) { animation-delay: 350ms; }
.enviado.celebra .passos-trilha li:nth-child(2) { animation-delay: 500ms; }
.enviado.celebra .passos-trilha li:nth-child(3) { animation-delay: 650ms; }

/* Pergunta respondida: a barra de progresso dá um pulso curto. */
.passos-barra.pulsa { animation: pulso-barra 520ms var(--ease-suave, ease-out); }
@keyframes pulso-barra { 0% { transform: scaleY(1); } 40% { transform: scaleY(2.2); } 100% { transform: scaleY(1); } }