/* Primeiro entender: painel com a cadeia de etapas. Processo: trilho que
   preenche com --p, ponto que desce e etapas grandes que acendem. */

#entender { padding: 120px 0; }
.strategy__panel {
  display: grid;
  gap: 40px;
  padding: clamp(32px, 6vw, 80px);
  border-radius: var(--radius);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--sage) 30%, transparent), transparent 60%), var(--ink);
  color: var(--warm);
}
.strategy__panel h2 { font-size: clamp(40px, 6vw, 88px); max-width: 14ch; }
.strategy__panel :focus-visible { outline-color: var(--warm); }
.strategy__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.chain__step { display: flex; align-items: center; gap: 14px; font-weight: 600; color: color-mix(in srgb, var(--warm) 78%, var(--ink)); }
.chain__step[data-first] { color: var(--warm); }
.chain__step[data-first]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.chain__step:not(:last-child)::after { content: "→"; color: color-mix(in srgb, var(--warm) 55%, var(--ink)); }

#processo { padding: 140px 0; }
.process__inner { display: grid; gap: 56px; }
.process__head h2 { margin-top: 10px; font-size: clamp(40px, 5vw, 72px); }
.process__track { --p: 1; position: relative; padding-left: 48px; }
.has-motion .process__track { --p: 0; }
.process__rail { position: absolute; left: 8px; top: 12px; bottom: 12px; width: 1px; background: color-mix(in srgb, var(--warm) 25%, transparent); }
.process__fill { position: absolute; inset: 0; background: var(--warm); transform-origin: center top; transform: scaleY(var(--p)); }
.process__dot { position: absolute; left: 0; top: calc(var(--p) * 100%); translate: -50% -50%; box-shadow: 0 0 14px color-mix(in srgb, var(--sun) 55%, transparent); }
.process__steps { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.process__step {
  --r: clamp(0, calc((var(--p) - var(--at)) * 30 + 1), 1);
  display: grid;
  gap: 8px;
  opacity: calc(0.28 + var(--r) * 0.72);
  transition: opacity 0.3s var(--ease-out);
}
.process__name { font-family: var(--display); font-style: italic; font-weight: 380; font-size: clamp(40px, 5.5vw, 88px); line-height: 1; }
.process__text { max-width: 44ch; }

@media (min-width: 900px) {
  .process__inner { grid-template-columns: 5fr 7fr; align-items: start; }
  .process__head { position: sticky; top: 120px; }
}