/* Seção "Como usar" — quatro cartões de etapa com caminho numerado.
   Fundo claro com leve gradiente, contraste com o verde-escuro da
   inteligência logo acima e a faixa escura dos depoimentos abaixo. */
.howto{padding-block:90px;position:relative;isolation:isolate}
.howto::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(31,194,63,.06), transparent 60%);
  pointer-events:none;
}
.howto-head{text-align:center;max-width:720px;margin:0 auto 50px;padding:0 20px}
.howto-head .eyebrow{margin-bottom:10px}
.howto-head h2{font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-1px;margin:0;font-weight:600}

.howto-steps{
  list-style:none;padding:0;margin:0 0 40px;counter-reset:howto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;
}
/* Linha tracejada que conecta os passos — fica atrás dos cards e sai
   entre eles. Em desktop, ocupa a primeira linha inteira. */
.howto-steps::before{
  content:'';position:absolute;top:54px;left:8%;right:8%;height:1.5px;
  background-image:repeating-linear-gradient(90deg, rgba(31,194,63,.7) 0 7px, transparent 7px 14px);
  pointer-events:none;z-index:0;
}

.howto-steps li{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  padding:24px 18px 26px;border-radius:22px;text-align:center;
  background:#fff;border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s;
}
.howto-steps li:hover{
  transform:translateY(-5px);
  border-color:#1fc23f;
  box-shadow:0 18px 40px -16px #1fc23f45;
}
.howto-no{
  font-size:11px;letter-spacing:3px;font-weight:600;color:#1fc23f;
  font-variant-numeric:tabular-nums;margin-bottom:12px;display:block;
}
.howto-icon{
  position:relative;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(160deg,#1fc23f 0%,#0e7a26 100%);
  color:#fff;box-shadow:0 6px 20px -4px #1fc23f66;
  flex:none;
}
.howto-icon::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid #1fc23f33;pointer-events:none;
}
.howto-icon .icon{width:26px;height:26px;stroke:currentColor;stroke-width:1.6}
.howto-steps h3{font-size:17px;font-weight:600;margin:0 0 6px;letter-spacing:-.2px;line-height:1.3}
.howto-steps p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}

.howto-cta{display:block;width:fit-content;margin:0 auto}

@media(max-width:1000px){
  .howto-steps{grid-template-columns:1fr 1fr;gap:18px}
  .howto-steps::before{display:none}
  .howto{padding-block:60px}
  .howto-head{margin-bottom:32px}
  .howto-head h2{font-size:clamp(24px,4vw,32px)}
}
@media(max-width:560px){
  .howto-steps{grid-template-columns:1fr;gap:14px}
  .howto{padding-block:50px}
  .howto-head{padding:0;margin-bottom:28px}
  .howto-head h2{font-size:24px}
  .howto-steps li{padding:22px 18px 22px}
  .howto-icon{width:54px;height:54px;margin-bottom:14px}
  .howto-icon .icon{width:24px;height:24px}
  .howto-steps h3{font-size:17px}
  .howto-steps p{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.howto-steps li{transition:none}.howto-pulse{animation:none}}

/* No celular os quatro passos ficam 2x2. O passo a passo é uma sequência:
   ler em zigue-zague (1-2, 3-4) é mais fácil do que rolar quatro cards
   grandes, e a seção deixa de passar de 900px de altura. */
@media(max-width:560px){
  .howto-steps{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}
  .howto-steps li{padding:16px 12px 17px;border-radius:16px;text-align:left;align-items:flex-start}
  .howto-no{margin-bottom:8px;font-size:10px;letter-spacing:2px}
  .howto-icon{width:42px;height:42px;margin-bottom:10px}
  .howto-icon::after{inset:-4px}
  .howto-icon .icon{width:20px;height:20px}
  .howto-steps h3{font-size:15px;margin-bottom:5px}
  .howto-steps p{font-size:12.5px;line-height:1.45}
}

/* Ciclo de destaque entre os 4 cards — todos permanecem visíveis;
   cada um ganha um anel e leve subida em sequência, em loop. */
@keyframes howtoHighlight{
  0%,100%{box-shadow:0 0 0 0 #1fc23f00;transform:translateY(0)}
  8%{box-shadow:0 0 0 6px #1fc23f33, 0 18px 40px -16px #1fc23f45;transform:translateY(-5px)}
  18%{box-shadow:0 0 0 0 #1fc23f00;transform:translateY(0)}
}
.howto-steps li{animation:howtoHighlight 8s ease-in-out infinite}
.howto-steps li:nth-child(1){animation-delay:0s}
.howto-steps li:nth-child(2){animation-delay:2s}
.howto-steps li:nth-child(3){animation-delay:4s}
.howto-steps li:nth-child(4){animation-delay:6s}