Aula 01 para Aula 02 - Problema com radio buttons | Cordova & PhoneGap: Apps mobile com HTML, CSS e JS

Boa tarde a todos , acredito que seja um problema simples porém não estou conseguindo visualizar . A situação é que já na primeira aula não estou conseguindo aplicar o disable no label que representa bebida ou bolos , simplesmente não tenho retorno nenhum .

Segue o código da minha index : Estou colocando o head fora por que ele não aparece na formatacao :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="estilo.css">
        <title>Só de cenoura</title>

    </head>
    <body>

        <input type="radio"
               name="opcao"
               id="opcao-bolos" checked>
        <label for="opcao-bolos">Bolos</label>

        <input type="radio"
               name="opcao"
               id="opcao-bebidas">
        <label for="opcao-bebidas">Bebidas</label>

        <div class="container-menus">
            <img src="imagens/menu-bolos.png"
                 alt="Nossos bolos"
                 id="menu-bolos"
                 class="menu">
            <img src="imagens/menu-bebidas.png"
                 alt="As Bebidas"
                 id="menu-bebidas"
                 class="menu">
        </div>

    </body>
</html>

Segue abaixo agora o meu estilo.css

#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos
{
    display:none;
}

.menu {
    width: 100%;
}

body{
    background: #3D1A11;
    margin:0;
    font-family: sans-serif;
    text-align:center;
}
input[type=radio]{
    display: none;
}
label{
    background-color:#563429;
    background-repeat:no-repeat;
    background-size:4em;
    background-position:center top;
    color:white;
    display:block;
    font-size:75%;
    padding:4em 0 1em;
    text-transform: uppercase;
}
    label [for= opcao-bolos]{
        background-image: url(imagens/icone-bolos.svg);
    }
    label [for=opcao-bebidas]{
        background-image: url(imagens/icone-bebidas.svg);
    }
    input[type=radio]:checked + label{
        background-color:#E4876D;
    }
label{
    width:50%;
    position:fixed;
    bottom:0px;
    z-index:1;
}
label [for=opcao-bolos]{
    left:0;
}
label [for=opcao-bebidas]{
    right:0;
}

Agradeço a qualquer ajuda , estou usando o Chrome versão 48.0.2