/* ==========================================================================
   solitpmt · /static/css/inicio.css — página inicial (index.html, rota /)
   Carregue depois de /static/css/solit.css. Só a composição da página inicial: os
   componentes (cartão, extrato, tabelas, resumo do saque, faixa) ficam no
   solit.css. Nenhuma cor nova; só tokens.

   Sumário
   1. Topo
   2. Como funciona: quatro passos
   3. Taxas e limites, exemplo de saque
   4. API
   5. Segurança
   6. Chamada final (faixa navy)
   7. Celular: ações empilhadas
   ========================================================================== */


/* 1. Topo ------------------------------------------------------------------ */
.inicio { padding-block: clamp(56px, 8vw, 120px) var(--respiro); }

.inicio__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-9);
}

/* cada frase numa linha a partir de 1200 px (máximo de 50 px no título);
   quebra comum, com   no HTML prendendo "por PIX" e "em 24 horas" */
.inicio__linha { display: block; text-wrap: wrap; }

.inicio__lead { margin-top: var(--esp-7); max-width: 30em; }

.inicio__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-7);
  margin-top: var(--esp-8);
}

.inicio__nota {
  margin-top: var(--esp-5);
  font-size: var(--tam-pequeno);
  color: var(--texto-suave);
}

@media (min-width: 1024px) {
  .inicio__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--esp-10);
    align-items: center;
  }
}
@media (min-width: 1200px) {
  .inicio__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-11); }
}

/* Extrato do topo: o produto real, com valores de exemplo que fecham */
.extrato .lancamentos { border-top: 1px solid var(--linha); }


/* 2. Como funciona: quatro passos ------------------------------------------ */
.passos { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--esp-8); }

.passo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--esp-5) 0 var(--esp-8);
  border-top: 1px solid var(--linha-forte);
}

.passo__num { font-size: var(--tam-pequeno); color: var(--texto-suave); }
.passo .titulo-bloco { margin-top: var(--esp-4); }
.passo p { margin-top: var(--esp-2); max-width: 30em; }
.passo .selo { margin-top: var(--esp-5); }

@media (min-width: 640px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-8); }
  .passo .selo { margin-top: auto; padding-top: var(--esp-5); }
}

@media (min-width: 1024px) {
  .passos { margin-top: var(--esp-10); column-gap: var(--esp-9); }
}

/* abaixo de 640 px: linha do tempo vertical */
@media (max-width: 639px) {
  .passos {
    margin-left: 5px;
    border-left: 1px solid var(--linha-forte);
  }
  .passo {
    position: relative;
    padding: 0 0 var(--esp-8) var(--esp-6);
    border-top: 0;
  }
  .passo:last-child { padding-bottom: var(--esp-1); }
  .passo::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -6px;
    width: 11px;
    height: 11px;
    border: 1px solid var(--tinta);
    border-radius: 50%;
    background: var(--fundo);
  }
  .passo .titulo-bloco { margin-top: var(--esp-2); }
  .passo .selo { margin-top: var(--esp-3); }
}


/* 3. Taxas e limites, exemplo de saque -------------------------------------- */
.tarifas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-9); margin-top: var(--esp-8); }

@media (min-width: 1024px) {
  .tarifas { margin-top: var(--esp-10); }
}
@media (min-width: 1200px) {
  .tarifas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-10); align-items: start; }
}

/* caixa do exemplo de saque, com o resumo .conta (solit.css, seção 13) */
.exemplo {
  margin-top: var(--esp-9);
  padding: var(--esp-6);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
}

.exemplo__cab p { margin-top: var(--esp-2); max-width: 34em; }
.exemplo .conta { margin-top: var(--esp-6); }

.exemplo__nota {
  margin-top: var(--esp-5);
  max-width: 44em;
  font-size: var(--tam-pequeno);
  line-height: 1.55;
  color: var(--texto-suave);
}

@media (min-width: 768px) {
  .exemplo { padding: var(--esp-7) var(--esp-8); }
  .exemplo .conta { margin-top: var(--esp-7); }
  .exemplo__nota { margin-top: var(--esp-6); }
}


/* 4. API ------------------------------------------------------------------- */
.api { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-8); margin-top: var(--esp-8); }

.api__nota {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--linha-forte);
}
.api__nota p { margin-top: var(--esp-3); }
.api__nota .link-seta { margin-top: var(--esp-3); }

@media (min-width: 768px) {
  .api { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-10); }
}
@media (min-width: 1024px) {
  .api { margin-top: var(--esp-10); }
}


/* 5. Segurança ------------------------------------------------------------- */
.controles { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--esp-8); }

.controle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--esp-6) 0 var(--esp-7);
  border-top: 1px solid var(--linha-forte);
}
.controle p { margin-top: var(--esp-2); }
.controle .link-seta { margin-top: var(--esp-2); }

@media (min-width: 768px) {
  .controles { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--esp-8); }
}
@media (min-width: 1024px) {
  .controles { margin-top: var(--esp-10); }
}


/* 6. Chamada final (faixa navy) -------------------------------------------- */
.convite__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-7) var(--esp-9);
  align-items: end;
}

.convite__texto { margin-top: var(--esp-5); max-width: 34em; font-size: var(--tam-lead); }

.convite__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-7);
}

@media (min-width: 1024px) {
  .convite__grade { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .convite__acoes { justify-content: flex-end; }
}


/* 7. Celular: ações empilhadas em largura total, com 48 px ----------------- */
@media (max-width: 479px) {
  .inicio__acoes,
  .convite__acoes {
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-3);
  }
  .inicio__acoes .botao,
  .convite__acoes .botao { min-height: 48px; }
  /* o link "Ver taxas e limites" vira um botão secundário */
  .inicio__acoes .link-seta {
    justify-content: center;
    min-height: 48px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--superficie);
  }
  .inicio__acoes .link-seta > span:not([aria-hidden]) { text-decoration: none; }
  .convite__acoes .faixa__link { justify-content: center; }
}