/* ==========================================================================
   História Cantada — funil
   Formulário · contato · carregamento · geração · prévia · checkout
   ========================================================================== */

/* ==========================================================================
   ESTRUTURA COMUM DO FUNIL
   ========================================================================== */

.funil-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-3);
}

.funil-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.funil-marca {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  text-align: center;
  white-space: nowrap;
}

/* A logo ocupa a coluna do meio do cabeçalho, no lugar do nome escrito, e
   só no checkout. Menor que a da landing de propósito: ali ela é a marca da
   página, aqui é uma confirmação de onde a pessoa está, e não pode roubar a
   linha do botão de voltar. */
.funil-logo {
  display: block;
  justify-self: center;
  width: min(132px, 38vw);
  height: auto;
  max-height: 30px;
  object-fit: contain;
}

.funil-passo {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--green);
  text-align: right;
  white-space: nowrap;
}

.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding-right: var(--sp-2);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  justify-self: start;
}
.btn-voltar:hover { color: var(--ink); }
.btn-voltar .ico { width: 18px; height: 18px; }
.btn-voltar[hidden] { visibility: hidden; display: inline-flex; }

.funil-corpo {
  padding-block: var(--sp-8);
  /* espaço para o rodapé fixo e para o botão do WhatsApp */
  padding-bottom: calc(var(--sp-16) + 120px);
}

/* O rodapé com a CTA é fixo: em telas pequenas, rolar até o fim para achar o
   botão é atrito puro. */
.funil-rodape {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-3);
}

/* Quando a barra da oferta está no ar na prévia: o WhatsApp tem z-index
   maior que o rodapé e cobria metade do texto do botão. */
body:has(#previa-rodape:not(.hidden)) .whatsapp-float {
  bottom: calc(112px + env(safe-area-inset-bottom));
}

/* Do formulário à prévia o botão não aparece.

   No formulário e no contato ele saiu por decisão do dono em 20/09/2026: o
   canal de atendimento fica só na landing e no checkout. Quem está no meio
   dos passos tem uma pergunta na frente para responder, e um botão de
   socorro no canto oferece uma saída da tarefa.

   Na geração não há dúvida a tirar: são trinta segundos de espera com uma
   frase dizendo o que está acontecendo, e um botão de atendimento ali só
   oferece socorro para um problema que ainda não existe.

   Na prévia o motivo é outro e mais forte: é a tela da decisão, e o único
   botão à vista precisa ser o que libera a canção. Um segundo botão, verde,
   redondo e no canto, disputa o mesmo dedo.

   `display: none` e não opacidade: um alvo invisível continua clicável e o
   Tab continua parando nele. */
