/* HittLive · telas do louvor e do treino com câmera. Usa os tokens de tokens-movimento.css. */

/* ---------- louvor ---------- */
.servicos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.servico { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 12px; border-radius: 16px; background: var(--em-rosa-claro); color: var(--em-vinho); font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.servico:active { transform: translateY(2px); }
.minha-playlist { margin-top: 22px; }
.rotulo { font: 600 1.125rem/1.3 var(--em-titulo); }
.dica-campo { margin-top: 4px; font-size: 0.875rem; line-height: 1.4; color: var(--em-tinta-suave); }
.linha-campo { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; flex-wrap: wrap; }
.campo-texto { flex: 1 1 180px; min-width: 0; min-height: 52px; padding: 0 14px; border: 2px solid var(--em-borda-campo); border-radius: 14px; background: var(--em-fundo); font-size: 1rem; }
.campo-texto:focus-visible { outline: 3px solid var(--em-vinho); outline-offset: 2px; }
.btn--pequeno { min-height: 52px; width: auto; margin-top: 0; padding: 0 18px; font-size: 1rem; }
.ok-campo { margin-top: 8px; color: var(--em-sucesso); font-weight: 600; font-size: 0.9375rem; }
.aviso--esq { text-align: left; margin-top: 16px; }

/* ---------- palco: câmera + esqueleto ---------- */
.palco { position: fixed; inset: 0; background: var(--em-vinho); overflow: hidden; }
.palco__midia { position: absolute; inset: 0; }
.palco__midia[data-espelho="true"] { transform: scaleX(-1); }
.palco video, .palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco video { object-fit: cover; }
.palco__guia { position: absolute; inset: 14% 12% 10%; border: 3px dashed rgba(255, 255, 255, 0.6); border-radius: 28px; opacity: 0; transition: opacity 0.3s var(--em-ease); }
#app[data-tela="preparar"] .palco__guia { opacity: 1; }
#app[data-tela="preparar"][data-pronto="true"] .palco__guia { border-color: var(--em-rose); border-style: solid; }

.tela--sobre { position: fixed; inset: 0; flex-direction: column; justify-content: space-between; pointer-events: none; color: var(--em-branco); }
.tela--sobre button { pointer-events: auto; }
.faixa { padding: 16px 18px; }
.faixa--topo { padding-top: calc(16px + env(safe-area-inset-top, 0px)); background: linear-gradient(to bottom, rgba(59, 17, 25, 0.9), rgba(59, 17, 25, 0)); padding-bottom: 36px; }
.faixa--base { padding-bottom: calc(18px + var(--em-seg)); padding-top: 44px; background: linear-gradient(to top, rgba(59, 17, 25, 0.94) 55%, rgba(59, 17, 25, 0)); }
.tela--sobre :focus-visible { outline-color: var(--em-branco); }

.status { display: inline-flex; align-items: center; gap: 10px; font: 700 1.0625rem/1 var(--em-texto); padding: 10px 16px; border-radius: 999px; background: rgba(107, 29, 46, 0.86); }
.status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--em-ajuste); }
#app[data-pronto="true"] .status::before { background: var(--em-rose); }
.chamada { font: 700 1.625rem/1.15 var(--em-titulo); text-wrap: balance; }
.chamada--centro { position: absolute; left: 0; right: 0; bottom: calc(14% + var(--em-seg)); text-align: center; padding: 0 28px; font-size: 1.375rem; text-shadow: 0 2px 12px rgba(59, 17, 25, 0.85); }
.checks { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px; margin-top: 14px; }
.checks li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font: 600 0.875rem/1 var(--em-texto); }
.checks li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.85); }
.checks li[data-ok="true"] { background: var(--em-rose); color: var(--em-tinta); }
.checks li[data-ok="true"]::before { border-color: var(--em-tinta); background: var(--em-tinta); }

