/* ==========================================================================
   AS ETAPAS — a tela "Assistir" do 2.0

   Ela herda a planta do feed (feed.css): vídeo de tela cheia, trilha vertical
   com encaixe, rodapé por cima do vídeo, barra de progresso colada na barra de
   navegação. O que este arquivo acrescenta é a peça que o 2.0 tem e o 1.0 não
   tinha: A CONTAGEM QUE VIRA BOTÃO.

   ORDEM DE CARGA: depois de feed.css, sempre. Várias regras daqui ajustam
   posição de blocos que aquele arquivo já posiciona.
   ========================================================================== */

/* A lateral sobe: a caixa de ação passa a ocupar a faixa que ela usava. Com o
   coração no lugar antigo, um botão de largura cheia passaria por baixo dele. */
.etapas-acoes {
  bottom: calc(var(--nav-h, 64px) + 268px);
}

/* ------------------------------------------------- A CONTAGEM E O BOTÃO

   OS DOIS OCUPAM O MESMO LUGAR, e isso é a regra central desta tela: são o
   mesmo objeto em dois estados. A contagem promete, o botão entrega. Se o botão
   nascesse em outro canto, a pessoa teria de procurar o que a espera prometeu —
   e procurar, aqui, é onde ela desiste.

   A faixa fica ACIMA do rodapé e abaixo do coração: no caminho do olho que já
   está seguindo o vídeo, sem cobrir o rosto da campanha. */
.etapa-acao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h, 64px) + 172px);
  z-index: 4;
  display: flex;
  justify-content: center;
  padding: 0 14px;
  pointer-events: none;
}

/* ---- a contagem ---------------------------------------------------------

   A pílula escura com a frase e o número no fim é a forma que a pessoa
   reconhece do anúncio que roda antes do vídeo. Reconhecer é o que faz ela
   ESPERAR em vez de procurar a saída — por isso a peça imita o formato
   conhecido em vez de inventar um. O que muda é o que vem depois: lá o botão
   livra do anúncio, aqui ele paga. */
.etapa-contagem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

/* O número é tabular para não dançar quando 6 vira 5: dígito de largura
   variável faz a pílula inteira pulsar de tamanho a cada segundo. */
.etapa-contagem-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--verde-cheio);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.etapa-contagem-txt {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* ---- o botão ------------------------------------------------------------

   Largura quase cheia, verde do dinheiro, o valor escrito DENTRO dele. O texto
   sozinho ("Resgatar agora") diria o gesto; com o valor ao lado ele diz o que o
   gesto entrega, e é o valor que faz o dedo sair do lugar.

   `pulsa-chamando` (styles.css) é o mesmo anel do botão de sacar do topo: o app
   tem um jeito só de dizer "toque aqui", e ele não muda de tela para tela. */
.etapa-resgatar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--verde-cheio);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  /* A entrada é curta e vem de baixo: o botão SUBSTITUI a contagem, e uma peça
     que aparece do nada no lugar de outra é lida como falha de desenho. */
  animation: etapa-entra 260ms cubic-bezier(.2, .8, .3, 1) both;
}

.etapa-resgatar:active { transform: scale(.97); }

.etapa-resgatar-valor {
  font-variant-numeric: tabular-nums;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
}

@keyframes etapa-entra {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- o selo de quem já recebeu -----------------------------------------
   Etapa vista numa visita anterior não tem contagem nem botão: tem a resposta.
   Discreto de propósito — é registro, não comemoração; a comemoração já
   aconteceu no dia em que o dinheiro caiu. */
.etapa-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
  color: var(--verde);
  font-size: 14px;
  font-weight: 700;
}

/* ------------------------------------------------------------- O rodapé */

.etapa-quem-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* "Etapa 2 de 3" é a única coisa nesta tela que diz onde a pessoa está no
   percurso. Ela fica embaixo do nome da marca, em maiúsculas pequenas: o
   percurso é contexto permanente, não notícia. */
.etapa-passo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .88;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------- A chamada no topo */

/* Sobre o vídeo, a seta e a palavra precisam da mesma sombra que o resto do
   texto do feed tem: sem ela, o verde some num quadro claro. */
.etapas-chamada .topo-sacar {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* Sobre o vídeo ela divide a faixa com o saldo, que é mais largo que a logo do
   topo — então encolhe um pouco, mantendo a margem que a leva até a palavra. */
.etapas-topo .topo-seta { width: 62px; margin-right: -13px; }

.etapas-topo .topo-chamada { pointer-events: auto; margin-left: auto; }

/* O saldo e a chamada na mesma linha. `.feed-topo` é coluna (o feed tinha
   saldo e abas, um sobre o outro); sem abas, a linha é uma só. */
.etapas-topo {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* ---------------------------------------------------------- Sem etapas */

.etapas-vazio {
  height: 100dvh;
  display: grid;
  place-content: center;
  gap: var(--e-2);
  padding: var(--pad-tela);
  text-align: center;
  color: #fff;
}

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