/* BLYO · Elementos e efeitos extras de "Como a gente trabalha"
   O "o" corre pelo trilho, para em cada etapa e deixa contornos pelo caminho, como na estampa da marca.
   Cada etapa tem uma cena pequena que se monta uma vez quando o "o" chega.
   O estado sem classe é sempre o final: é o que aparece sem JS e com "reduzir movimento". */

.como {
  --cm-anel: 34px;
  --cm-bola: 40px;
  --cm-copia: 30px;
  --cm-sobra: 56px;
  --cm-cena: clamp(222px, 64vw, 262px);
  --cm-sombra: 6px 8px 0 var(--petroleo);
  --cm-fio: rgba(16, 46, 40, .12);
  --cm-creme: #F1ECD0;
  --cm-chip: #ECE7C9;
}

/* o "o" grande ao fundo, só o contorno; o como-mais.js faz ele andar devagar */
.como__fixo { position: relative; overflow: clip; }
.cm-fundo {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -34vw;
  width: auto;
  height: min(118vh, 1180px);
  aspect-ratio: 118 / 108;
  margin-top: calc(min(118vh, 1180px) / -2);
  overflow: visible;
  fill: none;
  stroke: rgba(25, 116, 84, .16);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.como__cabeca, .como__pista { position: relative; z-index: 1; }

/* ---------- O trilho (celular e sem movimento: vertical, à esquerda das etapas) ---------- */

.como__etapas { gap: clamp(64px, 10vh, 104px); padding-left: var(--cm-sobra); }

/* o caminho ainda por fazer é pontilhado; os contornos que o "o" deixa cobrem os pontinhos */
.como__linha {
  z-index: 1;
  left: calc(var(--cm-anel) / 2 - 2px);
  top: calc(var(--cm-anel) / 2);
  width: 4px;
  background: radial-gradient(circle, rgba(16, 46, 40, .34) 1.3px, transparent 1.8px) 0 0 / 4px 11px repeat-y;
}
.como__feito { display: none; }
.como__bola {
  z-index: 3;
  left: calc(2px - var(--cm-bola) / 2);
  top: calc(var(--cm-bola) * -.4545);
  width: var(--cm-bola);
  height: auto;
  overflow: visible;
  fill: var(--menta);
  stroke: var(--petroleo);
  stroke-width: 4.5;
  stroke-linejoin: round;
  filter: drop-shadow(2px 3px 0 var(--petroleo));
}

/* cada contorno: preenchido com a cor do fundo, para o seguinte cobrir um pedaço do anterior */
.cm-copia {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--d, 0px);
  width: var(--cm-copia);
  height: auto;
  margin: calc(var(--cm-copia) * -.4545) 0 0 calc(var(--cm-copia) / -2);
  overflow: visible;
  fill: var(--marfim);
  stroke: var(--positivo);
  stroke-width: 5;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.35);
  transition: opacity .2s ease, transform .5s var(--entra);
}
.cm-copia--tinta { stroke: rgba(16, 46, 40, .46); stroke-width: 4.5; }
.cm-copia.cm-feita { opacity: 1; transform: scale(var(--s, 1)); }

/* a parada de cada etapa: tracejada até o "o" chegar, depois carimbada */
.etapa__o {
  z-index: 2;
  left: calc(-1 * var(--cm-sobra));
  top: 0;
  width: var(--cm-anel);
  opacity: 1;
  transform: none;
  stroke: rgba(16, 46, 40, .36);
  stroke-width: 5;
  stroke-dasharray: 9 7;
  transition: stroke .3s ease;
}
.etapa.passou .etapa__o, html:not(.js) .etapa__o {
  stroke: var(--positivo);
  stroke-width: 6;
  stroke-dasharray: none;
}
.js .etapa.passou .etapa__o { animation: cm-carimbo .5s var(--entra) both; }

/* número grande só no contorno, que se enche da esquerda para a direita quando o "o" chega */
.etapa__n {
  position: relative;
  display: block;
  width: max-content;
  margin-left: -.03em;
  font: 700 clamp(46px, 12vw, 58px)/.8 var(--fonte);
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(16, 46, 40, .4);
}
.etapa__n::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  color: var(--positivo);
  -webkit-text-stroke: 1.5px var(--positivo);
  clip-path: inset(-12% 100% -12% -4%);
  transition: clip-path .8s var(--ease) .1s;
}
.etapa.passou .etapa__n::after, html:not(.js) .etapa__n::after { clip-path: inset(-12% -6% -12% -4%); }
.etapa h3 { margin-top: 14px; }