body:has(#tela-form.is-active) .whatsapp-float,
body:has(#tela-contato.is-active) .whatsapp-float,
body:has(#tela-geracao.is-active) .whatsapp-float,
body:has(#tela-previa.is-active) .whatsapp-float { display: none; }

.legal {
  margin: var(--sp-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-align: center;
}

.legal-seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}
.legal-seguro .ico { width: 14px; height: 14px; color: var(--green); }

/* ==========================================================================
   ETAPAS DO FORMULÁRIO
   ========================================================================== */

.etapa-titulo {
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-3);
}

.etapa-apoio {
  color: var(--ink-muted);
  margin-bottom: var(--sp-6);
}

.etapa-sub {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: var(--sp-6) 0 var(--sp-3);
}

/* --- história: texto ou áudio -------------------------------------------- */

.contador {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: right;
}

.gravador {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.gravador-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.gravador-titulo .ico { color: var(--green); }

.gravador-controles {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.gravador-tempo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-muted);
}

.gravador-tempo.is-gravando { color: var(--danger); }

.gravador-aviso {
  margin: var(--sp-3) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.gravador-aviso.is-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--danger);
}
.gravador-aviso .ico { width: 16px; height: 16px; margin-top: 3px; }

.gravador-previa { margin-top: var(--sp-3); width: 100%; }

/* ==========================================================================
   CARREGAMENTO
   ========================================================================== */

.loading-wrap {
  min-height: 70vh;
  min-height: 70dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8);
}

.loading-anel {
  width: 56px; height: 56px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

.loading-texto {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink-muted);
}

/* ==========================================================================
   GERAÇÃO
   ========================================================================== */

.geracao-atelier {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  isolation: isolate;
}

.vinyl-atelier {
  z-index: 2;
}

.atelier-pulso {
  position: absolute;
  top: 24px;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(107, 31, 54, .22);
  border-top-color: rgba(122, 86, 14, .65);
  box-shadow: 0 0 0 10px rgba(107, 31, 54, .04);
  animation: atelier-pulso 3.8s ease-in-out infinite;
  z-index: 1;
}

/* A frase da vez. É o único elemento da tela que troca de conteúdo, e por
   isso ele não precisa ser grande: com quatro elementos na tela, o que se
   move já é o que o olho procura. */
.geracao-status {
  position: relative;
  z-index: 3;
  width: min(100%, 30rem);
  margin: var(--sp-2) auto 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
}

/* Ponto enquanto o passo corre, tique verde por 1,2s quando ele termina.
   É o que faz as frases lerem como sequência, e não como rodízio. Inline e
   não flex: a frase muda de largura a cada troca, e uma marca centralizada
   junto com ela ficaria pulando de lado. */
.geracao-marca {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-right: var(--sp-2);
  vertical-align: -.32em;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  color: var(--border-strong);
  transition: background var(--dur-base) var(--ease-enter),
              border-color var(--dur-base) var(--ease-enter);
}

.geracao-marca .ico { width: 13px; height: 13px; }
.geracao-marca .ico-feito { display: none; }
.geracao-marca .ico-atual { display: block; }

.geracao-status.is-feito .geracao-marca {
  background: var(--green);
  border-color: var(--green);
  color: #FFF;
}
.geracao-status.is-feito .ico-feito { display: block; }
.geracao-status.is-feito .ico-atual { display: none; }

.geracao-substatus {
  position: relative;
  z-index: 3;
  width: min(100%, 36rem);
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.atelier-camadas {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
}

.atelier-camada {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  background: rgba(255, 255, 255, .58);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  transition:
    color var(--dur-base) var(--ease-enter),
    border-color var(--dur-base) var(--ease-enter),
    background var(--dur-base) var(--ease-enter);
}

.atelier-camada span {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.atelier-camada.is-active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--ink);
}

.atelier-camada.is-active span {
  background: var(--green);
  animation: pulso 1.6s ease-in-out infinite;
}

.atelier-camada.is-done {
  color: var(--ink);
}

.atelier-camada.is-done span {
  background: var(--gold-ink);
}

.geracao-progresso { margin-top: var(--sp-8); }

.geracao-pct {
  margin: var(--sp-2) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

/* Mais escuro que o substatus: é a única linha da tela que pede uma ação de
   quem está esperando, e o resto ali é narração do que já está acontecendo. */
.geracao-aviso {
  width: min(100%, 34rem);
  margin: var(--sp-3) auto 0;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.checklist {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--text-base);
}

.check-icone {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  color: var(--border-strong);
}
.check-icone .ico { width: 14px; height: 14px; }
.check-icone .ico-feito { display: none; }
.check-icone .ico-atual { display: none; }

/* Estado atual: dourado + ponto. Cor E forma, nunca só cor. */
.check-item.is-atual { color: var(--ink); font-weight: 600; }
.check-item.is-atual .check-icone {
  border-color: var(--green);
  color: var(--green);
}
.check-item.is-atual .ico-atual { display: block; }

/* Estado concluído: verde + check */
.check-item.is-feito { color: var(--ink); }
.check-item.is-feito .check-icone {
  background: var(--green);
  border-color: var(--green);
  color: #FFF;
}
.check-item.is-feito .ico-feito { display: block; }

.letra-box {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  min-height: 150px;
}

.letra-linhas {
  display: grid;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.letra-linha {
  opacity: 0;
  animation: letra-entra var(--dur-slow) var(--ease-enter) forwards;
}

.letra-aguarde {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
}

@keyframes letra-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes atelier-pulso {
  0%, 100% { transform: scale(.94) rotate(0deg); opacity: .55; }
  50%      { transform: scale(1.04) rotate(24deg); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .letra-linha { opacity: 1; animation: none; }
  .atelier-pulso,
  .atelier-camada.is-active span { animation: none; }
}

.geracao-espera { margin-top: var(--sp-6); font-size: var(--text-sm); }

/* ==========================================================================
   PRÉVIA
   ========================================================================== */

/* A folga embaixo saiu daqui em 28/08/2026. Ela era o espaço da barra fixa
   da oferta, e a barra deixou de subir quando a tela passou a caber inteira
   na janela: a caixa da oferta está sempre à vista, e é a presença dela que
   recolhe a barra. O espaço do rodapé agora é reservado uma vez só, na
   seção "uma tela só" no fim deste arquivo. */
.previa {
  text-align: center;
}

/* O cabeçalho é o mesmo objeto nas duas telas — por isso não se chama mais
   previa-alguma-coisa. Mesma pílula, mesmos tamanhos, mesmas três linhas:
   trocar o conteúdo não mexe um pixel na posição da onda logo abaixo. */
.cancao-topo { text-align: center; }

.cancao-badge { margin-bottom: var(--sp-4); }

.cancao-titulo { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }

.cancao-meta {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-8);
}

.previa-player { margin-top: var(--sp-8); text-align: left; }

.previa-aviso {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-sm);
  text-align: center;
}

.previa .letra-box { text-align: left; }

.previa-oferta {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--gold-soft);
  border: 1px solid var(--gold-ink);
  border-radius: var(--radius-card);
  text-align: center;
}
.previa-oferta h2 { margin-bottom: var(--sp-3); }
.previa-oferta .btn { margin-top: var(--sp-6); }

/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.checkout-titulo { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }

.checkout-bloco { margin-top: var(--sp-8); }

.bloco-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}

.bloco-num {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--green);
  color: #FFF;
  font-size: var(--text-xs);
  font-weight: 700;
}

/* --- dados do comprador --------------------------------------------------- */

.dados-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.link-editar,
.link-secundario {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding-inline: var(--sp-2);
}

.link-secundario {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  text-align: center;
}

.dados-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--text-base);
}
.dados-linha .ico { width: 18px; height: 18px; color: var(--ink-muted); }
.ico-verde { color: var(--green) !important; }

/* --- pacotes -------------------------------------------------------------- */

.pacotes { display: grid; gap: var(--sp-3); }

.pacote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  font-family: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-enter),
              background   var(--dur-fast) var(--ease-enter);
}
.pacote:hover { border-color: var(--border-strong); }

.pacote[aria-checked="true"] {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green-soft);
}
.pacote[aria-checked="true"] .choice-check {
  background: var(--green);
  border-color: var(--green);
  color: #FFF;
}

.pacote-badge {
  position: absolute;
  top: calc(var(--sp-3) * -1);
  left: var(--sp-4);
  background: var(--gold-soft);
  color: var(--gold-ink);
  border-color: var(--gold-ink);
}

.pacote-info { display: grid; gap: 2px; }

/* O selo é absoluto, então ele não empurra nada: quem abre espaço é o
   cartão. Medido em 23/09/2026 no Chrome, a 360, 390 e 430px: o selo tem
   34px e a base dele cai 22px abaixo do topo do cartão, enquanto o conteúdo
   começa em 16px. Sem esta linha ele cobria 6px da primeira linha, e o
   acento de "HISTÓRIAS" sumia embaixo dele.

   Ficou escondido enquanto a primeira linha era o "2 EXTRAS POR R$ 10", e
   apareceu quando ele saiu. sp-8 dá 32px, com 10px de folga. Se alguém
   engordar o .badge ou mudar o `top`, refaça a conta: as duas medidas moram
   em regras diferentes e nada avisa quando divergem. */
.pacote:has(.pacote-badge) { padding-top: var(--sp-8); }

.pacote-selo {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold-ink);
}

