.espacioMenu{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* MENÚ PRINCIPAL */
.menuPrincipal{
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:100%;
}

.bola{
    border-radius:50%;
    background:#039;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:all 0.3s ease;
    position:relative;
    color: #FFF;
}

.bola.principal{
    width:120px;
    height:120px;
    font-size:14px;
}

/* OVERLAY */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.8);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease;

    z-index: 9999;
}

.overlay.activo {
    opacity: 1;
    visibility: visible;
}

/* MENÚ EXPANDIDO */
.menuExpandido{
    position:relative;
    width:600px;
    height:600px;
}

/* BOLA CENTRAL */
.bola.centro{
    width:180px;
    height:180px;
    font-size:18px;
    background:#039;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: #FFF;
}

/* SUBBOLAS */
.bola.secundaria{
    position:absolute;
    width:100px;
    height:100px;
    background:#eee;
    font-size:12px;
    color: black;
}

/* POSICIONES RADIALES */
.pos1{ top:0; left:50%; transform:translateX(-50%); }
.pos2{ top:20%; right:0; }
.pos3{ bottom:20%; right:0; }
.pos4{ bottom:0; left:50%; transform:translateX(-50%); }
.pos5{ bottom:20%; left:0; }
.pos6{ top:20%; left:0; }

/*animación subbolas*/
.bola.secundaria {
    transform: scale(0);
    transition: all 0.3s ease;
}

.overlay.activo .bola.secundaria {
    transform: scale(1);
}