/* Como funciona: três cartões alinhados, ligados por um conector limpo (linha em degradê com uma seta no fim). No celular os
   cartões ficam empilhados e o conector desce entre eles; a partir de 768 px ficam lado a lado e o conector vai de um
   cartão ao seguinte pela calha, no eixo do numeral. Numerais gigantes só em contorno (decorativos).
   Rodada de 2026-09-26: a escada diagonal (0 / 56 / 112 px) com filetes em degrau foi trocada por esta linha reta, porque
   os degraus se desencontravam e o desenho ficava quebrado. O eixo do conector usa as MESMAS variáveis do numeral
   (--num e --pad-t), então acompanha o tamanho fluido do numeral em qualquer largura. Classes .etapa*: não confundir com
   .passo* (os passos do celular da demonstração). */

.como {
  padding-block: 96px 72px;
}

.como__corpo {
  position: relative;
  margin-top: var(--sp-7);
}

.etapas {
  --calha: 44px; /* espaço entre cartões: cabe o conector */
  --num: 4.5rem; /* tamanho do numeral */
  --pad-t: var(--sp-5); /* respiro do topo do cartão */
  --eixo: calc(var(--pad-t) + var(--num) / 2); /* altura do centro do numeral, contada do topo do cartão */
  position: relative;
  display: grid;
  gap: var(--calha);
}

.etapa {
  position: relative;
  padding: var(--pad-t) var(--sp-5) var(--sp-5);
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-page);
  box-shadow: var(--sombra-card);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.etapa__topo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.etapa__num {
  color: transparent;
  font-family: var(--font-serif);
  font-size: var(--num);
  font-weight: 300;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  -webkit-text-stroke: 1px var(--blue);
  font-variant-numeric: lining-nums;
}

.etapa h3 {
  margin-top: var(--sp-3);
}

.etapa p {
  max-width: 34ch;
  margin-top: var(--sp-2);
}

/* Conector, celular: linha vertical que sai da base do cartão e desce até o próximo, com a ponta da seta embaixo */
.etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 100%;
  width: 2px;
  height: var(--calha);
  background: linear-gradient(to bottom, var(--blue), rgba(47, 123, 255, 0.25));
  border-radius: var(--r-pill);
  pointer-events: none;
}

.etapa:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 35px;
  top: calc(100% + var(--calha) - 9px);
  z-index: 1;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  border-radius: 1px;
  transform: rotate(45deg);
  pointer-events: none;
}

.como__cta {
  width: 100%;
  margin-top: var(--sp-6);
}

@media (hover: hover) {
  .etapa:hover {
    border-color: var(--line-2);
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-3px);
  }
}

/* Tablet: três colunas estreitas, então numeral menor, respiro menor e calha curta */
@media (min-width: 768px) {
  .como {
    padding-block: 136px 104px;
  }

  .etapas {
    --calha: 36px;
    --num: 4rem;
    --pad-t: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .etapa {
    padding: var(--pad-t) 20px var(--sp-5);
  }

  .etapa__topo {
    gap: var(--sp-3);
  }

  .etapa h3 {
    font-size: 1.1875rem;
  }

  .etapa p {
    font-size: 0.9375rem;
  }

  /* Conector horizontal, no eixo do numeral: sai da borda direita do cartão, cruza a calha e termina em ponta de seta */
  .etapa:not(:last-child)::after {
    left: 100%;
    top: calc(var(--eixo) - 1px);
    width: var(--calha);
    height: 2px;
    background: linear-gradient(to right, var(--blue), rgba(47, 123, 255, 0.25));
  }

  .etapa:not(:last-child)::before {
    left: calc(100% + var(--calha) - 9px);
    top: calc(var(--eixo) - 5px);
    transform: rotate(-45deg);
  }

  .como__cta {
    width: auto;
    margin-top: var(--sp-7);
  }
}

@media (min-width: 1024px) {
  .etapas {
    --calha: 56px;
    --num: var(--fs-num);
    --pad-t: var(--sp-6);
  }

  .etapa {
    padding: var(--pad-t) var(--sp-6) var(--sp-7);
  }

  .etapa__topo {
    gap: var(--sp-4);
  }

  .etapa h3 {
    font-size: var(--fs-h3);
  }

  .etapa p {
    font-size: inherit;
  }
}