.tela--contagem { align-items: center; justify-content: center; background: rgba(59, 17, 25, 0.55); }
.contagem { font: 700 min(40vw, 11rem)/1 var(--em-titulo); text-shadow: 0 4px 24px rgba(59, 17, 25, 0.7); }
.contagem.bate { animation: bate 0.9s var(--em-ease); }
@keyframes bate { from { transform: scale(1.5); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* treino */
.faixa--barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tempo { font: 700 1.5rem/1 var(--em-texto); font-variant-numeric: tabular-nums; padding: 8px 14px; border-radius: 999px; background: rgba(107, 29, 46, 0.86); }
.bloco-info { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: 999px; background: rgba(107, 29, 46, 0.86); font: 600 0.8125rem/1.2 var(--em-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.barra-acoes { display: flex; gap: 8px; flex: none; }
.btn-icone { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(107, 29, 46, 0.86); color: var(--em-branco); cursor: pointer; -webkit-tap-highlight-color: transparent; font: 700 0.75rem/1 var(--em-texto); }
.btn-icone:active { background: rgba(255, 255, 255, 0.28); }
.ico-parar { width: 16px; height: 16px; border-radius: 3px; background: currentColor; }
/* alto-falante: corpo + onda; riscado quando só vibra */
.ico-som { position: relative; display: block; width: 22px; height: 18px; }
.ico-som::before { content: ""; position: absolute; left: 1px; top: 5px; width: 6px; height: 8px; background: currentColor; border-radius: 1px; }
.ico-som::after { content: ""; position: absolute; left: 6px; top: 1px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid currentColor; }
.btn-icone[aria-pressed="true"] .ico-som { box-shadow: inset -3px 0 0 -1px transparent; }
.btn-icone[aria-pressed="true"] .ico-som::after { border-right-color: currentColor; }
.btn-icone[aria-pressed="true"]::after { content: ""; position: absolute; width: 3px; height: 28px; background: var(--em-ajuste); transform: rotate(40deg); border-radius: 2px; }
.btn-icone { position: relative; }

.dica { position: absolute; left: 18px; right: 18px; bottom: calc(190px + var(--em-seg)); margin: 0 auto; width: fit-content; max-width: calc(100% - 36px); padding: 12px 22px; border-radius: 999px; text-align: center; font: 700 1.5rem/1.15 var(--em-titulo); background: rgba(107, 29, 46, 0.88); color: var(--em-branco); text-wrap: balance; transition: background-color 0.2s var(--em-ease), color 0.2s var(--em-ease); }
.dica[data-tom="bom"] { background: var(--em-rose); color: var(--em-tinta); }
.dica[data-tom="ajuste"] { background: var(--em-ajuste); color: var(--em-tinta); }
.dica.entra { animation: entra 0.35s var(--em-ease); }
@keyframes entra { from { transform: translateY(10px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }

.faixa--placar { padding-top: 56px; }
.placar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.placar__n { display: flex; align-items: baseline; font: 700 6rem/0.85 var(--em-titulo); font-variant-numeric: tabular-nums; }
.placar__n.pula #reps { animation: pula 0.45s var(--em-ease); display: inline-block; }
@keyframes pula { 0% { transform: scale(1); } 30% { transform: scale(1.28); color: var(--em-rose); } 100% { transform: scale(1); } }
.placar__meta { font-size: 2.25rem; color: rgba(255, 255, 255, 0.78); margin-left: 4px; }
.combo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font: 700 1.25rem/1 var(--em-texto); margin-bottom: 6px; transition: background-color 0.2s var(--em-ease); }
.combo[data-ativo="true"] { background: var(--em-goiaba); color: var(--em-vinho-noite); }
.trilha { display: flex; gap: 5px; margin-top: 16px; }
.trilha li { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.26); transition: background-color 0.25s var(--em-ease); }
.trilha li[data-r="bom"] { background: var(--em-rose); }
.trilha li[data-r="ajuste"] { background: var(--em-ajuste); }

/* descanso */
.tela--descanso { text-align: center; }
.tela--descanso .marca { justify-content: flex-start; text-align: left; }
.tela--descanso .titulo-serifa { font-size: 2.25rem; }
.descanso__n { font: 700 6rem/0.95 var(--em-titulo); font-variant-numeric: tabular-nums; color: var(--em-vinho); margin-top: 6px; }
.tela--descanso .versiculo { text-align: left; }
.descanso__prox { margin-top: 18px; font: 600 1.25rem/1.2 var(--em-titulo); }
.tela--descanso .btn { margin-top: auto; }

.carregando-cam { position: fixed; left: 50%; bottom: calc(24px + var(--em-seg)); transform: translateX(-50%); z-index: 5; padding: 12px 20px; border-radius: 999px; background: var(--em-vinho); color: var(--em-branco); font: 600 1rem/1 var(--em-texto); white-space: nowrap; }

@media (min-width: 700px) {
  .palco, .tela--sobre { max-width: 520px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); }
}
@media (max-height: 640px) {
  .titulo-serifa { font-size: 2rem; }
  .placar__n { font-size: 4.75rem; }
  .dica { bottom: calc(160px + var(--em-seg)); }
}

/* ---------- modo sem câmera ---------- */
.tela--semcamera { text-align: center; }
.tela--semcamera .marca { text-align: left; }
.tela--semcamera .titulo-serifa { font-size: 2rem; }
.tela--semcamera .lead { margin-top: 8px; font-size: 1.0625rem; }
.sc-tempo { margin-top: 18px; font: 700 3rem/1 var(--em-texto); font-variant-numeric: tabular-nums; color: var(--em-goiaba-forte); }
.sc-bloco { margin-top: 14px; font-weight: 600; color: var(--em-tinta-suave); }
.sc-reps { display: flex; align-items: baseline; justify-content: center; margin-top: 4px; font: 700 7rem/1 var(--em-titulo); font-variant-numeric: tabular-nums; }
.sc-meta { font-size: 2.5rem; color: var(--em-tinta-suave); margin-left: 4px; }
.btn--gigante { min-height: 104px; font-size: 1.75rem; margin-top: 10px; }
.tela--semcamera .linha-campo { justify-content: center; }

/* ---------- tela final ---------- */
.tela--final .titulo-serifa { font-size: 2.125rem; }
.nota { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 22px; border-radius: 24px; background: var(--em-vinho); color: var(--em-branco); }
.nota__n { font: 700 5rem/0.8 var(--em-titulo); font-variant-numeric: tabular-nums; color: var(--em-rose); padding-top: 6px; }
.nota__rot { display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.3; color: rgba(255, 255, 255, 0.86); }
.nota__rot b { font: 700 1.5rem/1.05 var(--em-titulo); color: var(--em-branco); }
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.resumo div { padding: 14px 12px; border-radius: 18px; background: var(--em-papel); border: 1px solid var(--em-linha, #F2DDD4); }
.resumo dt { font-size: 0.8125rem; color: var(--em-tinta-suave); line-height: 1.2; }
.resumo dd { font: 700 1.875rem/1.1 var(--em-titulo); font-variant-numeric: tabular-nums; margin-top: 2px; }
.conselho { margin-top: 16px; font: 600 1.1875rem/1.35 var(--em-texto); text-wrap: balance; }
.oracao { margin-top: 18px; }
.oracao p:last-child { font: 600 1.25rem/1.4 var(--em-titulo); color: var(--em-vinho); }
.versiculo.oracao .etiqueta { margin: 0 0 8px; color: var(--em-goiaba-forte); font: 600 0.8125rem/1.2 var(--em-texto); }
.acoes-final { margin-top: 8px; }
.lembrete { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lembrete label { font-weight: 600; }
.lembrete .campo-texto { flex: 0 0 96px; min-height: 52px; }
.lembrete .btn { flex: 1 1 140px; }
.preco-previsto { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--em-rosa-claro); color: var(--em-vinho); font-weight: 600; }
.campo-cheio { width: 100%; margin-top: 8px; }
.campo-area { min-height: 92px; padding-top: 12px; resize: vertical; font-family: inherit; }
#form-lista .campo { margin-top: 16px; }
#form-lista .btn--link, .tela--final .btn--link { margin-top: 6px; }

/* Desafio Cordão: sete bolinhas de progresso na tela final e preço anual em destaque */
.progresso-txt { margin-top: 18px; font-weight: 600; color: var(--em-tinta-suave); }
.progresso { display: flex; gap: 8px; margin-top: 8px; }
.progresso li { flex: 1; height: 10px; border-radius: 999px; background: var(--em-rosa-claro); border: 2px solid var(--em-goiaba); }
.progresso li[data-feito="true"] { background: var(--em-goiaba); }
.preco-comparacao { margin-top: 8px; font-size: 0.875rem; line-height: 1.4; color: var(--em-tinta-suave); }
.preco-previsto { font: 700 1.375rem/1.2 var(--em-titulo); }

/* Fluxo do louvor e acessibilidade de toque */
.mais-opcoes { margin-top: 18px; border: 2px solid var(--em-borda-campo); border-radius: 16px; padding: 0 16px 12px; }
.mais-opcoes summary { display: flex; align-items: center; min-height: 52px; font-weight: 600; cursor: pointer; color: var(--em-goiaba-forte); }
.mais-opcoes[open] summary { margin-bottom: 4px; }
.apoio-celular { margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--em-papel); border: 1px solid var(--em-linha, #F2DDD4); font-size: 0.9375rem; line-height: 1.45; }
.marca-caixa { min-height: 44px; padding: 9px 0; }
.rodape-legal { flex-wrap: wrap; row-gap: 0; }
.rodape-legal a, .rodape-legal .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; width: auto; margin-top: 0; }
.marca-caixa a { display: inline-block; padding-block: 6px; }
.barra-acoes { gap: 16px; }
.checks { display: flex; flex-wrap: wrap; }
.confirma-parar { position: absolute; left: 16px; right: 16px; top: 84px; z-index: 5; padding: 18px; border-radius: 20px; background: var(--em-vinho); color: var(--em-branco, #fff); box-shadow: 0 8px 28px rgba(59, 17, 25, 0.45); }
.confirma-parar p { font: 700 1.25rem/1.25 var(--em-titulo); margin-bottom: 12px; }
.confirma-parar .btn--link { color: var(--em-branco, #fff); }

/* Acabamento (P2 e P3 da revisão de design de 31/10) */
.status-modelo[hidden] { display: none; }
.status-modelo[data-estado="erro"]::before { background: var(--em-tinta-suave); }
.erro-campo::before { content: "!" / ""; }
.opcao span { position: relative; padding-right: 54px; }
.opcao span::after { content: ""; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--em-borda-campo); background: var(--em-fundo); }
.opcao input:checked + span { box-shadow: inset 0 0 0 1px var(--em-vinho); }
.opcao input:checked + span::after { content: "✓"; display: grid; place-items: center; border-color: var(--em-goiaba); background: var(--em-vinho); color: var(--em-branco); font: 700 0.9375rem/1 var(--em-texto); }
.tela--descanso .etiqueta { margin-top: 30px; }
.resumo { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.tela--semcamera .linha-campo .btn { flex: 1 1 140px; }
.marca__aneis--carregando { display: block; margin-bottom: 14px; }
html[data-fundo="liso"] #video { opacity: 0; }
html[data-fundo="liso"] .palco { background: var(--em-tinta); }

/* ---------- boas-vindas depois do pagamento ---------- */
.bv-selo { align-self: flex-start; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--em-blush); color: var(--em-vinho); font: 600 0.8125rem/1.2 var(--em-texto); letter-spacing: 0.06em; text-transform: uppercase; }
.tela--bemvinda .titulo-serifa { font-size: 2.25rem; }
.bv-passos { display: grid; gap: 14px; margin-top: 28px; }
.bv-passo { padding: 18px 18px 16px; border-radius: 20px; background: var(--em-fundo-2); border: 1px solid var(--em-linha, #F3D9E2); }
.bv-passo h2 { font: 700 1.25rem/1.25 var(--em-titulo); color: var(--em-tinta); }
.bv-passo p { margin-top: 6px; font-size: 1rem; line-height: 1.45; color: var(--em-tinta-suave); }
.bv-passo a:not(.btn) { font-weight: 600; }
.bv-passo .btn--sec { margin-top: 12px; }