.pacote-nome { font-weight: 700; font-size: var(--text-base); }

.pacote-desc { font-size: var(--text-sm); color: var(--ink-muted); }

.pacote-unit { font-size: var(--text-sm); color: var(--green); font-weight: 600; }

.pacote-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.pacote-preco { font-size: var(--text-xl); font-weight: 700; }

/* O preço avulso riscado fica colado no de cima, e não no gap de sp-2 do
   .pacote-lado: separado, ele parece um terceiro preço. */
.pacote-preco-de {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: calc(-1 * var(--sp-2));
}

/* --- order bumps ---------------------------------------------------------- */

.bumps-titulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
}

.bump { margin-bottom: var(--sp-3); }

.bump-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.bump-preco { font-weight: 700; color: var(--gold-ink); white-space: nowrap; }

.bump-desc { font-size: var(--text-sm); margin-bottom: var(--sp-3); }

/* A letra miúda do vídeo com fotos: como ele chega em duas partes. Precisa
   ser lida, mas não pode competir com a cena, que é o que vende. */
.bump-nota { font-size: var(--text-xs); font-style: italic; margin-top: calc(-1 * var(--sp-2)); }

.bump-btn { width: 100%; }

/* Adicionado: cor, ícone e texto mudam juntos */
.bump.is-adicionado {
  border-color: var(--green);
  background: var(--green-soft);
}
.bump.is-adicionado .bump-btn {
  background: var(--green);
  border-color: var(--green);
  color: #FFF;
}
.bump.is-adicionado .ico-add { display: none; }
.bump.is-adicionado .ico-ok  { display: block; }

/* --- resumo --------------------------------------------------------------- */

.resumo { margin-bottom: var(--sp-6); }

.resumo-itens { display: grid; gap: var(--sp-2); }

.resumo-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--text-base);
}

.resumo-item span:last-child { font-variant-numeric: tabular-nums; }

.resumo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.resumo-total strong { font-size: var(--text-xl); }

/* --- pagamento ------------------------------------------------------------ */

.pagamento-titulo {
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.pagamentos { display: grid; gap: var(--sp-3); }

@media (min-width: 480px) {
  .pagamentos { grid-template-columns: repeat(2, 1fr); }
}

.pagamento {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  padding-right: calc(var(--sp-4) + 32px);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-field);
  font-family: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  min-height: 72px;
}
.pagamento:hover { border-color: var(--border-strong); }

.pagamento[aria-checked="true"] {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green-soft);
}
.pagamento[aria-checked="true"] .choice-check {
  background: var(--green);
  border-color: var(--green);
  color: #FFF;
}

.pagamento .choice-check {
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
}

.pagamento-nome { font-weight: 700; }
.pagamento-nota { font-size: var(--text-sm); color: var(--ink-muted); }

.checkout-cta { margin-top: var(--sp-6); }

.cartao-form {
  margin-top: var(--sp-4);
  padding: var(--sp-5, 1.25rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.cartao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5, 1.25rem);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.cartao-topo strong {
  font-size: var(--text-base);
  color: var(--ink);
}

.cartao-topo span {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-align: right;
}

.cartao-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.cartao-field {
  margin: 0;
  display: grid;
  gap: var(--sp-1);
}

.cartao-field > span {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 800;
}

.cartao-field-full {
  grid-column: 1 / -1;
}

.cartao-hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mp-card-input {
  height: 50px;
  min-height: 50px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-field);
  background: var(--surface);
  padding: 0 14px;
  display: flex;
  align-items: center;
  transition: border-color var(--dur-fast) var(--ease-enter),
              box-shadow var(--dur-fast) var(--ease-enter);
}

.mp-card-input iframe {
  width: 100% !important;
  height: 44px !important;
  max-height: 44px !important;
}

.cartao-field input,
.cartao-field select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-field) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: var(--text-base) !important;
  line-height: 48px !important;
  box-shadow: none !important;
}

.mp-card-input:focus-within,
.cartao-field input:focus,
.cartao-field select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(107, 31, 54, .14) !important;
  outline: none !important;
}

.cartao-field select {
  appearance: auto;
}

#form-checkout__cardholderName,
#form-checkout__identificationNumber,
#form-checkout__cardholderEmail,
#form-checkout__installments {
  display: block !important;
  width: 100% !important;
}

.cartao-progress {
  width: 100%;
  height: 4px;
  margin-top: var(--sp-3);
  accent-color: var(--gold);
}

.cartao-progress[value="0"] {
  visibility: hidden;
}

@media (max-width: 520px) {
  .cartao-form { padding: var(--sp-3); }
  .cartao-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-2);
  }
  .cartao-field-full { grid-column: 1 / -1; }
  .cartao-field input,
  .cartao-field select,
  .mp-card-input {
    height: 46px;
    min-height: 46px;
  }
  .cartao-topo {
    display: grid;
    gap: 2px;
  }
  .cartao-topo span { text-align: left; }
}

.selos {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-1);
  text-align: center;
}

.selo-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--text-sm);
}
.selo-linha .ico { width: 16px; height: 16px; }

/* ==========================================================================
   TELA DE PIX
   ========================================================================== */

.pix { text-align: center; }

.pix-badge { margin-bottom: var(--sp-4); }

.pix-titulo { font-size: var(--text-2xl); margin-bottom: var(--sp-3); }

.pix-valor {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 var(--sp-3);
}

.pix-prazo {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--sp-6);
}

/* Quando falta pouco tempo, o aviso passa a chamar atenção — mas o texto
   continua dizendo o prazo, então quem não distingue cor não perde nada. */
.pix-prazo.is-acabando { color: var(--danger); font-weight: 600; }

.pix-card { text-align: center; }

.pix-qr {
  width: 220px;
  margin: 0 auto var(--sp-4);
}
.pix-qr img {
  width: 100%;
  border-radius: var(--radius-field);
  background: #FFFFFF;
}

.pix-instrucao {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}