/* a cena de cada etapa: no celular fica embaixo do texto */
.cm-palco {
  position: relative;
  height: var(--cm-cena);
  margin-top: 24px;
  font-size: clamp(14px, calc(var(--cm-cena) * .056), 16px);
  line-height: 1.3;
  color: var(--petroleo);
}

/* tablet e computador sem movimento: o texto à esquerda e a cena à direita de cada etapa */
@media (min-width: 700px) {
  .como { --cm-anel: 38px; --cm-bola: 44px; --cm-copia: 34px; --cm-sobra: 64px; --cm-cena: clamp(250px, 27vw, 300px); }
  .como:not(.horizontal) .etapa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(28px, 5vw, 80px);
    align-items: start;
  }
  .como:not(.horizontal) .etapa > :not(.cm-palco):not(.etapa__o) { grid-column: 1; }
  .como:not(.horizontal) .cm-palco { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-width: 470px; margin-top: 0; }
  .como:not(.horizontal) .etapa__n { font-size: clamp(56px, 6vw, 76px); }
}

/* ---------- Computador com movimento: trilho horizontal preso na tela ---------- */

.como.horizontal {
  --cm-anel: 40px;
  --cm-bola: 46px;
  --cm-copia: 36px;
  --cm-sobra: 62px;
  --cm-trilho: 24px;
  --cm-col: clamp(300px, 27vw, 440px);
  --cm-vao: clamp(48px, 5vw, 96px);
  --cm-num: clamp(58px, 9vh, 104px);
  --cm-cena: clamp(200px, calc(100svh - 588px), 380px);
}
.como.horizontal .como__fixo { justify-content: center; padding: var(--topo-altura) 0 clamp(10px, 2.4vh, 28px); }
.como.horizontal .como__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px clamp(24px, 4vw, 64px);
}
.como.horizontal .como__cabeca h2 { flex: none; }
.como.horizontal .como__cabeca p { flex: 0 1 34ch; max-width: 34ch; margin: 0 0 .35em; font-size: clamp(16px, 1.25vw, 19px); }
.como.horizontal .como__pista { margin-top: clamp(16px, 4vh, 52px); }
.como.horizontal .como__etapas { gap: var(--cm-vao); padding: var(--cm-sobra) 0 0; }
.como.horizontal .etapa { width: var(--cm-col); display: flex; flex-direction: column; }
.como.horizontal .etapa__o { left: 0; top: calc(var(--cm-trilho) - var(--cm-sobra) - var(--cm-anel) * .4545); }
.como.horizontal .como__linha {
  left: calc(var(--cm-anel) / 2);
  top: calc(var(--cm-trilho) - 2px);
  width: 0;
  height: 4px;
  background: radial-gradient(circle, rgba(16, 46, 40, .34) 1.3px, transparent 1.8px) 0 0 / 11px 4px repeat-x;
}
.como.horizontal .como__bola { left: calc(var(--cm-bola) / -2); top: calc(2px - var(--cm-bola) * .4545); }
.como.horizontal .cm-copia { left: var(--d, 0px); top: 50%; }
.como.horizontal .etapa__n { order: 0; position: relative; z-index: 0; font-size: var(--cm-num); }
.como.horizontal .cm-palco { order: 1; z-index: 1; margin-top: calc(var(--cm-num) * -.2); }
.como.horizontal .etapa h3 { order: 2; margin-top: clamp(14px, 2.4vh, 26px); }
.como.horizontal .etapa p { order: 3; margin-top: 8px; }

/* telas baixas: o subtítulo encolhe e os números diminuem, para tudo caber sem rolar */
@media (max-height: 800px) {
  .como.horizontal { --cm-num: clamp(50px, 8vh, 64px); }
  .como.horizontal .etapa h3 { font-size: clamp(22px, 2vw, 26px); }
  .como.horizontal .etapa p { font-size: 16px; line-height: 1.5; }
}