/* cena "medimos" (app/cenas/medimos.js) · seção 03, ouro */
#como-medimos .cena-palco { min-height: clamp(360px, 104vw, 500px); }
#como-medimos .cena-palco > canvas { touch-action: pan-y; }
#como-medimos .medimos-dica { position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; pointer-events: none;
  font: 500 15px/1 var(--fonte); letter-spacing: .04em; color: var(--tinta); opacity: .72; transition: opacity .5s var(--suave); }
#como-medimos .medimos-dica.some { opacity: 0; }

/* o passo da lista que está com o bloco puxado: uma faixa chapada clara e o número em tinta */
#como-medimos .passos > li { position: relative; transition: background-color .25s var(--suave), box-shadow .25s var(--suave); }
#como-medimos .passos > li::before { transition: color .2s var(--suave), translate .45s var(--mola); }
#como-medimos .passos > li.ativo { --faixa: color-mix(in srgb, var(--claro) 72%, var(--fundo)); background: var(--faixa); box-shadow: -14px 0 0 var(--faixa), 14px 0 0 var(--faixa); }
#como-medimos .passos > li.ativo::before { color: var(--tinta); translate: 3px 0; }