/* Separador "ou copie o código" com linha dos dois lados */
.pix-separador {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pix-separador::before,
.pix-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.pix-copia { display: grid; gap: var(--sp-2); }

/* O código é longo demais para ser lido; o que importa é copiá-lo.
   Fonte monoespaçada e texto reduzido para caber sem quebrar o layout. */
.pix-codigo {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  background: var(--bg-warm);
}

.pix-btn-copiar { width: 100%; }

.pix-copiado {
  margin: var(--sp-2) 0 0;
  font-size: var(--text-sm);
  color: var(--green);
  font-weight: 600;
}

/* Estado "aguardando": o ponto pulsa para mostrar que a página está viva,
   mas o texto ao lado é quem informa de fato. */
.pix-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--green);
}

.pix-pulso {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  animation: pulso 1.6s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
  .pix-pulso { animation: none; }
}

.pix-status.is-pago { color: var(--green); }
.pix-status.is-pago .pix-pulso { animation: none; }

.pix-aviso {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.modal[hidden] { display: none; }

.modal-fundo {
  position: absolute;
  inset: 0;
  background: rgba(35, 31, 32, .55);
}

.modal-caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: modal-entra var(--dur-base) var(--ease-enter);
}

/* O pop-up de dados do checkout é formulário, e formulário se lê alinhado à
   esquerda, como a tela de contato. */
.modal-dados { text-align: left; }
.modal-dados .modal-titulo { text-align: center; }

.dados-erro {
  color: var(--danger);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
}
.dados-erro[hidden] { display: none; }

.modal-titulo { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.modal-texto { color: var(--ink-muted); margin-bottom: var(--sp-6); }

@keyframes modal-entra {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   TELA — OFERTA DE RETENÇÃO

   Uma coluna, item único, sem grade de pacotes. Tudo aqui empurra para uma
   decisão só, que é o contrário do checkout, onde a pessoa escolhe.
   ========================================================================== */

.oferta { text-align: center; }

.oferta-kicker {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--sp-3);
}

.oferta-titulo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--sp-2);
}
.oferta-titulo em {
  font-style: italic;
  color: var(--gold-ink);
}

.oferta-sub { margin-bottom: var(--sp-8); }

/* Recebe o vinil e o card do player, emprestados da prévia. */
.oferta-palco { margin-bottom: var(--sp-8); }

.oferta-caixa {
  border: 1px solid var(--gold);
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
}

.oferta-chamada { font-size: var(--text-sm); margin-bottom: var(--sp-2); }

.oferta-preco {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

.oferta-itens {
  font-size: var(--text-sm);
  margin-bottom: var(--sp-6);
}
.oferta-itens span::before { content: '✓ '; color: var(--gold-ink); }

.oferta-caixa .field { text-align: left; margin-bottom: var(--sp-4); }

.oferta-rodape { font-size: var(--text-xs); margin-top: var(--sp-3); }

/* Recusar precisa existir e ser encontrável, sem competir com a oferta. */
.oferta-recusar {
  display: block;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-2) var(--sp-4);
  background: none;
  border: 0;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.oferta-recusar:hover { color: var(--ink); }

/* ==========================================================================
   GERAÇÃO — onda radial

   Um elemento só carregando identidade e progresso. Antes eram três blocos
   dizendo a mesma coisa: quatro "camadas", uma barra com porcentagem e um
   checklist de três itens. A onda é a barra.

   O preenchimento vem de uma máscara cônica dirigida por --pct, então não há
   dois indicadores para manter em sincronia — há um.
   ========================================================================== */

.onda {
  /* A onda tem um tamanho base e dois fatores que a encolhem, os dois sem
     unidade para poderem ser multiplicados entre si:

     --k  quem e a tela. A geracao usa 1, porque la a onda E a informacao;
          a previa usa .6, porque la a cancao ja ficou pronta e ela decora.
     --kv qual a altura da janela. Definido na secao de uma tela so, la
          embaixo, e o que faz a onda caber num celular baixo sem cortar
          nada.

     A altura de cada barra vem do --h que o js/app.js escreve em rem, e
     por isso ela tambem precisa passar pela mesma escala: sem isso a barra
     continua do tamanho antigo e vaza para fora do circulo encolhido. */
  --k: 1;
  --kv: 1;
  --escala: calc(var(--k) * var(--kv));
  --tamanho: calc(15rem * var(--escala));
  --raio: calc(3.9rem * var(--escala));
  --pct: 0;
  position: relative;
  width: var(--tamanho);
  height: var(--tamanho);
  margin: var(--sp-6) auto var(--sp-4);
}

.onda-barras { position: absolute; inset: 0; }

.onda-barras i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  transform-origin: 50% 0;
  transform: rotate(var(--a)) translateY(var(--raio));
  height: calc(var(--h) * var(--escala));
}

/* O que falta fica visível mas quieto: sem fantasma, a pessoa não percebe
   quanto ainda vem. */
.onda-vazias i { background: rgba(36, 26, 28, .13); }
.onda-cheias i { background: var(--gold); }

.onda-cheias {
  -webkit-mask-image: conic-gradient(#000 calc(var(--pct) * 1%), transparent 0);
          mask-image: conic-gradient(#000 calc(var(--pct) * 1%), transparent 0);
  transition: -webkit-mask-image .6s linear, mask-image .6s linear;
}

.onda-centro {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
}

.onda-pulso { display: flex; align-items: center; gap: 3px; height: 1.6rem; }

.onda-pulso i {
  width: 3px;
  height: 35%;
  border-radius: 2px;
  background: var(--gold-ink);
  animation: onda-pulsar 1.1s ease-in-out infinite;
}
.onda-pulso i:nth-child(2) { animation-delay: .12s; }
.onda-pulso i:nth-child(3) { animation-delay: .24s; }
.onda-pulso i:nth-child(4) { animation-delay: .36s; }
.onda-pulso i:nth-child(5) { animation-delay: .48s; }

@keyframes onda-pulsar {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}

/* A canção terminou: a onda para de pulsar e o miolo abre espaço ao play. */
.onda.is-pronta .onda-pulso { display: none; }

@media (prefers-reduced-motion: reduce) {
  .onda-pulso i { animation: none; height: 60%; }
  .onda-cheias { transition: none; }
}

.geracao-pct {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-4);
}

/* Três linhas e a terceira esmaecendo. A letra é a prova de que a canção é
   dela; o degradê promete que tem mais sem empurrar a tela para baixo. */
.letra-degrade {
  max-height: 13rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* ==========================================================================
   RODAPÉ FIXO

   Padrão de quiz: fica fora do caminho enquanto não há decisão a tomar, e
   sobe no instante em que há. Assim o botão que importa nunca depende de
   rolagem.
   ========================================================================== */

.rodape-fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 252, 246, .97);
  border-top: 1px solid rgba(36, 26, 28, .10);
  box-shadow: 0 -8px 24px rgba(36, 26, 28, .08);
  animation: rodape-subir .35s ease-out;
}

@keyframes rodape-subir {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* O respiro do rodapé é o de .funil-corpo, que já reserva sp-16 + 120px —
   mais que suficiente para a barra da oferta e o botão do WhatsApp. Ter uma
   regra própria aqui só servia para diminuí-lo. */

@media (prefers-reduced-motion: reduce) {
  .rodape-fixo { animation: none; }
}

/* O play mora no miolo da onda: a pessoa aperta exatamente o objeto que viu
   sendo construído. */
.onda-play {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gold-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.onda-play .ico { width: 1.9rem; height: 1.9rem; }
.onda-play:hover { color: var(--gold-strong); }

.onda-play:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 4px;
}

/* Girando: durante a geração a onda inteira roda devagar. Nove segundos por
   volta é lento o bastante para ler como respiração e não como spinner de
   sistema travado. O dourado continua crescendo por baixo da rotação, então
   o objeto diz as duas coisas: que está trabalhando e que está avançando. */
.onda.is-spinning { animation: onda-girar 9s linear infinite; }

@keyframes onda-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Tocando: as barras ondulam de leve, como um espectro reagindo ao som. */
.onda.is-spinning .onda-cheias i {
  animation: onda-viva 1.6s ease-in-out infinite;
  animation-delay: calc(var(--a) / 360deg * -1.6s);
}

@keyframes onda-viva {
  0%, 100% { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(1); }
  50%      { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .onda.is-spinning { animation: none; }
  .onda.is-spinning .onda-cheias i { animation: none; }
}

/* --- a onda como player: prévia e oferta ---------------------------------

   Desde 26/09/2026 o play mora aqui, e não num botão de 44px no canto do
   card. A onda não lê o som de verdade, de propósito: para ler, o áudio tem
   de passar pelo Web Audio, e no iPhone com a chave no silencioso esse
   caminho fica MUDO, enquanto o <audio> comum toca. A prévia é a tela que
   vende, e muda ela não vende. As barras só parecem ouvir: cada grupo pulsa
   num tempo diferente, e o desencontro é o que lê como música. */

.onda-player .onda-play {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(.25rem * var(--escala));
  background: var(--wine);
  color: var(--ink-invert);
  box-shadow: 0 6px 18px rgba(36, 59, 58, .28);
  transition: transform var(--dur-fast) var(--ease-enter);
}
.onda-player .onda-play:hover { background: var(--wine-deep); color: var(--ink-invert); }
.onda-player .onda-play:active { transform: scale(.94); }

.onda-play .ico-play,
.onda-play .ico-pause {
  /* Sozinho no disco desde que o contador saiu dele, o símbolo ocupa quase
     metade do diâmetro, que é o tamanho em que se lê de relance. O piso em
     px segura a janela baixa, onde a escala da onda desce muito. */
  width: max(22px, calc(3.4rem * var(--escala)));
  height: max(22px, calc(3.4rem * var(--escala)));
}
/* O desenho do #i-play já vem com o centro de massa no meio do quadro
   (x 12,2 de 24). Uma margem de 8% para a DIREITA por cima dele o deixava
   torto; no centro de massa exato, o dono ainda o via à direita. Este
   recuo leva o triângulo para perto do centro da própria caixa, entre os
   dois, que é onde ele lê como centrado. Ajustado no olho, em print. */
.onda-play .ico-play { transform: translateX(-8%); }


/* Parado e ainda não tocado, o disco chama: cresce e volta num ritmo de
   respiração, e uma onda sai dele e atravessa as barras. A primeira versão
   usava um anel dourado sobre as barras douradas, e em print os dois
   quadros de 0,9s eram iguais: dourado sobre dourado não se vê. A onda
   agora é vinho, a mesma cor do disco, e termina fora das barras, sobre o
   creme, que é onde o contraste existe.

   O convite para no primeiro toque (.ja-tocou): depois dele ela já sabe
   onde fica o play, e botão pulsando sem motivo vira ruído. */
.onda-player::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(36, 59, 58, .38);
  opacity: 0;
  pointer-events: none;
}
.onda-player:not(.ja-tocou)::before { animation: onda-convite 1.6s ease-out infinite; }
.onda-player:not(.ja-tocou) .onda-play { animation: play-chama 1.6s ease-in-out infinite; }

/* O anel nasce fora do disco e aparece aos poucos. Nascendo na borda e já
   escuro, ele colava no disco enquanto o disco pulsava, e lia como um
   segundo contorno torto, apontado pelo dono em print. O disco chega a .43
   da onda no auge do pulso; o anel começa em .5, sempre por fora. */
@keyframes onda-convite {
  0%   { transform: scale(.5);  opacity: 0; }
  20%  { transform: scale(.62); opacity: .8; }
  100% { transform: scale(1.12); opacity: 0; }
}
@keyframes play-chama {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(36, 59, 58, .28); }
  50%      { transform: scale(1.07); box-shadow: 0 10px 26px rgba(36, 59, 58, .36); }
}

/* Tocando, a mesma onda vira batida, em 0,8s, perto do andamento de um
   louvor, e mais curta, para não disputar com as barras. */
.onda-player.is-tocando::before { animation: onda-batida .8s ease-out infinite; }

