Opa Lucas blz?
Para entender isso vamos dividir em duas etapas:
1º Como o checkbox foi selecionado se quem foi clicado foi o span?
O responsável por esse comportamento é a tag < label > (ela pode ser utilizada também de outra maneira com o atributo for).
Teste o código abaixo pra entender melhor, mas em resumo neste exemplo quando você clica em um elemento dentro do label no caso o < span >, ele esta 'ativando' o checkbox, se fosse um < input type="text" > ele iria colocar o cursor para você começar a digitar.
<label>
<span>Aqui é possível clicar no texto ou no checkbox para selecionar</span>
<input type="checkbox" name="" id="">
</label>
<div>
<span>Aqui só é possível clicar no checkbox para selecionar</span>
<input type="checkbox" name="" id="">
</div>
Ou seja, é possível selecionar o checkbox mesmo ele estando escondido na tela, por meio do label e do span.
2º Como de fato o estilo do elemento foi alterado?
O CSS que fica responsável por verificar se o checkbox esta marcado ou não, para então mudar o estilo do elemento. Ele utiliza das pseudo-classes para isso, neste caso :checked que verifica se o checkbox esta marcado ou não.
.cabecalho__switch-input:checked
Pesquisando na documentação é possível ver mais exemplos sobre label, :checked e também outras possibilidades com as pseudo-classes.
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/label
https://developer.mozilla.org/pt-BR/docs/Web/CSS/:checked
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes
