/* ============================================================
   COMO FUNCIONA — 3 passos numerados (mesma linguagem dos
   blocos 01/02/03 da seção "para quem é")
   ============================================================ */
.process__label{margin-bottom:clamp(36px,7vw,60px)}
.proc__list{list-style:none;margin:0;padding:0}
/* Aqui a numeração FICA: estes três são uma sequência de verdade (o
   briefing vem antes do design, que vem antes da publicação), e a ordem é
   informação que a pessoa precisa. É por isso que o "Para quem é" e o "O
   que está incluso" perderam os números: só quem tem sequência numera. */
.proc__step{
  padding-block:clamp(30px,5.4vw,48px);border-top:1px solid var(--linha);
  display:grid;grid-template-columns:1fr;gap:14px;
}
.proc__step:last-child{border-bottom:1px solid var(--linha)}
@media(min-width:820px){.proc__step{grid-template-columns:110px 1fr}}
/* ============================================================
   O TRILHO DO TEMPO

   O número era mono de 1,35rem em esmeralda: o mesmo peso de qualquer
   rótulo da página. Numa seção cuja razão de existir é ser uma SEQUÊNCIA
   (é a única das duas páginas em que a ordem é informação de verdade, e
   foi por isso que ela ficou com os números quando o "para quem é" e o
   "o que está incluso" perderam os deles), o número precisa ter peso de
   número.

   Ele entra no corpo de manchete, na condensada 62%: é a mesma anatomia
   da "conta da dor" da /vitrine-digital, que é a gramática da casa para
   quando o NÚMERO é o argumento. Como a condensada ocupa pouco, ele
   cresce cinco vezes sem pedir uma coluna maior.

   Embaixo dele vem o PRAZO daquele passo, em mono. Ele não inventa
   promessa: as três frases já estavam dentro dos parágrafos. O que muda
   é que elas param de estar enterradas no meio do texto e viram um
   trilho que dá para ler de cima a baixo em três batidas: 24 horas, 7
   dias, depois do seu OK. Numa página de tráfego pago, esse trilho é a
   pergunta que a pessoa está tentando responder enquanto lê.

   O prazo é opcional: onde não existe dado real, ele simplesmente não é
   renderizado (ver js/sections/process.js).
   ============================================================ */
.proc__num{display:block;line-height:1}
.proc__num b{
  display:block;
  font-family:var(--font-display);font-stretch:62%;font-weight:900;
  font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:.82;letter-spacing:-.02em;
  color:var(--ink);
}
.proc__num i{
  display:block;margin-top:9px;
  font-family:var(--font-mono);font-style:normal;font-weight:700;font-size:9.5px;
  line-height:1.5;letter-spacing:.14em;color:var(--green-dark);
}
/* a coluna cresce para caber o prazo em uma ou duas linhas; sem isso
   "SALDO APÓS O SEU OK" quebrava em quatro */
@media(min-width:820px){.proc__step{grid-template-columns:150px 1fr}}
/* no celular o número e o prazo ficam lado a lado: empilhados, eles
   gastavam meia tela antes do título do passo aparecer */
@media(max-width:819px){
  .proc__num{display:flex;align-items:baseline;gap:14px}
  .proc__num i{margin-top:0}
}
.proc__title{font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,6vw,2.4rem);line-height:1.02;letter-spacing:-.025em}
.proc__text{margin-top:14px;font-size:clamp(1rem,4vw,1.15rem);color:var(--ink-soft);line-height:1.5;max-width:54ch}

/* Resumo da garantia — linha mono que leva ao bloco completo antes do formulário */
.proc__note{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(28px,5vw,44px);
  font-family:var(--font-mono);font-weight:700;font-size:clamp(12px,3.2vw,14px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-dark);
  transition:color .2s;
}
.proc__note .arrow{transition:transform .2s}
.proc__note:hover{color:var(--black)}
.proc__note:hover .arrow{transform:translateX(4px)}

/* ============================================================
   O TRILHO (só a /landing-page, desde 11/09/2026)

   A lista tinha três parágrafos e o ordinal em corpo de manchete, e o
   ordinal não responde nada. O que a pessoa quer saber é QUANDO e
   QUANTO, então o prazo é que sobe para o corpo grande, com uma legenda
   embaixo: é a régua do hero (24H, 3 DIAS, R$0) contada de novo, agora
   como sequência. O ordinal fica em mono miúdo, "PASSO 01", só para
   dizer que a ordem existe.

   No desktop os três ficam lado a lado sobre um filete de tinta, cada um
   com um quadrado no início: um trilho que se lê da esquerda para a
   direita. No celular o filete vira vertical, à esquerda, e os passos
   descem por ele. O quadrado é de tinta, não de cor de marca: o verde
   aqui está na legenda, e um marcador verde brigaria com ela.
   Tudo vem DEPOIS do componente de propósito.
   ============================================================ */
.proc__list--trilho{display:grid;grid-template-columns:1fr;gap:0}
.proc__step--trilho{
  display:block;position:relative;
  padding:clamp(22px,3vw,32px) 0 0;border-top:2px solid var(--ink);
}
.proc__step--trilho::before{
  content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;background:var(--ink);
}
.proc__step--trilho:last-child{border-bottom:0}
.proc__passo{
  display:block;
  font-family:var(--font-mono);font-weight:700;font-size:9.5px;
  letter-spacing:.18em;color:var(--ink-40);
}
.proc__step--trilho .proc__num{margin-top:12px}
.proc__step--trilho .proc__title{margin-top:16px;font-size:clamp(1.35rem,5vw,1.8rem)}
.proc__step--trilho .proc__text{margin-top:8px;font-size:clamp(.95rem,3.6vw,1.05rem);max-width:30ch}
@media(min-width:820px){
  /* o filete é da LISTA, não de cada passo: um trilho só, sem cortes
     nos vãos entre as colunas; o quadrado de cada passo pousa sobre ele */
  .proc__list--trilho{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-top:2px solid var(--ink)}
  .proc__step--trilho{border-top:0;padding-bottom:0}
  .proc__step--trilho::before{top:-6px}
}
/* Celular: o trilho é vertical, à esquerda, e cada passo pendura nele */
@media(max-width:819px){
  .proc__list--trilho{border-left:2px solid var(--ink);padding-left:22px}
  .proc__step--trilho{border-top:0;padding:0 0 clamp(26px,6vw,36px)}
  .proc__step--trilho::before{top:2px;left:-28px}
  .proc__step--trilho:last-child{padding-bottom:4px}
  .proc__step--trilho .proc__num{margin-top:8px}
}