@keyframes onda-batida {
  0%   { transform: scale(.5);  opacity: .55; }
  100% { transform: scale(.98); opacity: 0; }
}

/* As barras dançam com amplitude de verdade. Com o pico em 1,8x a
   diferença entre dois quadros mal aparecia e a onda lia como brilho, não
   como música. */
.onda-player.is-tocando .onda-cheias i {
  animation: onda-som 1.3s ease-in-out infinite;
  animation-delay: calc(var(--a) / 360deg * -2.9s);
}
.onda-player.is-tocando .onda-cheias i:nth-child(3n)   { animation-duration: .9s; }
.onda-player.is-tocando .onda-cheias i:nth-child(4n+1) { animation-duration: 1.7s; }
.onda-player.is-tocando .onda-cheias i:nth-child(5n+2) { animation-duration: 1.1s; }

@keyframes onda-som {
  0%, 100% { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(.55); }
  20%      { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(1.9); }
  45%      { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(.8); }
  65%      { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(2.4); }
  85%      { transform: rotate(var(--a)) translateY(var(--raio)) scaleY(1.1); }
}

/* Entre o toque e o som: as barras esperam e um anel gira em volta do
   botão. Barra dançando em silêncio mentiria que já começou. */
.onda-player.is-carregando .onda-cheias i { animation-play-state: paused; }
.onda-player.is-carregando::before { animation: none; }
.onda-player.is-carregando .onda-play::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  animation: onda-girar .8s linear infinite;
  pointer-events: none;
}

/* A instrução mora colada na onda e troca com o estado dela. Tinta cheia e
   peso, porque é a frase que responde "o que eu faço agora". */
.previa-instrucao {
  margin: 0 0 var(--sp-2);
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}
.previa-instrucao.is-erro { color: var(--danger); }

/* O botão de comprar acende depois de ~20s de música (js/player.js). O
   brilho é o mesmo do hover do .btn-primary, que no celular nunca roda,
   agora repetindo sozinho, com um respiro de tamanho junto. */
#tela-previa.cta-aceso .btn-primary {
  animation: cta-chama 2.8s ease-in-out infinite;
}
#tela-previa.cta-aceso .btn-primary::after {
  animation: cta-brilho 2.8s ease-in-out infinite;
}

@keyframes cta-chama {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@keyframes cta-brilho {
  0%, 45% { transform: rotate(18deg) translateX(-120%); }
  100%    { transform: rotate(18deg) translateX(420%); }
}

@media (prefers-reduced-motion: reduce) {
  .onda-player:not(.ja-tocou)::before,
  .onda-player:not(.ja-tocou) .onda-play,
  .onda-player.is-tocando::before,
  .onda-player.is-tocando .onda-cheias i,
  #tela-previa.cta-aceso .btn-primary,
  #tela-previa.cta-aceso .btn-primary::after { animation: none; }
  .onda-player.is-carregando .onda-play::after { animation-duration: 2s; }
}

.previa-player { margin-bottom: var(--sp-6); }

/* ==========================================================================
   PORTÃO DE RESGATE
   ========================================================================== */

/* Aparece quando ela volta ao portão já tendo passado por ele, dizendo
   quantas canções ainda faltam. Sem isso vem a pergunta "será que a
   primeira contou?". */
.resgate-aviso {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--text-sm);
  text-align: center;
}

#tela-resgate .btn-ghost { margin-top: var(--sp-3); }

/* A nota do trio no checkout: quem compra 3 precisa saber, ANTES de pagar,
   que cria 1 agora e as outras 2 pelo link, e que o prazo é de 7 dias.
   Descobrir isso depois do pagamento é o caminho curto para o estorno. */
.pacote-nota {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.45;
}

/* A margem de .cancao-meta colapsa para fora do <header>, e na geração e na
   prévia isso não aparece porque a onda tem margem própria logo abaixo. Aqui
   o campo vem direto, e a frase ficava colada no rótulo. Escopo só nesta
   tela: as outras duas têm o cabeçalho alinhado ao pixel e não podem mudar. */
#tela-resgate .cancao-topo { margin-bottom: var(--sp-8); }

/* ==========================================================================
   SELO DO MERCADO PAGO — checkout

   A logo existe para o nome ter rosto: "Mercado Pago" escrito é uma
   afirmação, a marca reconhecida é uma prova. Fica ao lado do texto, não
   acima, para não empurrar o botão de pagar para longe.
   ========================================================================== */

.selo-mp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  /* Solto entre os botoes de forma de pagamento e o formulario do cartao,
     desde 28/08/2026. Antes ele morava dentro de .selos, embaixo do botao de
     pagar, e herdava o espaco de la. */
  margin: var(--sp-4) 0 var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  background: var(--surface);
  text-align: left;
}

.selo-mp-logo {
  width: 92px;
  height: auto;
  display: block;
}

.selo-mp-texto {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-muted);
}

.selo-mp-texto strong { color: var(--ink); }

/* Abaixo de 400px a logo e o texto disputam a mesma linha e o texto vira
   coluna de duas palavras. Empilhado, a logo continua sendo reconhecida. */
@media (max-width: 399px) {
  .selo-mp {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--sp-2);
    text-align: center;
  }
}

/* O CPF mora entre os botoes de forma de pagamento e o selo do Mercado Pago,
   desde 28/08/2026. Precisa do respiro dos dois lados que ganhava por estar
   dentro do bloco de dados, senao encosta nos botoes e no selo. */
.field-cpf { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }

/* Na previa a onda e decorativa: a cancao ja ficou pronta e ela nao indica
   mais progresso nenhum. Em 15rem ela sozinha empurrava o botao de liberar
   para baixo da dobra num celular comum. Na geracao continua grande, porque
   la ela E a informacao. */
.previa .onda { --k: .6; }

/* A onda-player é maior que a da geração encolhida, e come a própria
   margem. A caixa da onda é um quadrado de 15rem, mas as barras paradas
   terminam em ~6rem do centro: sobrava 1,5rem de creme vazio em cima e
   embaixo, que o dono apontou em print. A margem negativa devolve esse
   vão à tela, e ele vira onda maior. A dança e o anel continuam passando
   por cima dessa faixa, porque a onda não corta o que transborda. */
