/* cena "combinados" (app/cenas/combinados.js) · seção 04, folha */
#combinados .cena-palco { min-height: clamp(360px, 104vw, 500px); }
#combinados .cena-palco > canvas { touch-action: pan-y; }
#combinados .combinados-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); }
#combinados .combinados-dica.some { opacity: 0; }

/* o combinado da lista cuja moeda está virada: uma faixa chapada no tom claro e o título em creme */
#combinados .combinados > li { position: relative; transition: background-color .25s var(--suave), box-shadow .25s var(--suave); }
#combinados .combinados > li.ativo { --faixa: color-mix(in srgb, var(--escuro) 70%, var(--fundo)); background: var(--faixa); box-shadow: -14px 0 0 var(--faixa), 14px 0 0 var(--faixa); }
#combinados .combinados > li b { transition: translate .45s var(--mola); }
#combinados .combinados > li.ativo b { translate: 4px 0; }