/* como — "Como funciona" da home: folha de caderno de perito, número grande e desenho de traço fino */
.steps--hand { list-style: none; margin: 0; padding: 0; }
.steps--hand .step { background: #fff; }

.step__mark {
  position: relative;
  height: 188px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 18px 16px 26px;
  border-bottom: 1px solid var(--line-light);
  background:
    linear-gradient(90deg, transparent 15px, rgba(208,176,42,.55) 15px, rgba(208,176,42,.55) 16px, transparent 16px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(10,47,66,.075) 25px 26px),
    linear-gradient(180deg, #FBF8F1, #F4EFE3);
  overflow: hidden;
}
.step__n {
  align-self: flex-start;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 76px;
  line-height: .9;
  letter-spacing: -.02em;
  background-image: linear-gradient(100deg, #8E720C 0%, #C29E22 38%, #D6B53A 52%, #A9871A 72%, #7E650B 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.step__mark .hand {
  width: 140px; height: 140px;
  margin: 0 -6px -8px 0;
  overflow: visible;
  transition: transform .6s var(--ease-out);
}
.hand .ink  { stroke: var(--ink-800); stroke-width: 1.5; }
.hand .thin { stroke-width: 1.05; stroke-opacity: .7; }
.hand .heavy { stroke-width: 4.2; }
.hand .acc  { stroke: var(--gold-deep); stroke-width: 1.6; }
.hand .acc.thin { stroke-opacity: .8; }
.step:hover .step__mark .hand { transform: translateY(-4px) rotate(-1.5deg); }

/* desenha o traço quando o card entra na tela */
@keyframes handDraw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .step__mark .hand path { stroke-dasharray: 420; animation: handDraw linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@media print { .step__mark .hand path { animation: none !important; stroke-dasharray: none; } }

@media (max-width: 1100px) and (min-width: 721px) {
  .step__mark { height: 168px; }
  .step__n { font-size: 66px; }
  .step__mark .hand { width: 112px; height: 112px; }
}
@media (max-width: 720px) {
  .step__mark { height: 132px; padding: 14px 14px 10px 26px; }
  .step__n { font-size: 58px; }
  .step__mark .hand { width: 100px; height: 100px; }
}