.previa .onda-player { --k: .76; }
.funil-corpo.previa > .onda-player {
  margin-block: calc(-1.3rem * var(--escala));
}

/* Em janela baixa a onda encolhe para .55, e com o play dentro isso dava um
   botão de 34px e um contador de 9px num celular de 360x640, menor que o
   botão de antes. Aqui ela para em .7: o miolo fica nos 44px de toque, e o
   botão da oferta ainda cabe inteiro na primeira tela. Medido em print. */
@media (max-height: 640px) {
  .previa .onda.onda-player { --kv: .7; }
}
/* ==========================================================================
   UMA TELA SÓ — geração e prévia sem rolagem

   As duas telas passaram a caber inteiras na altura da janela.

   O motivo é o mesmo nas duas, e é de dinheiro. Na prévia, a caixa "Libere
   a música completa" nascia abaixo da dobra. Na geração, o trecho da letra
   sendo escrita, que é a prova de que a canção é daquela pessoa, também.
   Quem não rola não vê, e em tráfego frio boa parte não rola.

   O mecanismo é um só: a coluna vira flex com a altura da janela, o espaço
   entre os blocos passa a ser o gap da coluna em vez da margem de cada
   peça, e o que pode encolher encolhe. A onda encolhe por um fator ligado
   à altura da janela, e a caixa da letra por ser o único bloco elástico da
   geração.

   Nada foi retirado da tela, só apertado. E nada aqui usa overflow: hidden.
   Numa janela muito baixa (celular deitado, navegador com barra de
   ferramentas grande) o conteúdo volta a rolar como antes, que é bem melhor
   que ficar cortado e inalcançável.
   ========================================================================== */

.funil-corpo.geracao,
.funil-corpo.previa {
  /* O respiro entre os blocos encolhe junto com a janela. Ele entra oito
     vezes na geração, e é essa soma que decidia entre caber e não caber. */
  --respiro: clamp(var(--sp-2), 1.6vh, var(--sp-6));

  display: flex;
  flex-direction: column;
  gap: var(--respiro);
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: clamp(var(--sp-3), 2vh, var(--sp-8));

  /* Um pouco mais embaixo que em cima: peso ótico. Centrar pelo pixel deixa
     qualquer composição parecendo caída para baixo.

     Aqui havia 72px reservados para o botão do WhatsApp. Ele saiu destas
     duas telas em 28/08/2026 e a folga saiu junto, senão sobrava um vão de
     dois dedos no fim da tela sem nada para ocupá-lo. */
  padding-bottom: calc(clamp(var(--sp-4), 2.6vh, var(--sp-12)) +
                       env(safe-area-inset-bottom, 0px));

  /* `safe` para o caso de não caber: centralizar conteúdo mais alto que a
     janela corta o topo, e topo cortado não volta nem rolando. */
  justify-content: center;
  justify-content: safe center;
}

/* O espaço entre os blocos agora é o gap. As margens que cada peça trazia
   somavam com ele e devolviam a rolagem que esta seção veio tirar. */
.funil-corpo.geracao > *,
.funil-corpo.previa > * { margin-block: 0; }

/* O cabeçalho é o mesmo objeto nas duas telas e continua sendo: só as três
   folgas internas dele encolhem, e encolhem igual nas duas. */
.geracao .cancao-badge,
.previa .cancao-badge { margin-bottom: var(--sp-2); }

/* A entrelinha do h1 é 1.02, que serve a um título de uma linha e cola as
   duas quando ele quebra. E `balance` para a quebra cair no meio da frase
   em vez de deixar uma palavra órfã na segunda linha. */
.geracao .cancao-titulo,
.previa .cancao-titulo {
  font-size: clamp(var(--text-xl), 4.2vh, var(--text-2xl));
  line-height: 1.15;
  text-wrap: balance;
}

.geracao .cancao-meta,
.previa .cancao-meta { margin-bottom: 0; }

/* A onda encolhe em degraus de altura de janela, e não por clamp, porque a
   altura de cada barra vem em rem do js/app.js e precisa ser multiplicada
   pelo mesmo número. Número sem unidade não sai de um clamp com unidade. */
@media (max-height: 820px) {
  .geracao .onda,
  .previa .onda { --kv: .85; }
}
@media (max-height: 720px) {
  .geracao .onda,
  .previa .onda { --kv: .7; }
}
@media (max-height: 640px) {
  .geracao .onda,
  .previa .onda { --kv: .55; }
}

/* --- geração ------------------------------------------------------------ */

.geracao .geracao-status { margin-top: 0; }

/* A porcentagem em serifada de 26px repetia, em número, o que a onda logo
   acima já mostra em forma. Continua legível ocupando uma linha de texto. */
.geracao .geracao-pct { font-size: var(--text-xl); }

/* O aviso mora no cabeçalho, entre o título e as escolhas. Duas linhas de
   propósito: a ordem em tinta cheia, o prazo em texto de apoio. Empilhadas
   elas se distinguem sem precisar de tamanho diferente. */
.geracao .geracao-substatus {
  width: min(100%, 30rem);
  margin: var(--sp-3) auto 0;
  line-height: 1.4;
}

.geracao-substatus strong { display: block; color: var(--ink); }
.geracao-substatus span { display: block; color: var(--ink-muted); }

.geracao .cancao-meta { margin-top: var(--sp-3); }

/* Sobraram quatro elementos na tela, e nenhum deles cresce. A sobra de
   altura vai toda para o respiro entre eles, que é o que faz a onda ficar
   no meio da tela em vez de encostar no cabeçalho. */
.geracao .onda { flex: 0 0 auto; }

/* --- prévia -------------------------------------------------------------- */

/* Sem moldura desde 26/09/2026: a trilha e as duas linhas ficam soltas sob
   a onda, como parte dela, e não como uma caixa a mais competindo. */
.previa .previa-player { padding: 0; }

