/* ==========================================================================
   INÍCIO — o painel do funil (telas/inicio.js)

   Três blocos e nada mais: o saldo com a distância até o Pix, as três etapas
   e o que entrou na conta. A base já entrega .cartao, .cartao-saldo, .bloco,
   .barra e .linha-resumo — aqui só está o que é desta tela.

   O arquivo se chama inicio2.css porque inicio.css é a folha da home do 1.0,
   que continua no repositório. Os dois nomes convivem sem um sobrescrever o
   outro enquanto a home velha estiver desligada.
   ========================================================================== */

.inicio-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

/* ------------------------------------------------------- As três etapas

   Uma linha por etapa: a marca à esquerda, quem é a campanha no meio, o que
   ela paga à direita. A hierarquia é de ESTADO, não de ordem — o olho tem que
   achar "onde eu parei" antes de ler qualquer nome. */

.inicio-passo {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--borda);
}

.inicio-passo:last-of-type { border-bottom: 0; }

.inicio-passo-marca {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--superficie-3);
  color: var(--texto-3);
  flex: none;
}

.inicio-passo-num {
  font-size: var(--txt-nota);
  font-weight: var(--peso-extra);
  line-height: 1;
}

.inicio-passo-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* O nome da campanha e a linha de apoio cortam com reticências: título de
   anúncio tem tamanho imprevisível, e uma linha que quebra empurra o valor da
   direita para baixo. */
.inicio-passo-txt strong,
.inicio-passo-txt .nota {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inicio-passo-valor {
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  font-weight: var(--peso-extra);
}

/* FEITA: a marca vira o certo verde e a linha inteira recua um pouco. Ela já
   cumpriu o papel dela — continua legível, para a pessoa ver o caminho andado,
   sem competir com a etapa que falta. */
.inicio-passo-feito .inicio-passo-marca {
  background: var(--verde-suave);
  color: var(--verde);
}

.inicio-passo-feito .inicio-passo-txt strong { color: var(--texto-fraco); }

/* AGORA: a etapa da vez é a única acesa. Sem animação — o movimento desta tela
   está reservado ao botão de sacar, e duas coisas pulsando não chamam para
   lugar nenhum. */
.inicio-passo-agora .inicio-passo-marca {
  background: var(--marca);
  color: var(--sobre-marca);
  box-shadow: var(--sombra-marca);
}

/* ------------------------------------------------------------- O que entrou */

.inicio-lanc-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.inicio-lanc-txt span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}