/* A trilha da prévia é a única medida do tempo na tela, desde que o
   contador saiu do disco. Por isso ela é mais forte que a trilha genérica
   do .player: mais grossa, preenchida na cor do disco, com uma bolinha na
   ponta, e os números em tinta cheia e negrito. Escopo na prévia, para não
   mudar os players da landing. */
.previa-player .player-track-rail {
  height: 6px;
  overflow: visible;
  background: rgba(36, 59, 58, .16);
}
.previa-player .player-track-fill {
  position: relative;
  background: var(--wine);
}
.previa-player .player-track-fill::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 1px 4px rgba(36, 59, 58, .3);
}
.previa-player .player-time {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-base);
}
.previa-player #previa-duracao { font-weight: 600; }

/* A instrução responde ao botão, então encosta na onda: metade do respiro
   entre os blocos. Na distância cheia ela lia como um bloco à parte. */
.previa .funil-corpo > .previa-player,
.funil-corpo.previa > .previa-player { margin-top: calc(var(--respiro) * -.5); }

.previa .previa-aviso { margin-top: var(--sp-2); line-height: 1.4; text-wrap: balance; }

.previa .previa-oferta { padding: clamp(var(--sp-4), 2.4vh, var(--sp-6)); }

.previa .previa-oferta .eyebrow { margin-bottom: var(--sp-1); }

.previa .previa-oferta h2 {
  margin-bottom: var(--sp-2);
  font-size: clamp(var(--text-xl), 4vh, var(--text-2xl));
}

.previa .previa-oferta .btn { margin-top: clamp(var(--sp-3), 1.6vh, var(--sp-6)); }

/* ==========================================================================
   OS EXTRAS DEPOIS DA VENDA, /extras

   Quem lê isto já pagou e já ouviu a canção. A tela tem um trabalho que as
   outras não têm: EXPLICAR o que é o vídeo com fotos. Em 90 dias o checkout
   vendeu 11 deles, e a aposta é que a linha curta do checkout não conta o
   suficiente. Por isso cada item tem um parágrafo, e não só um preço.
   ========================================================================== */

#tela-extras .btn-ghost { margin-top: var(--sp-3); }

#extras-escolha { margin-top: var(--sp-5); }

#extras-qual {
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
}

/* A lista de canções só aparece com duas ou mais, que são 20% dos números. */
.extras-cancao {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.extras-cancao small {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

/* O item inteiro é clicável, e não só a caixinha: o dedo no celular erra o
   quadradinho de 16px e a pessoa acha que a tela travou. */
.extras-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.extras-item input { margin-top: 3px; }

.extras-item-titulo {
  font-weight: 600;
  line-height: 1.4;
}

/* O texto explicativo ocupa a largura toda, embaixo do título, e não ao lado
   da caixinha: num celular de 360px o recuo comeria metade da linha. */
.extras-item-texto {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}

.extras-rodape {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  text-align: center;
  line-height: 1.5;
}

/* A explicação de como o vídeo funciona, acima do campo de telefone.
   Ela existe porque o checkout explica o vídeo numa linha, e ele vendeu 11
   vezes em 90 dias. Aqui há espaço para contar. */
.extras-explica { margin: var(--sp-5) 0; }

.extras-passos {
  margin: 0;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.extras-passos li {
  font-size: var(--text-sm);
  line-height: 1.55;
}

.extras-chamada {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--text-sm);
  text-align: center;
}

/* ==========================================================================
   O EXEMPLO DO VÍDEO, por cima do checkout
   ========================================================================== */

/* Dourado suave, que é a linguagem de "selo e detalhe" desta casa, e não
   verde nem vinho, que são as cores de comprar. Assim ele convida sem virar
   um segundo botão de compra: ver o exemplo é um desvio, comprar é o
   caminho, e dois botões com a mesma força dividiriam o dedo em duas
   direções.

   O par `--gold-ink` sobre `--gold-soft` já é usado no selo do pacote e na
   caixa da oferta da prévia. Faz 8,2:1, bem acima do mínimo, e não é uma
   combinação nova a conferir. */
.bump-exemplo {
  width: 100%;
  margin-bottom: var(--sp-3);
  background: var(--gold-soft);
  border: 1.5px solid var(--gold-ink);
  color: var(--gold-ink);
  font-weight: 600;
}

.bump-exemplo .ico { color: var(--gold-ink); }

/* Mais quente no toque, e continua a 6,9:1. */
.bump-exemplo:hover { background: var(--gold-pico); color: var(--gold-ink); }

.bump-exemplo:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

.exemplo-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  background: rgba(35, 31, 32, .82);
}
.exemplo-overlay[hidden] { display: none; }

/* O vídeo é 9/16, de celular em pé. Num desktop, esticado na largura ele
   viraria uma coluna de dois metros. O teto é a ALTURA da janela, e a
   largura sai dela pela proporção, então no computador ele aparece
   centralizado, do tamanho de um celular. */
.exemplo-caixa {
  width: min(100%, calc((100dvh - 190px) * 9 / 16));
  max-width: 420px;
  display: grid;
  gap: var(--sp-3);
}

.exemplo-barra { display: flex; }

/* Branco porque o fundo aqui é escuro, ao contrário do voltar do cabeçalho
   do funil, que vive sobre o creme da página. */
.exemplo-overlay .btn-voltar { color: #FFF; }
.exemplo-overlay .btn-voltar:hover { color: #FFF; opacity: .8; }

.exemplo-video {
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - 190px);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
}

.exemplo-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* O que ela vai ter que fazer depois de comprar, lido logo depois de ver o
   que vai receber. É a única informação que o vídeo não consegue dar. */
.exemplo-nota {
  margin: 0;
  color: #FFF;
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
}

/* O cartão pisca por um segundo quando ela volta do exemplo. Sem isto ela
   volta para uma tela cheia e precisa procurar de novo onde marcar. */
.bump.is-destacado {
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px var(--gold-soft);
  transition: box-shadow var(--dur-base) var(--ease-enter),
              border-color var(--dur-base) var(--ease-enter);
}